ホームページをスマホ対応させる方法3選

スマートフォン対応を可能にする事で「検索順位・ユーザービリティの向上」「お問い合わせの増加」など様々なメリットがあります。

2018年3月27日にGoogleが本格的に導入したモバイルファーストインデックス（MFI：Mobile First Indexing）を始めとし、運営社や閲覧者にとって必要不可欠なホームページのスマートフォン対応（レスポンシブ対応）が推奨されました。

今回はホームページをスマートフォン対応させるための方法をご紹介します。

ホームページをどのような目的で使用するのかを明確にした上で、あなたに最適なスマホ対応策を見つけてみてください！

それではホームページをスマートフォン対応させるための方法をご紹介していきます。

1.ゼロからの構築
- ・レスポンシブ対応の採用
2.自動変換ツールでスマホ対応ホームページを作る
3.制作テーマを活用したスマホ対応
- WordPressを活用するメリット
格安でオリジナリティを求めるなら

1.ゼロからの構築

本来のホームページ制作を行うのと同様に、HTMLとCSSを使って自分で0からスマートフォンに最適化した専用ホームページを構築できる方法があります。

・レスポンシブ対応の採用

パソコン用ホームページ制作の様に古いバージョンのブラウザに対応させる必要が全くありません。

HTML/CSSを使ったスマートフォン用ホームページ制作の作り方を解説していきます。

手順1：HTML5を使用する

HTMLはHyper Text Markup Languageの略で、WEBページを表示させるための言語の一つです。プログラミング言語と混同しがちですが、htmlはマークアップ言語・cssはスタイルシート言語と呼ばれます。

手順2：<head>タグの中に「メタViewport」のタグを入れます。

サイトにはheadタグというものを使用します。主に、css・js、Google Analyticsなどのコードをheadタグのなかに入れていきます。その中にメタViewportと言われる、スマートフォンやタブレットのデバイス上でWEBを最適に表示させるためのコードです。

手順3：次にHTML5のルールに基づいてコーディングをしていきます。

ここから実際に文字や画像、ボタン等を表示させるためにhtmlでコーディング作業を行います。コーディングは英語でCodingと表し、コードを書いていく作業のことを言います。

手順4：CSSはパソコン用のスタイルを書きその後メディアクエリで条件付きで上書きをします。

まずパソコンで最適なWEBページを表示させるために、CSSコーディングを行なっていきます。CSSはCustom Style Sheetの略でサイトのデザインを施す言語です。CSSを活用すると、配色の変更や画像・ボタンなどの大きさを変更することが可能になります。

次にメディアクエリはCSS2の頃にあったmediaタイプを発展させたCSS3から新しく誕生した要素です。メディアクエリを使用することで、一般的なディスプレイ・プロジェクター・プリンタ・テレビなど様々な大きさのデバイスに対応したWEBサイトを作成することができます。

手順5：最終確認（スマートフォンまたはGoogleChrome）

最後にスマートフォンでもしっかりWEBサイトが表示されるのかを確認します。確認方法はお手持ちのスマートフォンで確認する方法とGoogle Chromeを活用した方法があります。Google Chromeを活用することでどの端末でどのように表示されているのかを細かく確認することができるのでおすすめです。