すぐに使える！実例から学ぶwebデザインテクニック【デザイン考察 その１】
こんにちは。
スタントダイアリーのスタントです。
今回は、実際に公開されているサイトを元にすぐに使えるデザインテクニックをご紹介します。
普段のデザインに取り入れやすいように用途や効果含め解説していきたいと思いますので参考にしてみてください。
今回考察していくサイトをこちらです。
あおぞら銀行
それでは早速みてきましょう！
- 複雑なサイト構造をスッキリ整理するグローバルナビ
- イメージと内容を同時に訴求する大きめのインフォメーション
- 真俯瞰写真でコンテンツ全体へ広がりを持たせる
- 関連性とスムーズにスクロールを促す重なり画像
- レビュー風のインパクトあるメディア掲載歴
- まとめ
複雑なサイト構造をスッキリ整理するグローバルナビ
多数のサービスを展開している場合や、特集ページの中でも本来のサービスへの導線も掲載したい場合は２段に分けるとスッキリとした印象にすることができます。
ナビゲーションの可読性をよくするために背景色をつける場合も多いと思いますが、その場合「ナビゲージョンの項目数＋高さ」でナビゲーション自体の印象が強くなりメインビジュアルで伝いたいメッセージが薄れる場合もあります。
そういった場合、一方のナビゲーションを透過しメインビジュアルに一体化させることでスッキリした印象になり伝えたいメッセージの印象を弱めることがありません。
効果のまとめ
【1】機能性とメインビジュアルの訴求力を両立が可能。
【2】意味合いが異なるナビゲーションを明確に切り分けられる。
イメージと内容を同時に訴求する大きめのインフォメーション
優先度の高さが決まっている場合や１つ１つの内容をしっかり理解してもらいたい場合にはこのような「バナー＋詳細情報」を組み合わせたスライドが有効です。
メインビジュアルでスライド化し訴求する場合もありますが、１枚目に以降は見られる可能性がグンと低くなる為、しっかりと認識してもらいたい場合、別セクションを設けて訴求した方が確実にアピールすることができます。
このスライドとは別の話ではありますが、メインビジュアルの下にサービスとは別にあおぞら銀行としての注意喚起やお知らせが青い背景で１行掲載されています。
カテゴリー名をつけまとめて掲載するのではなく優先度別にしっかりと切り分けられています。
視覚的にもメインビジュアルとコンテンツ始まりを切り分けする効果があるので機能性とデザイン性が両立したデザインになっています。
効果のまとめ
【1】バナー＋詳細テキストを両方大きく表示できるのでイメージと詳細情報を同時に伝えることができる。
【2】数ではなく優先度の高い情報をメインに見せたい場合に有効。
真俯瞰写真でコンテンツ全体へ広がりを持たせる
コンテンツ右側背景に真俯瞰で撮影したイメージを並べコンテンツからあえてはみ出せさせることで空間に広がりをあたえています。
視線を外側に広げることにより下部にある3つの各ポイントに視線が集まり強調さます。
文字やコンテンツ幅小さくするのでなく、視線を広げるとこによってコントラストの強弱つけるうまい余白の使い方です。
写真の並べ方もメガネ、ハサミ、コーヒーなど普段日常にあるものとカードを組み合わせることによって「日常生活の中に自然と存在するもの」という印象を与えられます。
これは複数画像を並べるとことにより物語的・連想的を生み出す「クレショフ効果」を利用した見せ方になっています。
効果のまとめ
【1】あえてコンテンツに全体を納めないことで空間の広がりを持たせる。
【2】様々な写真と組み合わせた「クレショフ効果」を使いストーリー性を生み出す。
関連性とスムーズにスクロールを促す重なり画像
背景のイメージ画像に対してスマホ画像を少し重ねることでイメージ画像とデバイスの関連性を持たせています。
また、 重なりを持たせることで視線をイメージ画像（上）からコンテンツ内容（下）へ自然に誘導する効果もあります。
掲載ストーリーは画像＋テキストで表示するのではなく、スマホ画像として表示することで「実際の利用シーン」＋「その先にある具体的なコンテンツ内容」を想起させることができるので、内容の理解もしやすくなりスムーズに次のコンテンツへと誘導することができます。
効果のまとめ
【1】コンテンツとコンテンツの間に画像を重ねることで上から下へ自然にスクロール促すことが可能。
【2】具体的な内容を利用シーンと共に掲載することで次のコンテンツへスムーズに誘導できる。
レビュー風のインパクトあるメディア掲載歴
メディア掲載歴は実績をアピールするためにはとても有効です。
しかし、ただテキストで掲載したり掲載書籍と一緒に表示させたりだけでは「結局何が評価されて掲載されたのか」という真に知りたい部分がわからなかったりします。
そこで有効なのがあおぞら銀行さんのように「レビュー形式」の掲載する方法です。
レビューや口コミなど第三者の声はエンドユーザーがサービスを評価する時に重要な判断基準の１つになります。
その見せ方も「写真」「名前」「年齢」「職業」など詳細情報を掲載する一般的な方法ではなく、書籍の帯文のようにインパクトのある１行のコピーを掲載することでより印象に残りやすくなります。
効果のまとめ
【1】メディア掲載をただの実績で終わらせず「何が評価されているのか」を明確に伝えられる。
【2】強い一言の言葉を前面に押し出すことでしっかりと印象に残る。
まとめ
実例を元に５つのポイントをご紹介しましたがいかがだったでしょうか。
１つのサイトでもこうして１つ１つ「なぜそうなのか」「どんな効果があるのか」を紐解いてみると色々な発見はあります。
私自身、記事を書いている中で「なるほど」や「そうなのか」と改めて思う部分が多くこうした分析がとても勉強になると実感したのでこれからも続けていきたいなと思いました！
今回ご紹介したテクニックは案件でも取り入れやすい部分が多いと思うので是非皆さんも試してみてくだい！
それでは、また！
縦横比（アスペクト比）別で見るそれぞれの印象と活用法（3:2・4:3・16:9・5:5・縦長）
こんにちは。
スタントダイアリーのスタントです。
今日は、写真の比率（アスペクト比）についてお話したいと思います。
皆さんは何かしらのイメージ写真や説明写真を挿入する際に「どのような比率で見せるのがベスト」なのかを考えたことがありますか？
恥ずかしながら私は「縦」か「横」かくらいであとはテンプレ任せ。
比率についてあまり深く考えていませんでした。
ですので、この機会にもう少し深く考えてみました。
今回の記事はこのような人におすすめです。
- 何を基準に比率を決めていいかわからない
- 用途に応じて比率を使い分けられない
- いつもなんとく比率を決めてしまっている
では、代表的な比率を中心に意味や効果を説明していきたい思います。
写真比率3:2
普段、私たちが見ている「景色」に最も近い比率です。
【ポイント】
- どんな場面でも違和感がなく収まるので安定感のある比率。
- 人間の視覚に最も近い比率なので写真全体の印象をそのまま伝えたい場合はこの比率がおすすめ。
【主な利用シーン】
- 不動産関連の施工事例や会社の外観など情景含めをそのまま伝いたい場合。
参考サイト
写真比率4:3
被写体を縦横均等に収めることが構図です。
【ポイント】
- 3:2よりも横幅が狭いので不要な要素を除外できる。
- 左右の狭くなることで空間が均等に近くなり主役の被写体がある場合3:2より強調しやすい。
【主な利用シーン】
- 商品写真など被写体を強調したい場合。
- 情景写真でも被写体に明確に主張したい場合。
参考サイト
写真比率16:9
ワイドに情景を映し出せる構図。
【ポイント】
- 縦幅が狭くなることで余計な情報が減り被写体が強調される。
- 映画のスクリーンを見ているようなダイナミックな印象に。
- 要素がすくないと単調で物寂しくなる場合がある。
【主な利用シーン】
- 壮大さやストーリー性を出したいキービジュアル。
- 風景などダイナミックに表現したい場合。
- 文字が入る前提のバナーなど。
参考サイト
写真比率5:5
インスタグラムなどでも採用されている比率。
3:2を「日常の情景」とするなら5:5（スクエア型）は「非日常」を感じさせて構図と言ってもいいかもしれません。
【ポイント】
- 縦横の概念がなく均等な空間を作れるため、主役の被写体を強調して写すことに向いている。
- 被写体を真ん中におく「日の丸構図」とも相性が良い。
- 情景写真でも被写体の明確な主張は4:3よりも更に強い。
- 様々な要素を入れ込むのは苦手な構図。
【主な利用シーン】
- イメージを重視して伝えたい場合。
参考サイト
縦写真
通常人間が見ている景色と違う切り取り方なので「新鮮な視点」を与えられる構図。
【ポイント】
- 横の要素を制限することで被写体を際立たせる。
- 被写体の個性を強め新鮮な印象を与えられる。
【主な利用シーン】
- 人材紹介などで人の個性を強調したい場合。
- 非日常的な印象を与え新鮮な感覚で見てもらいたい場合。
参考サイト
まとめ
それぞれの比率の印象や効果を知っておくと、考える基準の1つになるので無駄な選択や思考をしなくてよくなるなと感じました。
また、様々なデザインを見て勉強する際もこういった視点で比率を見てみるとより質の高い考察ができ「写真の見せ方」「伝え方」も一緒に勉強することができますね！
それでは、また！
WEBデザインをグッと良くするコツと考え方（デザインの重心編：その2）
前回の「デザインの重心編：その1」ではデザインのバランスが崩れて見える原因の１つとして「重心」についてお話ししました。
しかし、実際自分のデザインの重心がとれているかどうかを確認するには経験や知識も必要なのですぐには難しいところもあります。
ですので、今回は実際の素敵なデザインを元に実際どのように重心をとっているのかを具体的に見ていきたいと思います。
それでは早速見ていきましょう。
4カラム階段状のレイアウト
ベクスト株式会社
階段状にすることで項目ごとにステップを踏み進んでいくということを視覚的に訴求できるデザインです。
また、右肩上がりのイメージは日本人に馴染みがあり「成長していく」という部分とも相性がいいですね。
どこで重心をとっているのか？
- 左上の見出し
- 水色の背景色
左上の見出し
階段状のレイアウトは左上のスペースができるので、そこを埋めることでグッと安定感が増します。
これは階段状のレイアウトの角度が急なほど効果を発揮します。
水色の背景色
階段状の起伏あるレイアウトに水平な背景色を敷きまとめてしまうことで「水平」という印象が強くなり安定感のある印象になります。
ちょっと話がそれますが、見出しの下のリード文が少し背景にかかっているのもポイントです。
背景色を敷くことで見出しコンテンツが分離し関連性が薄れてしまう為、少し引っ掛けることで関連性があるということが印象付けられます。
片側に背景色があるスライド
ミュージッククリエイターマガジン BIG UP!zine
右側だけに強めの色で背景色を敷き記事も少し見切れるようにすることでスライドの方向性を自然に強調できるデザインです。
どこで比重をとっているのか？
- 左上の見出し
- 左下のスライドボタン
左上の見出し
このようなデザインの場合、見出しを真ん中に配置したとすると「見出し」「左側の背景の切れ目」「一番左の記事」と階段状になりガタついて見てしまうので、左揃えにした方がまとまりがよくなるのはもちろん横への広がりも印象づけられるのでスライドするコンテンツとも相性がいいです。
左下のスライドボタン
ただスペースがあるから配置してあるわけではなく、見出しが左揃えのであるからこそそこからまっすぐ自然な視線移動で目に入る機能面も考慮した配置です。
今回紹介はしませんでしたが、このサイトではコンテンツ始まりで左側だけに強めの色で背景色敷いています。サイトデザイン全体で見ると「上部で背景色を左側」「下部で背景色を左側」と左右バランス良く配置しているのも重心が取れて見えるポイントの１つだと言えます。
不揃いなコンテンツの組み合わせ
横浜スポーツタウンアクセラレータ
今主流のあえて崩すブロークングリットレイアウトのデザインです。
適度な違和感を与えることでワクワクするような印象を与えられます。
どこで比重をとっているのか？
- 上下逆のレイアウト
片側のデザインだけ見ると整列されていない為崩れた印象になりますが、レイアウトを上下逆にし、右側に配置することで対称性が生まれ動きのある印象を保ちつつ左右バランスの取れたデザインになっています。
このように崩したレイアウトは揃えるところも作っておかないとただバラバラ印象になるので注意が必要です。
まとめ
- 背景を敷くことでバランスを取る方法もある。
- 一見不揃いなレイアウトでも繰り返すことで上下or左右対称にすることで重心が取れたデザインになる。
- 重心は一部分だけではなく、デザイン全体で取る場合はもある。
WEBデザインをグッと良くするコツと考え方（デザインの重心編：その1）
デザインをしている時にこのように感じたことはありません？
- 「どこにどのように配置するか迷う。」
- 「なんかパッとしない。バランスが悪く感じる。」
私はよ〜〜くありました！今もあります！
そういう場合解決方法の１つとして「デザインの重心」を意識して考えて見るといいかもしれません。
というのも、人は知らず知らずのうちに重力を意識し物事を見てしまいます。
例えばすごく傾いた物や無作為に積み上がった物などを見ると、
「崩れそう・倒れそう」と感じたり、左右均等な物を見ると「安定感がある」など。
これはwebデザインにもあてはまることで違和感の原因になっている場合があります。
今回は「デザインの重心編」の最初としてwebデザイン初心者の方でも理解しやすいスタンダードな2カラムレイアウトを使い「重心がずれたことによる違和感」と「その原因と改善案」を説明していきたいと思います。
重心がずれた2カラムレイアウトの例
こちらのレイアウトの重心が崩れている理由は大きく2つです。
- 2カラムにレイアウトに対してタイトルとボタンが中央寄せ
- タイトルに対してボタンが大きすぎる
もう少し詳しく説明すると、
【1】2カラムにレイアウトに対してタイトルとボタンが中央寄せ
中央寄せのテキストエリアはシンメトリー（左右対象）な印象を与えるのに対して、右側だけに写真があると「右に傾いている」という印象になり違和感がでてしまいます。
中央寄せは左寄せに比べると注目を集める効果は高いですが、その分「中心はここだ！」という主張が強くなるので写真とのバランスも際立ってしまいます。
（中央寄せでも重心がとれる方法はありますがそれはまた今後ご紹介します）
【2】タイトルに対してボタンが大きすぎる
こちらはテキストの部分のみ見たとしてもタイトルに対してボタンが大きすぎることで重心が下がって見え、ぼってりした印象になってしまいます。
重心とは別ですがそもそもボタンは一番見せたい要素ではないですよね。タイトルと本文が主役なので優先順位にはっきりさせた上でバランスが取れるようにしないといけません。
2カラムレイアウトの改善案
先ほどの【1】【2】を修正した案になります。
左寄せにすることでテキストと写真が左右にしっかり分かれ重心のとれた印象になりました。
またタイトルを少し大きくしその分ボタンを小さくすることでトータル的にバランスが良くなり自然に読みやすくなりました。（テキストエリア内での優先順位を明確にする意味も含みます）
ごく普通の左寄せレイアウトで「結局普通のこれ？」と感じる方もいると思いますが、この「自然に読める」ことが大事で、しっかりと理由がありこの定番の形が出来上がっているということの理解が大事だと思います。
まとめ
- 重心をとる目的は「自然」に「違和感」なく内容を理解してもらうこと。
- 重心は一部だけを見るのではなく全体で意識すること。
今回は始めなので重心についての概要に近い内容でしたが、次回「デザインの重心編：その2」はより実践的なお話ができればと思います。
商用利用もOK！クレジット表記もなしのハイクオリティな無料イラスト素材と使用例
イラストがあったらとは思うのに、
「イラストは書けない」「自分で作ってもイマイチ」「工数的に時間がない」など困る事がよくあります。
そんな時に使える素材と使用例をご紹介します。
商用利用可で無料で使えるハイクオリティな素材紹介
商用利用可でクレジット表記もなし。しかも無料というかなりありがたい素材サイトをご紹介します。
Delesign
カラーリングの変更も自由に行うことが可能で編集の手間が省けます。
ビジネスシーンからプライベートまで様々なイラストがあるので組み合わせ次第で色々汎用性がありそうです。
Isometric
イラストの角度が統一されているので、ポップなイメージを持たせつつ統一感が生まれ引き締まった印象も与える事ができると思います。
イラストの数は少ないですが随時アップデートしていると思います。
humaaaans
人間の「頭」「体」「足」などパーツごとにカスタマイズできるイラストサイトです。
人にこだわりたい場合には様々なパターンが作成できるので重宝しますね。
ダウンロードは「Get the Library」より。
使用例
上記で紹介した「Delesign」を使っていくつか相性の良さそうなレイアウトを作成してみました。
横に並べて使用する
無理に境界線や区切りをつけなくても整列されたイメージが保てます。背景色も適度なラフさがあるので硬くなりすぎず意図的な余白とも相性が良さそうです。
※文言の量によっては2カラムにして並べるなどしてバランスを取ると良いと思います。
イラストのパワーをそのまま活かす
イラストのクオリティーが高いので左右に並べただけでもメッセージ性が強い印象になります。テキストとイラストをはっきりと左右に区切らずテキストを少しイラストに引っ掛けてあげると空間全体をつかった伸びやかな印象を与えられます。
装飾的にイラストを使う
いい意味で抽象的なので、いくつか配置するとストーリー性のある印象を演出できます。コンテンツの導入などに使えそうですね。
まとめと注意点
- イラストは言葉にできない部分を補填したり想像されるもので言葉が主役であることは忘れてはいけません。
- イラストは汎用性はありますが言葉とのリンクは必須です。全く内容と合わなければ違和感が生まれます。
