プロWebデザイナーが語る「Figmaのレイヤー設計」とAIが変えるデザイナーの未来
この記事でわかること
- Figmaのレイヤー構造、「コーディング視点」と「デザイナー視点」は別物
- 余白は「8の倍数」が業界標準
- 最近のデザイントレンド「コンテンツ幅が極端に狭い」
- Webデザイナーの仕事は「東京まで撮影に行く」ことも
- 田中さんのAI活用術
- バナーデザイナーは消える？
現役のプロWebデザイナー・田中さんとのコンサルで、普段なかなか聞けないFigmaのレイヤー設計の考え方や、AIツールの活用方法、そしてこれからのデザイナー像についてたっぷり話を聞いてきました。
Figmaのレイヤー構造、「コーディング視点」と「デザイナー視点」は別物
田中さんが見せてくれたFigmaのファイルには、構造化されたレイヤーと、そうでない元のレイヤーの2パターンがありました。
コーディングを意識して組んだ構造化版はとてもわかりやすかったんですが、田中さんからこんな指摘が。
「デザインを組む時は、ここにAUTOレイアウトを入れないんですよ。これは何か無駄なレイアウトの認識になってしまいます。コーディングと完全一致という考えは持たない方がいいですね」
つまり、コーダーさんにコーディング手順を教えるための資料としてはとても有用だけど、純粋なデザイン作業でそのまま使うのは微妙なんだそうです。
デザイナーの立場から見ると、意味なくAUTOレイアウトを組んでいると「なんで入れてるの？」という指摘が入ることもあるとか。
ただし、ターゲットが初心者コーダーさんなら、むしろそういう構造で見せた方がいい場合もある。要は誰に見せるかによって正解が変わるという話でした。
余白は「8の倍数」が業界標準
デザインの余白の話になったとき、田中さんがさらっと言ったこの一言が刺さりました。
「基本的には8の倍数で決めたりするんですよ。コーダーさんが構築しやすいし、私が制作会社でやってても8の倍数だったりして、割り切れない数字は基本的に使わないですね」
なぜ8かというと、CSSのremという単位が関係していて、16px（ブラウザの基本フォントサイズ）を1remとして計算するとき、8の倍数だと綺麗に収まりやすいとのこと。
39pxとか38pxみたいな中途半端な数字は、実務ではほぼ使わないそうです。
最近のデザイントレンド「コンテンツ幅が極端に狭い」
画面共有で見せてもらったデザインは、左右の余白がほぼなくて、コンテンツ幅がとにかく広いもの。
「もうほとんど左右が20〜30pxみたいな感じの世界なんですけど、こういうデザインが最近増えてきて。極端に左右の余白を狭くする場合は、背景に線を作ってデザインしたりしています」
Figmaの基本幅については、田中さんは1440pxで統一しているそうですが、会社によって1920pxや1280pxなど様々で、歴の長い制作会社ほど幅が狭い傾向があるとのこと。スタートアップや新しい会社はモダンなサイズを採用することが多いみたいです。
Webデザイナーの仕事は「東京まで撮影に行く」ことも
田中さんは東京の制作会社の案件にも関わっていて、出張もあると聞いていたのでどんな仕事なのか深掘りしてみました。
「アートディレクションみたいな感じで入らせてもらってる案件が多くて。デザインを作る上で撮影が必要だったりとかすると、撮影のディレクションをしに現場に行ったり、自分でカメラ持って撮影しに行くこともあります」
Webデザイナーといってもただ画面を作るだけじゃなくて、撮影ディレクションやエンジニアとの動きの協議まで含むんですね。
動きの指示についても聞いてみると、
「ファーストビューでSVGで動くような、なめらかな動きのパーツを作ることもあるし、エンジニアさんと相談しながら、この動きをしたいんだったらこういうパーツが必要だったりとかっていうのはよくありますね」
しかも、BLENDERで3Dのパーツを作って書き出したものをWebサイトに載せることもあるとか。WebGLなど最新技術も絡んでくるこの辺は、1サイト300万円以上のような予算規模の案件になってくるそうです。
田中さんのAI活用術
AI、特にClaudeをどう使っているか聞いてみると、業務全体に入り込んでいる様子でした。
- タスク・請求書まわりの整理
- WBS（工程表・ガントチャート的なもの）の作成
- LPのコピーや構成をClaude上でブラッシュアップしてからFigmaに入れる
- Claudeが直接Figmaにデザインファイルを作ってくれる機能も活用中
「ワイヤーの1個前のラフみたいなところを作ってもらったり。Figma上でClaudeがどこのデザインファイルで何っていうタイトルで作りますねみたいな感じで、勝手に作業してくれて」
Claude CodeがProプランで制限される可能性があるという話も出て、「Claude離れが起きてGeminiに行くかもしれない」という声もX上で出ているとのこと。とはいえ、ガチで使ってる層は絶対離れないとも言っていました。
バナーデザイナーは消える？
ChatGPTの画像生成クオリティが上がり、さらにその生成画像をCanvaでレイヤー構造にして編集可能にできるようになったというニュースが出たとのこと。田中さんの見立てはこうです。
「バナーデザイナーはたぶん消えていく気がしていて。制作実績としてバナーを載せるのは、もう多分これからあんまり意味がなくなっていく」
一方で、WebサイトやLPのデザインはまだAIで完璧には作れないので、そこの実績は引き続き有効。ただし、AIを使って時間短縮できることをポートフォリオで示せると尚良しというのが今のスタンダードになりつつあるみたいです。
「調べる力」こそが最強の武器
学習中の人に何が大事かを聞いたら、こんな答えが返ってきました。
「やったことないことを実務でいきなりやることがかなり多かったので。ツールを全部覚えてからじゃなくて、わからないことを自分で解決できる力とか、使ったことないツールを調べて独学で習得できる力が必要だと思っています」
AIがあってもなくても、Google検索でもAIでもいいので「自分で調べて解決できる」という地力があることが、就職でも実務でも一番強いということですね。
田中さん自身、3年前にAIがそこまで発達していない時期にWordPressやコーディングを調べながら習得したことが、今でも力になっていると話してくれました。
就職後も「相談できる場所」として
最後に、田中さんが大切にしていることとして話してくれたのが「就職してからも相談できる場所でありたい」という思い。
「職場では喋れないこと、聞けないけど気になってることって絶対あるじゃないですか。同じ経験があるので。そういうのを聞いてもらえる場所の方がいいなと思って」
スクールを卒業した後も、「ちょっとここ詰まった」「これってどうするの？」を気軽に聞ける存在。そういう関係性が、長期的には一番役に立つのかもしれないなと感じた時間でした。
