スマートフォン対応を可能にする事で「検索順位・ユーザービリティの向上」「お問い合わせの増加」など様々なメリットがあります。
2018年3月27日にGoogleが本格的に導入したモバイルファーストインデックス（MFI：Mobile First Indexing）を始めとし、運営社や閲覧者にとって必要不可欠なホームページのスマートフォン対応（レスポンシブ対応）が推奨されました。
今回はホームページをスマートフォン対応させるための方法をご紹介します。
ホームページをどのような目的で使用するのかを明確にした上で、あなたに最適なスマホ対応策を見つけてみてください！
それではホームページをスマートフォン対応させるための方法をご紹介していきます。
目次
1.ゼロからの構築
本来のホームページ制作を行うのと同様に、HTMLとCSSを使って自分で0からスマートフォンに最適化した専用ホームページを構築できる方法があります。
・レスポンシブ対応の採用
パソコン用ホームページ制作の様に古いバージョンのブラウザに対応させる必要が全くありません。
HTML/CSSを使ったスマートフォン用ホームページ制作の作り方を解説していきます。
- 手順1：HTML5を使用する
HTMLはHyper Text Markup Languageの略で、WEBページを表示させるための言語の一つです。
- 手順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を活用することでどの端末でどのように表示されているのかを細かく確認することができるのでおすすめです。
2.自動変換ツールを使ってスマホ対応したホームページを作る
Word Pressの様な多くの方に利用されている知名度の高いCMS（Custom Management System）を利用したサイトであれば、スマートフォン対応したテンプレートに置き換えるだけでスマホ対応する事ができます。
そんな、簡単に置き換えるだけでパソコン用ホームページをスマホ対応ページに仕上げる事ができる自動変換ツールを「料金」「デザイン」「時間工数」に分け3つご紹介していきます。
・shutto（スマホ変換シュット）
1.スピーディー
パソコンページでの要素をドラッグ&ドロップするだけで簡単にスマートフォン対応したホームページを作成することができます。
また、変換時間は簡易的なページであれば、ものの数十分で仕上げる事ができ、一般的なスマホサイト変換への作成効率よりも1/2または1/3まで時間短縮して制作する事ができます。
2.豊富な機能
スマホ対応以外にも様々な機能が充実しており、「スライドショー」・「アコーディオンメニュー」の実装などが可能になっています。
パソコンブラウザでの表示と同一のURLなのでSEO対策にも効果があり、Google推奨のモバイルフレンドリー対応が可能になっています。
また、JavaScriptなどの正規言語を操作する事ができるので、ブログ機能やECサイトなど動的サイトの変換も行う事ができます。
機能一覧ページはこちら↓
https://shutto.com/function/
3.柔軟なデザイン性
CSSを活用する事でデザインの面で制限がなく、スマートフォンサイトならではの設計・配置デザインが可能になっています。
実績紹介↓
https://shutto.com/case/
4.料金体系
スマートフォン対応のみ：月額5.000円
スマートフォン・タブレット対応：月額10.000円
<signumskyスタッフ評価>
- デザイン：★★☆
- 時間工数：★☆☆
- 料金：★★☆
・モビーク
1.モビークを活用した簡単な操作方法
1-1パソコンから作成
①登録したパソコンサイトから必要な部品を選択
②レイアウト画面に選択した部品をドラッグ&ドロップ
1-2.デザイン部品から作成
①スマホサイト制作に必要なデザイン部品を選択
②レイアウト画面に選択したパーツをドラッグ&ドロップ
2.豊富な機能
モビーくではテキスト入力・テキストサイズ変更・画像アップロードなどサイト構築初心者の方でも直感的な操作でホームページの構築が可能になっています。
また、CSSの設定やタブレットサイトの編集もあり、より細かな所まで操作する事ができます。
その他にもサイトのSSL対応や自動解析など多くの機能を追加する事が可能です。
機能一覧ページはこちら↓
https://mobeek.net/function/
3.料金体系
- 10ページ：無料
- スタンダードプラン：初期費用15.000円 月額費用5.000円
- その他制作代行サービス：１ページ6.000円〜
<signumskyスタッフ評価>
- デザイン：★★☆
- 時間工数：★★☆
- 料金：★★★
・Changing Smart
1.Changing Smartの利用方法
- ユーザー登録
- 変換設定
- プレビュー
- スマートフォンサイトに変換
2.機能
基本機能からボタン機能まで、多くの機能を使用する事ができると同時に、サイトに訪れる閲覧者にとってWEBサイトを見やすくクロールしやすい構成にすることが可能なので、SEO対策にも効果的です。
また、テキストサイズや色・配置などのデザインも自由に変更できることから、独自性のあるサイトを簡単手軽に作ることが可能になっています。
公式ホームページ↓
http://brie-ing.com/brieart/specification/
3.料金体系
- ミニマムプラン：初期費用10.800円 月額費用5.400円
- スタンダードプラン：初期費用10.800円 月額費用16.200円
- プレミアムプラン：初期費用10.800円 月額費用43.200円
- エンタープライズプラン：初期費用10.800円 月額費用64.800円
- オーダーメイドプラン：初期費用10.800円 月額費用別途お見積もりにて
その他にも、PV数がプラン上限を超えた際のスマートフォン変換が途切れないための、自動スケールなどのオプション欄もありますので自社の規模に合わせてぜひご検討ください。
http://brie-ing.com/brieart/price/
<signumskyスタッフ評価>
- デザイン：★★★
- 時間工数：★★☆
- 料金：★★★
3.制作テーマを活用したスマホ対応
CMS（カスタム・マネジメント・システム）が採用されているWordPressでは初心者の方でも手軽に導入できるデザインテーマがあります。
WordPressのテーマは無料でもハイクオリティのデザインと機能が多数存在します。また、最近の無料テーマのほとんどがレスポンシブ対応しているので、テーマを入れた瞬間からすぐにスマートフォン対応が実現できます。
また、ユーザビリティに優れているため機能を拡張してくれるプラグインと分析ツールを導入すれば比較的簡単にSEO対策を行うことができます。
WordPressを活用するメリット
WordPressを活用するメリットは以下になります。
- プラグインが豊富で多様なカスタマイズが可能。
- 無料テーマでもレスポンシブ対応があらかじめ備わっている。
- phpやjsなどのコードがさわれなくても、デザイン性の高いサイトを作成することができる。
また情報は無料で手に入りますので、料金面を押さえたい方におすすめの方法です。
そして無料テーマを使って制作する場合、かかるコストはドメインとレンタルサーバー代金だけで済みます。
これは最低限の機能とデザインが実現できれば良い場合ですが、制作会社に依頼するよりも大幅に費用が抑えられます。
無料テーマを使ってみて、もう少し機能やデザインを求めたい場合は有料テーマを使ってみてはいかがでしょうか。
検索すれば多くの有料テーマが存在するので、ぜひ調べてみてください。
<signumskyスタッフ評価>
- デザイン：★★☆
- 時間工数：★☆☆
- 料金：★★★
最後に:格安でオリジナリティを求めるなら
いかがでしたでしょうか。スマートフォン対応を実現する方法はたくさんありました。
今はスマートフォンデバイスでホームページを見る割合はパソコンよりも多いです。もしホームページをスマホ対応させたいと検討している方はぜひ本記事をご参考くださいませ。
それでも自社でWebを触れる人材がいなければ、格安でハイクオリティのデザインを実現するSignumskyのデザインテンプレートも参考の一つにしていただけたら幸いです。
では、最後までお読みいただきありがとうございました。