Webの基本レイアウトまとめとサンプルコード

Webデザイン

はじめに

最近，Webレイアウトについて勉強しているので，自分用にまとめてみました．
内容は主に3つです．

  1. 各レイアウトの解説
  2. 各レイアウトを用いたサイト例の紹介
  3. 各レイアウトのサンプルコードの紹介

サンプルコードでは，最近流行りである「Flexbox」を利用してます．
Flexboxについては本ブログでは解説しませんので，最後の参考サイトからご参照ください．


上部ナビゲーション型

画面上部にグローバルナビゲーションを配置し，下部にコンテンツを配置したシンプルなレイアウトです．
f:id:haruka-i1997:20180206133854p:plain
コンテンツを左右いっぱいに表示できるので，コンテンツを大きく見せることができます．
現在，最も普及しているレイアウトの一つですね．

・サイト例
f:id:haruka-i1997:20180206134141p:plain
teno group　https://www.teno.co.jp/

・html

<!doctype html>
<html>
<head>
   <meta charset="utf-8"/>
   <title>上部ナビゲーション型</title>
    <link rel="stylesheet" href="css/topNavigation.css">
</head>
<body>
    <header class="topNavigation">
       <p>ナビゲーション</p>
    </header>
    <div class="content">
        <p>コンテンツ</p>
    </div>
</body>

・topNavigation.css

