固定・相対値複合型
各要素の挙動
「固定値型」では、基本的には各要素の大きさはブレイクポイントが切り替わらないと変わらない。ただし、このタイトルのようにキービジュアルで重要な要素は、「相対値型」の仕様で実装する場合もある。
「相対値型」では、基本的にはビューポートの幅に対する各要素の大きさの割合が一定になるため、破綻が起きにくい。ただし、可読性を担保するために最小のフォントサイズを設ける場合などもある。
「固定・相対値複合型」では、「固定値型」の範囲と「相対値型」の範囲での挙動は、それぞれの範囲の仕様に準ずる。
「スマホ特化型」では、常にスマホレイアウトが保たれるので、要素の大きさもそれに準ずるため、破綻が起きにくい。
「固定値型」と「相対値型」を組み合わせた実装方法。
ビューポートの幅が極端に小さい場合または大きい場合は「相対値型」、それ以外の状態では「固定値型」となる。
キービジュアルの高さ
キービジュアルはビューポートの高さ100%で表現されることが多いが、ビューポートの高さが極端に狭い場合や広い場合を考慮し、最大値・最小値を設けると破綻しにくくなる。
「固定値型」では、ブレイクポイントごとに最大値・最小値が切り替わるが、これらの値を「相対値型」のようにビューポートの幅に依存する値で指定することも可能。
「相対値型」では、高さの最大値・最小値もビューポートの幅に対する割合となる。
「固定・相対値複合型」では、「固定値型」の範囲と「相対値型」の範囲での挙動は、それぞれの範囲の仕様に準ずる。
特に「スマホ特化型」では、PCレイアウトの際はスマートフォンの実機よりもビューポートの高さが高い状態で閲覧されがちなので、高さの最大値を設けたほうが良い。
Advantage
いいところ
- 「固定値型」「相対値型」それぞれのメリットがいくつかそのまま反映され、それぞれのデメリットもいくつか打ち消せる (具体的には以下)。
- 「固定値型」の範囲内では、要素や文字サイズが極端に小さくなることを防げるので、その点では可読性を担保できる。
- 「固定値型」の範囲内では、ブラウザのズーム機能でユーザーが倍率を調整できる(ブラウザのデフォルトの挙動を抑制しないで済む)。
- 「固定値型」の範囲内では、数値に小数点を含めずに実装できる(%やvwを含めた値を使用する場合を除く)ので、線が潰れたりしない。
- 「相対値型」の範囲内では、どんなビューポートの幅でも破綻がほぼない。「固定値型」でビューポートの幅が広い場合の欠点である「余白がありすぎて間延びする」がなくなる。
レイアウトの変化
「固定値型」では、要素の幅やフォントサイズが固定となるので、余白を設けるレイアウトの際はバランスを考えて実装する必要がある。コンテンツ幅を%で指定して余白を一定の割合で確保する方法もある。また、コンテンツ幅を固定している場合は文章の折返し位置も変わる場合もあるため、注意する。
「相対値型」では、基本的にはデザイン通りのレイアウトから崩れない。まれに文章の折返し位置が変わる場合もある。
「固定・相対値複合型」では、「固定値型」の範囲と「相対値型」の範囲での挙動は、それぞれの範囲の仕様に準ずる。
「スマホ特化型」では、常にスマホレイアウトが保たれるので、レイアウト・文章の折返し位置などもそれに準ずる。
Disadvantage
よくないところ
- 「固定値型」「相対値型」それぞれのデメリットがいくつかそのまま反映される (具体的には以下)。
- 「固定値型」の範囲内では、デザインによってはブレイクポイントの数を増やさないと、コンテンツが崩れてしまう。
- 「固定値型」の範囲内では、様々なデバイス(ビューポートの幅)に柔軟に対応する必要があるので、全体的にコミュニケーションコストが上がる。
- 「相対値型」の範囲内では、ブラウザのズーム機能が効かなくなる (ただし、ほとんどの場合問題ない)。
- 「相対値型」の範囲内では、px換算した際に数値が小数になることも多いため、線が潰れたり、意図しない形になる場合がある。
Column Layout
段組みレイアウト
「固定・相対値複合型」では、「固定値型」の範囲内と「相対値型」の範囲内でのそれぞれの仕様に準ずる。
このサンプルではビューポートの幅が640px未満の場合は1カラム、 ビューポートの幅が640px以上かつ1024px未満の場合は2カラム。 ビューポートの幅が1024px以上の場合は3カラム。
カラムレイアウトのキャプション。文字数が多い場合はこうなる。ここの文字数をコントロールできない場合は、1行にして省略記号をつけるなどの対応をしても良さそう。
キャプションが短い場合。
レイアウトによってはキャプションが複数行になったりならなかったり。
文字数制限をつけると、見た目の担保はできるが運用の手間がかかる場合があるので注意。
カラムレイアウトのキャプション。文字数が多い場合はこうなる。ここの文字数をコントロールできない場合は、1行にして省略記号をつけるなどの対応をしても良さそう。
キャプションが短い場合。
レイアウトによってはキャプションが複数行になったりならなかったり。
文字数制限をつけると、見た目の担保はできるが運用の手間がかかる場合があるので注意。
カラムレイアウトのキャプション。文字数が多い場合はこうなる。ここの文字数をコントロールできない場合は、1行にして省略記号をつけるなどの対応をしても良さそう。
キャプションが短い場合。
レイアウトによってはキャプションが複数行になったりならなかったり。
文字数制限をつけると、見た目の担保はできるが運用の手間がかかる場合があるので注意。
カラム幅・カラム数
「固定値型」でもカラム幅はコンテンツの幅に対する割合で決めることが多い (3カラムの場合、1カラムの幅が30%など)。
また、そのような仕様にすると「固定値型」はフォントサイズが基本的には固定なので、ビューポートの幅によっては1行に表示できるテキストの量が少なくなるため、カラム数を落とす必要がある。
「相対値型」では、基本的にブレイクポイントの切り替え以外でレイアウトが変わらないため、カラム数の調整をすると、全体に対する見栄えのバランスが崩れることがある。
「固定・相対値複合型」では、「固定値型」の範囲と「相対値型」の範囲での挙動は、それぞれの範囲の仕様に準ずる。
「スマホ特化型」では、常にスマホレイアウトが保たれるので、カラム幅・カラム数もそれに準ずる。このサンプルでは常に1カラム。
Article Layout
記事レイアウト
シンプル1カラム
シンプルなブログなどで使用されるシンプルな1カラムレイアウト。
画像はコンテンツの幅いっぱいに表示される。縦長の画像はコンテンツの幅よりも小さい幅にする場合もある。
また、最大幅を設けないと文章が読みづらくなる。このサンプルでは最大幅を設けて、それ以上にビューポートの幅が大きくなる場合は左右に余白を持ち、コンテンツは中央に配置される。
1カラムコンテンツの幅
1行の文字数を適切な数にしないと読みづらくなるため、コンテンツ幅の最大値を設けることが多い。このサンプルではビューポートの幅がカラムに設定された最大値を超えると中央に配置される。
「固定値型」では、ブレイクポイントごとに最大値が切り替わるが、これらの値を「相対値型」のようにビューポートの幅に依存する値で指定することも可能。条件によっては文章の折返し位置なども変動する。
「相対値型」では、ビューポートの幅が変わっても、ビューポートの幅に対するカラムの幅が変わらないため、レイアウトが維持される。
「固定・相対値複合型」では、「固定値型」の範囲と「相対値型」の範囲での挙動は、それぞれの範囲の仕様に準ずる。
「スマホ特化型」では、常にスマホレイアウトとなるため、このサンプルでは常にコンテンツの幅がビューポートの幅に一致する。
変動カラム
ビューポートの幅が広くなると、2カラムになるレイアウト。
このサンプルでは2カラムの状態になった際、画像と文章のカラムに分かれており、コンテンツの幅の40%の幅が画像となっている。この場合もカラムに最大幅を設けないと読みづらくなるが、画像が配置されるぶん、コンテンツの幅は1カラムの場合よりも広く確保しないと1カラムの幅が狭くなりすぎる。
2カラムのセクションが続く際は画像の位置を互い違いにしたりもする。ただし、ビューポートの幅が狭く1カラムの状態の際は見た目が変わらない。
「固定・相対値複合型」では、「固定値型」と同様、2カラムの状態でビューポートの幅が狭い場合、文章のカラムが狭くなりすぎると読みづらくなるため、カラム幅を調整しても良さそう。
変動カラムのレイアウト・幅
1カラムの場合は↑の「シンプル1カラム」と同様の仕様。ビューポートの幅が広くなると2カラムになる。2カラムとなった場合はコンテンツ幅の最大値を1カラムのものよりも大きくしている。
「固定値型」でも2カラムの場合は画像の幅をコンテンツの幅に対する割合で決めることが多い。ビューポートの幅によっては文章のカラムが狭くなりすぎるので、画像の幅を小したり、1カラムに落とすという対応をする場合もある。
「相対値型」では、ビューポートの幅が変わっても、1カラムでも2カラムでもレイアウトが維持される。
「固定・相対値複合型」では、「固定値型」の範囲と「相対値型」の範囲での挙動は、それぞれの範囲の仕様に準ずる。
「スマホ特化型」では、常にスマホレイアウトとなるため、このサンプルでは常に1カラム。
Lorem ipsumというテキストは実際には読む必要がないような文章で、デザインのテストに使われる。この文章は単なるプレースホルダーで、実際のコンテンツが入る。
ウェブデザインのプロジェクトでは、コンテンツがまだ用意されていない場合、このようなダミーテキストが一般的に使用される。読者には意味はないが、デザインとレイアウトのテストに役立つ。
この文章は実際には読む必要はないが、ウェブサイトの見た目と感じを評価する際に非常に有用。実際のコンテンツが用意されるまで、このようなテキストを挿入することが一般的。
つまりこのセクションの文章は読む必要が全くない。読んでくれた方に感謝。
Table
表組み
表組みは、ビューポートの幅が狭い場合はレイアウトを変えるよりは、横方向にスクロールを発生させるほうが対応しやすい場合が多い。スクロール時にヘッダーのカラムを固定させると見やすくなる。
「固定・相対値複合型」では、「固定値型」同様、ビューポートの幅の変動によりセル内の行数が増減する場合があるので、レイアウト崩れに注意する必要がある。
| 実装工数(10段階) | 実用性(10段階) | おすすめ度(10段階) | コメント | |
|---|---|---|---|---|
| 固定値型 | 7 - 9 | 7 | 6 | 「固定値型」をやるなら少しの工数を追加して「固定・相対値複合型」にするのがおすすめ。 |
| 相対値型 | 6 - 8 | 8 | 8 | 条件によっては使うのもありだが、ブラウザのズーム機能が完全に死ぬので積極的におすすめはできない。 |
| 固定・相対値 | 8 - 10 | 10 | 10 | 機能と美しさのバランスが一番良い。 |
| スマホ | 5 - 8 | 9 | 8 | メインターゲットの閲覧環境がほとんどスマホの場合は積極的に導入しても良いと思われる。 |
表の横スクロール
※PCレイアウトでは横スクロールは発生しない。
ビューポートに入り切らない表は横スクロールを発生させるとカラム数の多い表組みに対応しやすくなる。ただし、CSSのみで対応するとブラウザのデフォルトのスクロールバーが表示されるので、デザイン上問題ある場合はJSで実装する必要がある。ヘッダー列を固定する場合はヘッダーの幅が大きすぎると表の内容が見づらくなる。
また、スクロールが発生している状態のコンテンツ幅であっても、マウスで操作している場合も考慮する必要がある。Shiftキー + マウスホイールで横方向のスクロールができることはあまり知られていないと思われるため、どう対応するかも決めなければならない。縦方向のマウスホイール操作で横方向にスクロールさせるなどの処理を追加しておくと親切 (※このサンプルでは未実装)。
- 表が見切れている場合、スマートフォンなどのタッチデバイスであれば横方向のスワイプ、マウスであればShiftキー + マウスホイールの操作で横にスクロールすることができます。
- 各評価は個人の意見です。
解説モードOff