Webデザイナーの力を5軸×5段階で言葉にする　次に伸ばす1軸の決め方

「もっとセンスを磨いて」「なんか違うんだよね」と言われても、次に何をすればいいのかは分かりません。デザインの伸び悩みは、たいていセンスの有無ではなく、どの力がどう足りないのかを言葉にできていないことから来ています。

ここでは、Webデザイナーの力を5つの軸に分け、それぞれを5つの段階として整理します。自分がいまどのあたりにいて、次に何を上げればいいのかを決めるための物差しです。

後半では、目指す地点の決め方から伸ばす順番、次に上げる軸の絞り方まで、この物差しの使い方も扱います。

なお、FigmaやPhotoshopといったツールの習熟は、ここでは軸にしていません。ツールが変わっても残る、判断の力だけを測ります。ツールの操作がボトルネックになっている場合は、各軸を上げる前提として、その習熟を別途進めてください。

デザイナーの力は5つに分けられる
Webデザイナーの現在地を5つの段階で測る
目指すのは全軸Lv5ではない
伸ばす順番を飛ばさない
1軸だけ選び、1段階だけ上げる
まとめ

デザイナーの力は5つに分けられる

「デザインができる」と一口に言っても、その中身は同じではありません。ビジュアルはきれいなのに実装段階で手戻りを出す人もいれば、手は速いのに理由を聞かれると答えられない人もいます。ひとまとめにしている限り、次の一手は決まりません。

ビジュアル: 余白・階層・配色を、ルールとして扱えるか
設計思考: 見た目の判断に、目的からの理由を付けられるか
自走性: 指示を待たずに、目的から作業を組み立てられるか
スピード: かかる時間を読めて、それを守れるか
実装理解: 実装されることを前提に、設計できるか

この5つを、それぞれ5段階に分けます。段階が言葉になっていると、「なんとなく足りない」が「この軸のこの段階にいる」に変わります。

全体はこの一枚に収まります。軸ごとに横へ読んで、いちばん近いマスに印を付けてください。5つの印を縦に見比べると、自分の凸凹が見えてきます。

軸	Lv1	Lv2	Lv3	Lv4	Lv5
ビジュアル	感覚で決めてバラつく	参考があれば再現できる	ルールを説明できる	トーンを作り分けられる	方向性を牽引する
設計思考	なんとなくで決める	好みの説明にとどまる	目的から逆算できる	複数案を比較して選べる	課題設定から関われる
自走性	指示がないと動けない	迷うと止まる	自分で洗い出して進める	提案から入れる	施策を起案できる
スピード	見積もりが立たない	作り切れるが読めない	見積もれて守れる	削る判断ができる	チームの段取りを組む
実装理解	実装できない設計を作る	指摘されれば直せる	実装を意識して設計できる	代替案を出せる	技術選定に関われる

Webデザイナーの現在地を5つの段階で測る

Lv2以降の冒頭には、前の段階から何が変わるのかを一文で置いてあります。まずそこで自分の当たりをつけ、5つの軸ごとの記述で、いちばん近い段階を確かめてください。記述はどれも典型例なので、ぴったり一致していなくて構いません。Lv1は脱しているが、Lv3には届いていない。その場合は、間のLv2です。

読むときのコツが1つあります。自分がよく見えるほうを選ばないことです。「やろうと思えばできる」ではなく、直近の案件で実際にできたほうを取ってください。ここを甘く見ると、あとの判断がすべてずれます。デザイナーの場合、仕上がりを褒められた経験を「できた」の根拠にしがちですが、判定の材料になるのは見た目の評価ではなく、理由を言えたかどうかです。

AIを使ったかどうかは、判定には関係ありません。AIが出したデザインの良し悪しを目的に照らして判断でき、崩れているところを自分で直せたなら「できた」に入ります。それっぽいからそのまま採用しただけなら、それは参考の出どころがギャラリーサイトからAIに変わっただけで、Lv2の再現と同じです。

Lv1　なんとなくで作り、根拠を言えない

なぜその余白なのか、なぜそのフォントなのかは、まだ言葉になりません。

ビジュアル: 余白と文字サイズがその日の感覚で決まり、昨日作ったページと今日のページで揃っていない
設計思考: 配色も書体も「なんとなく良さそう」で決まっていて、「なぜ？」の一言で打ち合わせが止まる
自走性: 指示された箇所を作り終えたことに先輩が気づくまで、次の作業が始まらない
スピード: 「何日かかりそう？」への答えが、いつも「やってみないと分からない」
実装理解: 実装できるかは考えずに作っていて、実装側から「これはどう動くんですか？」と聞かれてから考える

Lv2　参考があれば作れるが、ゼロからは崩れる

Lv1との違いは、参考やお手本があれば最後まで形にできることです。ただし、判断の理由はまだ好みにとどまります。

ビジュアル: 参考を見れば再現できるが、ゼロから作ると崩れる
設計思考: 理由は言えるが、「このほうがきれいだから」という好みの説明にとどまる
自走性: 指示があれば進むが、迷ったところで止まる
スピード: 時間はかかるが、最後まで作り切れる
実装理解: 実装しづらい箇所を指摘されれば直せるが、事前には気づけない

Lv3　判断に理由が付き、実務がひととおり回る

Lv2との違いは、自分の判断に目的からの理由が付くことです。「好きだから」が「この目的ならこれが合うから」に変わります。

ビジュアル: 余白・階層・配色に一貫したルールを持ち、なぜそうしたのかを説明できる
設計思考: 目的とターゲットから逆算して、デザインの理由を説明できる
自走性: ディレクター経由で目的を渡されれば、必要な作業を自分で洗い出して進められる
スピード: 自分の作業時間を見積もれて、おおむね守れる
実装理解: レスポンシブやコンポーネントを意識して設計できる

