地図を持つだけでなく、現在地を知る必要性 【5W1H法】【know→how法】でWebデザイナーのスキルアップを体系的に

こんにちは、まいるどしゅがーです。今回も引き続きデザイナー教育関連の投稿です。

最近noteやtwitterでデザイナーの教育方法についての投稿をよく目にします。自分の関心が最近その辺りということで自然と目に止まってしまうというのはあると思うのですが、やはりどこも人手不足だなと。1回目の投稿でも書きましたが即戦力の中途採用ではまかないきれず、ジュニアデザイナー、場合によっては未経験からの育成の必要が出てきたということでしょう。と同時に育成をしなくてはいけなくなった中堅デザイナーも増えてきていることだと思います。

そんな状況の中でデザイナー教育関連の投稿が増えているのはありがたいことですが、一方でデザイナーのスキルと言っても幅広く、断片的な投稿を追うだけではそれによって学べるナレッジ・スキルも断片的になってしまいます。みたいなことを考えていたらまさにそれを代弁してくれている記事がアップされて光の速さで読みました。

大体言いたいことは書かれていたので、私が今書いているこの記事はここで終了……でもいいのですがもう少しお付き合いいただき、まさに先週から会社で試しているデザイナー教育の2つのメソッドを紹介させていただきたいと思います。なにぶん出来立てホヤホヤなので暖かい目で見ていただけたらと思います。

メソッドを作った背景

私も、デザイナー教育をしなくてはいけなくなった中堅デザイナーの一人です。相手はデザイン完全未経験の若手です。初めは「OJTでちょっとずつやっていくしかないかなぁ」くらいに漠然と思っていたのですが、キャリア相談などにのっていた他の若手がデザインスキルに伸び悩んでいるのを見て「これじゃいかんな」と思ったのがメソッドを作った背景です。

またもう一つ大きなきっかけになったのが、同時期にプライベートで通い始めたパーソナルトレーニングジムです（デザインとかではなく身体を鍛える方）。中堅にもなってくると年齢のせいか集中力が続かなく…という個人的な話は置いておいて、そのジムでのトレーニングがかなり体系的/科学的なんです。脳神経学や運動生理学を絡めて非常にロジカルなトレーニングや食事管理に衝撃を受けました（そして効果も出ています！）。

このロジカルさってデザイン教育にも活かせないだろうか？

曖昧で複雑で膨大でブラックボックスなデザインスキルに輪郭を与え、あわよくば体系的で科学的なメソッドに昇華できないだろうか？

そう思って作成したのが【5W1H法】と【know→how法】です。伸ばす必要があるのはどういったスキルで、そして今自分がやっていることはどこのスキルを伸ばすためなのか？を理解することが非常に大切です。筋トレと同じで、闇雲に鍛えても効率が悪いのです。今私は上腕二頭筋を鍛えるためにアームカールをやっているのだ、くらいまで落とし込まなくてはなりません。これがタイトルにも書いた「現在地」です。目指すデザイナー像や身に付けたいスキルという目的地を記した地図があったとしても、それに対して自分が今どこの道を通ってどう近づいているのか？を理解するのが大切なのです。これが体系的なデザイナー教育の第一歩です。

【5W1H法】では「考える力」を、【know→how法】では「作る力」をそれぞれ学びます。ちなみにこのメソッドを用いて私が教育しているのはインハウスのWebデザイナーのため、Webに関連した話が多くなるかと思いますがご了承ください。ちなみにコーディングなどには触れるものの実際に作るところまでは範囲外です（そこまで広げると複雑になりすぎるため）。一方で、Webデザイナーに限らずグラフィックデザイナーや、デザイン未経験〜ジュニアデザイナーの方にも少なからず気付きを与えられるのではないかと思ったため、こうしてnoteを書いています。

それでは早速メソッドの説明をしていきます。

【5W1H法】

