「ここでいい」を「ここがいい」へ。発注先探しなら比較ビズで

ホームページのレイアウト、参考になるサイトと種類を解説

最終更新日:2022年08月22日
SUGI WORK
監修者
代表 杉山茂幸
ホームページのレイアウト、参考になるサイトと種類を解説

ホームページのリニューアルを検討する際に頭を悩ませるのは、どのようなデザインを採用するかということではないでしょうか。今ではさまざまなデザインテンプレートが無料で公開されており、選択肢は豊富に用意されています。しかし、新しく見せたいからといってトレンドばかり意識すると、ユーザーにとって使いにくいデザインになってしまうこともあり得ます。ホームページで最も大切なことは、やはりユーザーが見やすく使いやすいということですから、あくまでそれを前提にデザインを選ばなければなりません。そこで、ここではホームページをリニューアルするときに参考にしたいWebレイアウトを紹介します。

参考になるWebレイアウト

今では、パソコンだけでなく、スマートフォンやタブレットのようにさまざまなデバイスに対応したWebレイアウトが求められています。

ユーザーがホームページを閲覧する方法が多様化しているわけですから、ホームページのレイアウトも、どのようなデバイスで閲覧しても見やすいことを重視しなければなりません。

では、どんなWebレイアウトを選べば良いのかということになりますが、インターネット上には参考になるレイアウトを採用したホームページが数多く存在します。そこで、参考になりそうなWebレイアウトの手法をいくつか見ていきましょう。

参考にしたいレイアウト(1)グリッドレイアウト

グリッドレイアウトは現在主流のWebレイアウトであり、文字や画像などを一定の規則をもとに格子状に配置しているのが特徴です。画面の幅に応じて各要素が変化して表示されるため、整然としたイメージを与えます。

WordPressのテンプレートの多くもグリッドレイアウトを採用しているように、パソコンだけでなく、スマートフォンやタブレットにも対応しやすいサイトを作るのに有効です。なお、グリッドレイアウトにはいくつか種類があるので、以下に詳しく紹介しましょう。

リキッドレイアウト

リキッドレイアウトとは、横幅を100%として、他の要素を相対的にパーセンテージで指定することができるレイアウトです。

横幅に合わせて、文字や画像だけでなくコンテンツ全体の位置や幅が柔軟に変化するため、パソコン、スマートフォン、タブレット、いずれのデバイスで閲覧してもユーザーが見やすいというメリットがあります。

たとえば、「楽天市場」のサイトがリキッドレイアウトを採用した良い例です。画面の左右にあるナビバーが固定されており、中央に表示される商品などのレイアウトが画面の幅に応じて変化するようになっています。

参照元:楽天市場

フレキシブルレイアウト

フレキシブルレイアウトは、各要素をパーセンテージで指定できるという点ではリキッドレイアウトと同じですが、最大幅と最小幅を個別に指定できるところが大きな特徴です。

パソコンなどの大画面で見た時にページの左右に空白ができ、スマホなどの小さな画面で見た時に横スクロールによって表示されるようになります。レイアウトが崩れるのを防ぐのに有効です。フレキシブルレイアウトの例として、Amazonの公式サイトがあります。

参照元:Amazon公式サイト

レスポンシブWebデザイン

これも画面の幅に応じてコンテンツも変化するレイアウトですが、画面のサイズによって、コンテンツの一部を消したり表示させたりといったことができるのが大きな特徴です。

画像サイズやデザインを自由に調整できるため、現在の主流のWebレイアウトとなっています。たとえば、東京都内の銭湯を紹介する「東京銭湯」というサイトがレスポンシブWebデザインを巧みに使った良い例です。

参照元:東京銭湯

可変グリッドレイアウト

可変グリッドレイアウトとは、一定のグリッドに合わせてタイル状にカード型の要素を配置し、画面の幅が変わるたびに要素が追従してコンテンツが再配置されるレイアウトです。

難しく聞こえるかもしれませんが、可変グリッドレイアウトの実装が簡単にできるjQueryなどのプログラミングが多数公開されています。例としては、「NHKスタジオパーク」の公式サイトが、この可変グリッドレイアウトを採用しています。

参照元:NHKスタジオパーク

参考にしたいレイアウト(2)フリーレイアウト

フリーレイアウトとは、画面の幅にかかわらず、固定したページ幅で要素を配置するレイアウトです。

ページの幅が決まっているため、画面の幅が変更された時にレイアウトの崩れを気にする必要がなく、いつでも固定したレイアウトで表示できるという利点があります。情報量の多いサイトによく用いられるレイアウトです。

ただ、スマホなどで見た時に小さな画面に多くの情報が縮小されて表示されるので、ユーザビリティを考えると問題があります。