body{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.topNavigation{
    height: 70px;
    text-align: center;
    background-color: #888;
    color: #fff;
}
.content{
    flex: 1;
    background-color: #eee;
    text-align: center;
    margin-top: 10px;
}


左軸ナビゲーション型

画面左部にグローバルナビゲーションを配置し，右部にコンテンツを配置したレイアウトです．
f:id:haruka-i1997:20180206135947p:plain
ページ数が多いサイトに適しています．
また，常に左部にナビゲーションが配置されているため，ユーザがサイト内で迷子になりにくいメリットがあります．
ナビゲーションの項目数の増加にも対応しやすいレイアウトですね．

・サイト例
f:id:haruka-i1997:20180206140034p:plain
vanguard prague　http://vanguardprague.cz/cs

・html

<!doctype html>
<html>
<head>
   <meta charset="utf-8"/>
   <title>左軸ナビゲーション型</title>
   <link rel="stylesheet" href="css/leftNavigation.css">
</head>

<body>
    <header class="leftNavigation">
       <p>ナビゲーション</p>
    </header>
    <div class="content">
        <p>コンテンツ</p>
    </div>
</body>

・leftNavigation.css

body{
    display: flex;
    min-height: 100vh;
}
.leftNavigation{
    width: 250px;
    text-align: center;
    background-color: #888;
    color: #fff;
}
.content{
    flex: 1;
    background-color: #eee;
    text-align: center;
    margin-left: 10px;
}


逆L字ナビゲーション型

上部ナビゲーション型と左軸ナビゲーション型を組み合わせたレイアウトです．
f:id:haruka-i1997:20180207092048p:plain
ローカルナビゲーションには，バナーや広告を配置することが多いです．
ブログなどでよく見かけるレイアウトです．
このレイアウトの場合は，左軸ナビゲーション型と違い，右側にナビゲーションを配置することもあります．
(当ブログのデザインと同じですね．)

・サイト例
f:id:haruka-i1997:20180206140020p:plain
桶屋 http://studiokeya.com/index.html

・html

<!doctype html>
<html>
<head>
   <meta charset="utf-8"/>
   <title>逆L字ナビゲーション型</title>
    <link rel="stylesheet" href="css/reverseLNavigation.css">
</head>

<body>
    <header class="grovalNavigation">
       <p>グローバルナビゲーション</p>
    </header>
    <main>
        <div class="localNavigation">
            <p>ローカルナビゲーション</p>
        </div>
        <div class="content">
            <p>コンテンツ</p>
        </div>
    </main>
</body>

・reverseLNavigation.css

body{
    display: flex;
    flex-direction: column;
}
.grovalNavigation{
    height: 70px;
    text-align: center;
    background-color: #888;
    color: #fff;
}
main{
    min-height: 100vh;
    display: flex;
    margin-top: 10px;
}
.content{
    flex: 1;
    background-color: #eee;
    text-align: center;
    margin-left: 10px;
}

.localNavigation{
    width: 300px;
    text-align: center;
    background-color: #888;
    color: #fff;
}


シングルカラム

上から順番にヘッダ、グローバルナビゲーション、コンテンツ、ローカルナビゲーション、フッタを配置するレイアウトです．
f:id:haruka-i1997:20180207092234p:plain
目線の誘導を極力減らすことによって、コンテンツの注目度が高まるレイアウトです．
また，タブレットやスマートフォンでの表示の際に崩れにくいメリットもありますね．

・サイト例
f:id:haruka-i1997:20180207092320p:plain
KIDORI https://ki-do-ri.jp/

・html

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>シングルカラム</title>
    <link rel="stylesheet" href="css/singleColumn.css">
</head>

<body>
    <header class="header">
       <p>ヘッダー</p>
    </header>
    <div class="glovalNavigation">
       <p>グローバルナビゲーション</p>
    </div>
    <div class="content">
        <p>コンテンツ</p>
    </div>
    <div class="localNavigation">
        <p>ローカルナビゲーション</p>
    </div>
    <footer class="footer">
        <p>フッター</p>
    </footer>
</body>

・singleColumn.css

body{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.header{
    height: 70px; 
    text-align: center; 
    background-color: #eee;
}
.glovalNavigation{
    height: 70px; 
    text-align: center; 
    background-color: #888;
    color: #fff;
}
.content{
    flex: 1;
    background-color: #eee;
    text-align: center;
    margin: 10px 0 10px 0;
}
.localNavigation{
    height: 70px;
    text-align: center;
    background-color: #888;
    color: #fff;
}
.footer{
    height: 70px;
    text-align: center;
    background-color: #eee;
}


マルチカラム

シングルカラムとは異なり，ローカルナビゲーションの配置をコンテンツと並列にしたレイアウトです．
f:id:haruka-i1997:20180207092938p:plain
主にECサイトやブログなどで幅広く利用されているレイアウトです．
2カラムの構成が一般的です．

・サイト例
f:id:haruka-i1997:20180207093128p:plain
清水寺　http://www.kiyomizudera.or.jp/about/

・html

<!doctype html>
<html>
<head>
   <meta charset="utf-8"/>
   <title>マルチカラム</title>
    <link rel="stylesheet" href="css/multiColumn.css">
</head>

<body>
    <header class="header">
       <p>ヘッダー</p>
    </header>
    <div class="glovalNavigation">
       <p>グローバルナビゲーション</p>
    </div>
    <main>
        <div class="content">
            <p>コンテンツ</p>
        </div>
        <div class="localNavigation">
            <p>ローカルナビゲーション</p>
        </div>
    </main>
    <footer class="footer">
        <p>フッター</p>
    </footer>
</body>

・multiColumn.css

body{
    display: flex;
    flex-direction: column;
}
.header{
    height: 70px;
    text-align: center;
    background-color: #eee;
}
.glovalNavigation{
    height: 70px;
    text-align: center;
    background-color: #888;
    color: #fff;
}
main{
    display: flex;
    min-height: 100vh;
    margin: 10px 0 10px 0;
}
.content{
    flex: 1;
    background-color: #eee;
    text-align: center;
    margin-right: 10px;
}
.localNavigation{
    text-align: center;
    background-color: #888;
    color: #fff;
    width: 250px;
}
.footer{
    height: 70px;
    text-align: center;
    background-color: #eee;
}


フルスクリーン

画面いっぱいにコンテンツを配置した大胆なレイアウトです．
f:id:haruka-i1997:20180207093409p:plain
キャンペーンサイトなどで利用されることが多いです．
やはり，コンテンツに目を引きやすいのがメリットとして挙げられますね．

・サイト例
f:id:haruka-i1997:20180207093439p:plain
茶ッカソン　https://chackathon.com/

・html

<!doctype html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>フルスクリーン</title>
    <link rel="stylesheet" href="css/fullScreen.css">
</head>

<body>
    <div class="content">
        <p>コンテンツ</p>
    </div>
</body>

・fullScreen.css

.content{
    width: 100%;
    height: 600px;
    background-color: #eee;
    text-align: center;
}


3分割縦型

左右にナビゲーション、中央にコンテンツを配置したレイアウトです．
f:id:haruka-i1997:20180207093720p:plain
ブログやニュースサイトなどでよく利用されていますね．
情報量の多いページを，すっきり整理して見せることができます．

・サイト例
f:id:haruka-i1997:20180207093907p:plain
KITTE http://jptower-kitte.jp/

・html

<!doctype html>
<html>
<head>
   <meta charset="utf-8"/>
   <title>3分割縦型</title>
    <link rel="stylesheet" href="css/threeDivision.css">
</head>

<body>
    <div class="grovalNavigation">
       <p>グローバルナビゲーション</p>
    </div>
    <div class="content">
        <p>コンテンツ</p>
    </div>
    <div class="localNavigation">
        <p>ローカルナビゲーション</p>
    </div>
</body>

・threeDivision.css

body{
    min-height: 100vh;
    display: flex;
}
.grovalNavigation{
    flex: 1;
    text-align: center;
    background-color: #888;
    color: #fff;
}
.localNavigation{
    flex: 1;
    text-align: center;
    background-color: #888;
    color: #fff;
}
.content{
    flex: 2;
    text-align: center;
    background-color: #eee;
}


逆U字型

上部にグローバルナビゲーション、左右にローカルナビゲーション、中央にコンテンツを配置したレイアウトです．
f:id:haruka-i1997:20180207094217p:plain
ナビゲーション要素が多いサイトに適しています．
ナビゲーションの項目の増加にも対応できるレイアウトですね．

・サイト例
f:id:haruka-i1997:20180207094241p:plain
quote http://quote-jp.com/

・html

<!doctype html>
<html>
<head>
   <meta charset="utf-8"/>
   <title>3分割縦型</title>
    <link rel="stylesheet" href="css/reverseUNavigation.css">
</head>

<body>
    <header class="grovalNavigation">
       <p>グローバルナビゲーション</p>
    </header>
    <main>
        <div class="localNavigation">
            <p>ローカルナビゲーション</p>
        </div>
        <div class="content">
            <p>コンテンツ</p>
        </div>
        <div class="localNavigation">
            <p>ローカルナビゲーション</p>
        </div>
    </main>
</body>

・reverseUNavigation.css

body{
    display: flex;
    flex-direction: column;
}
.grovalNavigation{
    height: 70px;
    text-align: center;
    background-color: #888;
    color: #fff;
}
main{
    display: flex;
    min-height: 100vh;
    margin-top: 10px;
}
.localNavigation{
    flex: 1;
    text-align: center;
    background-color: #888;
    color: #fff;
}
.content{
    flex: 2;
    text-align: center;
    background-color: #eee;
}


グリッドレイアウト

画像をグリッドに沿って配置していくレイアウトです．
f:id:haruka-i1997:20180207094759p:plain
最近おしゃれなサイトでよく見かけますね．
画面全体をすっきりと見せる効果があります．

・サイト例
f:id:haruka-i1997:20180207094832p:plain
P. G. C. D http://www.pgcd.co.jp/#

・html

<!doctype html>
<html>
<head>
   <meta charset="utf-8"/>
   <title>グリッドレイアウト</title>
    <link rel="stylesheet" href="css/gridLayout.css">
</head>

<body>
    <header class="header">
       <p>ヘッダー</p>
    </header>
    <div class="content">
        <div class="image">
            <p>画像</p>
        </div>
        <div class="image">
            <p>画像</p>
        </div>
        <div class="image">
            <p>画像</p>
        </div>
        <div class="image">
            <p>画像</p>
        </div>
    </div>
    <footer class="footer">
        <p>フッター</p>
    </footer>
</body>

・gridLayout.css

body{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.header{
    height: 70px;
    text-align: center;
    background-color: #eee;
}
.content{
    margin: 10px 0 10px 0;
    display: flex;
}
.image{
    width: 25%;
    height: 200px;
    background-color: #eee;
    text-align: center;
    margin: 10px;
}
.footer{
    height: 70px;
    text-align: center;
    background-color: #eee;
}


余白多めのレイアウト

コンテンツを大胆に画面の中央などに配置し，余白を広く使ったレイアウトです．
f:id:haruka-i1997:20180207095126p:plain
シングルカラムでよく利用されています．
コンテンツに目が引きやすいメリットがあります．

・サイト例
f:id:haruka-i1997:20180207095216p:plain
CRAZY https://www.crazy.co.jp/

・html

<!doctype html>
<html>
<head>
   <meta charset="utf-8"/>
   <title>余白多めのレイアウト</title>
    <link rel="stylesheet" href="css/marginLayout.css">
</head>

<body>
    <main>
        <div class="content">
            <p>コンテンツ</p>
        </div>
    </main>
</body>

・marginLayout.css

main{
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    position: absolute;
    height: 100%;
    width: 100%;
}
.content{
    width: 200px;
    height: 200px;
    text-align: center;
    background-color: #eee;
}


ニュース系情報サイト

これまでのレイアウトの中でも，比較的要素数の多いレイアウトです．
f:id:haruka-i1997:20180207095518p:plain
情報量が多いため、各領域をしっかりと区切ることがポイントです．
コンテンツの領域がはっきりしているため，見やすく使いやすいメリットがあります．

・サイト例
f:id:haruka-i1997:20180207095552p:plain
Yahoo! japan https://www.yahoo.co.jp/

・html

<!doctype html>
<html>
<head>
　<meta charset="utf-8"/>
　<title>ニュース系サイト</title>
    <link rel="stylesheet" href="css/newsSite.css">
</head>

<body>
    <header class="header">
       <p>ヘッダー</p>
    </header>
    <div class="glovalNavigation">
       <p>グローバルナビゲーション</p>
    </div>
    <main>
        <div class="localNavigation">
            <p>ローカルナビゲーション</p>
        </div>
        <div class="content-area"></div>
            <div class="content">
                <p>コンテンツ</p>
            </div>
            <div class="content">
                <p>コンテンツ</p>
            </div>
        </div>
        <div class="ad">
            <p>広告</p>
        </div>
    </main>
    <footer class="footer">
        <p>フッター</p>
    </footer>
</body>

・newsSite.css

body{
    display: flex;
    flex-direction: column;
}
.header{
    height: 70px;
    text-align: center;
    background-color: #eee;
}
.glovalNavigation{
    height: 70px;
    text-align: center;
    background-color: #888;
    color: #fff;
}
main{
    display: flex;
    min-height: 100vh;
    margin: 10px 0 10px 0;
}
.content-area{
    display: flex;
    flex-wrap: wrap;
}
.content{
    flex: 1;
    height: 200px;
    background-color: #eee;
    text-align: center;
    margin: 0 10px 0 10px;
}
.localNavigation,.ad{
    text-align: center;
    background-color: #888;
    color: #fff;
    width: 250px;
}
.footer{
    height: 70px;
    text-align: center;
    background-color: #eee;
}


商品カテゴリーを選択できるサイドバーや，上部に検索窓を配置するレイアウトです．
各Webサイトのコンセプトに合わせて，コンテンツを配置していきます．
f:id:haruka-i1997:20180207095802p:plain
商品検索機能の使い勝手が良いレイアウトですね．

・サイト例
f:id:haruka-i1997:20180207095830p:plain
ZOZOTOWN http://zozo.jp/

・html

<!doctype html>
<html>
<head>
   <meta charset="utf-8"/>
   <title>ECサイト</title>
   <link rel="stylesheet" href="css/ecSite.css">
</head>

<body>
    <header class="header">
       <p>ヘッダー</p>
    </header>
    <main>
        <div class="localNavigation">
            <p>カテゴリ</p>
        </div>
        <div class="content-area">
            <div class="content">
                <p>コンテンツ</p>
            </div>
            <div class="content">
                <p>コンテンツ</p>
            </div>
        </div>
    </main>
    <footer class="footer">
        <p>フッター</p>
    </footer>
</body>

・ecSite.css

body{
    display: flex;
    flex-direction: column;
}
.header{
    height: 70px;
    background-color: #eee;
    text-align: center;
}
main{
    display: flex;
    min-height: 100vh;
    margin: 10px 0 10px 0;
    right: 0px;
}
.content-area{
    display: flex;
    flex: 1;
}
.content{
    flex:1;
    height: 200px;
    background-color: #eee;
    text-align: center;
    margin: 0 10px 0 10px;
}
.localNavigation{
    text-align: center;
    background-color: #888;
    color: #fff;
    width: 250px;
}
.footer{
    height: 70px;
    text-align: center;
    background-color: #eee;
}


最後に

今回は，Webレイアウトの基本的な種類をまとめてみました．
Webの種類や情報量などによって、適したレイアウトがあることが分かりました．
個人的には、今回初めてまともにFlexBoxを利用してみて、あまりの便利さに感動しました(ﾟ∀ﾟ)b
今度からもっと使っていきたい．
(サンプルコード間違いがあったらすみません汗)

次からはレイアウトの基本的なルールについてまとめていきたいと思います．


参考書籍&サイト

・基本レイアウトについて

知りたいレイアウトデザイン (知りたいデザインシリーズ)

知りたいレイアウトデザイン (知りたいデザインシリーズ)

レイアウトの一覧が分かりやすく，体系的に整理されています．


いちばんよくわかるWebデザインの基本きちんと入門 レイアウト/配色/写真/タイポグラフィ/最新テクニック (Design&IDEA)

いちばんよくわかるWebデザインの基本きちんと入門 レイアウト/配色/写真/タイポグラフィ/最新テクニック (Design&IDEA)

上記本と殆ど同じ内容ですが、より詳しく解説されています。
参考サイトとかも沢山載ってて非常に分かりやすいです


・サイト例について
w-finder.com
muuuuu.org
おしゃれな国内外のサイトを集めたサイトです．
業種やデザイン、色など様々なカテゴリから検索できるので、デザインの参考に非常に役に立ちます．


・サンプルコードについて
www.webcreatorbox.com
www.webcreatorbox.com
qiita.com
FlexBoxについて分かりやすくまとめられています．