バリューエリアとは、ブランドをポイントごとに紹介するエリアです。
例えば「WEB制作サービス」のWEBサイトを作るとしましょう。
すると必要になるのが「このサービスの何が優れているか」の紹介です。
※ こちらのレイアウトは基本形の一例です。状況によって作り変えましょう。
スピードが優れていたり、質が優れていたり、価格が安かったり。
そのブランドがどの点で優位性があるのか伝えます。
また、自分たちができることを順に説明したりもします。
何が出来るのかサービスを具体的にリストアップし説明します。
バリューエリアの使い方は、その時々に寄るでしょう。
では、バリューエリアはどのようなデザインになるのでしょう。
ここにも、ベーシックなデザインが存在します。
スタンダードなデザインの解説
では、さっそくデザインの解説を進めていきましょう。
バリューエリアの本質は「箇条書き」とも言えます。
いくつかのメリットをピックアップして、個別に説明していく。
リストの一種とも言えなくありません。
では、どのような形が基本となるのでしょうか。
いくつかのパターンを順番に解説していきます。
シンプルに左右交互に
こちらは「自分や会社が出来ること」を紹介しています。
左右に画像とテキストを交互に配置していますね。
コンセプトの時も、同じパターンがありました。
構成要素もほぼ一緒なので、配置や演出を考える必要があります。
同じレイアウトだとメリハリがなくなるので考えて使い分けましょう。
コンセプトとバリューのデザインが同じになってはいけません。
異なるのは、ボタンが「お問合せ」じゃなく、さらに詳しい説明であること。
バリューエリアの場合「詳細説明」ページへの遷移が多くなります。
背景に画像を敷く
こちらは販売している商品を紹介しています。
単純に商品のラインナップを紹介することもありますね。
そして、背景に商品の画像を配置して、大きく商品を見せています。
ただ、何も商品を配置するだけが背景画像の使い方ではありません。
単純なイメージとして背景に画像を配置するパターンも多々あります。
このようにイメージを想起させるために画像を敷くケースもあります。
どうしようかと困った時のレイアウトとして使いやすいですね。
画像次第でいくらでも人に与える印象は変えられます。
どんなWEBサイトでも使いやすいレイアウトとデザインです。
画像をずらして置く
こうした「ずれ」を使うケースも相当増えてきましたね。
写真と文字コンテンツを左右交互に置くのは変わりません。
ただ、写真にずらして重ねているケースです。
今、WEBサイトを色々見てみると、こうしたレイアウトをたくさんみます。
例えばSTARTOUTのWEBサイトにも使われている表現ですね。
他にも、色々なWEBサイトでずらしを見かけます。
ただ最近は、ずらし方にも色々なバリエーションが増えました。
もちろん1つのパターンだけではなく、発想次第で色々ずらせます。
上記のような下にずらすパターンも良いですね。
より広く画像を魅せられるので、イメージが直感的に伝わります。
画像は小さめで「テキスト」を多用する、ずらしのパターン。
文字を上手く使うことで、より説明出来る量を増やしています。
タイトルの使い方も上手にオシャレに使われていますね。
このようにずらしパターンもバリエーションが色々です。
ぜひご自身でオシャレなずらし方を考えてみてください。
今回のミッション
なんとなく、イメージがつかめたでしょうか。
それでは、さっそく、今回のミッションに入っていきましょう。
今回のミッションは「バリューエリアの作成」です。
前回作ったエリアの続きで作ってみてください。
これまでと合わせて、1つのサイトを作っていくイメージです。
バリューエリアのレイアウトを作る
まずは、バリューエリアのレイアウトづくりからです。
バリューエリアの基本要素は下記の4つです。
- コピーライティング / エリアタイトル
- イメージ画像
- コンセプト文章
- 詳細リンクボタンなど
根本的にはコンセプトエリアの構成要素と、ほぼ変わりません。
違いは、お問合せボタンではなく詳細へのリンクボタンになったくらいです。
とは言え、必要があれば、お問合せボタンも置きます。
またレイアウトパターンは紹介した通り大抵3パターンにまとまります。
- シンプルに左右交互に
- 背景に画像を敷く
- 画像をずらして置く
上記の3つのイメージで作ってみてください。
もしイメージが湧かなければ今回紹介したパターンから選んでみましょう。
最初は真似だったとしても、真似を続けていれば引き出しが増えます。
引き出しが増えれば、少しずつ自分でイメージを作れるでしょう。
下記に、レイアウトを作成する動画を作ってみました。
作業の参考にしてみてください。
画像とコンテンツをずらすパターンで、レイアウトを作りました。
基本的にはご紹介したレイアウトが基本です。
最初はざっくりで良いですので、レイアウトを作ってみてください。
独自の奇抜なレイアウトを作るのは、慣れてからでOKです。
バリューエリアをデザインしよう
今度はレイアウトに沿って、デザインしていきます。
ここでのポイントは、基本的に「コンセプトエリアと一緒」です。
タイトルと文字のジャンプ率に気をつけましょう。
ただ今回は追加で「背景を敷くテクニック」を学んでおきましょう。
前回、動画で解説したコンセプトエリアは、背景を白にしました。
しかし、バリューエリアの背景も白だと、メリハリが無くなってしまいます。
そこで使えるのが「背景に色やテクスチャを引く」というデザインです。
バリューエリア全体に背景を敷いてメリハリをつけましょう。
すると、一気にデザインに締まりが出てきます。
下記にデザインの様子を動画でご用意しました。
ぜひ、制作の参考にしてみてください。
参考PSD : https://startout.work/mission/photoshop/5/value.psd.zip
使った画像は https://unsplash.com/ から頂きました。
有名なフリー素材写真サイトで、素晴らしい写真素材が手に入ります。
なお、今回はざっくり作っています。
当然、もっとデザインを加えることもできます。
ただ、今回は複雑にしすぎずに、シンプルに作ってみてください。
あとでいくらでも改良できるので、最初は完成させることが大切です。
バリューエリアが作れたら次に進んでください。