フォーカスしたいもの
近年はデバイスの多様化が進み、レスポンシブ対応が当然のものとなりました。
しかし一概にレスポンシブ対応といってもその方法は様々です。レイアウトにおいては、全体を拡大するような方法もあれば、一部分の幅を広げるような方法もあります。
また、レイアウトの対応が行われていたとしても、例えば文字サイズや画像サイズは適切なものになっているでしょうか。
さらに、レスポンシブ対応はデザインによっては複雑な実装が必要となり、開発や運用にマイナスの影響が出てしてしまうものです。
そこで株式会社デパートでは、社内の制作メンバーでより良いレスポンシブ対応についての勉強会を開催いたしました。今回は、その際に話された内容や出てきた課題をもとに、レスポンシブレイアウトの見せ方の違いと、デザインする際に気をつけるべきポイントについてご紹介いたします。
レスポンシブ対応はレイアウトだけではない
レスポンシブの話をする時によく話題になるのは全体のレイアウトの話かと思います。
しかし実際にはコンテンツ要素の変化が重要であり、それ次第では実装やメンテナンスにかかるコストが増幅してしまうこともあります。
全体のレイアウトはおおよそ一度作ってしまえば事足りますが、各要素の実装はそれぞれ個別に対応する必要があるためです。
今回はレスポンシブの対応における課題点を皆さんと共有できればと思っています。
まず全体のレイアウトとコンポーネント(＝コンテンツ要素※)について説明し、その上でレスポンシブ対応をする際の注意点をサンプルを交えて説明していきます。
※サイト制作において、ある程度まとまった機能を持つコンテンツ要素のことをコンポーネントと呼びます。
レスポンシブのレイアウトの種類
レスポンシブ表示を実現するレイアウト手法は、大きく分けて3種類あります。
- グリッドレイアウト
- リキッドレイアウト
- フレキシブルレイアウト
これら3つの手法の特徴を見ていきましょう。
グリッドレイアウトの特徴
グリッドレイアウトとは、画面を12、16、24などに分割して、そのグリッドに合わせて要素を配置する手法です。
このレイアウトは要素同士のマージンも設定されるため、整ったレイアウトがしやすくなります。
多くのCSSフレームワークで採用されておりスタンダードな手法でもあります。
このレイアウトの登場初期はグリッドをpxなどの固定値で定義しているケースが多く、さらにスマホでは3カラムを基本とするようにしていました。ですが、最近ではグリッド自体も画面幅に応じて可変するものが多くなっており、スマホでも12分割などでレイアウトを行うことができるようになりました。これらは可変グリッドと呼ばれていたりします。
こちらがグリッドレイアウトのサイトサンプルです。
どのような動きをするのか実際にブラウザを伸縮させて確認ください。
ID：depart
パスワード：responsive
リキッドレイアウトの特徴
リキッドレイアウトとは、配置はそのままにデバイスの画面サイズに合わせて横幅を変化させる手法です。
グリッドと違い、要素を配置するボックス毎に横幅を定義、かつパーセントで可変できるように指定する方法になりますので、自由なサイズ調整が行えます。マージンも必ず同じである必要はありません。
最近は全て%で指定することで可変グリッドと同じような見え方をしているケースが多くなりましたが、一部を画面サイズに捉われずにpxサイズで固定することもできます。このケースは、ECモール系サイトで利用されることが多いです。
リキッドレイアウトのサイトサンプルです。
どのような動きをするのか実際にブラウザを伸縮させて確認ください。
ID：depart
パスワード：responsive
フレキシブルレイアウトの特徴
フレキシブルレイアウトとは、リキッドレイアウトとソリッドレイアウトを両方取り入れたものになります。
リキッドレイアウトは前述で紹介したレイアウト手法で、ソリッドレイアウトとは画面幅が大きくなった時に上限値を設ける手法です。
つまり、フレキシブルレイアウトとは例えば、PCサイズなどでは最大1024pxを設定し、スマホサイズではリキッドレイアウトで可変するものになります。
リキッドレイアウトは上限がなく大きくなりすぎてしまうこともあるので、そこを上限を持たせることで解消することができます。
フレキシブルレイアウトのサイトサンプルです。
どのような動きをするのか実際にブラウザを伸縮させて確認ください。
ID：depart
パスワード：responsive
要素自体のレイアウト変化
ここまでは、全体のレイアウトに関して説明してきました。次に、その中身のレスポンシブ対応に関して、注意点や難易度の高さをコンポーネントのケースとしてご紹介します。
まず、基礎知識としてコンポーネントとはどのようなものか、また、WEBサイトを構成する要素はどのような特徴をもつのかをお話ししたいと思います。
コンポーネントには動的/静的なものがある
動的コンポーネント：
コンポーネントが収まっているページには動的、静的という状態があります。
動的ページというのは、主にCMSなどによって表示されるページです。一つのページテンプレートを使い、テキストや画像を差し替えることで複数ページを表示しています。このページで使われるコンポーネントは、複数ページで使われている動的コンポーネントとなります。
静的ページというのは、ページテンプレートを使用していないユニークなページです。ただし、コンポーネントは静的ページ内のものであっても、複数箇所で同じものを使っている場合には動的コンポーネントとなります。
静的コンポーネント：
まずページは他ページと共通性のないユニークな静的ページであり、かつコンポーネントもサイト内でも単一しかない場合、このコンポーネントは静的コンポーネントとなります。
WEBサイトを構成する要素の基本的な動き
HTMLには基本的なレイアウトルールがあります。
まず要素には、ブロックとインラインとインラインブロックという3種類の特性があります。
ブロック要素は横に100%の幅になります。
インライン要素の横幅は中身に沿って可変し、インライン要素同士は横に並ぶことが可能です。 インラインブロック要素はその両方の特性を持っており、インライン要素同様に横に並ぶことができ、かつブロック要素と同じプロパティが使えます(高さ指定など)。
次に基本的な並び方のルールですが、上から下、左から右の順番で並びます。
ブロック要素であれば幅100%なので縦に並んでいき、インライン要素同士なら左から右に並んでいきます。
この特徴を理解した上でデザイン・実装をすることで、適切なレスポンシブサイトをつくることができます。
レスポンシブサイトを作る際の注意点
実際のサイトの構造で問題の箇所を確認してみましょう。
さらに、具体的な説明を後述いたしますので併せてご覧ください。
レスポンシブサイトのサンプルです。
[NG切り替え]ボタンで問題箇所を確認できます。
ID：depart
パスワード：responsive
1. HTML構造は変わらないようにする
ヘッダーでは、ロゴの下に補足テキストを入れることがあります。
この補足テキストは、PCサイズにおいてロゴ→補足テキスト→メニューの順番になっています。そのため、スマホサイズにおいてもロゴ→補足テキスト→メニューの順番になることが好ましいです。
これはHTML構造上では、ロゴ・補足テキストの入ったブロックとメニューが入ったブロックに分かれて配置されているためです。HTML上でブロックが分かれている要素においては、ブロック間を乗り越えてデザインすることはできません。
もし図の右下のようにデザインした際には、スマホだけロゴ→メニュー→補足テキストの順番になるため、同じ要素を複数配置してPCとスマホで表示・非表示を切り替える作りになってしまいます。実現は可能ですが、HTML文章構造的に良くない状態です。
PCサイズ時に、画像の横に見出し→テキスト→ボタンが並んだレイアウトでは、スマホサイズでも画像の下に見出し→テキスト→ボタンが並ぶことが好ましいです。
これはHTML構造上では、画像の入ったブロックと見出しなど入ったブロックに分かれて配置されているためです。
もし、スマホになった時に見出しが画像の上になるようにデザインした際には、HTMLのソースコードが複雑化し運用に悪影響が出てしまいます。
レビューなどのレイアウトでは、PC時にサムネイル、タイトルとテキスト、ボタンを横並びに置くことがあると思います。この際は、スマホでも同じ並びのまま横幅を縮小するか、もしくはボタンを下の段に置くことが好ましいです。
スマホでは文字量やサイズの都合で、タイトルとテキストを分離させたくなることもあると思いますが、この場合も実装では全く同じ要素を二ヶ所に記載しPCとスマホで出し分ける必要が出てきます。もし、スマホの表示を重視してテキストはサムネなどの下の段に置く際には、PCでも同じようにテキストを下の段に置くことが望ましいです。
フッターでは、いくつかに分かれた列があるとき、スマホでもその列通りに縦に重なることが望ましいです。列の中の要素を他の列に入れるようなレイアウトは、実装を困難にします。
また、一定のデザインルールがある中で、一部だけ新しいルールにすることも好ましくありません。例えば、フッターメニューをスマホではトグルボタンにするとき、同じレイアウトの一部分だけはトグルではなく横並びにするといった対応はデザインルールとしても破綻しています。
スマホで他メニューよりも控えめな表示にするのであれば、PCにおいても同様に控えめなデザインにすると良いでしょう。
2. PC←→スマホでコンポーネントの体裁を変えない
PCでテキストリンクの形状にした場合、スマホでもテキストリンクにすることが望ましいです。
もしスマホでボタンの形状の方がわかりやすいと感じるようであれば、PCでもボタンの形状の方がわかりやすいということです。また、テキストの方がスタイリッシュに見える、ということであればスタイリッシュなボタンや、透明背景のボタンにする方法も検討してみましょう。
PCとスマホのデザインを共通にすることはユーザビリティにも繋がります。テキストリンクとボタンはUIとしては別物なので、その場のわかりやすさだけでUIを切り替えずに、サイト全体でUI毎の機能定義を考えておくと良いでしょう。
テキストのあしらいもPCとスマホで共通にすると良いでしょう。
例えば、サブテキストをPCでは弱めの級数とカラーにした場合は、スマホでも同様のあしらいを行います。あるいは、PCでは背景にグレーを引くならば、スマホでもグレーの背景を引いてください。
また、サブテキスト部分に見出しが入るケースもあると思いますが、この場合もPCだけ/スマホだけというように切り分けずに、両方とも入れるようにすることが望ましいです。
3. PC←→スマホでもhタグのレベル感は変えない
スマホはデバイス幅が狭いため、PCよりも格段に文字サイズの違いを出しにくくなります。特にタイトルのサイズ調整に迷うことも多くなるでしょう。
しかし、文字サイズが違うということは情報にレベル差があるということです。スマホデザインにおいてもPCのレベル差を踏襲できるように、段階的なサイズ変更やカラーでの表現を行なってください。
4. サイト内で共通要素のデザインは統一する
1つのサイト内で行間を無作為に変更することは好ましくありません。
行間のルールを混在させると、汎用性というCSSの特性を活かせず実装工数やトラブルを増やす原因となります。また、行間もデザイントーンの一部なので、統一感のないデザインではユーザーに企業イメージやブランドイメージを適切に伝えることが難しくなります。
そのため、サイトデザインでは行間をできる限り統一しておくことが望ましいです。なお行間はpxでの絶対値ではなく、文字サイズの150%や180%といった相対値にしておくとフォントサイズに合わせて変化させることができ、実装工数を減らすことにも繋がります。
レベル感が同じ要素は共通デザインにするのが望ましいです。
例えば、h3同士の要素では同じデザインにすると良いです。もしあるh3ではアイコンがあり文字サイズは大きく、別なh3では下線があり文字サイズは中くらい、となっていた場合にはCSSの汎用性を欠くため初期実装や運用でのトラブルに繋がります。
要素デザインは都度都度考えるのではなく、なるべくサイト全体の要素を確認した上で、あらかじめ必要なものを設計しておくと良いでしょう。
レスポンシブサイトを構築するには知見と配慮が不可欠
このように、あらゆるユーザー・デバイスにとっても見やすくわかりやすいサイトの作成には、レイアウト対応だけではなく要素（コンポーネント）単位での配慮と対策が不可欠です。またそのためには、HTML構造や実装への理解を深め、サイト全体を考えたデザイン設計を行うことが必要となります。
株式会社デパートでは、このように日々ノウハウを共有することでメンバー内の情報をアップデートし続け、クライアント様にもメンバーにとってもベストなプロジェクト推進に取り組んでいます。
デパート採用情報
株式会社デパートでは一緒に働く仲間を募集しています
