YU-Create-Lab for Web Creator Webクリエイター・Webデザイナー向けの優クリ-Lab

2017.05.18

【サイト制作者必見!】レスポンシブWebデザインをコーディングする際に気を付けたいこと

【サイト制作者必見!】レスポンシブWebデザインをコーディングする際に気を付けたいこと

『ターゲットはどのような人たちなのか』『サイトにアクセスするシチュエーションや利用デバイスはどうなのか』ということは、Webサイトを構築する上でとても重要なポイントであることはみなさんご存知かと思います。今回は、「レスポンシブWeb」をテーマに、筆者がサイト制作の際に気を付けていることをまとめました。

制作するターゲットの年齢層をクライアントから必ず確認する

スマートフォンデザインを優先する「モバイルファースト」がSEO的にも有利になっていますが、
(Googleが明確に発信しています https://webmaster-ja.googleblog.com/2016/11/mobile-first-indexing.html
クライアントがターゲットとするお客様が必ずしも「スマートフォン世代」とは限りません

スマートフォンを意識して、ひとつのHTMLで可変させるレスポンシブWebデザインで制作した場合、当然、パソコン上でウィンドウサイズを変えることでもページの見え方が変わってきます。
大きなウィンドウで見ていた時にあったはずのボタンが小さいウィンドウでは違う場所へ移動したり、表示が変わったり。こういうことがあると、あまりパソコン操作に慣れていない人が使用した時に戸惑ってしまうこともあります。

201705182005_4-600x0.jpg

例えば上の画像、右と左は同じWebページですが、PC上で表示するウィンドウサイズに合わせてグローバルメニューのデザインが変化しています。
(赤で囲った部分。左はメニューバー式、右はハンバーガー型になっていますね)

パソコン操作に慣れている方たちにとってはこのような変化もスムーズに受け入れられるのですが、一方でついていけないユーザー・・・例えば高齢ユーザーも存在します

ウィンドウサイズに依存せず表示を保ちたい場合には、ユーザーがどんなデバイスでサイトにアクセスしてきているかを判別し、レスポンシブWebデザインではなく、そのデバイスの画面サイズにあった内容を表示することで上記問題を回避することができます。
しかしながら、このやり方では複数ページを用意する必要が出てきますので、製作費は上がってきます。見積もりの段階でここまでの対応が必要であるか、クライアントに必ず確認しましょう。

またはサイトデザインを「スマートフォンユーザー」向けに限定してしまうというのも手です。
パソコン表示の際に若干間延びする印象にはなりますが、スマートフォン表示のままにすることで制作費を削減することもできます。


201705182005_5.jpg
例えば、左はスマートフォンの画面で表示したもの、右は、その要素をそのままパソコンで表示させたパターン。
このようにすることでCSSでの可変表示設定も少なくて済みます。

ただし、パソコンのウィンドウサイズによっては文字や画像などが大きく表示されてしまい、ファーストビューにあまり情報が載らない場合もあるので注意したいところです。
 

自分の手元に「パソコン」「iPhone」「タブレット(アンドロイド)」は最低限揃える

フリーランスと言えども最低限の環境を整えることは必要です。
Webページを見るお客様がどんな環境で見るのかはこちらで指定することはできません。そのため、一般的に普及しているものはできるだけ手元に揃え、それぞれで確認した方がよいです。

そして、パソコン上では一通りのブラウザーをダウンロードしておくことも忘れないように
例)Internet Explorer(Microsoft Edge)、Google Chrome、Firefox、Safariなど

モバイルの場合は、お手持ちのスマートフォンがiPhoneの場合にはタブレット端末はアンドロイドのもの、スマートフォンがアンドロイド端末の場合にはiPadを用意するとよいかと思います。

揃えた上で「現在どのブラウザー・デバイスがシェア1位なのか」を常に確認しましょう。
クライアントの中には、例えばInternet Explorerしか使ったことがない、という方もたくさんいらっしゃいます。だからと言って、クライアントのブラウザーで一番正確に表示されることを優先するのではなく、あくまで一般的に使用率が高いブラウザーやデバイスで正確に表示されるかを優先しながらWeb制作することが大事です。

