これからWebサイトをデザインしよう！というとき、何から始めますか？
まずデザインするにあたり、これから作成するWebサイトの性質によって、見た目を変える必要があるかと思います。
例えば、真面目な内容のサイトでカラフルでポップなデザインにしたら、見に来た人はどのように感じるでしょうか？
逆に、子供向けの楽しいページを渋い色合いで大人しいデザインにしたら、見に来た子供たちは喜ぶでしょうか？
…ちぐはぐした感じになりませんか？
このように、同じWebサイトと言えども、扱う内容・ターゲットによって、施すデザインも全然異なります。
世に出ているデザインは、それぞれコンセプトをしっかり定めた上で制作されています。
今回は、デザインにおけるコンセプトの重要性について考えてみます！
目次
正しい印象を与えるためにもコンセプトは重要
上記でも記した通り、デザインとは本来、先人たちが長い時間をかけて見出した法則があり、「意味があって使い分けられて」います。
感覚だけでむやみやたらとデザイン（配置）している訳ではありません。
逆に考えると、デザインを意味なく行えば最悪、違ったメッセージを伝えてしまいます。
デザインによって意図とは違った印象を与え、それが邪魔をして本当に伝えたいメッセージが伝わらなくなる可能性があるんですね。
デザインの仕事をするにあたり、クライアントとの意思疎通をスムーズにするのももちろん大切ですが、「エンドユーザーに正しい意図が伝わらない」という残念な現象を起こさない（＝正しいメッセージを伝える）のも仕事として重要になります。
そういう意味でも、デザインにけるコンセプトはとても重要なのです。
コンセプトって何？
デザインにおいてコンセプトが重要なのは理解できたけど、じゃあコンセプトっていったい何なの？という気持ちになりますね。
コンセプトを直訳すると「概念」です。
更にもうちょっと付け加えて言うと「全体を貫く基本的な骨格」ということを指しています。
制作者がその商品・作品に込めた意図・目的・思いなどの世界観を表しているのですね。
Webページを制作するにあたり、デザイナーはもちろん、ディレクター、コピーライター、コーダーなどいろんな人と協力して進めていくことになりますが、チームが一緒の目的地を目指していくための方向とも言えるのがコンセプトです。
コンセプトを決めるとどんないいことがあるの？
大きくは以下の4個が挙げられます。
・具体的な想定により、機能性（UI・UXデザイン）を高められる
・クライアントへ理論的な説明ができ、デザインに説得力を持たせられる
・具体的な想定を出すことにより、他との差別化を図れる
……総合すると、軸がぶれず、デザインに説得力を持たせることが出来ることが一番のメリットではないかと考えます。
ちょっと想像してみてください。
あなたがデザインの仕事をデザイナーに依頼したクライアントの立場だとします。 「このデザインはどういう意図で作成したの？」とデザイナーに質問したときに、どちらの回答をするデザイナーにお願いしたいでしょうか？
A「なんとなく、カワイイと思って」
B「子供向けの商材なので、子供が楽しい気分になるようパステルカラーを使用し、文字もひらがなを多用して子供向けということを明確にアピールし、親しみやすさを出しました！」
万が一、AもBもまったく同じデザインを出してきた場合でも、受け答えの違いでデザインに対する印象もまったく異なるのではないでしょうか。
あたながクライアントにだった場合、AとB、どちらのデザインに決めたいと思いますか？
そして「なんとなく」という理由でデザインをされていれば、クライアントからの指摘もその時の気分で「なんとなく、気に入らないから」という根拠で修正を指示することになります。
その時の気分になってしまうので、いつまで経ってもデザインの終わりは見えません。
しかしながら、Bのようにコンセプトがしっかりしていると 「子供向けという割に色が暗いから、もっと明るくできない？ひらがなを多用するのもいいけど、実際に商品を買うのは大人だから、ここは漢字にしてルビを振って欲しい」 などの具体的な修正指示を依頼することができます。
何より、デザインに対する納得感が違います。
そして方向性がしっかりしていれば、特に指示がなくても「子供向けだし、ここはもっとカワイイ画像を使ったらよりデザインとして効果的だな」などの先回りの作業や確認ができるので、仕事もスムーズにはかどるのです。
コンセプトを決める3ステップ
では、肝心のコンセプトはどうやって決めるのでしょうか？ 大きくは以下のようになります。
2. “ターゲット”（顧客、想定顧客、利用者など）を決める
3. ターゲットに与えるイメージを決める
このように、どんなユーザー（性別・年齢層・何をしている人か…etc）に、何を伝えたいか（商品を購入してもらいたいのか・ブランドを知ってもらいたいのか…etc）明確にします。
ここが曖昧になると、コンセプトも曖昧になり、デザインも目指す方向性がぶれてしまいます。
コンセプトを明確にするためにはチーム内でのすり合わせ、クライアントとのすり合わせなど、まとめるだけでも大変な作業かもしれませ。
しかし、こちらが明確に決まればデザインの説得力も増しますし、前章で申し上げた通り皆の意識が同じ方向に向くので作業もはかどります。
コンセプトをデザインにどう活かすか？
コンセプトを決めると、以下も選択肢が絞られてきます。
2. フォント
3. 色
4 装飾
5. レイアウト
コンセプトが明確であれば、コンセプトに合った世界観になるようビジュアル（画像）を選定し、フォントも雰囲気に合ったものを選び、色も効果的なものを選択することができ、デザインの目指す方向もより明確になります。
例えば、子供向けの英語教材（絵本アプリ）のランディングページを作成するとします。
耳が発達段階の小さい子供向けに、日本語・英語で読み聞かせできる絵本アプリの教材を販売したい、デザインを起こしてほしいという依頼です。
まずはコンセプトを決めます。
1. Webサイトで伝えたいことを明確にする
→ こどもの成長に役立つ、手軽な英語教材があることを認知してもらいたい、購入してもらいたい
2. “ターゲット”（顧客、想定顧客、利用者など）を決める
→ 小さい子供0～3歳のこども（を持つ、お父さん・お母さん向け）
3. ターゲットに与えるイメージを決める
→ 子供向けの英語入門・耳から慣れさせるとっかかりの教材ということで、安心・きちんとしている・教育に良い・こどもが楽しめるもの
コンセプトを決めた後の具体的な手順は「ターゲットを詳細にイメージし、そこに訴求するようにこれらの構成要素でデザインを方向付けしていく」という流れです。
1. ビジュアル（画像）
→ Webサイトを見たときにターゲットが「自分のことだ！」と認識できるよう、赤ちゃんの画像を使用する＋英語教材ということも認識してもらえるよう、英語のイメージ画像と商品であるアプリの画像を使用する。
2. フォント
→ 子供向けのたのしいアプリということを示したいので、丸ゴシックを中心に使用する。
3. 色
→ 子供向けのたのしいアプリということを示したいので、パーティーカラー使用して楽しい感じを出す。
色彩設計について詳しく知りたい方はこちらをご覧ください↓
4. 装 飾
→ 絵本アプリで使用している実際のイラスト・動画などを装飾にも使用することにより、アプリを使ったときの楽しいイメージがユーザーに伝わるようにする
5. レイアウト
→ 文字大き目・使用画像も大きく使うことで英語入門のとっかかりやすいイメージを出す。
このように、コンセプトが決まっていると、コンセプトを起点としてデザインも決まっていきます。
逆に、コンセプトがしっかりしていないと、場所によってデザインもばらつきが出ます。
ページ内において全く異なるテイストのWebサイトは落ち着きがなく、見ている方も情報の整理がしずらくなります。
このように「何を伝えたいか分からない」デザインのページは、役割を果たすのも難しいでしょう。
まとめ
制作においての話だけではなく、コンセプトを明確にすることで思考のプロセスを明示にし、前提条件を押さえておけば、 制作側とクライアントで主観や思い込みの衝突が減り、議論もずいぶんと建設的になります。
スムーズな仕事をするためにも、また、エンドユーザーに正しく意図を伝えていくためにも、デザインをする上でコンセプトというのは非常に大事な役割を果たしていることがわかります。
また、デザインに迷ったとき、コンセプトに立ち返るというのもヒントになるかもしれません。
いずれにせよ、普段から理論的にデザインをすることによって、より説得力のあるデザイン・より伝わるデザインができるようになり、Webページを作成した目的を果たすことができるようになるでしょう！
デジタルアスリート株式会社
D2C戦略部 デザイン課 デザイナー
DTPデザイナーだったが、これからはWebデザインの時代と一念発起し株式会社リスティングプラス（現・デジタルアスリート株式会社）に入社。
デザインをするときは、いかにしてメッセージを伝えるか・相手に理解してもらえるかを念頭に、タイポグラフィやレイアウトで魅せる工夫をしています。
シンプルデザインは誤魔化しが効かないからこそ難しく、奥が深く、その分面白いと感じています。
ずーーーとCentury Gothic信者でしたが、最近はDIN系も良いなと思っています。