ここが、任せられる状態のひとつの区切りです。

Lv4　選択肢を出し、比較して選べる

Lv3との違いは、答えを1つ作るのではなく、複数の選択肢を出して選べることです。1案の完成度ではなく、判断の幅が広がります。

ビジュアル: ブランドやターゲットに応じて、トーンを作り分けられる
設計思考: 複数案を出し、トレードオフを比較して選べる
自走性: 曖昧な依頼を自分で要件化し、提案から入れる
スピード: 優先度を判断し、削るべきところを削れる
実装理解: 実装コストを踏まえて、代替案を提示できる

Lv5　方向性を示し、チームを牽引する

Lv4との違いは、対象が自分の案件からチームや事業に変わることです。自分が作ることより、デザインの方向性を示して全体を動かすことが仕事になります。

ビジュアル: デザインの方向性そのものを提示し、チームを牽引する
設計思考: 企画や要件定義の段階から関与し、課題設定ができる
自走性: 課題を自分で発見し、施策を起案できる
スピード: チーム全体の工数を見て、段取りを組む
実装理解: 静的なページやプロトタイプ程度の実装は自分で行え、技術選定にも関与できる

目指すのは全軸Lv5ではない

5段階と聞くと、全部をLv5にするのがゴールに見えます。そうではありません。

Lv5は「その職種のトップ」の姿であって、全員が目指す地点ではありません。多くの実務は、各軸がLv3であれば問題なく回ります。

補足

当面のゴールは、全軸Lv3です。突出した軸を作るより、Lv1やLv2で止まっている軸を無くすほうが、実務では効きます。

全軸がLv3に揃ったあとのLv4は、全員が順に目指す段階ではなく、役割で選ぶ段階です。トーンの設計を任される、提案から入る立場になるなど、役割が変わるタイミングで、その仕事に使う軸から上げていきます。

もうひとつ、ゴールの置き方で注意があります。平均点を上げることをゴールにしないでください。5軸の平均が3.2から3.4になったところで、現場で何ができるようになったのかは説明できません。上がったのはどの軸か、そこで何ができるようになったのかだけが意味を持ちます。

伸ばす順番を飛ばさない

5つの軸は横並びではありません。土台になる軸が低いまま上の軸を鍛えても、どこかで頭打ちになります。

Webデザイナーの場合はこの順番です。それぞれ、まずLv3まで上げることを目安にしてください。

設計思考

目的とターゲットから逆算して、デザインの理由を説明できるところまで。
実装理解

レスポンシブやコンポーネントを意識して、設計できるところまで。
ビジュアル

余白・階層・配色のルールを持ち、なぜそうしたのかを説明できるところまで。
自走性

ディレクター経由で目的を渡されれば、必要な作業を自分で洗い出して進められるところまで。
スピード

自分の作業時間を見積もれて、おおむね守れるところまで。

ビジュアルが3番目にあるのは意外に見えるかもしれません。これはビジュアルを軽く見ているのではありません。Lv3のビジュアルは、きれいに作れることではなく、余白や配色のルールを説明できることです。説明は目的からの逆算、つまり設計思考の上にしか載りません。設計思考が「なんとなく」のままビジュアルだけ鍛えても、参考の真似から抜け出せません。実装理解が2番目なのは、デザインが成果物になるのは実装されてからだからです。どれだけ美しくても、実装できない設計は手戻りにしかなりません。自走性がその次なのは、判断の基準と実装の当たりが付いてはじめて、自分で進めても大きく外さなくなるからです。

スピードが最後なのは、後回しでいいという意味ではありません。かかる時間は、他の4つの軸の作業が安定してはじめて読めるようになります。先にこれだけを鍛えることはできない、結果として付いてくる軸です。

1軸だけ選び、1段階だけ上げる

現在地が分かったら、次に伸ばす軸を1つだけ選びます。選ぶのは、前の章の順番で最初にLv3に届いていない軸です。一度に全部は上がりません。5軸を同時に意識した瞬間、どれも動かなくなります。

選んだら、上げるのは1段階だけです。Lv2の軸をLv4にしようとせず、Lv3にすることだけを考えます。

上げ方は、難しく考えなくて構いません。次の段階の記述が、そのまま次の仕事で試す行動です。設計思考をLv2からLv3にするなら、次の案件で色や書体を決めるたびに、目的からの理由を一言添えてから先に進む。その繰り返しです。

このとき、「なんとなくLv2」で済ませないでください。どの案件のどの場面でそう判断したのかを、具体的に言葉にします。根拠が書けない判定は、次に何をすればいいかを教えてくれません。

あわせて、その段階に上がったと言える条件も先に決めておきます。決めていないと、上がったかどうかを気分で判断することになります。

言葉にすると、たとえばこのくらいの具体さです。

デザイナー本人設計思考はLv3にしました。先月の採用サイトで、ターゲットが新卒だという前提から配色と書体を決めて、その理由をクライアントに説明できたからです。

先輩デザイナーその判定でいいと思います。次は実装理解ですね。同じ案件で、幅を広げたときの挙動が決まっていないカンプがあって、実装側から質問が来ていたので、いまはLv2。デザインの段階で折り返しやコンポーネントの使い回しまで決めて渡せるようになったらLv3、と決めましょう。

見直しは1〜2ヶ月ごとで十分です。同じ軸が2回続けて動いていなかったら、やり方を変えるか、そもそもその軸を選んだ前提を疑ってください。

できれば、同じ5軸で他の人にも見てもらってください。自己判断と食い違った軸が、最初に話すべき論点になります。