コンセプトエリアとは、ブランドや会社のコンセプトを説明する場所です。
よくメインビジュアルの下に配置されることが多いエリアですね。
メインビジュアルでもコンセプトは伝えられます。
しかし、より詳しく言葉で伝えたい場合がありますよね。
メインビジュアルエリアでは、数行しか載せられません。
内容によっては印象が伝わった程度になります。
コンセプトやサービスの概要を伝えるのがコンセプトエリアです。
文章としてしっかり伝えることで、深く認知してもらいます。
コンセプトエリアのデザインパターン
では、さっそくコンセプトエリアのデザインパターンを解説します。
コンセプトエリアのデザインは基本的に3つに分かれます。
基本を押さえれば、デザインのイメージはしやすいでしょう。
中央にテキスト配置パターン
![](https://base91.net/wp-content/uploads/2019/04/ca2.png)
まずはシンプルに中央へ文字を配置するパターンです。
タイトルを大きくしたり装飾したり。
その下に詳しくコンセプトを文章として配置します。
上記はコンセプトのタイトルにコピーを配置しているのが良いですね。
タイトル部分は通常セクションの名前を書きます。
例えば下記の「Concept」のような形です。
![](https://base91.net/wp-content/uploads/2019/04/ca7.png)
タイトルの下に文字を入れて、コンセプトを詳細に説明します。
この形が、コンセプトエリアの基本と言えるでしょう。
また、前者にも後者にも「もっと見る」のようなボタンがありますね。
このようにボタンを置くことで、さらに深く説明することも可能です。
左に文字を寄せるパターン
![](https://base91.net/wp-content/uploads/2019/04/ca6.png)
画像が右、文字が左のパターンです。
こちらも基本中の基本となるレイアウトですね。
タイトルを大きく配置し、文章で説明しています。
ボタンが配置されているのも、変わりませんね。
![](https://base91.net/wp-content/uploads/2019/04/ca5.png)
基本的に右に画像、左にテキストと、大枠は変わりません。
ただ、画像の表現方法が異なります。
上記のように画像をずらして配置する表現も最近多いです。
2枚ずらして置くことで、デザイン性が高まります。
画像の枚数も多く見せられるので、イメージも伝えられます。
![](https://base91.net/wp-content/uploads/2019/04/ca3.png)
文章を短めにする場合もあります。
短文でコンセプトが伝わるなら、この形もありですね。
このように、左に文字、右に画像の組み合わせは多いです。
基本的に、視線が最初、左から入ることが多いためです。
ただ、全てがすべて左が文字、というわけでもありません。
右に文字を寄せるパターン
![](https://base91.net/wp-content/uploads/2019/04/ca4.png)
先程と、そんなに大きくは変わりません。
画像が左に移動しただけです。
ただ、意図としては最初に画像で印象付けたい場合に使うケースが多いです。
![](https://base91.net/wp-content/uploads/2019/04/ca1.png)
こちらは大胆にロゴ1つを配置しています。
よりブランドを記憶してもらうには良い方法ですね。
タイトルを左、文章を右に
![](https://base91.net/wp-content/uploads/2018/11/ca9.png)
画像を入れず、タイトルと文章を左右に分けます。
これも基本的なレイアウトの1つですね。
![](https://base91.net/wp-content/uploads/2018/11/ca10.png)
テキストだけで表現すると、メッセージ性が強まります。
メインビジュアルの時もそうでしたね。
画像を入れずテキストでの表現は、より強くビジョンを伝えます。
これもまた、デザインによる魅せ方の1つです。
その点、左右にタイトルと文章で分けると、文章が引き立ちます。
メッセージを読むことに集中してもらえますね。
ビジョンが深く根付いたブランドに使える表現です。
今回のミッション
なんとなく、イメージがつかめたでしょうか。
それでは、さっそく、今回のミッションに入っていきましょう。
今回のミッションは、もちろん「コンセプトエリアの作成」です。
前回作ったエリアの続きで作ってみてください。
テーマもこれまでと合わせて、1つのサイトを作っていくイメージです。
コンセプトエリアのレイアウトを作る
まずは、コンセプトエリアのレイアウトづくりからです。
コンセプトエリアの基本要素は下記の4つです。
- コピーライティング / エリアタイトル
- イメージ画像
- コンセプト文章
- お問合せボタンなど
根本的にはメインビジュアルの構成要素とほぼ変わりません。
コンセプト説明の文章が増えたくらいです。
またレイアウトパターンは紹介した通り大抵4パターンにまとまります。
- 文字コンテンツの中央寄せ
- 文字コンテンツの左寄せ
- 文字コンテンツの右寄せ
- 左右にタイトルと文章で分ける
上記の4つのイメージで作ってみてください。
もしイメージが湧かなければ今回紹介したパターンから選んでみましょう。
最初は真似だったとしても、マネを続けていれば引き出しが増えます。
引き出しが増えれば、少しずつイメージを作れるでしょう。
下記に、レイアウトを作成する動画を作ってみました。
作業の参考にしてみてください。
いくつか画像を配置するパターンで、レイアウトを作りました。
最初はざっくりで良いですので、レイアウトを作ってみてください。
奇抜なレイアウトを作るのは、慣れてからでOKです。
コンセプトエリアをデザインしよう
今度はレイアウトに沿って、デザインしていきます。
ポイントは選ぶ画像の質、そしてタイトルと文章のバランスです。
タイトルは大きめで目立つようなフォントと文字で。
そしてテキストは読みやすく、かつタイトルとのバランスを考えて配置。
デザインのテクニックとして「ジャンプ率」という概念があります。
見出しと読ませる文章の、フォントサイズの差を意味します。
ジャンプ率を調整して、最もバランスの良い「差」を探してみましょう。
先程のレイアウトでは、タイトルを36pxで文章を16pxにしています。
20pxの差がバランスとして良かったのでそのサイズに設定しました。
また作ったレイアウトも、ざっくりとした下書きにすぎません。
もし、デザイン中に、よりよいアプローチを考えたら、アレンジしましょう。
目的さえ達成できれば、レイアウトも自由なものです。
下記にデザインの風景を動画でご用意しました。
ぜひ、制作の参考にしてみてください。
参考PSD : https://startout.work/mission/photoshop/4/concept.psd.zip
使った画像は https://unsplash.com/ から頂きました。
有名なフリー素材写真サイトで、素晴らしい写真素材が手に入ります。
なお、今回はざっくり作っています。
当然、もっとデザインを加えることもできます。
ただ、今回は複雑にしすぎずに、シンプルに作ってみてください。
あとでいくらでも改良できるので、最初は完成させることが大切です。
コンセプトエリアを作ったら次に進んでください。