茨城県鹿嶋市・神栖市 ホームページ制作、デザイン スキル・バンク

皆さん、こんにちは。 スキル・バンク　ＳＥのＷ　です。 前回は「スマホを意識したホームページ制作」が重要になるとお伝えしました。 そして、スマホを意識したデザインといえば「レスポンシブデザイン」が思い浮かぶ方が多いのではないでしょうか。 スマートフォンでの閲覧を考慮した場合、とりうる対策はいくつかあります。 そして、それぞれメリット・デメリットがあります。 １．レスポンシブデザイン 今流行りのデザインです。 CSSやスクリプトを利用して、ひとつのページをスマートフォン向け・パソコン向けの表示に切り替えるデザインのことです。 （メリット） ページファイル(html)は同じものを利用して表示だけ変えますので、変更点があっても漏れることはありません。 しっかりページデザインすることで、媒体ごとに最適化したページレイアウトを実現できます。ユーザー操作性や視認性が高まります。 （デメリット） スマートフォンは画面幅の制約があるので、原則縦スクロールのデザインになります。そのためパソコン向けのレイアウトも縦スクロールになりがちなのです。 しかしパソコンで縦スクロールは、意外と操作性が悪い。また、横に間延びしたようなデザインになる場合が多いです。 イメージ画像を使う場合、パソコン向けとモバイル向けで最適なサイズが異なります。パソコンで綺麗に見られるようなサイズにすると、スマホでは読み込みに時間がかかったり、逆にスマホの読み込み速度を重視するとパソコンでは少し荒い画像になってしまったり、調整が難しくなります。 ２．パソコン向けとモバイル向けでページを別にする パソコンでの表示に最適化したページとモバイル閲覧に最適化したページの２つを用意する方法です。URLが別になります。 （メリット） それぞれの媒体で最適な表示になるように、自由にレイアウトをデザインできます。 （デメリット） 変更が発生したときに、パソコン向けページは修正したけどモバイル向けページの修正を忘れたという、ウッカリミスの可能性があります。 コンテンツが膨大な場合、両媒体向けのページを用意するのが難しい場合があります。 ３．パソコン向けだが、モバイルでもある程度操作しやすいようにレイアウトデザインする モバイルで閲覧する場合、ピンチアウト・インによる操作を前提としてデザインする方法です。 ボタン配置も、スマホでも押しやすいようなサイズ・間隔になるように注意します。 （メリット） ページファイル(html)は同じものを利用して表示だけ変えますので、変更点があっても漏れることはありません。 しっかりページデザインすることで、スマホでの操作性や視認性も高めることができます。 （デメリット） スマホでの閲覧も意識したデザインのため、純粋なパソコン向けページに比べて、あまり情報を詰め込むことができません。 ４．スマホまたはパソコン向けに特化して制作する 例えば顧客が法人のみの場合や逆にスマートフォンでの閲覧がほとんどとなる場合、思い切ってそれぞれの媒体向けに特化して制作することも、ひとつの方法です。 以上のように、まずは自社の顧客はどのような媒体でホームページを閲覧するのかをしっかりと検討してみてください。 そこから最適な制作方法を取捨選択します。 一部はレスポンシブデザイン、一部は別ページなど組み合わせてデザインすることも可能です。 ぜひお気軽にご相談ください。