3つの理由」でも書かれているように、Webサイトのスマホ対応はWebサイト制作において必須要件になっています。そのスマホ対応の方法として多くのサイトで用いられている「レスポンシブWebデザイン」。今回は、なんとなくしか理解できていない方のために、レスポンシブWebデザインのメリット・デメリットやデザイン制作において知っておくべき基礎をご紹介します。INDEXレスポンシブWebデザインとは?レスポンシブWebデザインのメリットレスポンシブWebデザインのデメリットレスポンシブの作成方法さいごにレスポンシブWebデザインとは?レスポンシブWebデザインとは、1つのHTMLをCSSで制御し、ユーザーが閲覧するデバイスの画面サイズに応じてページのレイアウト・デザインを最適化して表示させる技術のことをいいます。スマートフォンやタブレットからのアクセス数が増加している今、レスポンシブWebデザインはモバイル対応に非常に有効なものだと言えるでしょう。文言修正や画像差し替えなど、簡単な作業であれば更新が一度で済みます。レイアウト変更や大規模な改修となると工数がかかってしまうことがあります。Googleのランキングアルゴリズムにも対応できる検索エンジン「Google」の順位は、ランキングアルゴリズムと呼ばれるGoogleが独自に定めた200以上にのぼる評価要因を元にコンテンツを評価し決定されます。その1つとされている「モバイルフレンドリーアルゴリズム」に対応できることはもちろんのこと、今後導入することを既にアナウンスしている「モバイルファーストインデックス」についても、レスポンシブWebデザインは非常に相性が良いです。参考:Google「モバイルフレンドリーアップデート」「モバイルファーストインデックス」についてURLが統一されるのでシェアされやすい(デバイスの種類に関係なく単一のURLを案内できる)PC用サイトとスマートフォン用サイトでURLが2つ存在する場合、閲覧するユーザーのデバイスによっては適してないページを表示させてしまうこともあります。レスポンシブWebデザイン対応であれば、単一URLでユーザーのデバイスに適したページを表示してくれます。レスポンシブWebデザインのデメリットレイアウトが複雑であるほど、そして対応デバイスが増えるほど工数がかかるCSSの記述が複雑になるので、コーディングに時間がかかってしまします。デザインやレイアウトに制限があるワンソースで構築するので、CSSで対応できる範囲のデザインやレイアウトを考える必要があります。ビューポート(viewport)タグを記述するまずはページのソースコードの<head>要素内にビューポート(viewport)を記述します。content="width=device-width,initial-scale=1"></head>このコードを記述することで、各端末の画面幅に合わせて表示領域を自動で調整してくれます。ビューポイントの記述により拡大表示されましたが、PC表示のものをそのまま拡大表示させただけなのでとても見づらいです。次のステップでは、スマートフォン用のデザインに切り替える方法をご説明いたします。ブレイクポイントを決めるブレイクポイントとは、CSSの切り替え地点のことをいいます。PC用とスマートフォン用の表示を作成したい場合、画面幅が何pxになったときに切り替えたいかを決めます。デバイスによって画面幅は様々です。ブレイクポイントの数と値に決まりはありませんので、試行錯誤をしながら決めていくといいでしょう。メディアクエリでCSSを記述するメディアクエリを使用してスマートフォン用のレイアウトを記述していきます。メディアクエリの設定には2通りありますので、自分に合った方法で構築してみてください。【設定方法1】CSS内で記述するCSSを記述している箇所に、メディアクエリを使用します。デバイスの解像度やデバイスの向き、メディアタイプで設定することが可能です。画面サイズで外部CSSファイルを切り替える方法です。href="style-480.css">(画面幅が480px以下の時に「style-480.css」を読み込む)他に、メディアクエリではなく、Javascriptやphp等でユーザーエージェントによる判別を行い、CSSを切り替える方法もありますが、今後まったくの新しいデバイスが普及してきた場合、対応させなくてはいけなくなるためあまりおすすめいたしません。さいごに今回は簡単にレスポンシブWebデザインのしくみについてご説明いたしましたがいかがでしたでしょうか?しくみさえわかってしまえばそれほど難しいものではありませんが、レイアウトを考える際には注意が必要です。デザインもなるべくテキストとCSSで表現できる範囲で作成するとよいでしょう。次回は、基本的なレスポンシブWebデザインのコーディング技術をご紹介いたします。最新の記事アーティス創造性を最大限に発揮するとともに、インターネットに代表されるITを活用し、みんなの生活が便利で、豊かで、楽しいものになるようなサービスやコンテンツを考え、創り出し提供しています。MACHINEの使い方~「モノのインターネット」IoTとは?IoTの活用事例とIoTの動向について解説します。受託システム開発により、ユーザーエクスペリエンスを高め、お客様のWeb戦略を成功に導きます。Webサイトに関するパッケージシステムの開発や個人向けのWebサービス・スマートフォンアプリ開発など幅広いサービス・アプリケーションを提供しています。名刺の作成販売を行っているECサイト「アーティス名刺工房」を運営しています。豊富なデザイン・迅速な対応で多くのお客様から支持をいただいています。Reserved.ページの先頭へ。