レスポンシブデザインに対応したコンテンツ制作

お気に入りの小物たち

ワンソースでスマートフォン、タブレット、PCのデザインに対応するレスポンシブデザインは、ホームページ制作において、いまや完全に市民権を得たといっても過言ではありません。

レスポンシブデザインで注意すべきポイントはただ単純に「マルチデバイスの表示を再現した」にならないことです。

マルチデバイスでの使い勝手

ホームページの運営方針により主力デバイスは異なるにしても、それぞれのデバイスで使いやすさが求められます。レスポンシブでサイトを構築する場合ディレクターを含む全ての制作者は以下の点に留意する必要があります。

わかりやすいコンテンツ
わかりやすいユーザーインターフェイス（UI）

こんな当たり前のこと常に意識しているよ！って声が聞こえてきそうですが、わかりきっていることを高いレベルでクリアするのは難しいものです。

例えばわかりやすいコンテンツは、ライティングやデザインが優れているだけではレスポンシブデザインではダメです。コンテンツの密度も「わかりやすさ」に綿密に関わってきます。

モバイルファーストを意識した低密度のコンテンツ

一般的なWebサイトの情報の大半を占めるのは文字情報です。PCやタブレットではそんなに詰め込んだ印象にならない文章量でもスマホでは多すぎて、読む気にならないコンテンツになってしまう場合もあります。

そうならないように適度に段落、見出し、挿入画を配置して情報にメリハリをつけページが長くなってもコンテンツの密度を下げて、読んでもらう工夫が必要です。もちろん簡潔に物事を伝える優れた文章力も必要です。

適度な大きさでボタンとわかるユーザーインターフェイス

PCでは問題にならないボタン配置でもスマホやタブレットでは誤タップしてしまう、そもそもタップエリアが小さすぎる、ボタンとして認識できない。レスポンシブデザインではその辺りに考慮することも大事です。

フラットデザインとマテリアルデザイン

フラットデザイン

レスポンシブデザインと共にWeb制作において市民権を得たのが、フラットデザインです。フラットデザインは不要な項目が省かれたシンプルなデザイン。視覚的エフェクトもそぎ落としアイコンやレイアウト、タイポグラフィでのデザインが表現の中心です。

マテリアルデザイン

フラットデザインはシンプルがゆえにユーザーインターフェイスがわかりにくいと言った欠点もありました。そこを補うためにフラットデザインに奥行きの表現が含められたデザインがマテリアルデザインです。

レスポンシブデザインのUIデザインはマテリアルデザイン要素も取り入れユーザビリティにより一層の配慮が必要です。 PCにはマウスオーバーでエフェクトを変える表現ができますが、スマホやタブレットにはそれがありませんので、マテリアルデザインの立体的なデザインも必要なのです。

フラットデザイン・マテリアルデザインのメリット

それまで主流だったのリッチな装飾からシンプルな装飾に変わったフラットデザイン・マテリアルデザインはシンプルがゆえにファイルサイズが軽くなる特徴があります。 CSSのみで再現できるデザインもしばしばです。その結果読み込み速度の向上に貢献しています。つまりゴテゴテしたデザインよりも、その点においては高いユーザビリティを誇ります。