これを読まれている方は「何を今さら……」と思われるかもしれませんね。国語の授業で学んだ記憶がある方も多いのではないでしょうか。それ以外にもビジネスフレームワークとしても使われていますし、検索すればいくらでもその使い方を説明した記事が出てきます。

私がデザイナー教育として使っている5W1Hには順序と親子関係があります。そこがポイントです。

図を見ていただければわかる通り、順序はWhat→How、そしてHowの中にWhere/When/Who・Whomが含まれる形になります。残りのWhyは全ての段階において出てきます。わかりやすいように、こんなざっくりとした依頼がきたと仮定して、一つずつ見ていきましょう。

依頼者「300×250pxのバナーを作ってもらえますか？」

What

「目的」とも言い換えられますが、要するに何を達成したいか？やりたいことは何か？ということです。デザインは課題解決とよく言われますが、解決したい課題がなければデザインしようがないということですね。今回の依頼で言えば「バナーを作ることによって何をしたいか？」ということになります。会員登録数を上げたいのか、流入数を上げて認知してもらいたいのかなど、まず目的を確認する必要があります。Whatはアウトプットとしてのデザインに直結します。そして驚くほどにWhatがごっそり抜けている場合が多いのです。逆に言えばそこをしっかりヒアリングできる、ないしは一緒に考えられれば、他のデザイナーよりも一歩前進したとも言えます。

How

Whatを達成するためにどのようにアウトプットするか？ということです。ここではまだ手を動かし始めません。あくまでどうデザインするか「考える」段階です。

Where

Whatを達成するためのアウトプットをどこでやるか？ということです。今回の依頼はバナーなので、場所はWeb。300×250pxということは広告バナーのレクタングルである可能性が高いということになります（実際にはここも依頼者に確認します）。場所が決まればその場所の使い方/ルールなど媒体理解の必要があります。

When

Whatを達成するためのアウトプットをいつやるか？ということです。このWhenには対象が二つあり、一つは世に出されるタイミングそのものがいつか？もう一つは自分がそれをいつデザインするのか？です。前者ではトレンドキャッチアップ力が必要になり、後者ではスケジュール管理力が必要になる、ということです。今回の依頼はバナーなので、例えばバナーデザインまとめサイトなどで同業種のものを調査しトレンドを掴み、また作成するのは1サイズのみなのでそれに見合った制作日数を依頼者に伝えるようなイメージです。

Who/Whom

Whatを達成するためのアウトプットを誰が、誰に対してやるのか？ということです。誰がやるのか？というのは自分たちが何者かということを理解している必要があるということです。多くの場合サービスやプロダクト、企業には固有のデザインガイドラインがあるため、それを参考にして自分たちの人格に則した伝え方にします。極端な例ですが青をブランドカラーにしているサービスのバナーを理由もなく真っ赤に作ったらまずいということです。そしてそれを誰に対してやるのか？ターゲットは誰か？を理解し、そのターゲットに響くような訴求方法を考えます。

Why

そして最後のWhyです。これは全ての段階で幾度も自分に問うものです。なんで300×250pxなんだっけ？なんで1サイズだけでいいんだっけ？なんでこのタイミングで作るんだっけ？なんでなんでなんで……と何度も自分に問うことで自然とWhatを理解し、そしてHowにつながっていきます。トヨタの5回「なぜ」を問う手法と同じですね。

ここまで5W1Hの順序と親子関係を見てきましたが、新規案件がそこまで多くなく運用・改善がメインのインハウスデザイナーの場合、デザインが定型的になりがちで、慣れで対応できるあまりWhatやWhoのあたりが抜けがちです。しかし、どんなに細かなタスクだったとしても5W1Hは必ず存在します。それを毎回自然と把握する癖がつくまでこの5W1Hを何度も繰り返すのが【5W1H法】です。これも筋トレと同じです。鍛える部分を理解したら、とにかく回数をこなして身体に染み込ませます。

これがデザインを「考える」力です。どうしてもデザイナーと言うと手を動かす部分がフォーカスされがちですが、それに至る多くの過程があるということを見える化したかった、という狙いもここにはあります。

