AIと一緒にコーディングとFigmaを勉強しながら、頼まれたWebページを作っています。その学習の途中を最初から順に書いています。第9回です。
---
Webサイトを、AIに頼みながら実装している。デザインのカンプ（Figmaの1440px幅）はあって、それをスマホでも綺麗に伸び縮みするレイアウト（リキッドレイアウト）にしたかった。
まずは「リキッドデザインにして」と、AIに丸投げで頼んだ。そこから少しずつ言い回しを試行錯誤して、3回頼んで、3回続けて崩れた。
1回目は、スマホ用とPC用のブロックが両方同時に表示されて重なった。2回目は、構造ごと書き直されて、画面の中央に写真が1枚ポツンと残った。3回目は、PC幅でも装飾の位置が全部ズレた。最終的に、AIが触る前の「PC固定なら合っていたコード」を、ローカルの編集履歴から戻した。
なんで丸投げみたいな指示にしたかというと、リキッドデザインが何なのか、自分でもよくわかっていなかったから。というより、感覚的にしかわかっていなかった、の方が近い。「リキッドにする＝px指定を割合指定に置き換えること」みたいに、なんとなく思っていた。思い返すと、会社でエンジニアに頼んでいた頃は、こういうなんとなくの理解のまま伝えて、なんとなくうまくやってもらっていたんだと思う。
そこで、自分がなんとなく思っているリキッドレイアウトって何なのか、その感覚を1個ずつ言葉にして、AIに伝えていった。で、「これで合ってますか」と聞いた。
返ってきた答えは、理解の向きは合っている、というものだった。ただ、自分の中でそれが漠然としていて、要素ごとに言葉にできていなかった。だからAIへの指示が難しかったのかもしれない。
リキッドレイアウトは、画面幅が変わったときに、各要素がどう振る舞うかのルールを先に決めること。たとえば——
・この画像は、画面が広がっても中央にいるのか、右端から固定距離にいるのか
・この文字は、画面の%でサイズが縮むのか、サイズは固定で改行するのか
・このカラム幅は、画面の38%なのか、最小320pxは絶対に守るのか
これを要素ごとに人間が決めて、AIがコードに翻訳する。自分は、決めきる前に丸投げしていたから、順番が逆だった。
「リキッドにして」とだけ言うと、AIは勝手にルールを推測する。「写真は中央かな」「文字は%で縮むかな」と。でも自分が頭の中で思っている正解とは違う推測をするから、動かすとズレる。しかも自分は「違う」とは言えても、何がどう違うかを言葉にできない。だから修正の指示も曖昧になって、AIはその曖昧な指示にまた別の推測で返してくる。これが延々と続いた。
そこで、要素ごとに「位置／サイズ／下限・上限／改行か縮小か」の4つを書き出す表を先に作った。これが埋まると、AIへの指示から解釈の余地が消える。AIは推測しなくてよくて、翻訳するだけになる。表を埋めるのは面倒だけど、3回崩して時間を溶かすより、はるかに早かった。
今回わかったのは、AIに何かを頼むときは「やりたいこと」じゃなくて「判断のルール」を渡すと、結果が安定するということ。「いい感じにして」は、AIにも人間にも難しい指示。「Aのときは B、Cのときは D」は、AIにも人間にも実行できる指示だ。
書きながらもう一つ思った。自分の中には、感覚的になんとなくわかっているけれど、人に指示したり教えたりできるところまでは言葉になっていない知識やスキルが、けっこうある。今回のリキッドもそうだった。それを一度ちゃんと言葉にしてから頼むと、AIとの共同作業はうまくいく。
しかも、その「言葉にしてみる」作業自体、AIと一緒だとやりやすい。今回も、AIに「これで合ってますか」と聞きながら、自分の曖昧な感覚を輪郭のある言葉に変えていった。たぶんこれは、Webに限らずいろんなことで同じだと思う。
---
【カジュアル面談をお待ちしています】
Webデザイナーとして10年ほど、制作会社と葬儀業界の事業会社にインハウスで勤め、2023年に独立しました。ずっと「デザインまでが自分の担当で、実装はエンジニアの仕事」だと思っていました。いまはAIに頼りながら、React / TypeScript / Tailwind を自分で読み書きして作れるようになるための学習中です。直近はスマホサイズで公開まで通しました。まだ途中です。
こういう「学習中の人間」が、採用する側からどう見えるのかを率直に知りたいと思っています。現在地を正しく知りたいです。
いまは事業側で、現場に入って人の声を聞きながら改修や制作をしていく方向に行きたいと考えています。ただ正直なところ手を広げすぎていて、専門性としてどう見せるのがよいか自分でも決めきれていないのが悩みどころ。
いまやっていること：現場に入りながら実績を積んでいる途中
独立後は身近な事業者の課題に、企画から実装まで並行で関わっています。
塗装会社（家業）── ショート動画の企画〜運用、採用まわりのツール補助
中古車販売 ── 集客・顧客対応を LINE / 配信ツールで自動化
飲食業の現場 ── 店舗のPCへローカルAIを導入する提案
業務自動化まわりの構築・運用（共同案件）
派手な数字を出せる段階ではありませんが、AIで何を巻き取り、何を人が担うかを切り分けて、現場で回る形に落とすことを、実際に手を動かしながら積み上げています。
行きたい方向：事業側で体験を設計する方へ。ただし見せ方はまだ決めきれていません
やりたいことの芯は、「行動が変わる導線を作る」感覚（LPで培ったもの）と、AIで自分で手を動かせる幅を、事業側で体験そのものを設計する立ち位置で活かすことです。受託で言われたものを作るより、事業の中で「どこを直せば人の行動が変わるか」を考えて、そのまま手を動かせる場所に行きたいと思っています。
一方で、いま手を広げすぎていて、専門性として見せづらい状態です。これを就職活動でどう見せるのがよいか、自分でも決めきれていません。
