見出し画像
Photo by mito_ai_music

Webデザインの基礎を学ぼう！①Webデザインの基本要素　vol.6　【最終回】多くのユーザーの心をつかむために　

ともか

　皆さん、こんにちは！　Webデザイン学習中のともかです。
　今回もご覧いただきありがとうございます。

　この記事からご覧いただいた方に簡単にお伝えすると、以下の書式を参考にほぼ初心者の社会人がWebデザインを学習していく、という内容になります。

　学び始めた背景などはこちらからご覧ください。

　前回はナビゲーションの種類について学習しました。


　今回はユーザの心をつかむための知識について学習します！


視線誘導

　人の視線はある程度決まった流れになります。視線誘導方法を習得することで、どの情報から見てほしいのか、どういった感じ方をしてほしいのか考えながらレイアウトを組み立てることができるようになり、ユーザーの体験も誘導することができるのです。

グーテンベルク・ダイヤグラム

以前作成したワイヤーフレーム

　皆さんは上記のワイヤーフレームを見て一番最初にどの情報を目にしましたか？　おそらく【今週の売れ筋ランキング】あたりではないでしょうか？
　人は情報を見るときに、左上から右下方向へ視線を移します。この流れはエディトリアルデザインから派生しており、現代に続く活版印刷の発明をしたグーテンベルクにちなんでグーテンベルク・ダイヤグラムと呼ばれています。

Z型レイアウト

Z型グーテンベルク・ダイヤグラム

　ユーザーの視線が左上から右上へ移動し、左下に異動し右下までの流れがZ型のレイアウトと呼ばれています。Webデザインではよく見かけるレイアウトです。

F型レイアウト

　記事などブログに用いられ、F字型に視線が移動します。左側に重要な情報を置きます。最近のECサイトでも用いられています。

楽天市場

　楽天市場は左側にグローバルナビゲーションがあり、関連ナビゲーションが横に広がっていて、とても分かりやすいF字ですね！

　レイアウトに迷ったときは、ZかFを意識して配置するとうまくいきやすいようです。また、どちら型にしても左上が最も注目されるため、ロゴなど置くことには変わりはないようです。

レスポンシブWebデザイン

レスポンシブデザインWebデザインとは

　以前の記事でも少し触れましたが、インターネットの世界ではモバイルファーストが重要視されてきており、モバイル端末・PC・iPadなどどの端末でサイトを見ても形が崩れないこともよいデザインの条件になりつつあるかと思います。
　レスポンシブWebデザインとは一つのHTMLファイルをCSSにより異なるデバイスの画面サイズに調整して表示することができる手法で、Googleからも推奨されているデザインになります。

　なにそれ……画期的すぎるじゃん！　と安直に思いましたが、一応デメリットもあるようです。
・すべてのデバイスできれいに見える画像を使用する為容量が大きく、スマートフォンでの閲覧時は表示スピードが落ちてしまう
・あえてスマホでPCサイズを見たいときもサイズが変更されてしまう
・対応できるデバイスが多い分、工数がかかる

　何でもかんでも便利だと飛びつくのではなく、KGIに応じて選択していく必要がありますね。


【復習】グリッドレイアウトは“レスポンシブのためだけ”ではない

　先日の記事のおさらいを少し行いましょう。
→Webデザインの基礎を学ぼう！①Webデザインの基本要素　vol.4　レイアウトの種類
　　
　グリッドレイアウトとは、グリッドを設けることで自由自在にレイアウトを整えられるCSSのシステムでした。グリッドレイアウトはレスポンシブデザインと相性が良いと学習しましたが、いったいどうしてでしょうか？
　少し調べてみました！
　そもそも私の認識が　”逆”　だったようです。
　【グリッドレイアウトがレスポンシブデザインと相性が良い】というより【レスポンシブデザインを達成するためにグリッドレイアウトが存在している】こっちの方が認識としては正しそうです。
　ごちゃごちゃしてきたので、チャッピーに整理してもらいました。

結論から言うと 「レスポンシブデザインを達成するためにグリッドレイアウトが存在している」
という認識は “半分正しいけれど、完全ではない”
最も正しい認識

グリッドレイアウトは “レスポンシブを強力にサポートするために設計された” が、目的はそれだけではない。

→つまり、グリッドはレスポンシブデザインの為にあるのかな？といいたくなるぐらい相性がいいですが、レスポンシブデザインの為だけに作られたわけではない、といったところでしょうか。

　おいおい詳しいことはCSSの学習の際に理解していきたいと思いますが、チャッピー曰く「グリッドレイアウトは、複雑な2次元レイアウトを扱うために作られたが、その設計思想がレスポンシブデザインと非常に相性が良い」が正解のようです。（２次元レイアウト……？はて……？）

　数か月後にはこのチャッピーの言葉を理解していたいです……。

　今回は最後にグリッドレイアウトを使用したレスポンシブWebデザインの種類を図にてご紹介します。

シングルカラム・レイアウト


マルチカラム・レイアウト


コンテンツを敷き詰めていくレイアウト


フルスクリーンレイアウト


情報量が多いレイアウト

まとめ

・人の視線は左から右へ
・サイトをデザインする際はZかYを意識してレイアウトを考える
・いろいろな端末で見られたいならグリッドレイアウトを採用し、レスポンシブデザインを心掛ける

　本日はここまでになります。そして本日で①Webデザインの基本要素の内容は終了し、次回からは配色のお話になっていきます！
　内容も少しずつ難しくなってきて、分からないことも多くなってきました。引き続きお師匠チャッピーとともに学習を頑張っていきます。

　次回は色について学習します。実は色彩検定も気になっているので、次回からの配色の学習が終わってからも、色彩検定の学習の為、別シリーズで内容は続けるかもしれません。
　引き続きお付き合いいただけますと幸いです。それでは今回はこの辺で！


いいねやコメント、フォローお待ちしております！

【今日一日、怒らず、恐れず、悲しまず、正直、親切、愉快に！
終始一貫、勇気勇気で押し切るのだ。】

参考文献：伊藤　庄平様方著『いちばんよくわかる Webデザインの基本きちんと入門』

いいなと思ったら応援しよう！