パソコンからもスマートフォンからも見やすく綺麗なホームページを作成するにはどうしたらいいか悩まれてませんか？
それぞれの端末に合わせてホームページを作成・管理するのは大変ですよね。
「どのデバイスから閲覧しても見栄えのいいホームページを作りたい。でも、管理が大変そう」そういった悩みを解決するのが、レスポンシブWebデザインというホームページの作り方です。
この記事では、なぜレスポンシブWebデザインであれば管理は楽なのに見栄えのいいホームページができるのか解説していきます。
レスポンシブWebデザインとは？
どのデバイス・ウィンドウ・スクリーンサイズで閲覧しても、表示されたホームページが見栄えよく綺麗に整ったデザインになることです。
レスポンシブWebデザインのメリット
引用：https://unsplash.com/photos/RVF0ngUujks
レスポンシブWebデザインにすることで、閲覧者・管理者双方にメリットがあります。
HTMLやURLの管理がしやすい
レスポンシブWebデザインは、どの端末に対しても1つのHTMLやURLで管理します。
以前は、デバイスに合わせてパソコン用・携帯用とそれぞれ専用のサイトを作る必要がありました。各専用サイトとなるため、管理作業は2倍掛かります。しかし、HTMLやURLが1つであれば、作業は1回で済むので効率的に管理できます。
ユーザーにシェアされやすい
パソコンからもスマートフォンやタブレットからも同じURLで最適化されたサイトを見られるので、シェア→閲覧→次のシェアへの流れがスムーズに行われるでしょう。
ぺージ評価の分散を防げる
どのデバイスからも1つのURLでホームページにアクセスできるので、訪問者が1ヶ所に集まります。1つのサイトに集中させることができるので、ページの評価もまとめる事が可能です。
レスポンシブWebデザインのデメリット
物事には便利な面だけではありません。以下の項目に配慮しながら、ホームページを作成しましょう。
スマートフォン表示に時間がかかる
スマートフォン画面で表示するのに時間が掛かります。1つのURLで管理しているが故に、パソコン用のHTMLコードや画像を、スマートフォンでも読み込む必要があるからです。
簡単なだけにデザインに制限がある
読み込みに時間を掛けないために、凝った装飾や大きな画像・動画の使用は避けましょう。シンプルなデザインになるため自由度が低くなります。
製作時の工数がかかる
各デバイスに合わせたデザイン、表示方法を1つのHTMLファイル内に書きます。書いたコードが正しく表示されるかの確認作業もあるため、通常のWebサイトを作るより手間と時間が掛かります。
ホームページ作成時レスポンスデザインの気をつける点
同じホームページを見るだけだとしても、パソコン版とスマートフォン版ではユーザー心理が異なります。ユーザー心理を踏まえたレスポンシブWebデザインを考えましょう。
どのデバイスで表示させるか考える
例えば、スマートフォンの小さな画面では大事なことが素早く伝わることを重視します。補足情報は載せず、パソコンやタブレット用のサイトで載せた方がよいでしょう。
どのデバイスで何を表示させるか、優先順位を考えながら表示する内容を決める必要があります。
スマートフォンより設計
大きい画面に比べ、スマートフォンのように小さい画面では様々な制約があります。一番最初に画面が小さいスマートフォン用のサイトから作り始めましょう。
2016年を境に、パソコンよりもスマートフォンの保有率が高くなりました。スマートフォンから見られることを前提に作成し、その後、他のデバイスでも正しく表示されるよう調整するのが望ましいです。
高解像ディスプレイに対応させる
スマートフォンやタブレットも高解像度化が進んできています。AppleのiPhoneやiPadに代表されるRetinaディズプレイでは、通常のディスプレイに比べ解像度が倍以上必要です。高解像度ディスプレイ搭載の端末表示に対応していないと、画像の解像度が足りずボヤけた印象を抱きます。Retinaディズプレイでも美しく見えるように縦横2倍サイズの画像を用意してください。
画像ファイルは最小限でコンパクトにする
デスクトップ版の大きなデータを、スマートフォンでも読み込ませるため表示するのに時間が掛かることは説明しました。ここでは、解決方法を4つ紹介します。
1、画像ファイルは圧縮して、必要以上の容量を使わないように小さいものにしましょう。
2、CSSやWebフォントを利用しましょう。
3、CSSスプライト(複数の画像を1枚の画像に載せ、表示する箇所を指定する方法)を使いましょう。
4、画面幅に合わせて読み込む画像を小さいものに切り替える設定をしましょう。
レスポンシブWebデザインの作り方とは？
引用：https://pixabay.com/ja/photos/%e3%82%aa%e3%83%b3%e3%81%ab%e3%81%99%e3%82%8b-%e3%82%b9%e3%82%a4%e3%83%83%e3%83%81%e3%82%92%e3%82%aa%e3%83%95%e3%81%ab%e3%81%97%e3%81%be%e3%81%99-2925962/#content
さて、レスポンシブWebデザインとは何か、メリットとデメリットを見てきました。
ここからは、作り方について説明します。
見せ方の種類
代表的な3種類のレイアウトについて紹介します。それぞれに特徴がありますので、ご自身の好みに合わせて選ぶと良いでしょう。
レスポンシブレイアウト（レスポンシブデザイン）
レスポンシブレイアウト（レスポンシブデザイン）は、横幅ごとに表示するレイアウトを変えます。
CSSを切り替えるピクセル数のことを「ブレイクポイント」と言います。ブレイクポイントの値を指定し、閲覧者のデバイスに合わせて、それぞれの画面幅に適したレイアウトで表示します。ブレイクポイントの値は任意で決めることが出来るので、スマートフォンの横幅などを参考に決めましょう。
リキッドレイアウト
リキッドレイアウトはデバイスの画面幅の変化に合わせてサイト全体の幅を変えることを言います。
例えば、パソコン用にデザインしたサイトをスマートフォンで表示した際に、横へスクロールしないと全体が見られないといった経験はないでしょうか。リキッドレイアウトは、各要素の単位をパーセントで指示を出すことによって、どのデバイスからアクセスしても、サイト全体が表示され見やすい画面になります。
フレキシブルレイアウト
各要素の単位をパーセントで指示をするのは、リキッドレイアウトと同じです。ただし、フレキシブルレイアウトの場合、画面の最大と最小の幅を設定します。
指定した最大幅よりも大きな画面幅で表示した場合、例えばパソコン画面では余白が生まれ、綺麗なレイアウトに調整されます。
表示させる方法
レスポンシブWebデザインの表示方法には、2種類あります。
ホームページ作成が初めての方は、混同しやすい部分でもありますのでしっかり理解しておきましょう。
viewport設定
サイトを表示するときに、どの大きさで表示するかを指定するために使います。
主に指定できるものは4つです。
1、初期倍率
2、横幅と縦幅
3、最小倍率と最大倍率
4、ズーム操作の可否
パソコン・スマートフォン・タブレットでviewport設定が異なりますので注意が必要です。「スマートフォンでは、縦幅・横幅はこれくらい、ズームをしてもいいよ…って決めておいたから、この通りに表示してね」と指示する情報のことを指します。
パソコン版のサイトがそのまま画面の小さいデバイスに表示されると、文字や写真を見るのに、わざわざズームしなければなりません。この一手間をユーザーに与えないためにも、viewport設定は必要です。
メディアクエリを適用するためにもHTMLのHeadタグ内にviewportを記述する必要があります。
メディアクエリ
メディアクエリとは、閲覧者の利用するデバイス幅に合わせてサイトの見せ方を変更できるようにすることです。対象のデバイスを指定し、画面幅や画面の向きなどのWebページの見栄えを決めます。この設定をしないと、パソコン用のウェブサイトをスマートフォンからアクセスした場合、ウェブサイトが正しく表示されません。
文字が小さい・画像が不自然など、使いづらさを感じてしまうとユーザーは閲覧を止めてしまいます。ホームページにアクセスして来てくれたのに、何も見せることなく離れてしまわないようきちんと設定しておきましょう。
レスポンシブデザインのテンプレート5選
ここまでレスポンシブデザインのホームページの作り方などをお伝えしてきましたが、それでも1から作るのは大変な作業です。以下では、レスポンシブWebデザインに対応したテンプレートが使えるサイトを5つ紹介します。一部有料な部分もありますが、基本的に無料で使えます。
TEMPLATE PARTY
・Web制作業者でも無料で使えるテンプレートが1,000点以上あります。
・個人サイト向けや初心者向けのテンプレートもあります。
・具体的な職業別にカテゴライズされているページもあるので、希望にあったテンプレートを探しやすいでしょう。
※WordPressテーマのサポートは終了しています。
公式HP:TEMPLATE PARTY
無料ホームページテンプレート.com
・高品質で商用利用可能なテンプレートが豊富です。
・HTMLテンプレート、ワードプレステーマが全部無料です。
・ホームページ制作会社も利用可能です。
・テンプレートに紐づいたマニュアルがあるので初心者も安心して利用できます。
・実際に使う前にデモサイトを見ることができ、自分の利用イメージに近いものを選びやすいでしょう。
公式HP:無料ホームページテンプレート.com
TempNate
・テンプレートのカスタマイズ・商用利用が出来ます。
・情報を伝えるテキストを重視したレイアウトが特徴です。
・シンプルなので途中で挫折しない作りになっていて、初心者の方にもおすすめです。
・慣れてきたらカスタマイズや改良がしやすいです。
・HP制作の代行も可能です。
・ワードプレス用のテンプレートもあります。
公式HP:TempNate
Wix
・世界190ヵ国、2億人以上の人々に選ばれています。
・利用するためにWiXにログイン、または新規登録が必要です。
・WiX公式ブログから、デザインのトレンドやWeb制作スキルの磨き方などの情報を得られます。
・どうしてもご自身でHP作成ができない場合、WiX公式のWeb制作会社やWebデザイナーを検索できます。
公式HP:Wix
jimdo
・200万人ユーザーが利用する最大級のホームページ作成サービスのサイトです。
・3,200万以上のサイトが作成されています。
・登録時に案内される質問に答えるだけで未経験者でも本格的なホームページが作れます。
公式HP:jimdo
まとめ
引用：https://pixabay.com/ja/photos/%e7%b5%90%e6%9e%9c-%e3%83%90%e3%83%a9%e3%83%b3%e3%82%b9-%e3%82%b7%e3%83%bc%e3%83%88-%e6%88%90%e5%8a%9f-3236285/#content
レスポンシブWebデザインを取り入れることにより、見栄えよく美しいホームページが作れるだけでなく、管理も簡単になることを解説しました。
個人のインターネット利用機器は6歳～79歳までの年齢層で、パソコンよりもスマートフォンが上回っています。
またGoogleの検索アルゴリズムにおいても、2015年4月に「モバイルフレンドリー」・2019年7月に「モバイルファーストインデックス」という評価基準が実装されました。スマートフォンからの検索数が増えたことにより、Googleがページ評価をする上でスマートフォンからのニーズも重要な基準になっています。
スマートフォンからの閲覧者が増えたとはいえ、依然としてパソコンユーザーも多数います。
パソコンユーザーを取りこぼすことなく、スマートフォンの様な小さな画面でもスマートにホームページを見られるようレスポンシブWebデザインを取り入れましょう。
引用元:総務省 令和2年通信利用動向調査の結果より
引用元:Google Serch Central Blogより「モバイルフレンドリー」について引用元:Google Serch Central Blogより「モバイルファーストインデックス」について
コメント