AIと一緒にコーディングとFigmaを勉強しながら、頼まれたWebページを作っています。その学習の途中を最初から順に書いています。第8回です。
---
自分なりに、余白は数字で管理することにした。4の倍数だけを使う、みたいなルールを決めて、その通りに配置していく。感覚で置くよりブレないし、あとから見ても理由を説明できる。デザインシステムというものの、いちばん手前の考え方だと思う。
ただ、数字で揃えても、目で見ると必ずどこかがズレて見える。特に文字まわりで起きる。
ヒーローセクションの中で、サブタイトル（小さい文字）と会社名（大きい文字）の間に、1pxの線を1本置いた。線とサブタイトルの距離、線と会社名の距離を、どちらも 6px にした。数字の上では完全に等距離。
でもブラウザで見ると、線が会社名の方にくっついて見えた。何度測り直しても、どちらも 6px。数字は合っているのに、目には等距離に見えない。
理由は、線の隣にある文字の大きさが違うから。サブタイトル（28px）の隣の 6px は、その文字に対して大きい余白。会社名（108px）の隣の 6px は、小さい余白になる。人の目は隣り合う要素のサイズ比で距離を測るので、大きい文字の隣だと同じ 6px でも詰まって見える。だから線が会社名の方へ引き寄せられる。
直すなら、会社名側の余白を 16px くらいに増やして、線を意図的にサブタイトル側へ寄せる。数字の上では「不等距離」だが、目には等距離に見える。印刷やDTPの世界では optical adjustment（視覚補正）と呼ばれる作業で、文字を組んできた人には馴染みがあると思う。
——で、ここからが、いま考えていること。
紙の仕事では、こういうズレは1つずつ細かく直していた。でもWebで同じことを全部やろうとすると、費用対効果がかなり悪い気がする。画面幅で文字サイズも余白も変わるので、直したそばからまた条件が変わる。全部の要素を目で詰めていったら、きりがない。
だから今は、ファーストビューだけは目で詰める、と切り分けている。最初に目に入るところだけ視覚補正して、下の方は数字（ルール）に任せる。ただ、これが本当に正しい切り分けなのかは、まだ分からない。アプリのようなものにファーストビューという考え方があるのかどうかも、自分はまだ知らない。
もう一つ正直に書くと、この程度のズレは、UIとして見たときにはそこまで影響していないと思う。ほんの少し詰まって見えるからといって、使う人が困るわけではない。
じゃあ何のために直しているかというと、見逃したまま出して、あとから「ここズレてますよ」と指摘されるのが悔しいから、という部分が大きい。これはユーザーのためというより、自分のため。デザインができる人だと思われたい、という気持ちが混ざっている。そこは認めておきたい。
だから「余白は数字で管理するのか、目で見て決めるのか」という問いに、自分の中でまだ答えは出ていない。全部を目で詰めるのは重すぎるし、全部を数字に任せると落ち着かない。今のところ「目に入る場所だけ目で決めて、あとは数字に任せる」あたりで手を打っているけれど、その線引きの理由の半分くらいは、たぶん自分のエゴだと思っている。
---
【カジュアル面談をお待ちしています】
Webデザイナーとして10年ほど、制作会社と葬儀業界の事業会社にインハウスで勤め、2023年に独立しました。ずっと「デザインまでが自分の担当で、実装はエンジニアの仕事」だと思っていました。いまはAIに頼りながら、React / TypeScript / Tailwind を自分で読み書きして作れるようになるための学習中です。直近はスマホサイズで公開まで通しました。まだ途中です。
こういう「学習中の人間」が、採用する側からどう見えるのかを率直に知りたいと思っています。現在地を正しく知りたいです。
いまは事業側で、現場に入って人の声を聞きながら改修や制作をしていく方向に行きたいと考えています。ただ正直なところ手を広げすぎていて、専門性としてどう見せるのがよいか自分でも決めきれていないのが悩みどころ。
いまやっていること：現場に入りながら実績を積んでいる途中
独立後は身近な事業者の課題に、企画から実装まで並行で関わっています。
塗装会社（家業）── ショート動画の企画〜運用、採用まわりのツール補助
中古車販売 ── 集客・顧客対応を LINE / 配信ツールで自動化
飲食業の現場 ── 店舗のPCへローカルAIを導入する提案
業務自動化まわりの構築・運用（共同案件）
派手な数字を出せる段階ではありませんが、AIで何を巻き取り、何を人が担うかを切り分けて、現場で回る形に落とすことを、実際に手を動かしながら積み上げています。
行きたい方向：事業側で体験を設計する方へ。ただし見せ方はまだ決めきれていません
やりたいことの芯は、「行動が変わる導線を作る」感覚（LPで培ったもの）と、AIで自分で手を動かせる幅を、事業側で体験そのものを設計する立ち位置で活かすことです。受託で言われたものを作るより、事業の中で「どこを直せば人の行動が変わるか」を考えて、そのまま手を動かせる場所に行きたいと思っています。
一方で、いま手を広げすぎていて、専門性として見せづらい状態です。これを就職活動でどう見せるのがよいか、自分でも決めきれていません。
