コンセプトと一口に言っても、商品コンセプトやブランドコンセプト、企画コンセプトなどさまざまなコンセプトがあります。
そのなかでもデザインコンセプトは、デザインをしていく上で基本となる指針です。何にフォーカスをするのかによって、デザインの見せ方は変わります。
Webデザインを制作する場合には、雰囲気や感性だけで作成するのではなく伝えたいことを言語化し、基礎知識やデザインの理論に基づいて作成することでより良いWebデザインを仕上げることが可能です。
そのためにも、制作するデザインで達成すべき目的を明確にし、伝えたいメッセージを的確にユーザーへ届けるためにも「デザインコンセプト」を決めることが大切です。
今回は、説得力のあるデザインコンセプトの作り方について紹介します。
デザインコンセプトとは
コンセプトは日本語に直訳すると「概念」です。デザインにおいてコンセプトは、デザイン全体を統括するテーマや表現の下地となる考え方などの文脈で使用されることが多いワードです。
クライアントの圧倒的な特徴や、最も大切にしていることを「一言でいうと何か」を言語化し表現します。
コンセプトを瞬時に言えることにより、迷いなく良いデザインの方向性を見つけることができます。その際、必ずしもコンセプトと言う必要もなく「今回のテーマ」や「わが社の強み」などをデザインに直結しても問題はありません。
なぜデザインコンセプトが必要なのか
目的を達成するためにも、デザインコンセプトは必要です。
コンセプトがないデザインは、薄っぺらく説得力のないデザインになってしまいがちです。そのため、デザインに深みを持たせたり説得力を持たせる、成果を出し制作物のクオリティを高めるためにも重要です。
例えば、カフェのチラシを作成します。チラシを作成することが目的ではなく、良いデザインのチラシを作成することで新規のお客様を増やすことが目的です。
この目的を達成するために、良いデザインが必要になります。
ここでいうデザインの良し悪しは、制作物がクライアントが求めるオーダーや制作物で売上や集客などに貢献できるかどうか、ブランディングの一助になるかなどの目的をクリアしているかです。
まずはデザイナーとクライアント間でデザインの良し悪しの認識をそろえることが大切です。認識を統一しないと、クライアント側も内部で協議できず、修正の基準を決めることができません。
これらを判断するためにもデザインコンセプトは必要です。
良いデザインの定義
良いデザインや成果が出るデザインはどういったものでしょうか。それは、認知・印象・独自性がしっかりと機能するデザインです。
認知
認知とは、ターゲットへ伝えるべき情報です。
上述のカフェを例にすると、カフェの営業時間や、コーヒーの価格などの文字情報などを指します。
印象
印象とは、ターゲットへデザインの与えたい印象です。
可愛い、格好いい、モダン、クールなど一目見たときの雰囲気や与えたい印象を指します。
独自性
独自性とは、デザインにおける最大の特徴です。
ここでしか言えないことやその会社でしか言えないことなど、独自性をアピールできているかがポイントです。
意図した表現機能が、デザインを見たときにきちんと伝わることが大切です。どのような目的でこのデザインを作成し、どのくらいの認知・印象・独自性のパーセンテージを掛け合わせたらいいのかパワーバランスを考えることが大切です。
コンセプトを決める3つの手順
デザインで達成すべきゴールは何なのかを明確にする必要があります。
1．プロジェクトの前提を整理する
デザインを制作するには、誰に・どんなメッセージで・何をしてもらいたいのかなどの目的を決めることが大切です。これはデザインで達成すべきゴールを明確にするための作業です。そのためプロジェクトの前提を整理して行く必要があります。
クライアントワークでデザイン制作を進める場合、相手の情報を知るために質問リストや印象シート、デザイン書籍を持参するとよりクライアントに分かりやすく提案できます。
ビジネスのシーンで活用される5W1Hで要件定義をし、アイデアを考えるうえで必要な情報をまとめましょう。
5W1H（Why・Who・What・When・How）の詳細な内容は、下記です。
Why（なぜ）
デザインをなぜ作成するのかを考えます。ここではクライアント側の目線で考えることで、プロジェクトの前提を整理できます。
例えば、店舗をオープンする場合のオープン告知や新商品の紹介や宣伝のため、デザインをし情報発信をしたいのかなどです。いろいろな動機がありますが、なぜデザインをする必要があるのかを再確認することが大切です。
その際、クライアントが何か問題を解決したいためにデザインをしたい場合であれば、抱えている問題を明確にしておく必要があります。
Who（だれに）
デザインを発信したい、ターゲットの属性を考えます。具体的にターゲットを絞り込み、より落とし込んでペルソナ設定をすることで、誰に発信したいのかを明確にします。
例えば、性別・年齢・職業・住まい・趣味嗜好・性格・家族構成などを詳細に決めていきます。詳細に絞り込むほど、求めるターゲットに情報が届きやすくなるため、具体的に考えましょう。
What（なにを）
情報を発信したいと考えるターゲットが、魅力的に感じるであろう商品やサービスの情報を考えます。ここでは、ターゲットの気持ちになって具体的に考えていく事が大切です。
例えば、その商品やサービスにおける圧倒的な特徴や売りは何か、見た人にどういった印象を与えたいのか、希望する方向性に近しい既存デザインはどれかなどをクライアントと確認しながら何を発信していくのかを決定します。
When（いつ）
すべての要素が整ったら、どういった形で情報を届けていくのかを考えます。その際、デザインに接触する場所やタイミングなどもあわせて検討しましょう。
How（どうやって）
クライアントによっては情報発信する媒体が既に準備され、決定している場合もあります。仮に発信媒体が決まっていない場合は、クライアントともに情報をすり合わせながら決めることが大切です。
その際、情報を受け取ったユーザーがどんな気持ちになり、どんなアクションを起こしてもらいたいかを考えることが大切です。例えば、商品であれば購入や、もっと情報を知りたいと思ってもらう、Webサイトにアクセスしてもらうなどのアクションです。
2．テーマに必要なキーワードを考える
「1．プロジェクトの前提を整理する」で整理した情報をもとに、デザインの軸となるキーワードを考えます。デザインの骨格を決めていく上での重要なプロセスになり、デザインにおける意外性や、発見、驚き、興味深さ、納得感などデザインの面白さを追求します。
面白さがアイデアに盛り込まれるように考えることで、デザインが集客やブランディングなどの目的達成に役立ちます。
テーマ自体は作成する媒体によってさまざまですが、テーマを考える方法はどれも同じです。そのため上述の「プロジェクトの前提」を踏まえ、連想される言葉を単語単位で考えます。
その際、マンダラチャートなどを用いて、可能な限り単語の連想を繰り広げていきます。マンダラチャートは、9マスに区切られた中央にキーワードを入れ、そこに関連するワードを埋めていく作業が可視化できます。
マンダラチャート図
ビジュアルのアウトプットを意識したり、全体を統括してテーマとして多様な方向からキーワードを選出しキーワードを検討しましょう。
3．コンセプト×印象を表現する
コンセプトと印象があいまいなままデザインを制作してしまうと、デザインの方向性にブレが出てしまったり、ありがちなデザインになってしまう可能性もあります。ありがちなデザインでは目的達成につながりません。そのため、2で考えたキーワードを元に、コンセプトを決定し、どのように表現していくのかをイメージします。
イメージは、アイデアを適切に表現するための世界観や、どんな雰囲気でデザインするかです。
・大人っぽくて可愛い
・親しみやすくて楽しそう
・伝統的で格式高い
・健康的で爽やか
・マニアックで独創的
クライアントによっては、アイデアを練る段階で必要な情報がある程度揃っている場合も多いです。情報共有しながらイメージを検討し、表現しましょう。
コンセプトをWebデザインに活かすポイント
視覚的なデザインを検討する際の基本要素はレイアウト、フォント、配色など大きく3つに分けられます。コンセプトを決めることで、ターゲットに刺さりやすく、目的を達成できるデザインに仕上がります。
レイアウト
デザインに必要な情報が集まり、仕上がりのイメージが見えてきたらレイアウトを考えます。その際、全体のレイアウトはもちろん、コンテンツのレイアウトなどもあわせて検討します。
Webサイトの場合は、種類や目的情報量によってレイアウトの仕方は大きく異なります。主に1カラム、2カラム、3カラム、グリットレイアウトなどに分類されます。緻密に書き込む必要はありませんが、文字やイラスト、写真など具体的にどんな要素が必要になるのか、どんな順番で要素を読ませるべきなのかを考えてレイアウトします。
その際、要素の役割や優先度を決め、大きさや画像を割り当て、要素同士の関係性を明確にすることが大切です。
フォント・タイポグラフィー
タイポグラフィーは文字の書体や大きさ、配置の仕方を指し、フォントは同一書体の一揃い、書体データそのものを指します。可読性や視認性、判読性が備わったフォントを選ぶことで失敗をしにくくなります。
フォントには大きく分けて、ゴシック体と明朝体があります。
一般的にWebサイトの場合、本文にはゴシック体が多く使用されています。明朝体は、解像度などの問題で、環境によってはキレイに表示されなかったため、Webサイトではゴシック体が主流で使用されていました。
近年、Web上でも明朝体を美しく表示する方法が確立されてきており、Webサイトのデザインに合わせて効果的に使用されることも増えてきています。
また、他の変わったデザインのフォントを使用すると良いデザインになる場合もありますが、デザインによっては可読性が下がる可能性もあるので注意しましょう。
フォントでデザインに変化を与えたい場合は、ピンポイントで見出しなどデザインにアクセントを使用することで効果的に演出できます。
Webサイトでよく使用されるフォント
・メイリオ
Windowsに入っている標準フォント
・遊ゴシック
Windows（8以降）、Mac共通で入っているフォント
・ヒラギノ角ゴ
Macに入っている標準フォント
上述のフォントは、どのユーザーのパソコンやスマートフォンにも標準で入っているフォントです。そのため、サイトを見る環境によって差異が少ないのもメリットとして挙げられます。
配色
Webサイトの配色はベースカラー、メインカラー、アクセントカラーと大きく3つに分けられます。一般的に、それぞれの比率をベースカラー70％、メインカラー25％、アクセントカラー5％程度の割合にすると、美しい配色に仕上げることができます。
ベースカラー
ベースカラーは最も大きな面積を占める色になり、余白や背景などに用いることが多いです。一般的には白や黒、グレーなどが採用されることが多く、メインカラーの妨げにならないようカラー選定を行う必要があります。
メインカラー
メインカラーはサイトの印象を決定付ける主役の色です。ブランドカラーやコーポレートカラーがある場合にはその色を選択し、色の持つ意味や与える印象などを把握しながら色を選定します。
アクセントカラー
アクセントカラーは、メリハリをつけたい時などのアクセントに使用する場合が多く、目立つ色を使用します。お問い合わせボタンや、強調したい言葉やパーツなどに使用することで、効果的にアピールできます。
アクセントカラーは2色など何色か使用していいですが、色が増えるほど扱いが難しくなるので注意が必要です。
まとめ
今回は、デザインコンセプトについて紹介しました。
デザイン制作をする場合は、アイデアや世界観、トンマナなどを含めて、デザインコンセプトとして表現することが大切です。その際、ユーザーが読みやすく、目的の情報にたどり着き、商品などを購入できるようにデザインすることを意識します。
コンセプトやテーマが明確になることで、説得力のあるデザインが出来上がります。そのための下準備を行い、目的達成できるデザインを作成できるようにしましょう。
マトレルは、システム開発からサイト制作まで下請けに特化したWeb制作のスペシャリストです。Web以外にもパンフレット制作や動画撮影も対応可能で、クライアントが求める成果物に柔軟に対応します。代理店様や製作会社様からの依頼や、元請けとしてクライアント様からの直接発注など、幅広く対応しております。さまざまなニーズを持つお客様のお役に立てるよう、「期待を超えるクオリティ」でご提案いたします。
