reynato.tokyo

CREATIVE TOPICS

2018.06.04

DESIGN

WEBサイトのレスポンシブ化は自分で出来るのか?

Scroll Down

スマートフォンなどでwebを閲覧する際、ストレスなく見られていると特に気にならないし、気付きもしない表示の最適化。

実はそこにはレスポンシブ化という技術が使われています。

普段は気付かないところだからこそ、実際、自分がwebサイトの構築に携わることになるとその壁にぶつかることでしょう。

少し難しいですが、勉強すればレスポンシブ化は誰にでもできます。しかし、自分で行う際には気を付けたいことがいくつかあります。

それをまとめてみました。

 

 

レスポンシブ化とは

 

スマホなどの次世代型のモバイルデバイスが普及して以来、それでwebサイトを閲覧する機会が当たり前となりました。

以前ならばwebサイトを表示する際には、モバイル用とPC用で完全に別のHTMLソースを用意して、利用者はモバイルで閲覧するならばモバイル用のURLに、PCならばPC用のURLにアクセスし、使用しているデバイスによって、閲覧サイトそのものを変えていました。

それは、PCとモバイルそれぞれで、ネット上から取り込めるデータ量もその処理能力もまったく違うものだったからです。

PCと同じデータ量を携帯電話に処理させようとすると、何倍もの時間が必要でした。

ところが容量やメモリなど、デバイスの飛躍的な進化に伴い、同じデータを両方で読み込ませても問題なくなってきました。

同じデータを、モバイル・PCどちらで読んでも、問題なく画面の大きさや解像度に応じて、表示やレイアウトを変化させるようとすること、それがレスポンシブ化です。

表示は切り替わりますが、HTMLリソースとURLは同じです。

視覚的に見やすく、情報を得やすいサイトを作り、利用者が即時的にその情報を利用してほしいというのは、情報提供をする側の強い想いですよね。

ですが、そのためにはモバイルにはモバイルに適した表示の仕方、PCにはPCの、と全くそのデザイン性の思想は別です。

そうした時に情報する提供は同じなのに、ファイルは2……となると、管理も大変です。

そうした時のためのレスポンシブ化です。

このレスポンシブ化には、最新のスタイルシートであるCSS3を使用します。

CSS3は、多くのブラウザで採用されているために、より多くの人がこのレスポンシブ化を体感することができるのです。

 

 

自分で行う場合の注意点

 

もし、自分でこのレスポンシブ化を行う場合、気をつけなくてはいけないことはなんでしょうか。

まず1つに、なるべく情報量を減らして、シンプルなデザインを心がけるということです。

スマホなど、スペックが飛躍的に伸びたからと言って、それなりの大容量を処理するには時間も負荷もかかります。かといって、画質を落としすぎると、パソコンで見た時に画像のアラが目立ってしまいます。

そのために画像の画質はなるべく落とさず、表示させる写真の数を少なくしたほうがいいでしょう。

テキストの情報量も同じです。

パソコンで見る感覚とスマホで見る感覚はまったく違ってきます。

内容を精査して余計な単語や文章は整理、削除、改行は多めに、など文章を整理し、読みやすいテキストを作ることが大切です。

2つめに、アンケートや会員登録などの情報を入力するフォームをスマホ用に最適化しておくことが大切です。

PCの場合ならキーボードがあるので、入力はそれほど難しくはありません。

ですが、スマホの入力はPCに比べると、細かくてわずらわしいと感じる人が多いようです。

特に物品を購入するために入力するフォームが面倒ということになると、入力がストレスで、ものを買う段階へ進む前にページを閉じてしまうでしょう。

そうした手間を減らし、通過率を上げるために、必要なのが入力フォームの最適化です。

例えば、郵便番号を打ち込んだだけで該当する市町村が住所欄に自動的に入力されたり、数字入力が半角必須の場合は、モードが自動で半角に切り替わったり。

さらに不必要な入力項目を減らすことも大切です。

例えば今でも時折、FAX番号の記述を求めてくるものも存在しますが、画像も送れるネットを利用している時点で、もはやその項目は不必要ではないでしょうか。

それ以外にも自由記述の欄を選択肢にするなどの最適化も効果があるもののひとつです。

 

 

プロに依頼をしてしまおう!

 

とは言え、レスポンシブ化の作業を個人でやるのも大変です。会社ならば、サイト管理のために1人社員を雇うのもありでしょう。

しかし、そのコストを考えるのであれば、外部のwebデザイン会社にお願いしたほうが遥かに安くなる場合もあります。

実際、やってみるとちょっとしたことで、うまくいかない場合もあります。

例えば、インパクトを与えるためにと画像にテキストを埋め込んでも、モバイルで表示したら文字が小さすぎて何を書いているのか、読めないということもあります。

そのようにwebデザインをかじった程度の人が、独学でレスポンシブ化を進め、しなくてもいい無用なトライアンドエラーが繰り返された場合、余計な時間コストが消費されてしまいます。

ですが、実績あるプロフェッショナルならば、そうした失敗がありません。

いえ、もともと素人がやるような失敗は初期の段階でしてきているので、同じ轍は踏まないというところでしょうか。

さらに言うならば、個人、あるいは社内でレスポンシブ化を行った場合、その動作と表示確認をどれだけの端末でできるでしょうか。

プロにお願いすれば、すべての端末で、とは言いませんが、複数の端末でどのように見えるか、表示などに問題ないか、デバッグもしっかりとしてもらえます。

そのうえ、場合によってはサイトの更新などの管理も行ってもらえるでしょう。

 

 

まとめ

 

スマホ文化に花が咲き、とにかくどんどん情報はお手軽に入手できるようになってきています。

見やすく、わかりやすく、伝わりやすい、そんなサイト作りをするためにレスポンシブ化は必要です。

普段、気付きにくい部分にある技術なので、感謝することもありませんし、それほど重要だと思っていない人が多いかもしれません。

ですが、1度、いつも見ているサイトなどをPC版に切り替えて見てみると、レスポンシブがどれだけ日々のストレスをなくしてくれているか、わかっていいかもしれませんね。

 

 

参考URL

 

https://ferret-plus.com/2614

https://ferret-plus.com/511

http://www.aiship.jp/knowhow/archives/12947

https://www.selva-i.co.jp/blog/archives/281