【know→how法】

さて次にknow→how方です。こちらはデザインを「作る力」を鍛えるためのもので、この「→」がポイントです。一つずつ見ていきましょう。

know

伸ばすべきスキルそのものを知っていること、また知っていれば使えるスキル。

how

スキルそのものを知っていて、かつ習熟が必要なもの。

そしてなぜ間に「→」を入れたかというと、「伸ばすべきスキルそのものを知らなければ伸ばしようがない」ということです。筋トレの例で言えば、腕のこんな部分に筋肉があるんだ！ということを知らなければ鍛えようがない、という感じですね。冒頭で紹介した記事の、頭から鍛える理由と同様です。イメージは以下です。

まず横軸のknowの数を増やすことから始めます。レイアウト、フォント、色、写真、イラスト、そこからさらに細分化していくとかなりの数になると思うのですが、まずはそこを増やすことです。この段階ではスキルの深さではなく広さが重要なため、以下のような学習方法がおすすめです。

knowを広げるおすすめの学習方法

・本を読む

・動画を見る

・twitterでデザイナーをたくさんフォローする

逆に言うとこれらの学習方法はスキルを深めるhowの段階には適していません。アメリカ国立訓練研究所のラーニングピラミッドによると、上記の方法で身につくのはせいぜい20%です。それを理解せずに学習すると「あんなに本をたくさん読んだのに、いざ作ってみると全然よくない……」という感じで無闇に落ち込んでしまいます。この段階ではknowを「広げる」のだと理解した上で学習するのが重要です。特に3つ目の「twitterでデザイナーをたくさんフォローする」はおすすめで、同じレベル感のデザイナーをフォローすると似たような学習段階の情報が入ってきますし、少し自分より高いレベルだなと思うデザイナーだといつもと違う視点の情報が入ってきます。まさに「広げる」にはうってつけです。

次にスキルを深める「how」です。これはスキルを「深める」ということなのですが、例えばデザインの四大原則の活用などが挙げられるかなと思います。四大原則はノンデザイナーズ・デザインブックでとても詳細に書かれていますがそれを読んだ若手から「読んだけどどう活かせばいいかわからなかった……」という声を聞きました。確かに余白の空け方やコントラストの付け方など、頭ではわかっているが実際にやってみるとなかなか難しく、まさに習熟が必要なものです。この段階では以下のような学習方法がおすすめです。

howを深めるおすすめの学習方法

・とにかく手を動かして作る

・フィードバックしてもらう

・フィードバックしてもらいながらリアルタイムで修正する

これも筋トレと同じです。自重である程度までは鍛えられますが、トレーナーに付いてもらって器具を使うことでより正しく、効果的に鍛えることができます。特に3つ目の「フィードバックしてもらいながらリアルタイムで修正する」がおすすめで、これによって追い込むことができます。追い込むということは要するに、自身がここまでかなと思ったところからさらに鍛えてくれる（ブラッシュアップしてくれる）ということです。しかもツールの使い方や手の動かし方などまで同時に教えてもらえるというおまけ付きです（私はよくワークスペースの配置を直されていました）。最近はリアルタイムに共同編集ができるFigmaやXDがあるので便利ですね。

こうしてknow→how法で身に付けたスキルが、まさに自身の“ノウハウ”となる、ということです。

まだまだ今後も改善予定

ここまで2つのメソッドを紹介してきましたが、実際に活用しながらフィードバックも貰いつつというリーンなやり方でこのメソッド自体も改善していく予定です。

繰り返しになりますが、やはり大切なのはタイトルにも書かれている現在地を知ることです。暗中模索は得策ではありません。どこか近寄り難さが残るデザインの世界に、少しでも輪郭を与えていければなと思っています。

次回はknowの段階でおすすめなカテゴリー別おすすめ書籍とかを書こうかな。ちょっと未定ですがまた！