また、もし既存サイトのリニューアルやページの追加であれば、シェア1位だけでなく、そのサイト独自のユーザー傾向にも注意が必要です。例えばMacユーザーが多く訪れるサイトであれば、一般的なデータに比べSafariのシェア率が高いはずです。
 

サポート外のブラウザーバージョンを明確に記載する

レスポンシブWebデザインとなるとHTML5を使うことになりますが、未対応のブラウザーも存在します。そのような場合にはJavaScriptなどを使って対応させることも可能ですが、費用や手間を考えるとすべてに対応させることは難しい場合もあります。

その際には、ルールとしてサイト上に「推奨閲覧環境」を明記し、サポート外のブラウザーがあることをお知らせするのがよいでしょう。そして同時に、クライアントにも正常に閲覧できない環境があることをあらかじめしっかり説明しておきましょう。

201705182005_6-450x0.jpg
モバイルファーストの需要は高まる一方で、レスポンシブWebデザインがすっかり定番となっていますが、メリットばかりでなくデメリットがあることも忘れてはいけません。
クライアントがターゲットとするユーザー層にはどんなデザインが合致するか。サイト制作者として、この点をまず押さえることが何より大切なことですね。

Recommend この記事を読んだ人はこんな記事も読んでいます

Webクリエイターが知っておきたい!!北米のデザイントレンド情報

2018.04.20

Webクリエイターが知っておきたい!!北米のデザイントレンド情報

■アップグレードされ続けるフラットデザインシンプルで不必要なグラデーションやドロップシャドウを使わないフラットデザイン。2002年にリリースされた、マイクロソフトによるウィンドウズメディアセンターのデザインが始まりだったと言われていま...

【Web記事】思わずクリック!「読まれるタイトル」のつけ方、教えます

2018.03.02

【Web記事】思わずクリック!「読まれるタイトル」のつけ方、教えます

■センスは不要!「読まれるタイトル」を付ける3つの技術普段、なにげなく見ているWeb記事のタイトル。毎日たくさんの記事がネット上にアップされていくなかで、プレビュー数の多い記事には、読み手の関心を引きつけ、思わずクリックしてしまうよう...

【ただの雑談になってない!?】Webディレクターに求められるヒアリング術

2018.02.09

【ただの雑談になってない!?】Webディレクターに求められるヒアリング術

■ヒアリングでは真に受けてはいけないNGワードがある!新米Webディレクターにありがちなことといえば、やはり完成した内容とクライアントの完成予想イメージの違いによるトラブルです。経験豊富なディレクターであれば、過去の実績からクライアン...

Webディレクター必見!使えるGoogle便利ツール

2017.12.08

Webディレクター必見!使えるGoogle便利ツール

■ただでさえ便利なGoogleスプレッドシートがもっと便利に!Googleスプレッドシートが便利であることはすでにご承知のことと思います。優クリLabでもその優れた機能を紹介しました。【リモートワーカーで成功する人のコミュニケーション術...

WELQ問題で変わった?Webメディアの現状

2017.11.17

WELQ問題で変わった?Webメディアの現状

■WELQ問題から1年……DeNAのキュレーションメディアプラットフォーム「DeNA Palette」の医療・ヘルスケア情報のキュレーションメディア「WELQ(ウェルク)」が端を発し、キュレーションメディアの...

紙物でも困らないために!Webデザイナーが知っておくべき3つのこと

2017.09.06

紙物でも困らないために!Webデザイナーが知っておくべき3つのこと

■Webデザイナーが紙物を制作するときに知っておくべきこととは?本コラムでは、主にWebを主戦場としているデザイナー向けに、紙物を注文されたときに困らないためのトピックをいくつかご紹介していくのですが、印刷物を制作する際には、解像度、...