この記事の監修者
デザインには根拠が必要とは言いますが「何をどう勉強したら根拠のあるデザインができるようになるの？」っていう方はきっと多いですよね。デザインを学習している誰もが一度はぶち当たる問題だと思います。
この記事では、根拠のあるデザインを作れるようになるためには、どんなことをどうやって学習すれば良いのかを僕の経験を踏まえて紹介していきます。上記の問題にぶち当たっている方は参考にしてみてください！
根拠のあるデザインを提案できるようになる学習ステップ
根拠のあるデザインをするための学習ステップはこんな感じかなと思います。
- デザインの基本原則を抑える
- デザインに関わる心理学を抑える
- ユーザーのことを考える手法を知る
- ビジネスのことを考える手法を知る
どれも相互に深く関連し合っているので、順番に学ぶというよりはバランス良く学ぶと良いと思います。
「バランス良く」というのは「均等に」ということではなく、自身がどんなデザイナーになりたいのかによって、適切なバランスを見つけ出せると良いと思います！
デザインの基本原則を学ぶ
知識のインプット
まずは、ベースとなる知識を抑えましょう！デザインにはルールや原則があります。デザイナーとして抑えておくべき基本的なセオリーをレイアウト、配色、タイポグラフィ、画像の扱いに分けて解説します。
デザインの4原則
デザインの4原則はレイアウトデザインにおける基本的なルールです。
4原則は以下の4つです。
- 近接
- 整列
- コントラスト
- 反復
デザインの4原則については以下の記事で解説しています。しっかりと理解して、まずはこの原則に忠実にデザインができるようになることを目指しましょう！
また、デザインの4原則はデザイン学習の普及の名著である『ノンデザイナーズ・デザインブック』でも詳しく紹介されています。
『ノンデザイナーズ・デザインブック』はデザインの4原則だけでなく、配色やタイポグラフィの基礎知識も網羅されているのでデザイナーを目指す方は必ず読んで欲しい一冊です。この中に書かれていることをきちんと理解できていないとデザイナーとして恥ずかしいレベと言っても良いかもしれません。
配色
デザインをする上で配色や色についての基礎知識は必須です。以下の記事で配色の基礎知識について網羅的に紹介しています。
特に色相が与える印象とトーンが与える印象を理解しておくと、メインカラーを選ぶときの指針になります。
また色相環について知っておくと、メインカラーとコントラストが取れる色をアクセントカラーとして選択できるようになるでしょう。
書籍でより詳しく学習したい方には以下の本がおすすめです。色の基礎知識、配色の基本がまとまっており、配色の例が豊富で眺めているだけでも参考になります。
フォント・タイポグラフィ
デザインの構成要素として、文字は非常に大きなウェイトを占める要素です。デザインは、見る人に情報を伝達し、行動を促すという目的を持っています。見やすく・伝わりやすく文字を配置することは非常に重要です。
以下の記事では、フォント・タイポグラフィの基礎知識についてざっくりと解説しています。
また書籍で詳しく学習したい方には以下の本がオススメです！
『ほんとにフォント』はフォントを活用したデザインのビフォー・アフターの例が豊富に掲載されていて、パラパラと眺めるだけでも参考になります。また、ケースごとに使用すると良いフォントを紹介してくれており、フォントの知識が増えます。
『タイポグラフィの基本ルール』は、よりタイポグラフィの詳細について学びたい方向けの本です。フォントを扱う上での基礎知識や文字組みのテクニック、レイアウトデザインへの活かし方やフォントデザイン、ロゴデザインまで幅広く網羅しています。
写真・画像の扱い
デザインを構成する要素として写真や画像を用いることも多いでしょう。画像形式ごとの用途や解像度などの基礎知識、構図の知識、写真をデザインに活かす方法などを抑えておくと良いです。
以下の記事では写真や画像の扱いについて紹介しています。
体で覚える
デザインの基礎知識をインプットしたら、体で覚えましょう！
デザインのセオリーを復習しながら、トレースや自主制作をとおして、知識からスキルにしていきましょう。
トレース
デザインの代表的な学習方法として、トレースがあります。トレースのやり方は以下の記事で解説しています。
トレースをする際も、しっかりと理由を考えながら「なぜそのデザインなのか？」を説明できるように意識します。
- なぜその余白なのか？
- なぜその配色なのか？
- なぜそのフォントなのか？
- なぜそのジャンプ率なのか？
- なぜその写真を使っているのか？
- 写真はどんな風にレタッチされているのか？
などなど、デザインを構成する要素一つひとつに対して理由を考えることがポイントです。
自主制作
デザインの自主制作をする際も、まずはデザインのセオリーに忠実につくることを目指しましょう！PENGINでも自主制作の題材を提供しているので、基礎的な知識を学び、トレースに慣れてきたら取り組んでみてください！
デザインに関わる心理学を学ぶ
デザインは人間の認知や心理に働きかけ、行動を促す取り組みです。人間の心理や行動原理について知ることはデザインへの理解を深める上で非常に有用です。
以下の記事では、UIデザインの文脈で多く使用される心理学について紹介しています。
心理学の知識としてはごくごく一部なため、しっかりと学びたい方は以下の書籍を参考にすると良いでしょう。
『[買わせる]の心理学』
『[買わせる]の心理学』は1つの見開きごとに1つの心理学の法則や効果が紹介されており、読みやすい・復習しやすい構成になっています。デザインだけではなくマーケティングに活用されている心理学も多く紹介されています。
『UIデザインの心理学』
『UIデザインの心理学』は書籍名の通り、UIデザインにおいて重要な心理学を紹介している本です。少し学術的な内容になっているため、人によっては読破するのに時間がかかるかもしれません。
『心を動かすデザインの秘密』
『心を動かすデザインの秘密』は認知心理学の観点から「人が何かに魅力を感じるとき内面では何が起きてるか」というアプローチからデザインに迫っていく本です。後半はデザイナーやデザインの現場についてまで内容が展開していくので非常に読み応えがあります。
『経済は感情で動く』
デザインの文脈からは少しずれますが「人の判断は合理的とは限らず、文脈に大きく左右される」ということが知れる1冊です。認知のゆがみやトラップを知ることはデザインを考える上でも有効な知識になると思います。
ここまで、デザインの基本的なセオリーと心理学について紹介しました。大切なのは、知識を得ることを目的にせず、学んだら使うことです！
知識は必ず使う前提で学ぶようにしましょう。
ユーザーのことを考える手法を知る
近年UXやUXデザインという言葉が急速に一般的に使用されるようになりましたね。UXデザインは非常に包括的で議論の余地が多分にある概念なので、ここでUXデザインについて語るのは避けたいところですが、要するに「ユーザーの体験が最高なものになるようにちゃんと設計しようぜ」ってことだと思っています。
これからのデザイナーにとって、ユーザーのことを深く考える手段としてUXデザインの思想や手法を学んでおくことは、必須になってくると考えています。
PENGINではUXデザインを学びたい方向けのコンテンツを用意していません。ですが、世の中にはすでに素晴らしいメディアサイトや書籍がありますので、紹介します！
次にGoodpatchブログhttps://t.co/D2s6dcH2wF
— クリ★スタ | Webデザインtips (@cresta_design) May 14, 2020
UXデザインについてこれほど明快に体系的にまとまっているメディアは（たぶん）ありません。
UX以外にもWebやグラフィックもけっこうカバーしていて助かります。
これも読み漁った方がいいです。過去記事に遡って眼精疲労になるまで読んでください。
>> Goodpatchブログ
>> UX MILK
国内のメディアサイトとして断然おすすめなのがGoodpatchブログです。UXデザインについてここまで体系的に学べる、かつ、初学者でも理解しやすいものは書籍も含めてこれ以外にないと思ってます。
UX MILKはGoodpathブログをしっかり読んだ上で、補助的な読み物として活用すると良いと思います。
UXデザインを体系的に学びたい方には以下の書籍がオススメです。
『Web製作者のためのUXデザインをはじめる本』
『UXデザインの教科書』
書籍名どおり、まさに教科書です。内容が濃すぎて「数学の本でもこんなに読むのに時間かからないよ！」ってくらい1ページ読んで理解するのに時間が掛かります。おそらく僕の人生の中でも読破に時間を要した本トップ10に入ります。
ただ内容の充実度やUXデザインの知識・手法の網羅性に関してはおそらく現在出版されているものの中でもトップクラスだと思います。
UXデザインも「知識のインプットだけで完結できない」ということを肝に銘じておきましょう！UXデザインはチームで実践して初めて経験できるものと言われています。
ビジネスのことを考える手法を知る
デザイナーとして、ビジネスに貢献するためには、一般的なデザイン論だけでなく、マーケティングの知識を得ることも大切です。
特に、事業会社で一つのサービスを育てていくようなデザイナーの場合はマーケターと連携して業務に当たるこのも多いため、基本的な知識は抑えておくと良いでしょう。
書籍でマーケティングを学ぶ
マーケティングについて体系的にインプットするためには、書籍で学ぶことがオススメです。実際に僕が読んで、役立つと思った書籍を4冊紹介します。
マーケティングは事業全体に関わる知識なので、マーケティング全体の考え方〜一つ一つの施策の知識を抑えようと思うと非常に広範な知識が必要です。少しずつ学びながら実践すると良いでしょう。
『USJを劇的に変えた、たった1つの考え方』
『USJを変えたたった一つの考え方』はUSJの業績をV字回復させた立役者である盛岡毅さんの著作です。日本でもトップレベルのマーケターの思考のフレームワークを入門レベルで学べる1冊になっています。
『世界基準で学べる エッセンシャル・デジタルマーケティング』
『世界標準で学べる エッセンシャルデジタルマーケティング』はデジタルマーケティングのエッセンスが初学者にもわかりやすいように紹介されています。
高度な内容ではなく、基本的なことが網羅されているといった印象です。
『Webサイトの分析・改善の教科書』
『Webサイトの分析・改善の教科書』は、KGI・KPIの考え方や設定方法の話しからはじまり、Webサイトの種類ごとの個別の施策の考え方、改善方法の考え方が網羅的に解説されている書籍です。けっこうページ数が多く、読み応えがありますが、これ1冊である程度Webサイトの改善施策について網羅的な知識が身につく書籍になっています。
『現場のプロから学ぶ SEO技術バイブル』
『現場のプロから学ぶ SEO技術バイブル』はWebサイトのSEOについての本です。SEOについては明確にわからない部分も多く、何が正しい情報なのかいまいちピンと来ない方も多いと思います。この本を読めば、何をマイナスに評価されるのかをざっくりと知ることができます。
テスト結果から学ぶ
世の中にはABテストの結果、CV改善の施策などの情報が公開されているものも多くあります。こういったテスト結果から学ぶことも根拠のあるデザインを作るうえで効果的です。
例えば以下のサイトではUberがアイトラッキングを活用してWebサイトの効果を改善した例が紹介されています。
他社サイトの改善例を参考にする場合、どのようなターゲットに対して、なぜ改善したのか？を考えることが必要になります。ターゲットの属性によって、効果が上がるデザインは異なるため、表面的な模倣（いわゆるパクり）にならないように注意しましょう！
『支持されるWebデザイン事例集』
テスト結果から学べる書籍もあります。
『2万回のA/Bテストでからわかった 支持されるWebデザイン事例集』では、元のデザインからどのようなABテストをしてどのくらい効果が改善したのか、効果が改善した理由が実際の事例をもとにたくさん紹介されている書籍です。
この本のオススメの活用方法は、効果改善の理由を心理学などの観点から自分の言葉での説明を試みることです。
この場合も、どんなターゲットなのか？ターゲットの属性が変わっても有効な手段か？を同時に考えることが重要です。
マーケティングを実践する
知識をインプットしたら必ず実践しましょう！
マーケティングの基本は「課題を特定し、仮説を立てて、検証し、仮説をブラッシュアップする」の4段階です。
マーケティングの実践方法としてオススメなのが以下の3つです。
ツイッターをやる
ツイッターは最も手軽に仮説検証のサイクルを回せるツールです。
ブログをやる
ブログを始めるのはハードルが低いですが、継続的に記事を作成し投稿するのは非常に労力がかかります。
ただし、ライティング、SEO、コンテンツマーケティングなどの知識をインプットしながらPDCAを回すことができれば、デザイナーにとって非常に強力な強みになりうるでしょう。
LPを運用する
Webデザイナーの場合、自分の強みとターゲットの課題のマッチングを考え、サービスをパッケージ化してLPを運用することもマーケティングを学ぶ方法として考えられます。
こちらも、LPOやSEO、広告運用についての知識をインプットしながら運用すると良いでしょう。
最後に
「すべてのデザインに根拠を！」ということで、根拠のあるデザインができるようになるための勉強法を紹介しました。
全てを網羅しようとしてもかなり困難だと思います。
全てにおいて共通して大事な部分だけ覚えていただければと思います！
- 理由・根拠を考えるクセをつける。
- 理由・根拠になりうる知識をつける。（使う前提で知識をインプットする）
- インプットした知識を使う。使いながらさらにインプットする。
この3つを心がけていれば、デザインを自分の言葉でしっかりと説明できるようになりますよ！
↓↓コーディングやWeb制作全般のおすすめ書籍も紹介しているので、こちらもチェックしてみてくださいね！
