HTMLレイアウトはたった5つの型でOK!【サンプルあります】

 

HTMLのレイアウトをどうすればいい?
サンプルやテンプレートがあればそれに沿って作成していきたいなあ。

と思ったことはありませんか?

このようなお悩みを解消するため、今回はレイアウトを考える上でおさえておくべき5つの型」をお伝えします。

この内容を習得する事で、簡単に見栄えのよいサイトレイアウトが構築できますよ。

HTMLレイアウトはたった5つの型をおさえればいい

サイト作成する上でまず初めに考えなければいけないものがレイアウト。レイアウトとはユーザーが見やすく使いやすいように設計する事です。

世界中には多くのサイトが存在しておりますが、たった5つの型だけをおさえておけばもうレイアウトに悩むことはありません。

なぜなら、多くのサイトがこれからご紹介する5つの型に沿って構築されているからなのです。

では5つの型のどれを選べばいいかというと、作成するサイトの「特徴」をから選びます。5つの型にはそれぞれの特徴がありますので、その特徴を合わせてご紹介いたします。

2カラムレイアウト

2カラムレイアウトとは2列に並んだレイアウトの事です。

2カラムレイアウトの特徴

2カラムはコンテンツ量の多いサイトに起用される事が多いです。

なぜなら、ユーザーがサイトを見る時、Zの法則に沿って見ていく傾向があるからです。ヘッダーを見て、次にメインを左から右へと視線がうつっていきます。その傾向をうまく取り入れた形がこの2カラムです。

主に、ニュースサイトやブログなどかあります。実際に参考サイトを見ていきましょう。

参考サイトその1(右側にサブコンテンツ)

metaps

https://www.metaps-payment.com/

MEMO
メインを左側にサイドを右側に配置しています。多くのサイトが2カラムを採用しており、右側にサブコンテンツをレイアウトしています。
参考サイトその2(左側にサブコンテンツ)

株式会社 ユナイテッドアローズ

https://store.united-arrows.co.jp/shop/glr/

MEMO
サイドを左側に、メインを右側にレイアウトしてます。サイトを訪れた人が知りたい情報をすぐに得る事できるように、左側に検索欄がレイアウトされてます。Zの法則をうまく利用してますね。

2カラムレイアウトのサンプル

2カラムのサンプルです。このように表示されます。

↓HTML↓

↓CSS↓

3カラムレイアウト

3カラムレイアウトとは3列に並んだレイアウトの事です。

3カラムレイアウトの特徴

3カラムは2カラムよりもコンテンツ量の多いサイトに起用される事が多いです。

こちらもZの法則をうまく利用した形になっております。

左側にはサイトの目次や検索欄をレイアウトし、中央にはメインコンテンツや最新情報などを、右側にはサブで伝えたい内容をレイアウトするのが一般的です。

Yahoo!JAPANなどがこのレイアウトを採用しております。実際に参考サイトを見ていきましょう。

参考サイト

ガンコ本舗

http://www.gankohompo.com/

MEMO
中央には一番伝えたい内容をレイアウト。左側には商品が検索できるようにして、右側にはサブコンテンツであるニュース&トピックスをレウアウトしてます。このようにコンテンツ量の多いサイトは3コラムレイアウトを採用するといいでしょう。

3カラムレイアウトのサンプル

こちらは先ほどの2カラムにサブを追加しました。なので、2カラムのHTML/CSSに追加で対応すれば大丈夫です。

↓HTML↓

↓CSS↓

このようにサブを追加しただけで3カラムになります。

合わせて、CSSにはorderを追加しました。左から順番に1、2、3となります。なので、メインのCSSにはorder: 2;サイドのCSSにはorder: 3;をそれぞれ追加する事で、簡単に3カラムにする事ができるのです。

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

フルスクリーン型のレイアウトとは、メインビジュアルに画面いっぱいにレイアウトする事です。サイトを訪れた時に画面いっぱいに画像や動画が表示されるサイトは、このフルスクリーン型を採用してます。

フルスクリーン型レイアウトの特徴

フルスクリーン型は画像や動画などをインパクトに伝えるとこができます。

そのため、ホテルや工務店などのサイトで起用される事が多いです。

参考サイト

佳ら久

https://www.gora-karaku.jp/

MEMO
写真で良さが伝わるサイトには効果的です。多くの情報に触れるとサイトユーザーは困惑する傾向にあるので、シンプルに伝えたい内容がある場合は、フルスクリーン型を採用するといいでしょう。

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

↓HTML↓

↓CSS↓

2分割レイアウト

分割レイアウトとは、画像や動画などのコンテンツを画面いっぱいにレイアウトして横並びに表示させる事です。

2分割レイアウトの特徴

2つのコンテンツ内容を同時に同ボリュームで伝える事ができます。

また、スマホになると縦並びに配置するようになります。

参考サイト

どこでも待合室

https://dokodemo.app/ja/

MEMO
スクロールせずに複数の情報を表示できるので、シンプルにわかりやすく、ある程度の情報量を伝えたい内容がある場合は2分割レイアウトを採用すればいいでしょう。

サンプル

HTML

CSS

タイル型レイアウト

タイル型は写真やコンテンツを規則正しく並べるレイアウトです。

タイル型レイアウトの特徴

多くの情報を一度に見せる事ができるので、ショッピングサイトやブログなどによく取り入れられております。

綺麗にレイアウトする事で見やすいサイトができる上、写真や動画を多く並べるため、見栄えがすごくよくなります。

参考サイト

株式会社 未来ガ驚喜研究所

https://miraiga-lab.com/

MEMO
ひとつひとつのコンテンツを写真で紹介する事で、見栄えがよくなりクリックもされやすいです。たくさんの写真や動画で伝えたい内容があるならタイル型レイアウトを採用するといいでしょう。

タイル型レイアウトのサンプル

↓HTML↓

↓CSS↓

grid-template-columns:repeat(3, minmax(240px,1fr));
このコードで写真の配置並列数を決める事ができます。今は3としているので、横に5つ並べたい場合は5とすれば5つ横に並びます。

おまけ

ここまで5つの型をご紹介しました。ここからはさらに、もう一つレイアウトをご紹介します。そこまで採用されているレイアウトではありませんので、取り入れなくても大丈夫です。

斜めレイアウト

採用されているサイトは多くないですが、一部を斜めにレイアウトするだけで印象が変わります。

斜めレイアウトの特徴

躍動感や斬新性を伝える事ができます。

参考サイト

mc-digitalrealty

https://www.mc-digitalrealty.com/

MEMO
斜めにする事でスクロールする楽しさが出てきます。あまり多用しすぎたり角度をつけすぎたりすると見づらいサイトになってしまいますので、注意が必要です。

斜めレイアウトのサンプル

↓HTML↓

↓CSS↓

フルスクリーン型のレイアウトに、こちらのHTML/CSSを追加すれば簡単に斜めにレイアウトする事ができます。

まとめ

いかがでしたか?
今回は、「HTMLのレイアウト5つの型」についてご紹介しました。
これでHTMLのレイアウトに迷わずにサイト作成する事ができますよ。
ぜひ参考にしてみてくださいね。