![レスポンシブデザインとは?](https://image.jimcdn.com/app/cms/image/transf/dimension=700x10000:format=jpg/path/se0a52b91522daf8d/image/i769e3395adc7ddec/version/1617701260/%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%A8%E3%81%AF.jpg)
パソコンだけでなく、スマートフォンやタブレットの利用も多い昨今では、レスポンシブデザインでのホームページ作成が求められています。ホームページ閲覧者のデバイスによって画面サイズを自動で調整する、レスポンシブデザインの特徴やメリットをまとめました。レスポンシブデザイン対応のテンプレートがあるサイトも、あわせて紹介します。
<目次リストを追加する領域>
レスポンシブウェブデザインとは
![レスポンシブデザインって何?](https://image.jimcdn.com/app/cms/image/transf/dimension=700x10000:format=jpg/path/se0a52b91522daf8d/image/ib37e440b35feeb9f/version/1617701062/%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%A3%E3%81%A6%E4%BD%95.jpg)
レスポンシブウェブデザインとは、閲覧する人の端末にあわせて、ホームページを見やすい表示に自動で変える手法です。表示幅のデザインをHTMLではなく、CSSファイルでコントロールすることで、各デバイスに合わせた表示を可能にします。ユーザーのデバイスにかかわらず、共通のHTML、CSS、URLを使用。レスポンシブデザインでは、現在多くのブラウザにサポートされているCSS3を使用しているので、汎用性も問題ありません。
レスポンシブ対応のホームページが求められる理由
ホームーページの閲覧には、パソコンだけでなく、スマホやタブレットなどさまざまなデバイスが利用されています。2019年にはスマホからのネット利用が全世帯でトップになりました。スマホユーザーが圧倒的に増えている現代では、スマホでの閲覧に適したサイト作成が不可欠です。
2018年に大手検索サイトのグーグルは、検索順位の位置づけをパソコンサイトではなく、モバイルサイトでのコンテンツを基準にすると発表しました。検索サイトでホームページを上位に表示させるためには、パソコンだけでなく、モバイルでの表示にも対応している、レスポンシブデザインの適用が求められています。
レスポンシブデザインのメリット
レスポンシブデザインに対応したホームページでは、閲覧者のデバイスによって表示エラーが起きてしまう心配がありません。表示エラーが少ないとストレスを感じずに操作ができるので、ユーザビリティの向上が期待できます。
従来のホームページであれば、同じ内容でもパソコンとスマホで別々のURLが必要でした。そのため、グーグルからは重複コンテンツとみなされてしまい、SEOが期待できませんでした。レスポンシブデザイン対応のホームページはURLが統一されているため、SEOの面でも効果が期待できます。
また、モバイルフレンドリー対応のためグーグルからの評価が高くなり、上位に表示されやすくなるメリットもあります。
レスポンシブデザインのデメリット
レスポンシブデザイン対応のホームページでは、HTMLが1つなのでパソコンと同じデータをスマホでも読み込む必要があります。スマホでは表示されないデータも読み込まれるため、表示に時間がかかりストレスがかかるデメリットがあります。また、スマホとパソコンで異なるデザインにしたり、画像に異なる動きをさせたりといった変更は不可能です。
レスポンシブデザイン対応のホームページをサイト制作会社に受注する場合、コーディングやデザインで複雑な工程が必要です。そのため、PC用のホームページのみ作成よりも、完成までに時間がかかります。
レスポンシブデザインを採用するべき局面
![レスポンシブデザインって重要!](https://image.jimcdn.com/app/cms/image/transf/dimension=700x10000:format=jpg/path/se0a52b91522daf8d/image/iaf5a689052a27eab/version/1617701090/%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%A3%E3%81%A6%E9%87%8D%E8%A6%81.jpg)
レスポンシブデザインをホームページに採用するか否かは、自社ホームページにメリットがあるかをきちんと見極めてから判断する必要があります。レスポンシブデザインは、あくまでもホームページを作成するデザインのひとつです。レスポンシブデザインがもっとも優れているわけではありません。自社のターゲットユーザーがホームページを閲覧している場面、SNSからの流入数、更新頻度などを考えて、レスポンシブデザインを採用するか決めるのがいいでしょう。
ホームページのリニューアルが必要、サイトの更新が頻繁な場合
自社ホームページを訪れるユーザーのデバイスがパソコンとスマホが同数、あるいはスマホやタブレットが増加傾向の場合は、リニューアルのタイミングで、レスポンシブデザインのホームページに変えることをおすすめします。PCサイト、モバイルサイト用と分けて運用する必要がないので、ホームページ運営にかかる時間とコストの削減が可能です。
また、更新が頻繁なホームページの運営にも、レスポンシブデザインが適しています。更新したいページや修正したいページがあった場合、従来では、PCサイト、モバイルサイトそれぞれを修正更新したうえで、確認作業やチェック作業が必要でした。レスポンシブデザインのホームーページを採用すれば、更新や修正の作業が一度で完了します。
SNSからの流入を増やしたい場合
自サイトの閲覧者が若者やSNSを好む人が多い場合も、レスポンシブデザインへの変更で集客が期待できます。客層が若いほど、モバイルとの関連性が高いので、おのずとTwitterやインスタグラムからの流入も多くなるでしょう。レスポンシブデザインなら、URLが1つで済むので、SNSにいくつもURLを貼って見栄えが悪くなる心配もありません。
レスポンシブデザインのホームページテンプレート5選
![レスポンシブデザインのテンプレート提供元5選](https://image.jimcdn.com/app/cms/image/transf/dimension=700x10000:format=jpg/path/se0a52b91522daf8d/image/id2e572a6abf60b18/version/1617701128/%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AE%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E6%8F%90%E4%BE%9B%E5%85%83%EF%BC%95%E9%81%B8.jpg)
自動で最適なデザイン表示を行うレスポンシブデザインは、さまざまなデバイスに対応できて便利です。しかし、自分でレスポンシブデザインを構築するためには、CSSを理解する必要があります。ホームページ制作会社に外部委託すると、時間も費用もかかるでしょう。また、ホームページを変更したり、修正したりしたいときに、なんどもやり取りが必要になることも。
レスポンシブデザインのテンプレートを採用すれば、好きなタイミングで修正や更新が可能になり、外部に委託するコストもおさえられるでしょう。
ここでは、レスポンシブデザインに対応したテンプレートが利用できるホームページ作成サイトを5つ厳選しました。初心者にも使いやすい無料のものから、豊富なデザインが多い有料のものまで、それぞれの特徴とともに紹介します。
ジンドゥー(Jimdo)
![無料でも有料でもご利用いただけるCMS「ジンドゥー」](https://image.jimcdn.com/app/cms/image/transf/dimension=700x10000:format=png/path/se0a52b91522daf8d/image/id8d1a081df8c763a/version/1617259037/%E7%84%A1%E6%96%99%E3%81%A7%E3%82%82%E6%9C%89%E6%96%99%E3%81%A7%E3%82%82%E3%81%94%E5%88%A9%E7%94%A8%E3%81%84%E3%81%9F%E3%81%A0%E3%81%91%E3%82%8Bcms-%E3%82%B8%E3%83%B3%E3%83%89%E3%82%A5%E3%83%BC.png)
出典:ジンドゥー(Jimdo)
- 約40種類
- 無料プラン サーバー容量500MB、すべての基本機能が利用可能
- 有料プラン990円~広告費表示、ホームページアクセス解析などの追加機能
ジンドゥーのホームページテンプレートは、すべてレスポンシブ対応。ジンドゥーでは、画面サイズの異なるパソコンとスマホで背景位置を設置する「フォーカルポイント」の設定が可能です。
レスポンシブデザインのテンプレートでは、背景に表示される画像の位置が、パソコンとスマホで異なります。フォーカルポイントを利用して中心を設定すれば、背景がずれる心配もありません。
無料ホームページテンプレート.com
- 約200種類
- 無料プランのみ ※テンプレート下部に表示される、クレジット表記リンクを外したい場合は、シリアルキーを2,980円で購入が必須。
無料ホームページテンプレート.comでは、HTMLとワードプレスに対応したレスポンシブデザインのテンプレートを提供しています。商用サイトでも利用可能なテンプレートが、すべて無料。シミュレーター機能を使えば、作成したサイトがパソコンやスマホでどのように見えるのかの確認ができます。
ダウンロード後のテンプレートは、自由にカスタマイズが可能。オリジナリティにとんだホームページが作成できるでしょう。
クラウドテンプレート(Cloud Template)
![http://c-tpl.com/](https://image.jimcdn.com/app/cms/image/transf/dimension=700x10000:format=png/path/se0a52b91522daf8d/image/i568a02283b25ea33/version/1617700194/http-c-tpl-com.png)
- 約1700種類
- ワードプレステーマ1,980円
- HTMLテーマ4,980円
クラウドテンプレートは、株式会社クラウドナインが運営しているテンプレート提供サイトです。HTML、ワードプレスそれぞれに対応したレスポンシブデザインのテンプレートが豊富にそろっています。シンプルなものから豪華なものまでバラエティ豊かです。
無料プランはなく有料プランのみですが、テンプレートのデザイン性が高いので、高品質のホームページが作成できるでしょう。また、ダウンロードできるテンプレートの数に制限がないので、好きなだけテンプレートが利用できます。
アメーバオウンド(Ameba Ownd)
- 約40種類
- 無料プラン 画像ストレージ1G、ページ数10ページ、広告表示あり
- 有料プラン 960円 ページ数、画像ストレージともに無制限、広告費表示
アメーバブログサービスで知られるサイバーエージェントが提供しているサービスです。ホームページ公開まで3ステップで済むので、初心者でも安心して進められるでしょう。独自ドメインの取得も、無料で可能。独自ドメインの使用量は別途かかるので、注意が必要です。
ウィックス(Wix)
![ウェブサイトの作り方を目的や用途別に紹介!おすすめ作成サービスも](https://image.jimcdn.com/app/cms/image/transf/dimension=700x10000:format=png/path/se0a52b91522daf8d/image/ie5bd61e7a7d7d5db/version/1617258933/%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9%E3%82%92%E7%9B%AE%E7%9A%84%E3%82%84%E7%94%A8%E9%80%94%E5%88%A5%E3%81%AB%E7%B4%B9%E4%BB%8B-%E3%81%8A%E3%81%99%E3%81%99%E3%82%81%E4%BD%9C%E6%88%90%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%82%82.png)
出典:ウィックス(Wix)
- 約500種類
- 無料プラン 広告表示あり、独自ドメイン不可、データ容量500MB
- 有料プラン 500円~2500円 独自ドメイン可。データ容量500MB~20GB
ドラッグ&ドロップで直感的にホームページが作れるサービスです。テンプレートの豊富さと手軽さから、世界中で1億人以上に愛用されています。PCビュー、モバイルビュー機能を使えば、位置調節も簡単に行えます。
レスポンシブ対応のテンプレートでホームページを作成しよう
![レスポンシブデザインおすすめ](https://image.jimcdn.com/app/cms/image/transf/dimension=700x10000:format=jpg/path/se0a52b91522daf8d/image/ie735230a520265d0/version/1617701294/%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%8A%E3%81%99%E3%81%99%E3%82%81.jpg)
ブラウザにあわせて自動で表示を変えられるレスポンシブデザインに対応したホームページの需要は、高まっていくでしょう。CSSの知識が必要なレスポンシブデザインをイチから作成したり、サイト作成会社に委託したりすると時間や手間、費用がかかります。
レスポンシブデザインのテンプレートが充実しているサイトを利用して、集客につながすホームページを作成しましょう。