デザインを始めるにあたり
では、デザインを始めるまえに、デザインのプロセスを整理していきましょう。
本稿ではUXデザインのアプローチでデザインプロセスをご紹介します。デザイン思考の一面に触れていただき、ビジュアル面だけではないデザインの全体像を感じていただければと思います。
まず最初に取り組むのは、情報の収集と分析、整理です。情報の収集と分析、整理はデザインの基礎であり、誰に、何を、どのように伝えるのかを明確にすることは非常に重要です。その後、デザインを通じてどのような体験を提供するか、コンセプトやストーリーの構成に取り組むことで、デザインのメッセージや意図を効果的に伝えることができます。
情報や構成がまとまったら、視覚的なデザインに入ります。視覚表現に関して、絵を上手に描く必要はありません。デザインの美しさや見やすさは、原理や原則に基づいて構築されています。これらの原理や原則を学ぶことで、誰でもデザインを再現することができます。
ビジュアルデザインだけをご覧になりたい方は、目次をつかってスキップしていただいても結構です。
デザインへの誤解
デザインにはいくつかのよくある誤解があります。典型的な誤解と具体的な例を2つ挙げて紹介します。
デザインは単に美しさの追求
これは典型的なデザインへの誤解です。
例えば、ウェブサイトのデザインを美しくしようと、装飾をたくさん加えたり派手なカラーを使用する事があります。あるいは、おしゃれなデザインのマネをして文字サイズを極小にしたりしますが、原理原則を知らずに行うと使い勝手や情報の伝達性が犠牲になります。デザインは装飾性や美しさだけでなく、ユーザーエクスペリエンスや目的の達成にも焦点を当てるべきです。
デザインは才能やセンスがなければできない
プレゼンテーションのスライドを作成する際に、「自分には絵のセンスがないから上手にデザインできない」と思い込んでいませんか。デザインの基本原則やルールを学び、テンプレートやツールを活用することで、プロフェッショナルな見た目のスライドを作成することができます。
デザインには、美しさやわかりやすさを支える構造、ロジックがあります。確かに、プロのデザイナーは鋭い感性を活かしてロジックだけではない画面を創り出します。しかし、原理原則やロジックを押さえたデザインさえできれば、実用上十分な美しさやわかりやすさを保つことができるのです。
番外編：デザイナーは絵が上手
デザイナーは必ずしも絵が上手ではありません。デザインには、絵を描くスキルや絵画の才能が必要なわけではありません。絵を描けた方が良い場面もありますし、絵心的なものは持っている人が多いとも思いますが、デザイナ＝絵が上手、絵を描く仕事というのはよくある誤解です。
この誤解は、デザインのアウトプットと実際のスキルセットを混同しているために生まれるのかもしれません。美しい画面デザインやグラフィックなどを見ると、絵が上手であると錯覚するのでしょうね。デザインにおいて重要なのは、コンセプトの理解、ユーザーのニーズの把握、情報の整理、視覚的な構造の設計などです。
本題の前に、ちょっとだけビジュアルデザインのコツ
ビジュアルデザインの前にやるべき大切なステップもデザインの一部。これはデザインを学ぶ上で極めて重要な認識ですが、学びたいことのイメージとずれているかもしれません。
それでモチベーションが下がってしまうのは勿体ないので、ちょっとだけビジュアルデザインのコツの先出しして話をしましょう。
まず、素人っぽさを卒業するために身につけるのは「一貫性」「余白」「揃え」です。
一貫性
画面を構成する要素一貫して使用することで、デザイン全体に統一感をもたせることができます。一貫性を実現するためには、以下の点に注意しましょう:
フォント
一貫したフォントファミリーやスタイルを使用します。見出しや本文のフォントの組み合わせにも注意し、一貫性を保ちます。
カラーパレット
デザイン全体で使用するカラーパレットを選び、それに基づいて要素やテキストの色を一貫して設定します。カラーコントラストも考慮し、読みやすさを確保します。
見出しと本文
ヘッダーや見出しのスタイル、文字サイズを統一し、本文のフォーマットやレイアウトにも一貫性を持たせます。見出しの階層構造も明確にしましょう。
余白
ホワイトスペースとも言います。余白を意識してデザインすることは、視覚的なバランスや読みやすさを向上させます。以下の点に留意しましょう:
要素の配置
要素と要素の間に適切なスペースを設け、過度な密集を避けます。それぞれの要素が十分に目立ち、情報の整理や理解がしやすくなります。
レイアウトのマージン
画面の上下左右に適切なマージンを設けます。要素が画面いっぱいに詰まらず、読みやすさと視覚的な余裕を生み出します。
揃え
整然とした外観を作り出す揃えは、デザインの重要なテクニックです。以下の点に留意しましょう:
テキストの揃え
テキストの配置を左揃え、中央揃え、右揃えのいずれかに統一します。タイトルやキャプションの配置にも揃えを意識します。
視覚的なライン
要素の配置やマージンに沿って、水平または垂直のラインを意識的に作成します。これにより、要素が整然と配置された印象を与えます。
これらのテクニックを意識してデザインすることで、素人っぽい印象を脱し、洗練されたデザインを実現することができます。実際のプロジェクトでこれらの原則を実践してみましょう。相談できるデザイナーが身近にいれば、フィードバックを受けながら進めていくと上達が早いでしょう。
基礎的なデザインのプロセス
それでは、本題に戻ってデザインのプロセスを学んでいきましょう。
情報の収集と整理、ストーリー構成、視覚効果の3つの要素は、デザインにおいて非常に重要な要素です。それぞれの要素を細分化して考えてみましょう。
情報の収集と整理
まずデザインの目的や対象となるユーザーを明確にしましょう。情報を収集する際には、その目的やユーザーのニーズに基づいて適切な情報を収集し整理します。
スピーディに必要な情報を収集・整理するには、フレームワークを活用しましょう。私のおすすめは3Cです。3Cフレームワーク（Customers、Competitors、Company）を活用することは、効率的な情報の整理と分析に役立ちます。以下にそれぞれの要素の意味と、どのように活用するかを説明します。
Customers （顧客）
ユーザーやターゲットオーディエンスについての情報を収集します。彼らのニーズ、要求、課題、行動パターンなどを理解し、デザインの中でこれらの要素を考慮します。顧客の視点からデザインを見つめ、彼らの期待に応えることが重要です。
顧客の視点や分析に関しては、こちらの記事もご参照ください。
Competitors （競合）
自社の競合他社や同業他社についての情報を収集します。彼らの製品やサービス、マーケティング手法、デザインの傾向などを分析し、自社の差別化ポイントや競争上の優位性を見つけます。競合情報を把握することで、市場の動向やトレンドを理解し、デザインに反映させることができます。
Company （自社）
自社のビジョン、ミッション、ブランドの特徴、提供する価値などを整理します。自社の強みや独自性を把握し、デザインに反映させることで、他社との差別化を図ることができます。
3Cフレームワークによる整理は、デザインにおける情報の重み付けや構造化に役立ちます。それぞれの要素を分析し、デザインの目的とユーザーのニーズに合わせて情報を組織化しましょう。これにより、ストーリーテリングやビジュアル表現においても一貫性と効果を持ったデザインを実現できます。
内容の重み付けと構造
デザインにおいて情報を整理するために、情報の重要性や関連性に基づいて重み付けを行います。これにより、情報を視覚的に整理し、ユーザーにとって使いやすいデザインを作ることができます。
ここでは、マインドマップやKJ法などの活用が考えられます。これらの手法は、情報の重要性や関連性を可視化し、デザインの構造化と意味づけに役立ちます。
マインドマップ
イギリス人著述家のトニー・ブザン（Tony Buzan）氏が考案したマインドマップは、情報を中心テーマから放射状に展開していく方法です。中心テーマにはデザインの目的やコンセプトを設定し、それに関連する情報やアイデアを枝分かれして追加していきます。マインドマップを使用することで、デザインの要素や関係性を視覚的に把握しやすくなります。
KJ法
KJ法は、大量の情報を整理しグループ化する手法です。情報を小さなカードやポストイットに書き出し、関連性のあるもの同士をグループ化します。このプロセスを繰り返すことで、情報をカテゴリーごとに整理し、デザインの構造を作り出します。ちなみにKJとは考案者である文化人類学者の川喜田二郎（東京工業大学名誉教授）のイニシャルです。
アフィニティ・ダイアグラム
他にも、アフィニティ・ダイアグラム（親和図法）も情報の整理に役立つ手法です。アフィニティダイアグラムは、データの中で類似点を見つけて関連性のあるアイデアや要素をグループ化し、全体像を把握するための図表です。
これらのツールやメソッドを活用することで、情報の整理と構造化がスムーズに進み、デザインプロセス全体の効率性が向上します。適切なツールやメソッドを選択し、デザインの目的やニーズに合わせて情報を整理していきましょう。また、他のデザイナーやチームメンバーとのコラボレーションも、より良い情報の整理と意思決定に貢献します。
視覚的なデータ可視化
データを整理したら、利用する統計データなどを視覚化することを検討しましょう。視覚化を通じて、データの傾向や関係性を明確にし、ユーザーにとってわかりやすく伝えることができます。以下に、いくつかの異なる種類のグラフやチャートの例を挙げます。
棒グラフ
データの数量や比較を視覚的に表現するために使用されます。棒グラフはさまざまなカテゴリーまたは時間の区間ごとの値を表示するのに適しています。
折れ線グラフ
データの変化や傾向を表すために使用されます。折れ線グラフは時間の経過に伴うデータの変化を示すのに便利です。
レーダーチャート
複数の変数や指標を比較するために使用されます。レーダーチャートは、各変数が放射状に表示され、複数の要素のパフォーマンスを比較するのに適しています。
バブルチャート
3つの変数を同時に表示するために使用されます。バブルチャートでは、横軸と縦軸に対する値を示すバブルのサイズや色を使用してデータを視覚化します。
パイチャート
カテゴリーの割合や相対的な比率を表すために使用されます。パイチャートは全体のパーセンテージを示すのに適していますが、データの詳細な比較には向いていません。
これらは一部の例であり、さまざまな種類のグラフやチャートがあります。適切な視覚化方法は、データの種類や目的に応じて選択します。デザインの観点からは、表形式のデータよりもわかりやすくなるかを評価しながら、データの明確な伝達、視覚的な魅力、一貫性を考慮して、視覚化要素としてグラフやチャートを扱ってみてください。
体験価値の構想
ユーザーに魅力的な体験を提供するために体験価値を構想し、コンセプト、ストーリーを考えていきましょう。以下に、それぞれの要素についての考え方を示します。
コンセプト
デザインの根底にあるアイデアやコアメッセージがコンセプトです。ユーザーに対して伝えたい価値や魅力を明確に言語化しましょう。コンセプトはデザインの方向性を示し、統一感をもたせるために重要です。
ユーザーに提供したい体験価値を具体的に定義し、コンセプトを明確化します。それは、魅力的で特徴的なアイデアや価値を表現するものです。
コンセプトづくりの例
コンセプト作りにはさまざまは方法がありますが、先に行った情報整理の内容から段階的に作ることができます。
たとえば、オンライン学習サービスの企画を考えているとします。市場分析や課題抽出を行った結果、「インプットだけではなくアウトプットが重要」という事実が発見されました。では、アウトプットを主体的に行うためにはどうしたら良いかを考え、いくつものアイデアから実現可能性の高いものをピックアップしていきます。
ここまでは情報整理のプロセスです。体験価値の構想では、このサービスを利用することでユーザーが得られる価値を「まとまり」にしていきます。そのまとまりに名前をつけたものがコンセプトだと言えます。
コンセプトを導き出すまでのプロセスを書き出すと、以下のようになります。
- テーマ
オンライン学習プラットフォームの構築 - 具体的内容
明るく活気のある雰囲気。インプットだけではなくアウトプットを大切にする。表現を重視。使いやすいコース選択や進捗管理。ユーザー生成コンテンツやコミュニティ機能の組み込み。コンテンツ提供者への報酬を体系化。 - 体験価値
ユーザーに学びや知識の共有を通じ、自己表現の重要性への気づき促し、主体性発揮の機会を提供する。 - コンセプト
「学びの共有と自己表現の場」
コンセプトはデザインに生命を与える
このコンセプトは、ユーザーにとって学びの場を提供するだけでなく、他のユーザーとのつながりや自己表現の機会を創出することで、より豊かな学習体験を実現することを示しています。
コンセプトを明確にすることで、ビジュアルや機能のデザイン、マーケティングコミュニケーション上の表現などに役立ちます。また、コンセプトはデザイン全体の方向性を示し、関係者との共有やコミュニケーションを促進します。
以上のように、情報整理から段階的に進めることで、具体的なコンセプトが導き出され、体験価値を明確に表現することができます。
ストーリー
ユーザーがデザインを通じて体験する物語を描きます。ユーザーの興味を引き、関心を維持するためには魅力的なストーリーが重要です。ストーリーテリングを通じて、ユーザーや関係者に感情や共感を呼び起こすことができます。
ストーリーテリングの例
上記のオンライン学習サービスの利用者を例に、ストーリーテリングを行ってみましょう。
- ストーリーテリング例
“アオイの学びの旅” - 主人公
アオイ (架空の利用者) - コンセプト
「学びの共有と自己表現の場」
起点
アオイは自己成長や新たなスキルの習得を目指して、オンライン学習サービスに登録します。彼女は学びの旅への興味と自己表現の重要性に関心を抱いています。
経験の開始
アオイは明るく活気のある画面デザインに出迎えられ、自分の学習の進捗状況を確認することができます。彼女はさまざまなコースを探索し、興味のあるトピックに取り組みます。
学びと共有
アオイはコースを受講しながら、他のユーザーとのコミュニティに参加します。彼女は自身の学びの成果や考えを共有し、他の学習者とのディスカッションに参加します。さらに、ユーザー生成コンテンツの投稿やコメントも行います。
自己表現と成長
アオイは学びの旅を通じて、自己表現の重要性に気づきます。彼女は勤める会社のプロジェクトを通じて自分のアイデアを実現し、他のユーザーからのフィードバックや評価を受けます。これにより、自己成長とスキルの習得が促進されます。
成果と未来への展望
アオイは学びの旅の成果を実感し、新たなスキルや知識を身につけて、自身の専門性や経験を踏まえた学習コンテンツを提供しました。彼女はオンライン学習コミュニティで他の学習者と繋がり続け、自己表現や学びの共有を大切にしていきます。
このストーリーテリング例では、主人公のアオイを通じて、オンライン学習サービスの利用者が学びの旅に出発し、自己表現の重要性に気づきながら成長していく様子が描かれています。ストーリーテリングを通じて、ユーザーのエンゲージメントや感情への共感を喚起し、サービスの魅力を伝えることができます。
実際のストーリーテリングでは、主人公の目標や課題、喜びや困難などの要素を組み込み、より具体的で感情的なストーリーを構築することができます。ユーザーがサービスを利用する際の体験や成長をストーリーテリングで表現することで、より魅力的な体験を提供することができます。
このように、デザインと関わる人たちの体験を可視化し言語化していくことも、デザインの一部です。
ここから見えてくるユーザーとの接点や、そのときの状態、感情に合わせた適切なコミュニケーションを選択することは、このあとのビジュアルデザインの成否に直結します。
視覚表現
視覚表現については、先に「一貫性」「余白」「揃え」についてご紹介しましたので。ここでは、カラースキーム、チャンキング、コントラストの基本についてご説明します。
カラースキーム
デザイン内で使用する色の組み合わせや配色の方法を指すのがカラースキームです。適切なカラースキームを選ぶことで、デザインに統一感や調和を与えることができます。色彩の基礎や配色に関する内容はここでは伝えきれないので、また別の機会に書いていこうと思います。
ここでは色彩初学者の方でも使いやすい配色のテクニックをご紹介します。
トーン配色をベースにする
トーン配色は、同じ色相を使いながらも、明度や彩度の違いを活用する配色方法です。明るさや鮮やかさの違いを使って、デザインに奥行きや階層感を与えることができます。色彩初学者にとっても扱いやすく、統一感のあるデザインを作るための方法です。
対比色を入れる
対比色は、色相が対立する色を組み合わせることで、鮮やかさや視覚的な引き立てを生み出す配色方法です。例えば、赤と緑や青とオレンジなどです。対比色を使うことで、デザインに活気やコントラストを加えることができます。ただし、対比色を使う際にはバランスを考慮し、適度に使うことが重要です。
色を使いすぎない
色を使いすぎると、デザインが混乱しやすくなり、視覚的な統一感が失われます。色彩初学者の場合、色を控えめに使うことで、シンプルで洗練されたデザインを作ることができます。少数の色を使って効果的にデザインすることで、情報の整理や重要な要素の強調がしやすくなります。
チャンキング
チャンキングは、情報を小さな塊（チャンク）にまとめることで、情報の理解や記憶を助ける手法です。デザインにおいては、情報を視覚的にまとめて整理することで、ユーザーの認知負荷を軽減し、使いやすさや理解しやすさを向上させることができます。
グループ化
関連する情報や要素をまとめてグループ化し、視覚的なつながりや関係性を示します。ユーザーが情報を理解しやすくなります。罫線で囲んだり、同じグループには同じ装飾やスタイルを適用するなどがグループ化のテクニックです。
レイアウト
デザインのレイアウトを工夫して、情報を適切に配置します。情報の重要性や関連性に基づいて要素のサイズ、配置、間隔を調整しましょう。余白や揃えを意図的にコントロールして知覚的に情報を分割する、デザインの基本テクニックです。
コントラスト
コントラストは、要素間の明瞭な差や対比を指します。コントラストを利用することで、情報や要素の重要性や関係性を強調し、視覚的な引き立てを生み出すことができます。
まずは、コントラストを生み出す要素から説明します。
色のコントラスト
色相、明度、彩度の違いを活用して、要素を際立たせたり、視認性を高めたりします。
フォントのコントラスト
フォントの種類やサイズ、スタイル（太字、斜体など）の違いを利用して、重要なテキストや見出しを強調します。
形状のコントラスト
要素の形状やサイズの違いを活用して、視覚的なバランスや階層性を表現します。
ハイコントラストとローコントラストによる印象づくり
これらを用いたコントラストの度合いによって、デザインに与える印象や感じ方が異なります。一般的なイメージとして、ハイコントラストとローコントラストには以下のような特徴やイメージが関連付けられています。
【ハイコントラスト】
斬新さや活気
強い対比や明瞭な差異があるため、視覚的なインパクトやエネルギーを持っています。
元気や活動的
鮮やかな色の組み合わせや明暗のはっきりしたコントラストが、活気やエキサイティングな感じを与えます。
自由やアウトロー
際立つ色や形のコントラストが、個性や自由さを表現することがあります。
【ローコントラスト】
格式や上品さ
色の違いや大小の対比が抑えられているため、柔和で上品な印象を与えます。
洗練や落ち着き
色や形状の差が少ないため、穏やかな雰囲気や落ち着きを感じさせます。
優雅さや控えめ
色や大小の対比が控えめなので、優雅さや控えめな魅力があります。
ただし、これらのイメージや印象は一般的な傾向です。コントラストの効果は、デザインの文脈や他の要素との組み合わせによっても変化します。ですから、デザインの目的やターゲットユーザーに合わせて適切に調整する必要があります。
上級のデザイナーは、これらの基本原則を理解し、念頭に置きながら、組み合わせやテクニックを使って印象的な画面を創り出します。
上級デザイナーのデザインテクニックやアプローチを学ぶことは、デザインの向上に役立ちます。彼らは、原則を守りつつも、独自のスタイルやアイデンティティを持ってデザインを行います。彼らのデザインを読み解くことで、どのように原則が応用され、どのように印象的な効果が生み出されているのかを学ぶことができます。
ただし、初学者の場合は基本原則を把握し、実践することがまず重要です。デザイナーを目指す方でなければ、原理原則に忠実であることの方が良いように思います。