【Web制作】レスポンシブ・ウェブサイトのポイント

スポンサーリンク

レスポンシブ・ウェブデザインのサイト制作

これが初めてじゃないのですが、web制作のお手伝いで「レスポンシブ・ウェブデザイン」のサイトを制作しました。

だいぶ慣れてきたこともあり、個人的にポイントがまとまってきたので、備忘録です。

それは誰のためのレスポンシブ・ウェブデザイン?

レスポンシブ・ウェブデザインを導入する場合、私が直接クライアントさんとお話させていただくときには、「レスポンシブ・ウェブデザイン」を希望されても必ず必要かどうかを確認します。

レスポンシブ・ウェブデザインにして良いのか?良くないのか?

は、非常に難しい問題です。

なぜなら、PCサイトをそのまま「スマホ」で表示してしまった方が良い場合。というのも十分考えられるからです。

そもそも「スマホ・タブレットユーザー」をどの程度いるのかも把握しておかなくてはなりません。

近年、「スマホ・タブレット」からのアクセスは増えていますが、必ずしも全てのサイトがそうでもありません。

また、私の経験上は年配のユーザーは「スマホ」は拡大出来ると思っている傾向が強いです。

レスポンシブ・ウェブデザインのサイトは拡大できないことが多いですが、ユーザー層によっては不便に感じる場合もあります。

こういった点は、入念に打ち合わせして共通サイトも理解をお願いしています。

導入して、「意味がない」というのは誰も得しませんからね・・・。

PCのときとスマフォの時に読み込むデータを把握する

これにタブレットサイズが入ったり、入らなかったりですが、基本的にレスポンシブ・ウェブデザインは画面サイズによって読み込むデータを変えていきます。

個人的には、タブレットはPC表示と同じで良くないかなー。と、思うことが多いですが・・・。

読み込むデータは主に以下の2点。

CSS(画面サイズによって幅や、レイアウトを変更)

画像(画面サイズによって、)

以上の2点を「画面サイズ」によって切り替えていきます。

ここさえ抑えておけば、基本的なレスポンシブ・ウェブデザインは作りやすくなると思います。

CSSはインポート用のCSSを用意する

CSSの読み込みは3パターンあります。

1,ヘッダーで判別。

と行った感じで振り分けることが可能です。

2,CSS一枚で仕上げる

CSS一枚で収める方法もあります。

@media screen and (max-width: 640px) {

/* スタイルシートを記述する部分 */

}

という感じでも行けます。

3,インポート用のCSSファイルを用意する

@import url(“pc.css”) screen and (min-width:641px)
@import url(“smartphone.css”) screen and (max-width:640px);

例えばですが、「import.css」のようなCSSに上記のように記述して、判別します。

基本どれでも良いのですが、私は、「1」「3」をよく利用します。

「2」は量が少なければ良いのですが、後でちょっとゴチャゴチャしてしまうこと多いです。

画像は計画的に

画像は、サイズを変更するだけで対応できるなら、CSSなどで画像サイズを設定して上げればOKです。

ただ、画像サイズが大きすぎるとレンダリング負荷が高まりますし、必ずしも画像サイズを変更するだけでは対応できないことも多々出てきます。

そもそも、PCサイトと、スマホサイトでは、デザインが全然違ったりすることは普通にあります。

そういう場合のために、予め、画像ファイル名と クラス名を計画的にしておくと後々ラクです。

要は、クラス名とファイル名を明確にして、JavaScriptで置換していきます。

そちらに関しては、こちらのサイトが詳しいです。

jQueryでレスポンシブ対応の際にウィンドウサイズによって読み込む画像を切り替える実験

こうした画像の置換はjQueryでも実装できるモノもありますが、この方法がシンプルな気がします。

ということで、ちょっとざっくりですが、以上のことに気をつけていれば、「レスポンシブ・ウェブデザイン」なサイトも比較的スムーズに製作できそうですよ?

スポンサーリンク

シェアする

フォローする

スポンサーリンク