近年、インターネットへのアクセスはスマートフォン経由が大多数を占めています。実際に、総務省は発表している「令和2年版 情報通信白書」を見てみると、2019年時点でインターネット利用端末は、パソコンが50.4%であるのに対し、スマートフォンは63.3%となっています。(参照元:https://www.soumu.go.jp/johotsusintokei/whitepaper/ja/r02/html/nd252120.html

パソコンよりもスマートフォンからインターネットを閲覧する人の方が多いことは一目瞭然です。したがって、ホームページ運営においてスマホ対応は不可欠といえるでしょう。

それでは実際に、ホームページをスマホ対応にするためにはどうしたらいいのでしょうか。特に、既にホームページを開設している方はお悩みの方が多いのではないでしょうか?

本記事では、ホームページをスマホ対応にする方法を詳細に解説しています。これからホームページを作成する方も、既にノームページを持っている方も、あるいはWordPressでホームページを運営している方も、全ての人に向けたスマホ対応の方法を掲載しています。

併せて、スマホ対応していないことのリスクやスマホ対応のメリットも紹介しているので参考にしてください。

スマホ対応も標準搭載!
追加料金一切なしのホームページ作成サービス

siteflowでは、プロが作る高品質なホームページを
初期費用0円、月額9,000円からご提供します。

プロが作成、運用サポート付きだから初めての方でも安心です。

スマホ対応ページもパッケージに標準搭載!
公開後の運用サポートも追加料金なし!
サービス自体が随時更新されるから常に最新!

siteflowであなたに最適なホームページを。
まずは無料相談をお試しください。

スマホ対応とは?

スマホ対応とは、ユーザーがスマートフォンでホームページを閲覧する際にスマートフォン表示に最適化されている状態を指します。ここで大切なポイントは、ホームページをスマートフォンで閲覧できることではなく、スマートフォンでの閲覧に最適化されている点です。基本的にホームページの閲覧はPCでもスマートフォンでも見ること自体は可能です。

しかし、PCとスマートフォンでは縦と横の比率が異なるため、それぞれのデバイスでユーザーの見え方は大きく異なります。そのため、ホームページを作成する場合は、どのデバイスで閲覧しても最適化されるように設計せねばなりません。とくにスマートフォンが爆発的に普及している昨今において、ホームページのスマホ対応は必須の施策といえるでしょう。

スマホ対応していないことの3つのリスク

わざわざスマホ対応にしなくても、ページ自体の閲覧はできるのだがら問題ないのではないか、と思う方もいるでしょう。それでは実際に、スマホ対応が必須ともいえる現代において、スマホ対応されていないページに潜むリスクについてみていきましょう。

1. 見づらい

まず1つ目のリスクですが、端的に、スマホ対応されていないホームページは非常に見えづらいです。そしてこのことがユーザーに大きなストレスになります。AppleのMacとiPhoneを例に考えてみましょう。たとえば「MacBook Pro」の解像度は2,560×1,600でアスペクト比は16:10、「iPhone 12」は解像度が2,532×1,170でアスペクト比は19.5:9となります。

アスペクト比そのものに大きな違いはありませんが、PCであるMacは横長で、スマートフォンのiPhoneは縦長で使用されるのが一般的です。そのため、仮にホームページのwidth(横幅)を横長のMacBook Proでの閲覧に適した幅で作成した場合、縦長のiPhone 12では非常に見づらい仕様になります。

2. 操作しにくい

2つ目のリスクはスマホ対応していないページでは、ボタンやリンクの大きさ・配置の表示に悪影響が出る点です。例えばボタンの表示が小さくなってしまうといったことが起こるのです。そのため、スマートフォンでホームページを閲覧している人にとって、そのページの操作性は劣悪なものとなります。

また、文字の大きさが最適化されていないと、何度も拡大・縮小を繰り返さなければならないと言うことも考えられるため、これもまたユーザーにとって非常に大きなストレスを与えるでしょう。

3. 離脱率が悪化する

3つ目のリスクは、サイトを訪れたユーザーの離脱率が悪化すると言うことです。

ホームページの設計と運営において、視認性や操作性といったユーザビリティは非常に重要な要素です。ユーザーはホームページにアクセスした際、無意識下で一瞬の内に閲覧を続行するか否かを判断します。

スマートフォン未対応のホームページは文字や画像、ボタンやリンクが小さく表示され、視認性や操作性に劣るため、ユーザーの離脱率が高い傾向にあります。また、離脱率の悪化はユーザーや見込み客を逃すだけでなく、検索順位の低下にもつながる点も大きなデメリットです。

検索エンジンはユーザーにとって有益なホームページを上位に表示するため、直帰率の高さは改善が必要なページと判断され、検索順位に影響します。そのため、スマホ対応はユーザビリティの向上とSEOという両方の観点において不可欠な施策といえるでしょう。

スマホ対応させる2つの方法

ホームページをスマートフォンに最適化する方法は主に2つあります。それが「レスポンシブデザイン」と「PC用とスマートフォン用のページ設計」です。ここからはスマホ対応の具体的な方法について解説します。

1. レスポンシブデザイン化する

レスポンシブデザインとは、ホームページを閲覧しているユーザーの画面サイズに応じて表示を最適化する表示方式を指します。「responsive」は直訳すると「反応する」や「敏感な」という意味をもち、PCやスマートフォン、あるいはタブレットなど、デバイスの画面サイズに反応して自動的に切り替わるデザイン方式です。

レスポンシブデザインはHTMLについてはほぼ共通で、CSSファイルにMedia Queryを記述し、要素の幅を指定するmax-widthやmin-widthといったプロパティで表示を制御します。

ホームぺージ作成ツールを使ってホームページを作成する場合、現在はほとんどのテンプレートがレスポンシブデザインに対応しているため、テンプレートを活用してホームページを作成してみるといいでしょう。

ここではおすすめのホームページ作成ツールであるWixを紹介しますので、ホームページ作成ツールの利用を検討している方は、参考にしてください。

Wix

引用元:Wixホームページ(https://ja.wix.com/

Wixはイスラエル発のホームページ作成ツールの開発提供企業です。作成者のスキルに応じて、様々な利用方法が選択できる点が大きな特徴の一つと言えます。

また、目的別の細かな料金プランがあることもユニークな点で、大きく分けて「ホームページプラン」と「ビジネス&Eコマースプラン」に分かれており、幅広いユーザーが使用するケースを想定した料金プラン体系となっています。

無料ドメイン接続ベーシックアドバンスVIP
初期費用0円0円0円0円0円
月額費用0円500円900円1,300円2,500円
データ容量500MB500MB3GB10GB35GB
広告の非表示××
独自ドメイン×

以下の記事ではホームページ作成ツールを12社紹介しています。無料から作成できるツールを集めているので初心者の方でも手軽に始められます。また、集客力のあるホームページを作るために必要な情報も記載していますので、併せてご覧ください。

また、制作会社に外注してホームページを作成する場合には、事前にレスポンシブ対応を希望する旨を伝えましょう。現在はほとんど全ての制作会社がレスポンシブ対応化のノウハウを持っているため、対応してもらえるはずです。ただし、レスポンシブ対応にオプション料金がかかるケースもあるため注意してください。

2. PC用・スマホ用のホームページを設ける

スマホ対応の方法として挙げられるもう1つの方法が、スマートフォン専用ページを作成することです。HTMLとCSSの両方を別々に作成し、.htaccessやPHPなどでリダイレクトすることでPC版とスマートフォン版に振り分けることができます。

PC用とスマートフォン用のそれぞれに最適化されたレイアウトが構成できるというメリットがありますが、2つのホームページを作成することと同義なため、作業量が2倍になるという点が大きなデメリットです。そのため、レスポンシブデザインがスマホ対応の主流となっています。

そのため、レスポンシブデザインがスマホ対応の主流となっています。

レスポンシブデザインにすることの3つのメリット

なぜ、レスポンシブデザインでスマホ対応にする方が良いのでしょうか?この章では、デバイスごとにホームページを作成するのではなく、レスポンシブデザインでスマホ対応にすることで得られるメリットを3つ紹介します。

1. 検索エンジンからの評価が上がる

1つ目のメリットは、Googleがレスポンシブデザインを推奨している点です。PC用とスマートフォン用のページを2つ作成する場合、Googleはそれぞれを1つのホームページとしてアルゴリズムを構成する必要があります。

レスポンシブデザインであれば、Googleがホームページをクロールするためのリソースを節約することができます。つまりクローラビリティが向上することで、相対的に検索エンジンからの評価も高まる点がレスポンシブデザインの大きなメリットです。

2. コストが削減できる

2つ目のメリットはホームページ制作と運営におけるコストの最適化です。PC用とスマートフォン用のホームページをそれぞれ構築する場合、HTMLとCSSの両方を2つ作成せねばなりません。さらにアクセスしたユーザーのデバイスに応じてリダイレクトする仕組みを用意するなど、手間やコストを必要とします。

3. ユーザビリティが向上する

3つ目のメリットはユーザーのストレスを軽減できることです。デバイスを判定して振り分けるリダイレクトにはタイムラグがあるため、そのわずかな時間差がユーザーにとってストレスになり、離脱率の悪化につながるという点は大きな欠点です。

レスポンシブデザインは1つのHTMLとCSSでホームページを作成できるため、制作と運用におけるコストを最適化できると同時に、タイムラグを最小限に抑えられるため、ユーザビリティの向上にも寄与するという点がメリットといえるでしょう。

レスポンシブデザインにすることのメリットをいくつか紹介しましたが、やはりいちばん大きなメリットはGoogleがレスポンシブデザインを推奨しているためSEO対策につながるという点ではないでしょうか。SEO対策により上位表示されると、クリック率の向上や広告効果など、計り知れないメリットが見込めます。

レスポンシブ対応以外のSEO対策方法としては、以下の8つが挙げられます。

1. キーワード選定
2. 量より質を重視した読みやすいコンテンツ
3. タイトルとディスクリプション
4. 記事内タグの設定
5. 画像や文字サイズの最適化
6. モバイルファースト
7. 被リンクの獲得
8. サイテーションの獲得

SEO対策強化のためにレスポンシブ対応を導入しようと考えている方は、併せて他のSEO対策も導入してみてはいかかでしょうか。

SEO対策について詳しく知りたいという方は、以下の記事を参考にしてください。

レスポンシブデザイン化する方法

ここからはホームページをレスポンシブデザイン化する方法について解説していきます。

既にホームページを持っている場合

既にホームページを作成し、運営している場合はHTMLとCSSを書き換えなくてはなりません。たとえばHTMLでviewport値を指定したり、CSSのMedia Queryを使ったりといったコーディングが必要です。

コーディングの知識がなければウェブデザイナーやホームページ制作会社に依頼する必要があるでしょう。制作会社に依頼する場合にかかる費用は、1ページあたり1万~3万5000円ですが、会社ごとに料金形態が異なるので、各制作会社のホームページを参考にしてください。

HTMLとCSSをレスポンシブデザインに変換してくれるツールを利用するのもおすすめの実装方法です。しかし、変換ツールは基本的にテンプレートに沿って変換するため、デザインやレイアウトの自由度が低く、不具合が発生する可能性もあります。

自分でコーディングを行う場合、かなりの時間と知識が必要となりますが、興味のある方は以下の記事を参考にしてください。プログラミング言語を用いたホームページの作成方法について解説しています。

WordPressで自作している場合

WordPress

引用元:WordPressホームページ(https://ja.wordpress.org/

WordPressとは、世界で最も多く使用されているホームページ作成ツールです。サイトの作成やブログの作成といったCMS(コンテンツ管理システム)の一つで、豊富なテンプレートがある点と無料から使用できる点が大きな特徴と言えます。ただし、自身でサーバーを契約したりなどする必要があること、自由度が高いからこそ逆に素人には扱いにくいことがあります。

初めてホームページを作成する方から制作業者などの専門家まで幅広い方々におすすめできる作成ツールの一つです。

WordPressでホームページを作成している場合は、プラグインを利用することで比較的簡単にレスポンシブデザインを実装可能です。スマートフォンに最適化されたデザインを表示してくれる「WPtouch」や「MobilePress」、ユーザーエージェントに合わせてテーマを切り替えてくれる「Any Mobile Theme Switcher」などが代表的なプラグインとして挙げられます。

また、現在では無料のWordPressテーマでもほとんどがレスポンシブデザインに対応しているため、テンプレートの変更も有効な実装手段です。

詳しくは、WordPressのホームページをご確認ください。

これからホームページを作る場合

これからウェブデザイナーやホームページ制作会社に依頼する場合は、必ずレスポンシブデザインを希望する旨を伝えることが大切です。

レスポンシブデザインに対応する費用は制作者によって変動するため、一概にはいえません。参考として一例を挙げると、1ページ毎に1〜3万円、あるいはコーディング費用に1.5〜2倍といった制作費用が一般的とされています。

現在では、レスポンシブ対応していることがスタンダードとなってきているため、ほとんど全ての制作会社がレスポンシブデザインに対応しています。その中でも、ユーザビリティを重視してホームページを作成したい方は、UI・UXに強い制作会社に依頼すると良いでしょう。

また、マーケティングに強い制作会社、ブランディングに強い制作会社など、ある分野に特化した作成を得意とする制作会社も数多く存在するので、レスポンシブ対応さえできればデザインよりも他の部分を拘りたいという方は、そのような会社に依頼することをおすすめします。

ホームページを初めて作成するという方で、何に特化すべきかわからないという方は、対応範囲の広い制作会社に依頼すると良いでしょう。例えば、株式会社クオートワークスがあります。

株式会社クオートワークス

引用元:株式会社クオートワークス(https://quoitworks.com/

クオートワークスは、「AWWWARDS」など世界的に有名なWebデザイン賞も受賞している実力派の制作会社です。デザイン性と使いやすさを兼ね備えたホームページ制作を得意とする一方で、SEO対策やリスティング広告、既存のホームページの現状分析など、Webコンサルティング業を幅広く展開しています。

以下の記事では、制作会社のタイプ別紹介と併せて製作会社選びで失敗しないポイントも解説していますので参考にしてください。

知っておきたい!ホームページ作成の基礎知識

この章では、初めてホームページを作成する方向けに、ホームページ作成にかかる費用や期間など、知っておきたい基本情報について解説していきます。

ホームページ作成にかかる費用

これからホームページを作成する場合、いちばん気になるのは作成にかかる費用なのではないでしょうか。ホームページの作成費はピンキリですが、ここでは目的別に作成費の相場を解説します。

予算の目安としては、一般的な企業のホームページ(コーポレートサイト)を作成するケースを前提に、制作費の相場を記載しております。

<50〜150万円>
制作費としては、かなり安価な金額帯と言えます。金額を安価に抑えるため、ホームページの作成仕方としては、ウェブサイト制作ツールの既存テンプレートに用いて、開発することが多くなります。そのため、オリジナリティがあるWebサイトの制作などは難しいと言えるでしょう。

<150万円〜500万円>
制作会社に依頼した場合、この金額感に収まることが一番多いと言えるでしょう。ホームページの作成仕方としては、クライアントからのヒアリングベースで、0から作成する形が一般的です。

Webサイト毎の特徴を踏まえた上で、デザインやコーディングをしていくため、一定のオリジナリティやクオリティがある成果物を制作することができると言えます。

<500万円以上>
ホームページ・リニューアルや趣向を凝らしたホームページを新規作成しようとした場合、制作費は500万円以上かかってくるでしょう。この規模の制作になると、制作期間も半年前後かかります。

ただ、マテリアルとしてのホームページを作成するだけではなく、コーポレートブランディングの観点も0から一緒に考えたり、他にはないオリジナリティのあるWebサイトを制作することができます。

ホームページ制作の費用に大きな幅がある理由や、費用の内訳などホームページ制作に関する費用の詳細は以下の記事で解説していますので、参考にしてください。併せてホームページ制作を外注する際の注意点も掲載しています。

ホームページ作成の6つの手順

次に、ホームページがどのような手順で作成されていくのかみていきましょう。ホームページ作成の手順は主に以下の6つに分けられます。

1. 目的を決める

そもそも、なぜホームページを作成する必要があるのかを予め明確にしておきましょう。「オシャレなデザインに変えたい」「会社の雰囲気が伝わるようにしたい」といったことは目的ではありません。できるだけ具体的に決めることが重要です。

例えば、「ホームページを通して、サービスへの問い合わせを〇〇件増やしたい」「ホームページを見て、〇〇名以上の候補者からエントリーをもらいたい」など、ホームページを作成することで、どんな結果を期待するのかを明確に決めておきましょう。

2. 予算を決める

ホームページを作成・管理するには、少なからずお金がかかります。初期制作費用だけでなく、サーバー管理費やドメイン取得代など、その他費用も含め、いくらくらいまでの予算で納めるのかどうか予め決めておきましょう。

3. 構成・デザインを決める

ホームページは、基本的に複数の階層とページからつくられます。どういった項目を内包するのかを洗い出した上で、構成を決めます。さらには、コーポレートカラーやデザインイメージなども作ることで、自分たちが作りたいホームページを作成することができます。

また、多くのホームページ作成ツールには、テンプレートと呼ばれる雛形が存在しているため、うまく活用していきましょう。

テンプレートを使用することで、初心者の方でも簡単にデザイン性の高いホームおえー時を作成することができます。ご参考までに、商用無料で使えるテンプレートギャラリーサイトには以下のようなものがあります。

Template Party

引用元:Template Partyホームページ(https://template-party.com/

個人サイトからビジネス、ショップ、飲食店向けなど幅広い業種に対応できる1,000個以上のHTML無料テンプレートがあります。介護施設向け、自治会・町内会向け、中古車販売向けなど、細かく分類されているのが特徴です。また、特定の業種向けに有料の高機能版もあります。ライセンス契約(3,190円)で著作権表示なしにできます。

上記で取り上げたTemplate Party以外にも様々なギャラリーサイトがあるので、もっと他にも知りたい方はこちらの記事を参考にしてください。最適なテンプレートを選ぶための基準も併せて解説しています。

4.素材(テキスト・写真・画像)をつくる・集める

ホームページ内のテキストや写真、画像といった素材を用意します。写真や画像は、自ら作成するか収集することが可能ですが、集めた素材の場合は、商用として活用できるものかどうかという点に十分に注意してください。

特に、Webサイト上から素材を引用して使いたい場合には、著作権や引用ルールに注意する必要があります。引用時に勝手に編集してしまったり、引用元の記載が正しくされていない場合、不正な引用とみなされてユーザーからの信頼を失ってしまう恐れもあるので気をつけましょう。

一例として、他サイトから文章を引用する場合には、サイトの名前、筆者名、記事の公開(更新)日時、URL、最後に閲覧した年月日を下記のように表記します。

・サイト名,「タイトル」,URL,(最後に閲覧した年月日)
・筆者名.”タイトル”.サイト名.更新日付.URL,(最後に閲覧した年月日)

引用ルールについて詳しく知りたいという方は、以下の記事を参考にしてください。

5.実装する

テンプレートやプラグインなどを活用することで、概ねコーディングは不要です。一方で、自由度高くカスタマイズしたい場合は、自らHTMLやCSSといったエンジニアリング知識が必要となります。

6.公開する

コンテンツが完成したら、サーバーの準備とドメインを設定した上で、WEBにホームページを公開します。

ホームページ作成に必要な期間

ホームページ作成には様々な工程が必要なことがわかったところで、最後に見ていくのはホームページが完成するまでに必要とされている時間です。一般的に、ホームページのに含まれる情報量やページ数に比例して制作期間も長くなります。

小規模サイトの場合

キャンペーンサイトのような3ページ程度の小規模サイトの制作には、約2ヶ月の制作期間が必要です。

・打ち合わせ:15日程度
・要件定義・デザイン(画面設計):3~4日
・Webデザインのコーディング制作:5~6日
・実装:7~10日
・テストや修正など:4日程度

ページ数が増えれば、それだけタスクも確認作業も増えます。制作期間は少なく見積もっても2ヶ月は見込んだ方がよいでしょう。

中規模サイトの場合

中規模サイト(15ページ程度)の制作には、約3ヶ月必要だとされています。

・打ち合わせ:12日程度
・要件定義・デザイン(画面設計):6~7日
・Webデザインのコーディング制作:13~14日
・実装:15~16日
・テストや修正など:4日

こうして項目別に日数を見てみると3ヵ月もかからないのでは、と思うかもしれません。しかしサイト制作の規模が大きくなると、上記のような項目に明確に分類できないタスクが増えることも予想されます。

Webサイトによっては撮影や素材補正などの工程が別途必要となるケースもあります。どのような情報を組み込むかによっても期間が変動しますので、スケジュール管理の際には注意しましょう。

大規模サイトの場合

コーポレートサイトのような大規模なWebサイト(100ページ程度)を制作する場合、およそ約8ヶ月の制作期間が必要とされています。

・打ち合わせ:20日程度
・要件定義・デザイン(画面設計):15~20日
・Webデザインのコーディング制作:40~70日
・実装:40~70日
・テストや修正など:10~15日

大規模サイトの制作ともなると、確認作業に費やす時間も多くなってきます。社内レビューなどにある程度の日数が必要になることもあります。予期せぬ対応の可能性も含め、8ヶ月程度の制作期間を予定しておいたほうがよいでしょう。

まとめ

情報通信技術の発達によってデバイスの小型化が進み、スマートフォンが爆発的に普及しました。そして、スマートフォンからのアクセスが指数関数的に増大し、今やインターネット上のトラフィックの多くはモバイルデバイスが占めています。

このような時代において、ホームページのスマホ対応は必須の施策といえるでしょう。本記事を参考にしてホームページのスマホ対応に取り組んでみてください。

スマホ対応のページもお任せください!
追加料金一切なしのホームページ作成サービス

siteflowなら初期費用0円、月額9,000円〜だけ!

スマホ対応標準搭載なので初めての方にもリニューアルの方にもおすすめです。

プロが作るから高品質!
簡単な管理画面からラクラク更新!
公開後の運用サポート付きだから安心!

siteflowで高品質のホームページを手に入れませんか?

まずは無料相談をお試しください。