Web制作

多様化するWebサイトのUIとレイアウト

2015.11.16

2017.05.25

ペンタブで作業する手元

Webサイトのレイアウトはひと昔前だと下図のようなレイアウトが一般的でした。

目的に応じたデザイン

最近は本当に様々なデザインを発見します。先進的すぎて使いにくいサイトも存在しますが、大半はサイトの目的に則しよく考えられている印象です。

Webデザインで使われるレイアウト

ソリッドレイアウト

従来通りの幅が固定されたレイアウト。一般的に最も用いられていたレイアウトです。

リキッドレイアウト

画面の大きさにより幅が可変するレイアウト。

エラスティックレイアウト

文字の大きさによってレイアウトが可変します。あまり普及していない印象です。

レスポンシブデザイン

画面の大きさでレイアウトが可変します。PC・スマホ・タブレットなどの異なるデバイスへの対応が可能。

主流のデザイン

Big UI(大きなユーザーインターフェイス)、Low Density(コンテンツを詰め込まない)、Long Page(長いページ)が最近のWebデザインの主流で 固定されたヘッダーが薄型化してきているのはユーザビリティの自然な流れです。当サイトのトップページもまさにその流れを受けています。

スクロールすることが前提に組み立てられた構成ではありますが、領域が大きくとれるので、ユーサーにとってわかりやすく伝わりやすいコンテンツ作りができます。

UI・ナビゲーションの考察

実際にWebサイト内で閲覧されているPV平均を考慮すると全ページに迷うことなくアクセスできる秀逸なナビゲーションなど必要ないのかもしれません。しかし、それでも無理なく全ページにアクセスできるサイト構成を考えずにはいられません。

カルーセル

オウンド化するコンテンツのことなども考慮するとカルーセルを利用したナビゲーションはレイアウト上の問題を解決してくれますが、隠れているメニューのクリック率が下がることが大半です。

隠れているメニューの重要度が低いからクリックされないのか隠れているからクリックされないのか次第で採用するかが採用の可否になるかと思います。しかしサイトの情報には強弱があってしかるべきなので、それはそれでありだと私は思います。

固定式左ナビ

左ナビをグーローバルと見立てて左ナビを固定します。最近のPCは横幅が広いので、もしかするとヘッダー固定よりユーザビリティが高いと言えるかもしれません。

いずれのレイアウトもデザイン次第ではモバイルの操作感を演習できるので、モバイルファーストにも則しています。

SHARE

この記事の筆者

デザイナー 若井 徳彦

デザイナー 若井 徳彦

ターゲットに合わせたUIやUX、目的を達成させるためのデザインをモットーに取り組んでいます。SEOやグロースハックとの親和性の高いデザインが求められてると感じています。

Archive

CONTACT

06-6537-9941
受付時間
9:00〜19:00
休日
土日祝日

株式会社ゼロワンアース
〒550-0012 大阪市西区立売堀2-5−41合田ビル6F

メールで問い合わせる

ホームページで成果をあげるには、
まず現状分析

反響のないホームページをあきらめていませんか?ホームページで成果をあげるためには、現状を分析し改善していく必要があります。大阪市西区の本社にて無料相談を受け付けておりますので、ホームページ制作のことでお悩みの方は上記CONTACTより、お問い合わせください。