creatersnest

リキッドレイアウトのWebサイトをレスポンシブにするときのポイント10個


リキッドレイアウトを使って Web サイトを作った!
でもレスポンシブにも対応したい…。

こんな考えを持っている人は結構多いのではないかと思います。
今回はリキッドレイアウト&レスポンシブな Web サイトを制作する時に
気をつけたいポイントを紹介します。

 

自分のサイトのアクセスにあった変更をする

まず、そもそも自分の Web サイトをレスポンシブに
対応する必要があるか確認しましょう。
どのようにして確認するかというと、Google アナリティクスを使用します。
この方法は事前に Google アナリティクスを
Web サイトに組み込んでいることが前提としてありますので、
ご注意ください。

Google アナリティクスを確認する

Google アナリティクスにアクセスして、自分の Web サイトの情報から
ユーザー欄のモバイルサマリーに進んでください。

すると、各デバイスからのアクセス(セッション)数を把握することができます。
ここで、「mobile」や「tablet」の数が極端に少ない場合は
レスポンシブに対応する必要がないといえるでしょう。

 

これはとても重要なことで、desktop からしかアクセスされない
Web サイトはレスポンシブにすることに労力を使うより、
もっと Web サイト自体の質をあげることに力を注ぐほうが
自分の Web サイト成長の近道になります。

 

さて、ここからは少し簡潔にいきたいと思います…。

 

画面サイズによって配置を変える

PC と スマホ

PC、タブレット、スマートフォン はそれぞれ、
画面サイズが大きく異なります。
それぞれの中でも様々な画面サイズがありますね。

さすがに全て把握することは無理ですので、
最低限、自分が所持しているデバイスを使って
一番見やすい、操作しやすいオブジェクトの幅を
確認しましょう。

これは CSS を更新して、確認して…という地味な作業ですが
重要なことですので、根気強く取り組みましょう!

 

メニューバーを非表示にする

これは特にスマートフォンに対応させる場合に
考えなければならないことですが、
左右のどちらかにメニューバーなどがあるような、
2カラムの Web サイトの場合、スマートフォンで表示させる場合には
操作しづらく、邪魔になってしまうことがあります。

非表示にして画面上部にまとめるなどの方法をとりましょう。

 

各項目の重要性を考えた配置にする

NESTOnlineBlog の場合
NESTOnlineBlog の PC 版デザインのイメージ

3カラムの Web サイトだった場合、2カラムの場合よりも
配置に重きを置かなければなりません。

それぞれの項目の重要性をもう一度考えてみましょう。

まずは Web サイトのナビゲーション。これは画面上部に
スマートにまとめるか、ボタンにして非表示にするという方法が一般的です。
そして、記事などの最もユーザーに読んで欲しい部分。
この表示を最も大きくとり、また、見やすいフォント、
文字サイズになるようにします。
最後に、アドセンスなどのパーツ。
正直、ユーザーにとって多すぎる広告はただウザいだけですので、
スッキリと自然になじむ配置をもう一度熟考しましょう。

 

画像の処理に気をつける

さて、だんだんとレスポンシブデザインの方法が
わかってきたところだと思いますが、
今まで固定幅で表示してきた部分に掲載している画像、
解像度は十分でしょうか?

PC では固定幅、スマートフォンでは画面の大きさに合わせて、
というように CSS を書いた場合、PC の固定幅よりも大きい
画面サイズを持ったスマートフォンで表示すると
画像がとても汚く見えます。

今のスマートフォンに搭載されているディスプレイの解像度は
非常に高いので見直しましょう。

 

よくアクセスされる端末の画面サイズを意識する

http://blog.nest-online.jpNESTOnlineBlog の スマホ版デザインのイメージ

「1. 自分のサイトのアクセスにあった変更をする」にも関わりますが、
Google アナリティクスでは自分の Web サイトにアクセスしている
デバイスの機種も把握することができます。
モバイルの中からデバイスを選択しましょう。

「どの画面サイズに合わせたらいいかわからない!」
という場合は、とりあえず現在アクセスしている
デバイスに合わせることが簡単です。

 

 幅の設定に要注意!

ここまでいろいろ説明してきましたが、
CSS で「width:100%」を多用していませんか?
とりあえず、自分のスマートフォンなどで表示させてみてください。

ここでの100%とは、画面サイズを表しており、ここに
border-left や padding-left の要素を設定した場合、その分画面から
要素がはみ出てしまう場合があります。

こまめに実機テストを行いましょう。

 

できるだけ画像を使用しない

SVG ロゴSVG Logo -W3C

もはやレスポンシブとは関係ない? いえいえ、重要です。
これは「6. よくアクセスされる端末の画面サイズを意識する」と
矛盾するところがありますが、
スマートフォンなどは、モバイルデータ通信を使用して Web サイトを閲覧する場合があります。
今でこそ高速な 4G や LTE を使用することができますが、
できるだけ画像を Web サイトに使用しないことが
ユーザーのためになります。

CSS や SVG をうまく利用してできるだけページの容量を減らしましょう。

 

ブラウザで常に確認しながら作業する

ブラウザ イメージ

今までにあげた中でも口を酸っぱくして言ってきましたが、
何度もなんども作業中にブラウザで表示を確認してください。
一度リキッドレイアウトで作成されたサイトを
レスポンシブに対応させることは骨の折れる作業です。
慎重に進めていきましょう。

 

ユーザーの声も聞いてみる

あなたの友人などに自分が作成した Web サイトを見てもらってください。
その際、自分が持っていないデバイスを使ってもらうとなお良しです。
どんどんテストをしてもらって、自分では気付けなかったミスなどを
潰していきましょう。

 

まとめ

10個のポイントをあげるって結構大変ですね…。

しかし、どれも重要で、確実にユーザーを
満足させることができる内容になっていると思います。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Hello world! mlooking です!読み方は エムルッキング 。いろいろな情報を伝えられたらいいかなと思っています。

Next Article【Illustrator】個々の文字をアウトライン化せずに変形させる方法