国土交通省や財務省など官公庁のホームページが、フリーレイアウトを使用した例です。

参考にしたいレイアウト(3)カラムレイアウト

ページを「カラム」という列で区切ったレイアウトです。ニュースサイト、ブログ、Webマガジンなどさまざまなホームページに用いられています。

ページに区切りのないのが1カラムレイアウトで、コンテンツとサイドナビの2列配置にしたものが2カラムレイアウト、コンテンツを中央に両サイドにサイドナビを配置したものが3カラムレイアウトです。

カラムの数はさらに増やすことも可能ですが、画面内に収めて配置するには3カラムが限界でしょう。また、3カラム構成でも中央のメインコンテンツに十分な幅が取れなくなってしまいやすいため、本当に3カラム構成がベストなのか検討し直すことをおすすめします。

最近の主流は1カラムレイアウトです。1カラムレイアウトを使ったレイアウトにもいろんなパターンがあります。たとえば、画面全体にコンテンツを表示させるのがフルスクリーンレイアウトです。

また、スクロールだけでページを遷移させずにコンテンツを切り替えられるものをシングルページレイアウトと言います。

さらに、スクロールするごとにコンテンツがそれぞれ異なる速さで動いて視差を生み、それによって立体感や奥行きを演出できるパララックスレイアウトもよく使われています。

パララックスレイアウトがどのようなものかは、東京スカイツリーの公式サイトを見るとよくわかります。

レイアウトを考えるときの注意点

レイアウトを考える際は、まず他のサイトに興味を持つことが大切です。斬新なレイアウトだなと気になった時は、どのようなCSSを使用しているのかチェックしてみましょう。

CSSは、サイト上で右クリックで「要素を検証」を選ぶだけですぐにチェックできます。それを参考に自社のホームページにも取り入れてみてください。

ただし、斬新なレイアウトだからといって、あれこれ盛り込みすぎるとかえってコンテンツが見にくくなってしまうためNGです。あくまでユーザーが見やすいことを第一に、シンプルで使いやすいレイアウトを心がけてください。

トレンドとユーザビリティのバランスが重要

Webレイアウトにもトレンドがあり、毎年のように新しい斬新な手法が生まれています。上記で紹介したレイアウトを参考に、最新のトレンドを様々なサイトをを通してチェックしましょう。

ホームページ作成で押さえたいトレンド12選【カンタン解説】では最新のトレンドをまとめているので、手っ取り早くデザインのトレンドをチェックしたい方は参考にしてください。

ただし、レイアウトに凝り過ぎると、かえって見にくくなることもあります。ホームページの目的とターゲットを再確認し、ユーザーの見やすさを念頭において検討してください。

ホームページの目的とターゲットを踏まえた適切なレイアウトはなかなか素人では判断が難しいでしょう。そのため、ホームページ制作会社に一度相談するのも一つの手です。

業界知識が豊富なため、適切なアドバイスが得られます。弊社が運営しているマッチングサイト『比較ビズ』では様々なホームページ制作会社が登録しています。

どんなサイトを作りたいのかWeb上の相談フォームに入力すれば一括で複数の制作会社に相談することが可能です。

無料で利用できますし、自分の足で一社一社業者を選ぶ手間も省けます。「専門業者に話を聞いてみたい」と考えている方でしたら、一度使ってみてはいかがでしょうか。

監修者の一言

ホームページを作成しようと思った際に最も悩ましいのはデザインとレイアウトではないでしょうか。デザインを決めようにも、全体のレイアウトや仕様を決めないとデザインも定まらず苦慮している方も多いのではないでしょうか。現在のトレンドは記事で紹介したとおりですが、やはりスマートフォンに対応しているかどうかが重要なポイントになってくると思います。

私のお客様でもパソコンは二の次でとにかくスマートフォン向けの見栄えを良くしたいという相談はよく持ち込まれています。スマートフォンとパソコンのレイアウトの2つが破綻しないレイアウト設計を取り入れることが現代のWEB制作においてとても重要なポイントになってくるのではないでしょうか。

SUGI WORK
代表 杉山茂幸
監修者

山形県出身。埼玉県越谷市と山形県上山市の2拠点で活動中のフリーランス。開業5年目でSUGI WORK代表。国内・海外法人から行政案件まで経験。WEB制作をはじめ、デザイナー・エンジニア・出張撮影・ドローン空撮・取材・自社メディア運営など幅広い分野で活動中。中小企業の課題解決が得意。

ホームページ制作・デザインを一括見積もりで発注先を楽に探す
比較ビズへ掲載しませんか?

一括見積もりで発注先を探す