2015.12.02

2017.05.18

Webマーケティング

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

お気に入りの小物たち

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

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

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

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

  • わかりやすいコンテンツ
  • わかりやすいユーザーインターフェイス(UI)

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

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

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

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

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

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

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

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

フラットデザイン

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

マテリアルデザイン

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

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

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

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

レスポンシブデザインは情報の見せ方を再構築する必要がある

レスポンシブデザインはデザインを各デバイスに最適化するだけではなく、各デバイスに向けて情報を再構築することが一番重要なのです。各デバイスの最適化が考慮された構成はユーザに有益なだけではなく、制作者にも有益で制作時の矛盾も少なくなりコストや納期の短縮つながることも期待できます。

SHARE

この記事の筆者

デザイナー 若井 徳彦

デザイナー 若井 徳彦

ターゲットに合わせたUIやUX、目的を達成させるためのデザインをモットーに取り組んでいます。SEOやグロースハックとの親和性の高いデザインが求められてると感じています。

WEBSITE DESIGN REQUEST

ホームページ制作・リニューアルの
ご相談はお気軽に

TEL 06-6537-9941 平日 9:00〜19:00

〒550-0012 大阪府大阪市西区立売堀2-5−41

ホームページ制作を相談する