AIと一緒にコーディングとFigmaを勉強しながら、頼まれたWebページを作っています。その学習の途中を最初から順に書いています。第6回です。
装飾用のアイコンを Figma から書き出して、CSSで配置した。まっすぐではなく、角度をつけて斜めに置きたいパーツだった。たとえばこういうふうに書いていた。
<img
src="/paint-blue.png"
style={{
width: 153,
height: 66,
transform: 'rotate(-125deg)',
transformOrigin: 'top left',
left: 600,
top: 400,
}}
/>
Figma から書き出した画像をそのままアップロードしたら、ブラウザでの見え方がなんだか変だった。太く広がるはずのブラシ跡が、細く潰れて表示されている。同じPNGなのに、形そのものが違って見える。
最初は CSS の数値を疑った。width を変えたり、transform の角度をいじったり。直らない。
原因は、画像そのものだった。角度をつけて配置していたパーツを Figma から書き出すと、その角度がついたまま出力される。それを CSS 側でさらに回していたので、二重に回っていた。ついでにサイズ指定で本来の比率も潰していたので、崩れが増幅されていた。
Photoshopでデザインしてきた人は、ここでつまずくと思う。Figma だと「要素を回す」「サイズを変える」「位置を動かす」を1つのレイヤーの中で一緒くたに扱えるから、「回したまま書き出す」のが自然な操作になる。でもコード側からすると、PNGは「絵そのもの」であってほしくて、回転や位置はCSSが持つ役割。画像に焼き込まれていると、CSS側から制御できなくなる。
——で、これだけ聞くと単純な話だと思う。実際、原因は単純だった。ただ、AIと一緒にコーディングをしていると、こういう単純なことでも「何か別の、もっと複雑な要素が影響しているんじゃないか」と考えてしまう時がある。コード全体を自分で把握しきれていない分、目の前の症状を、見えていないどこかのせいにしたくなる。今回、しばらくCSSの数値をいじり続けたのも、それだった。
その日から、ルールを1つ決めた。
・PNG / SVG は「素材」：絵そのものだけ。回転や位置情報を焼き込まない
・CSS は「配置」：位置・回転・サイズはコード側で持つ
書き出すときは、Figma で回転を 0° に戻してから書き出す（または無回転の複製を作って書き出す）。位置は Figma に透明の矩形を置いて X/Y を取得する。こうしておくと、後で「角度を10°だけ変えたい」となっても画像を書き出し直さずに済むし、あとで Lottie のアニメーションに差し替えるときも、回転をコード側から制御できる。
「同じ画像なのに違って見える」と思ったら、まず「どこかで二重になっていないか」を疑う。単純な原因ほど、先に潰す。知らないと延々と数値をいじってしまう罠で、知っていれば10秒で気づける。
【カジュアル面談をお待ちしています】
Webデザイナーとして10年ほど、制作会社と葬儀業界の事業会社にインハウスで勤め、2023年に独立しました。ずっと「デザインまでが自分の担当で、実装はエンジニアの仕事」だと思っていました。いまはAIに頼りながら、React / TypeScript / Tailwind を自分で読み書きして作れるようになるための学習中です。直近はスマホサイズで公開まで通しました。まだ途中です。
こういう「学習中の人間」が、採用する側からどう見えるのかを率直に知りたいと思っています。現在地を正しく知りたいです。
いまは事業側で、現場に入って人の声を聞きながら改修や制作をしていく方向に行きたいと考えています。ただ正直なところ手を広げすぎていて、専門性としてどう見せるのがよいか自分でも決めきれていないのが悩みどころ。
いまやっていること：現場に入りながら実績を積んでいる途中
独立後は身近な事業者の課題に、企画から実装まで並行で関わっています。
塗装会社（家業）── ショート動画の企画〜運用、採用まわりのツール補助
中古車販売 ── 集客・顧客対応を LINE / 配信ツールで自動化
飲食業の現場 ── 店舗のPCへローカルAIを導入する提案
業務自動化まわりの構築・運用（共同案件）
派手な数字を出せる段階ではありませんが、AIで何を巻き取り、何を人が担うかを切り分けて、現場で回る形に落とすことを、実際に手を動かしながら積み上げています。
行きたい方向：事業側で体験を設計する方へ。ただし見せ方はまだ決めきれていません
やりたいことの芯は、「行動が変わる導線を作る」感覚（LPで培ったもの）と、AIで自分で手を動かせる幅を、事業側で体験そのものを設計する立ち位置で活かすことです。受託で言われたものを作るより、事業の中で「どこを直せば人の行動が変わるか」を考えて、そのまま手を動かせる場所に行きたいと思っています。
一方で、いま手を広げすぎていて、専門性として見せづらい状態です。これを就職活動でどう見せるのがよいか、自分でも決めきれていません。
