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

「なんか違うんだよね」

デザインを見せてそう言われた次の日、何を変えたでしょうか。

色を変えてみる。
書体を変えてみる。
ギャラリーサイトを、いつもより長く眺める。
それでも、また同じ言葉が返ってくる。
センスが足りないのだと思って、もっと見本を集める——。

でも、伸び悩みの原因は、たいていセンスの有無ではありません。
どの力が、どれだけ足りないのか。
それが言葉になっていないのです。

この記事では、Webデザイナーの力を5つの軸に分け、それぞれを5つの段階で整理します。
自分がいまどこに立っていて、次にどこへ一歩を踏み出せばいいのか。
それを決めるための物差しです。

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

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

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

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

「デザインができる」。
この一言の中には、実はまったく別の力がいくつも詰まっています。

ビジュアルはきれいなのに、実装の段階で手戻りを出す人がいます。
手は速いのに、理由を聞かれると答えられない人もいます。
どちらも「デザインができる人」です。
しかし、次に伸ばしたいところは、それぞれ違います。

ひとまとめにしている限り、次の一手は見えてきません。
だから、分けます。

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

この5つを、それぞれ5つの段階に分けます。

段階が言葉になると、「なんとなく足りない」というもやもやが、「この軸の、この段階にいる」という、はっきりした現在地に変わります。

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

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

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

Lv2以降の冒頭には、前の段階から何が変わるのかを一文で置いてあります。
まずそこで当たりをつけ、5つの軸ごとの記述で、いちばん近い段階を確かめてみてください。

記述はどれも典型例です。
ぴったり一致しなくて構いません。
Lv1は脱したけれど、Lv3には届いていない。
それなら、間のLv2です。

自分を測るときは、「やろうと思えばできる」ほうに印を付けたくなりがちです。
けれど、ここで選びたいのは、直近の案件で実際にできたほうです。

デザイナーの場合、仕上がりを褒められると、それだけで「できた」に見えてしまいます。
しかし、判定の材料にしたいのは、見た目の評価ではありません。
なぜそう作ったのか、その理由を言えたかどうかです。

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

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

なんとなく良さそうなら、それで決めます。
なぜその余白なのか。
なぜその書体なのか。
そこは、まだ言葉になりません。

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

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

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

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

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

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

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

ここが、ひとつの分かれ目です。
Lv3に届いた軸は、安心して任せてもらえる軸になります。

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

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

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

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

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

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

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

5段階と聞くと、全部をLv5にすることが目標のように思えるかもしれません。

しかし、Lv5は、その職種の頂点に立つ人の姿です。
全員が登る山ではありません。
実際の仕事の多くは、各軸がLv3であれば、問題なく回ります。

補足

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

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

もう1つ、目標の置き方には、はまりやすい落とし穴があります。
平均点です。

5軸の平均が3.2から3.4になった。
数字だけ見れば、立派な成長です。
ところが、現場で何ができるようになったのかは、この数字からは分かりません。

見たいのは平均ではなく、どの軸が上がり、そこで何ができるようになったのか、です。

伸ばしやすい順番がある

5つの軸は、横一列に並んでいるわけではありません。
積み木のように、下の段が上の段を支えています。
土台が低いまま上だけを鍛えても、どこかで頭打ちになります。

Webデザイナーの場合、伸ばしやすい順番は次のとおりです。
それぞれ、まずはLv3がひとつの目安です。

設計思考

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

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

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

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

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

なぜ、設計思考が最初なのでしょうか。

色を決める。
余白を決める。
書体を決める。
デザインの仕事は、判断の連続です。
その判断に、目的からの理由を付ける力。
それが、後に続く軸の土台になるからです。

ビジュアルが3番目にあるのを見て、意外に思った人もいるかもしれません。
ビジュアルを軽く見ているのではありません。
Lv3のビジュアルは、きれいに作れることではなく、余白や配色のルールを説明できることです。
その説明は、目的からの逆算、つまり設計思考の上に載っています。
設計思考が「なんとなく」のままビジュアルだけを鍛えても、参考の真似から抜け出しにくくなります。

実装理解がビジュアルより先にあるのは、デザインは実装されて初めて成果物になるからです。
どれだけ美しくても、実装できない設計は、手戻りのもとになります。

自走性が4番目にあるのは、判断の基準と実装の当たりが付いて初めて、自分で進めても大きく外さなくなるからです。

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

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

現在地が分かったら、次に伸ばす軸を選びます。

1つだけ、です。
5軸を同時に意識すると、どれも動きにくくなります。
選ぶのは、前の章の順番で、最初にLv3に届いていない軸です。

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

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

このとき、「なんとなくLv2」で済ませず、どの案件の、どの場面でそう判断したのかを、具体的に言葉にしておきます。
根拠まで書いておくと、次に何をすればいいのかも、自然と見えてきます。

そして、もう1つ。
その段階に上がったと言える条件を、先に決めておきます。
条件があれば、上がったかどうかを、その日の気分に左右されずに判断できます。

実際の会話にすると、たとえばこんな具合です。