Web制作

【スマホ対応】レスポンシブWebデザイン

  • このエントリーをはてなブックマークに追加

モバイルURL』に引き続き、レスポンシブWebデザインについて。
レスポンシブルではないです・・・レスポンシブフリーでもないです・・・

実装方法

具体的な実装方法ですが、CSSのメディアクエリーを使用して画面幅毎にデザインを変えます。

メディアクエリ 【 Media Queries 】 CSSメディアクエリ / CSS Media Queries

Webページの見栄えを記述するCSSのバージョン3で追加された仕様の一つで、表示された画面環境に応じて適用するスタイルを切り替える機能。 「表示サイズの幅がこれ以上ならこのスタイルを適用」「画面が横長ならこのスタイルを適用」というように、一つのスタイルシートで複数の画面環境に対応することができる。

ホームページのデザイン部分を主に担当するのがCSSになりますが、それを画面幅に合わせて適用させるイメージです。
CSSコードの例を見てみましょう。

@media
only screen and (max-width : 640px){
   html{
	overflow-y: scroll;
	overflow-x: hidden;
        }

   html,body{
	width: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
        }
}

この例では、幅の最大が640pxまでの場合、このCSSを当て込むことになります。
「640px」の数字は特に決まっていないのですが、この数字のことをブレークポイントと言います。
ブレークポイントはいくつ設定しても問題ありませんが、よくあるのが、「スマホとタブレットの間に一つ」と「タブレットとPCの間に一つ」ですね。

メリット

  • 画面の幅に合わせて可変させるためAndroid端末に手こずらない
  • サイトを一つしか作らなくて良いため、更新が楽
  • Googleが推奨している方法
  • 新しいデバイスが出てきた時に困らない

Googleが推奨している方法だけあって、メリットは多いですね。

デメリット

  • メディアクエリーを覚える必要がある
  • 設計に慣れていないため、サイトによっては作成が大変

まずはCSSのメディアクエリーを覚える必要があります。
概念自体は全然難しくありませんが、スマホから作るのかPCから作るのかが悩ましいなど厄介な部分があることも事実です。
最初の情報設計、画面設計、デザインがかなり重要になりますね。

まとめ

LABEのサイトもレスポンシブWebデザインで制作しましたが、モバイルURLと違ってサイトの更新は非常に楽です。
一つの記事を書けばスマホでもPCでも閲覧することができるので。

また、スマホユーザーにもPCユーザーにも同じコンテンツを提供できることもありGoogleが推奨する方法にもなります。
今のところ検索順位に影響はありませんが、モバイルフレンドリーテストなんかもあるので、今後は評価の指標にもなるんじゃないかなと思っています。

CSSメディアクエリーを使えるようになる必要はありますが、今はレスポンシブWebデザインが当たり前でもあるので、ホームページ制作をするのであればこの方法がオススメです。

  • このエントリーをはてなブックマークに追加

  関連記事

コメントを残す

*

CAPTCHA