コンポーネントとレイアウト | マークアップ

概要#

マークアップにおいてコンポーネントとレイアウトは絶対に知っておくべき概念です。

コンポーネント - パーツ
レイアウト - 枠組み

だと理解しましょう。家に例えるとドアや窓、家具はコンポーネントで、間取りや家具の配置がレイアウトです。

コンポーネント#

2回以上使われるパーツはコンポーネントとして実装しましょう。以下は代表的なコンポーネントの例です。

見出し
ボタン
リスト
テーブル
ユーザーカード

コンポーネントはレゴのブロックや家の家具を自分で作る作業だと思ってください。作ったコンポーネントは自由に配置、再利用することができます。

コンポーネントのポイント#

コンポーネントを作る際は以下の点に気をつけましょう。

どこに設置しても同じ見た目になること
レイアウトに関与しないこと

たとえば特定の親クラスを持つ場合にのみ見た目が変わるようなコンポーネントは避けましょう。そういったコンポーネントは使い手が性質（裏仕様）を理解し、配慮しながら使う必要があるので使い勝手が非常に悪いです。

また、コンポーネント自体にレイアウトの役割を持たせないようにしましょう。たとえばLPのデザインに登場するボタンが他の要素との間に広めの余白があるからといってボタンコンポーネント自体に大きなマージンを設定してしまうと、他の箇所でボタンを使おうとしたときにそのマージンの邪魔になってしまいます。

そのためコンポーネント間の余白やそもそもの配置については後述するレイアウトが担当し、コンポーネント自体は原則マージンや配置に関与しないようにしましょう。

レイアウト#

コンポーネントが家具だとすると、レイアウトは部屋の間取りや家具ののようなものです。代表的なコンポーネントを紹介します。

ヘッダー
フッター
コンテナー
サイドバー
フッター
グリッド
横並び

Next.js や Nuxt.js などのSSGやWordPressを使う場合ヘッダーやフッターなどのレイアウトは共通管理できます。そうでない場合もPugなどのテンプレート言語を使って共通管理すべきです。各ページのHTMLにヘッダーやフッターをコピー&ペーストする実装はメンテナンスしづらく、ページごとにブレる原因にもなるのでNGです。

以下で代表的なレイアウトについて解説します。

コンテナー#

コンテナーはレイアウトの一つで、家全体の広さ（平米数）のようなものです。それ以上はみ出すことはできないという枠を決めるイメージです。

ほとんどのサイトはページを跨いで同じコンテナの中にコンテンツが収まっています。この枠は端末ごとに変化するので最大幅を指定する形で定義します。

Tailwind CSS には既に container クラスが用意されているのでそれを使います。自分で実装する場合最大幅を定義した div を用意しましょう。

Tailwind CSSの場合#

実際には中央揃えやコンテナー内の余白を設定する必要がありますがここでは割愛します。詳細はTailwind CSSのカテゴリで解説します。

<div class="container">コンテンツ</div>

自分で作る場合#

<div class="container">コンテンツ</div>

// 自分で作る場合
.container {
  max-width: 1200px;
  padding: 0 24px;
  margin: 0 auto;
}

コンテナに padding を設定することで、コンテンツの端が画面幅に密着しないようにしています。一般的にモバイル枠では 16px 、それ以上では 24px の余白があると良いでしょう。

コンテナの横幅はこれといって決まっていませんが一般的にはノートブックの画面に十分収まる幅を最大値にすべきなので 1200px 前後になります。

グリッド、横並び#

ほとんどの場合グリッドや横並びは grid が適していますが、列という概念がなく行を跨いで要素を不規則に並べたい場合は flex が適しています。

4等分したい、2:4の割合で分割したいなどあらかじめ列の幅を比率指定できる場合は grid を使います。逆にヘッダーナビゲーションのように各要素の幅がコンテンツに依存している場合は flex が適しています。

レスポンシブウェブデザイン#

レスポンシブウェブデザインはRWDと略して呼ばれるのが一般的です。RWDはあらゆる画面幅の端末に最適化されるデザインを指します。RWDは今では当たり前ですが、近年はモバイルファーストで設計することが推奨されています。

モバイルファーストとはデザインやUX設計においてモバイルユーザーを第一に考えるというポリシーを指しますが、実装においてもモバイルビューを最初に実装し、あとからPCビューを実装することが推奨されています。

さまざまな調査においてWebサイト閲覧者の7割以上がスマートフォンからという結果が出ています。従ってまずスマートフォンで見やすいことを大前提とし、実装においてもスマートフォンの実装を完璧にした上でいわば後付け的にPC幅での見た目を整えるという順番で実装を行います。

Tailwind CSS もモバイルファーストで設計されています。これからWebサイトやWebアプリのUIを実装する人はまずモバイルビューの見た目を作り込むようにしましょう。

RWDの実装#

RWDの実装は以下のアプローチで行います。

要素の幅は絶対値ではなく相対値。もしくは最大値で指定する。
メディアクエリーで幅に応じてレイアウトを切り替える

たとえばある要素の幅を width: 1200px として絶対値で指定してしまった場合、スマートフォンで見た時にその要素が画面の外にはみ出して表示されてしまいます。これは閲覧者の画面幅を考慮せず強制的に 800px の幅を維持しようとするためです。

そこでRWDにおいては max-width: 1200px とするか、そもそも max-width: 1200px; のコンテナーで要素を囲むなどして要素の最大幅を制限するというアプローチをとります。

次にスマートフォンで見たら縦に並んでいるがPCで見たら横に4つ並べたいシーンがあります。その時はメディアクエリーを使って、指定した画面幅の範囲において grid や flex を適用されるアプローチを取ります。

これによりスマートフォンで見たら縦に並び、タブレットやPCで見たら横に並ぶレイアウトを実装できます。この際に指定する画面幅をブレークポイントと言います。スマートフォンやタブレット、モニターの幅は多種多様なので一概にこの幅であればスマートフォン、という基準はありません。端末に最適化させるというより、画面幅に最適化させるという考え方が重要です。

ブレークポイントは初学者が悩むところかと思いますが前述したように端末ごとに幅は多種多様なのでこれといった正解はありません。Tailwind CSS のようなフレームワークではあらかじめブレークポイントの基準が用意されていますが、自分で実装する場合自分で幅を区切る必要があります。

悩む方は Google が策定したデザイン言語「Material Design」のブレークポイントを踏襲しましょう。