すぐに使える！実例から学ぶwebデザインテクニック【デザイン考察 その１】
こんにちは。
スタントダイアリーのスタントです。
今回は、実際に公開されているサイトを元にすぐに使えるデザインテクニックをご紹介します。
普段のデザインに取り入れやすいように用途や効果含め解説していきたいと思いますので参考にしてみてください。
今回考察していくサイトをこちらです。
あおぞら銀行
それでは早速みてきましょう！
- 複雑なサイト構造をスッキリ整理するグローバルナビ
- イメージと内容を同時に訴求する大きめのインフォメーション
- 真俯瞰写真でコンテンツ全体へ広がりを持たせる
- 関連性とスムーズにスクロールを促す重なり画像
- レビュー風のインパクトあるメディア掲載歴
- まとめ
複雑なサイト構造をスッキリ整理するグローバルナビ
多数のサービスを展開している場合や、特集ページの中でも本来のサービスへの導線も掲載したい場合は２段に分けるとスッキリとした印象にすることができます。
ナビゲーションの可読性をよくするために背景色をつける場合も多いと思いますが、その場合「ナビゲージョンの項目数＋高さ」でナビゲーション自体の印象が強くなりメインビジュアルで伝いたいメッセージが薄れる場合もあります。
そういった場合、一方のナビゲーションを透過しメインビジュアルに一体化させることでスッキリした印象になり伝えたいメッセージの印象を弱めることがありません。
効果のまとめ
【1】機能性とメインビジュアルの訴求力を両立が可能。
【2】意味合いが異なるナビゲーションを明確に切り分けられる。
イメージと内容を同時に訴求する大きめのインフォメーション
優先度の高さが決まっている場合や１つ１つの内容をしっかり理解してもらいたい場合にはこのような「バナー＋詳細情報」を組み合わせたスライドが有効です。
メインビジュアルでスライド化し訴求する場合もありますが、１枚目に以降は見られる可能性がグンと低くなる為、しっかりと認識してもらいたい場合、別セクションを設けて訴求した方が確実にアピールすることができます。
このスライドとは別の話ではありますが、メインビジュアルの下にサービスとは別にあおぞら銀行としての注意喚起やお知らせが青い背景で１行掲載されています。
カテゴリー名をつけまとめて掲載するのではなく優先度別にしっかりと切り分けられています。
視覚的にもメインビジュアルとコンテンツ始まりを切り分けする効果があるので機能性とデザイン性が両立したデザインになっています。
効果のまとめ
【1】バナー＋詳細テキストを両方大きく表示できるのでイメージと詳細情報を同時に伝えることができる。
【2】数ではなく優先度の高い情報をメインに見せたい場合に有効。
真俯瞰写真でコンテンツ全体へ広がりを持たせる
コンテンツ右側背景に真俯瞰で撮影したイメージを並べコンテンツからあえてはみ出せさせることで空間に広がりをあたえています。
視線を外側に広げることにより下部にある3つの各ポイントに視線が集まり強調さます。
文字やコンテンツ幅小さくするのでなく、視線を広げるとこによってコントラストの強弱つけるうまい余白の使い方です。
写真の並べ方もメガネ、ハサミ、コーヒーなど普段日常にあるものとカードを組み合わせることによって「日常生活の中に自然と存在するもの」という印象を与えられます。
これは複数画像を並べるとことにより物語的・連想的を生み出す「クレショフ効果」を利用した見せ方になっています。
効果のまとめ
【1】あえてコンテンツに全体を納めないことで空間の広がりを持たせる。
【2】様々な写真と組み合わせた「クレショフ効果」を使いストーリー性を生み出す。
関連性とスムーズにスクロールを促す重なり画像
背景のイメージ画像に対してスマホ画像を少し重ねることでイメージ画像とデバイスの関連性を持たせています。
また、 重なりを持たせることで視線をイメージ画像（上）からコンテンツ内容（下）へ自然に誘導する効果もあります。
掲載ストーリーは画像＋テキストで表示するのではなく、スマホ画像として表示することで「実際の利用シーン」＋「その先にある具体的なコンテンツ内容」を想起させることができるので、内容の理解もしやすくなりスムーズに次のコンテンツへと誘導することができます。
効果のまとめ
【1】コンテンツとコンテンツの間に画像を重ねることで上から下へ自然にスクロール促すことが可能。
【2】具体的な内容を利用シーンと共に掲載することで次のコンテンツへスムーズに誘導できる。
レビュー風のインパクトあるメディア掲載歴
メディア掲載歴は実績をアピールするためにはとても有効です。
しかし、ただテキストで掲載したり掲載書籍と一緒に表示させたりだけでは「結局何が評価されて掲載されたのか」という真に知りたい部分がわからなかったりします。
そこで有効なのがあおぞら銀行さんのように「レビュー形式」の掲載する方法です。
レビューや口コミなど第三者の声はエンドユーザーがサービスを評価する時に重要な判断基準の１つになります。
その見せ方も「写真」「名前」「年齢」「職業」など詳細情報を掲載する一般的な方法ではなく、書籍の帯文のようにインパクトのある１行のコピーを掲載することでより印象に残りやすくなります。
効果のまとめ
【1】メディア掲載をただの実績で終わらせず「何が評価されているのか」を明確に伝えられる。
【2】強い一言の言葉を前面に押し出すことでしっかりと印象に残る。
まとめ
実例を元に５つのポイントをご紹介しましたがいかがだったでしょうか。
１つのサイトでもこうして１つ１つ「なぜそうなのか」「どんな効果があるのか」を紐解いてみると色々な発見はあります。
私自身、記事を書いている中で「なるほど」や「そうなのか」と改めて思う部分が多くこうした分析がとても勉強になると実感したのでこれからも続けていきたいなと思いました！
今回ご紹介したテクニックは案件でも取り入れやすい部分が多いと思うので是非皆さんも試してみてくだい！
それでは、また！
