2023.08.18cocoブログ
レスポンシブデザインを解説！参考になる工務店スマホサイト5選
工務店・建設業のホームページ制作会社webcoco(ウェブココ)です。
あなたの会社のホームページはスマートフォン対応ができていますか？
従来のお客様の多くはPC画面からホームページを閲覧されていましたが、近年はスマホやタブレットの普及により、人それぞれ見る画面サイズが異なるようになりました。
- スマホでホームページを閲覧したら、PC表示で見づらかった
- スマホ画面だと文字が読みづらい
- レイアウトが崩れていて内容が伝わらない。
もしも、自社のホームページがそのような場合は早急に改善することをお勧めします。
そこでお勧めなのが「レスポンシブデザイン」の導入です。
レスポンシブデザインとは、閲覧ユーザーのデバイスの画面サイズに応じて見やすいように表示を調整することを指します。
マルチデバイスという時代の流れに対応するためにもレスポンシブデザインを導入して、どのデバイスからでも見やすいホームページにしてみませんか？
今回はレスポンシブデザインのメリット・デメリットと、実際に制作する際に気を付けること、そしてレスポンシブ対応している参考になるホームページ５選をご紹介します。
気になるデザインやコンテンツがありましたら、お気軽にお問い合わせください。
目次
レスポンシブデザインのメリット
まずは、レスポンシブデザインのメリットについてご説明します。
SEOに有利になる
レスポンシブデザインにすると、PCやスマホ、タブレットなどすべてのデバイスから同じURLでアクセスできるようになります。
つまり、サイト評価が一つのURLに統一されるため、検索エンジンから正しく評価され、順位が上昇しやすくなるのです。
また、Googleのアルゴリズムの中に、スマホに対応したWEBサイトになっているかを基準とする「モバイルフレンドリー」、PC用サイトではなくスマホ用サイトをページ評価の基準とする「モバイルファーストインデックス」という評価基準があります。
レスポンシブデザインでスマホに適したレイアウトにすることで、閲覧ユーザーの満足度が高まり、検索順位を上昇させます。
情報が伝わりやすくなる
これまではPC用のWEBサイトをスマホで閲覧すると、レイアウトが崩れていたり文字が小さかったりなど、内容が正しく表示されないことがありました。
レスポンシブデザインにすることで、どんなデバイスからでも見やすいレイアウトになります。
また、それぞれのデバイスの表示を考慮した文字のサイズや書体にすることで、可読性が高くなります。
WEBサイトの修正や更新がしやすくなる
サイトの修正や更新をする際、従来の方法ではデバイスごとに存在する複数のHTMLを調節する必要がありましたが、レスポンシブデザインはCSSの記述のみなので更新作業が1回で済みます。
レスポンシブデザインのデメリット
次に、レスポンシブデザインのデメリットについてご説明します。
コーディングに手間がかかる
コーディングとは、プログラミング言語を使用してコードを記述していく作業のことです。
多くのデバイスに対応できるようにコーディングを行うため、通常のWEBサイトよりも高度な技術や時間が必要になります。
WEBサイトの読み込み速度(表示速度)が遅くなる場合がある
スマホやタブレットでの閲覧時もPC用のHTMLやCSS、画像ファイルを読み込むため、環境によっては読み込み速度(表示速度)が遅くなる場合があります。
ですが、画像ファイルやCSSを軽くすることで表示速度を上げることは可能なので、十分改善はできます。
レスポンシブデザインで制作する際に気を付けること
次は、レスポンシブデザインで制作する際に気を付けなければいけない点についてご説明します。
最適なフォントサイズにする
PC画面に最適なフォントサイズだと、スマホ画面では小さくて読めないということが多いです。
先ほど「モバイルフレンドリー」についてご説明した内容を思い出してください。スマホで見た際に、フォントが読みづらいという場合、そのホームページは「モバイルフレンドリーではない」と判断され、SEOに悪影響を及ぼしてしまいます。
Googleでは本文のフォントサイズとして16pxを推奨しているので、参考にしてみてください。
基本的には14~16pxを基準に制作することをお勧めします。
ボタンをタップしやすくする
小さなカーソルで操作するPCとは違って、スマホでは指を使って操作するため、指で押しやすい大きさにしましょう。
また、ボタン同士の距離が近すぎると、押し間違えてしまうことがあるので、距離を十分にあけるようにしてください。
ナビゲーションを見やすくする
スマホで閲覧した際に、3本線の「≡」アイコンのボタンを見たことはありませんか？
これは「ハンバーガーメニュー」といって、この中にメニュー項目を隠すことができ、タップすると項目がスライドして出てきます。ハンバーガーメニューを用いることで、小さなスマホ画面の中でもすっきりとしたデザインを実現できます。
しかし、普段Webサイトを閲覧しないという方にとっては「≡」アイコンが何を意味しているのか分からない場合があるというデメリットもあります。
ヘッダーナビゲーションを使用する場合は、機能が予測できるようなアイコンを使用したり、大まかなカテゴリで分けて最小限の表示にしたりすると、分かりやすい導線になります。
また、ホームへ戻るボタンや、検索ボタンなどよく使うメニューは、画面下段にボトムナビゲーションとして常に表示されるようにしておくと便利です。
タブやカルーセルなどを利用する
小さなスマホ画面の中で、多くの情報を伝えつつ、すっきりとしたデザインは保ちたいという場合、「タブ」や「カルーセル」などを活用することをお勧めします。
まず「タブ」というのは、そのページから動かないまま、タブエリア内の表示のみが切り替わる仕組みのことをいいます。
次に「カルーセル」というのは、複数の画像やコンテンツが、横方向にスライドしていく仕組みのことをいいます。
どちらも1画面内では収まらない情報量の場合や、項目を分けて表示させたい場合に便利です。
もちろん縦に情報を羅列することもできますが、あまりにも長くなってしまっては、縦スクロールしていく内にお客様にストレスがかかってしまい、ホームページから離脱してしまう要因に繋がります。
レスポンシブ対応！参考になる工務店スマホサイト５選
それでは、先ほどご説明した内容と照らし合わせながら、参考になるホームページをご紹介します。
株式会社ホームランディック
愛知県の工務店「株式会社ホームランディック」様のホームページです。
メインビジュアル右上に設置したハンバーガーメニューに項目が収納されているので、ごちゃごちゃせず、ホームページのスタイリッシュな雰囲気を保っています。
ハンバーガーメニューはスクロールしても追従するようになっているので、いつでも別のページに飛ぶことができます。
メインビジュアルのすぐ下にはYouTube動画のコンテンツがあり、左右にスライドできるようになっているので、複数の動画を手軽に閲覧できます。
株式会社ホームランディック url:https://www.homelandick.com/
井上建設株式会社
広島県の工務店「井上建設株式会社」様のホームページです。
ファーストビューでは画面いっぱいに配置された施工事例の写真がインパクトを与えています。
また、「資料請求」「お問い合わせ」「LINE登録」のボタンを目立つように配置し、お問い合わせへの導線確保もしっかりされています。ボタンは指でタップしやすいように大き目のサイズです。
メインビジュアルのすぐ下には、画面いっぱいの写真を用いたラインナップの紹介があります。写真のどこを押してもリンク先に飛ぶことができるので、手軽にタップできるようになっています。
井上建設株式会社 url:https://www.inouekensetu.jp/
有限会社IN THE HOME
愛知県の工務店「有限会社IN THE HOME」様のホームページです。
メインビジュアル右下のメニューボタンをタップするとフルスクリーンでメニューが表示されるようになっています。
また、「資料請求」「無料相談会」「無料プラン」「LINE登録」へ繋がるリンクを画面下段にボトムナビゲーションとして表示しておくことで、常に予約やお問い合わせへの導線を確保しています。
有限会社 IN THE HOME url:https://www.inthehome.jp/
LIG STYLE
岐阜県の工務店「LIG STYLE」様のホームページです。
画面右上のハンバーガーメニューは追従するようになっているので、いつでも表示できます。
タップをすると、フルスクリーンでメニューが表示され、大カテゴリと小カテゴリで細かく分けられているので、お客様が見たいページへピンポイントで飛ぶことが出来ます。
メインビジュアルのすぐ下には、各「イベント・セミナー情報」が横スライドで見ることができます。
LIG STYLE url:https://www.ligstyle.com/
KR.design
愛知県の工務店「KR.design」様のホームページです。
ハンバーガーメニューはスクロールすると追従するようになっており、資料請求やお問い合わせへの導線を常に確保しています。メニューはフルスクリーンで表示されるので、見たいページがどこにあるのかがすぐに分かります。
施工例はカルーセルで表示されているので、スマホの小さな画面でも、一度にたくさんの施工例を見ることができます。
KR.design url:https://kr-design.jp/
まとめ
メリット
- SEOに有利になる
- 情報が伝わりやすくなる
- WEBサイトの修正や更新がしやすくなる
デメリット
- コーディングに手間がかかる
- WEBサイトの読み込み速度(表示速度)が遅くなる場合がある
レスポンシブデザインで制作する際に気を付けること
- 最適なフォントサイズにする
- ボタンをタップしやすくする
- ナビゲーションを見やすくする
- タブやカルーセルなどを利用する
今回はレスポンシブデザインのメリット・デメリットと、実際に制作する際に気を付けること、そしてレスポンシブ対応している参考になるホームページ５選をご紹介しました。
工務店、リフォーム会社、建設業様の皆様、今回ご説明した内容を踏まえて、自社のホームページを見直してみてはいかがでしょうか？
近年、レスポンシブデザイン化の必要性が、急速に注目を集めています。
私たちwebcoco(ウェブココ)では、レスポンシブデザインを導入しており、どのデバイスからでも見やすいホームページを制作しております。
まずは簡単なご相談からでも大歓迎ですので、ぜひお気軽にお問い合わせください。
