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 この記事を読んだ人はこんな記事も読んでいます

【サイト制作者必見!】続!納品後を見越したサイトを作るために気をつけたいこと

2017.04.27

【サイト制作者必見!】続!納品後を見越したサイトを作るために気をつけたいこと

■CMSでの納品の場合~クライアントが編集する部分は、必ずオリジナルのマニュアルを作成し渡しておく~ 前回お話ししたように、クライアントは基本的にサイト運営に経費をあまりかけたくないと思っているため、納品後は「自分たちで更新したい」とい...

【デザイナー力をチェック!】何問解ける?Webデザイナー向け筆記クイズ

2017.03.23

【デザイナー力をチェック!】何問解ける?Webデザイナー向け筆記クイズ

【問1】下記画像に記されたフォント名を答えよ(a)Helvetica Ultra Compressed(b)Helvetica Light Condensed(c)Helvetica Condensed Oblique 【問2】文章中の空欄(ア)~...

【サイト制作者必見!】納品後を見越したサイトを作るために気をつけたい3つのこと~WordPress編~

2017.03.16

【サイト制作者必見!】納品後を見越したサイトを作るために気をつけたい3つのこと~WordPress編~

■その1:サイト納品後、クライアントは自分で更新したいのかそうでないのかをまずは確認するお仕事としてサイト制作をされたことのない方はあまりピンとこないかもしれませんが、クライアントは基本的にサイト運営に経費をあまりかけたくないと思って...

【ロゴがあれば3分!】フッター情報が少な過ぎてスカスカで困った…そんな時に使えるデザインテクニック

2017.01.31

【ロゴがあれば3分!】フッター情報が少な過ぎてスカスカで困った…そんな時に使えるデザインテクニック

■まずはロゴを用意。シンボルマーク部分を使いましょう。色味の確認もかねて、ロゴを入れ込みたいサイトのスクリーンキャプチャをとり、Photoshopで開きます。下準備はこれだけでOK。 右下がなんとなくさみしいですよね。ここにロゴを入れ込...

【スマホだけで大丈夫♪】スマホで撮影した写真を印象的にするテクニック

2016.12.19

【スマホだけで大丈夫♪】スマホで撮影した写真を印象的にするテクニック

■ コツは、画面にぼかす要素を入れて撮影すること!今回はインスタグラムでの投稿を想定して、スクエアサイズの写真を例にしています。撮影に使ったのはiPhone6 Plusです。 画像:人物だけを撮影するのではなく、あえて右サイドに緑、背後に排...

【無料素材を活用】サクッと作れて使える!テクスチャを重ねるだけのワンポイント!

2016.11.28

【無料素材を活用】サクッと作れて使える!テクスチャを重ねるだけのワンポイント!

■「ちょっとした」装飾であっても、大きめサイズで作ろう 小さなワンポイントとは言え、やはり何にでも対応できるサイズで最初から制作しておくのがベター。今回はPhotoshopCCを使って、印刷にも対応できるよう 300dpi 500px &ti...