スマートフォン対応を可能にする事で「検索順位の向上」や利便性があることから「問い合わせの増加」など様々なメリットがあります。

 

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

 

今回はホームページを制作する際に必須となるスマートフォン対応させるための「手軽」で「簡単」な方法をご紹介します。

ホームページの用途を明確にした上であなたに適したスマートフォン対応策を見つけホームページ制作をしてみてください。

 

1.ゼロからの構築

コンピュータ, コンピューターのコード, 画面, 監視, コンピューターの画面

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

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

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

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

  • 手順1:形式はHTML5を使います。
  • 手順2:次に<head>の中に「メタViewport」のタグを入れます。
  • 手順3:次にHTML5のルールに基づいてコーディングをしていきます。
  • 手順4:CSSはパソコン用のスタイルを書きその後メディアクエリで条件付きで上書きをします。
  • 手順5:最終確認(スマートフォンまたはGoogleChrome)

2.自動変換ツールを使ってスマホ対応したホームページを作る

Seo, ウェブサイト, ノート, Seoのポジショニング, ブラウザ, 改善

Word Pressの様な多くの方に利用され知名度の高いCMSを利用したサイトであれば、スマートフォン対応したテンプレートに置き換えるだけで対応する事ができます。

そんな、簡単に置き換えるだけでパソコン用ホームページをスマートフォン対応が可能なホームページに仕上げる事ができる自動変換ツールを「料金」「デザイン」「時間工数」に分け3つご紹介します。

・shutto(スマホ変換シュット)

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. デザイン:★★☆
  2. 時間工数:★☆☆
  3. 料金:★★☆

・モビーク

モビーク スマホ対応 ホームページ

1.簡単な操作方法

1-1パソコンから作成

①登録したパソコンサイトから必要な部品を選択

②レイアウト画面に選択した部品をドラッグ&ドロップ

1-2.デザイン部品から作成

①スマホサイト制作に必要なデザイン部品を選択

②レイアウト画面に選択したパーツをドラッグ&ドロップ

2.豊富な機能

テキスト入力・テキストサイズ変更・画像アップロードなどサイト構築初心者の方でも手軽で簡単な操作方法による構築が可能になっています。

また、CSS設定やタブレットサイトの編集もありより細かな所まで手軽に操作する事ができます。

その他にも多くの機能を追加する事が可能です。

機能一覧ページ↓

https://mobeek.net/function/

3.料金

  • 10ページ:無料
  • スタンダードプラン:初期費用15.000円 月額費用5.000円
  • その他制作代行サービス:1ページ6.000円〜

<signumskyスタッフ評価>

  1. デザイン:★★☆
  2. 時間工数:★★☆
  3. 料金:★★★

・Changing Smart

Changing Smart ホームページ スマホ対応

1.利用方法

  1. ユーザー登録
  2. 変換設定
  3. プレビュー
  4. スマホサイトに変換

2.機能

基本機能からボタン機能まで、多くの機能を使用する事ができ、さらに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スタッフ評価>

  1. デザイン:★★★
  2. 時間工数:★★☆
  3. 料金:★★★

3.制作テーマを活用したスマホ対応

CMS WordPress

CMS(カスタム・マネジメント・システム)が採用されているWordPressでは初心者の方でも手軽に導入できるデザインテーマがあります。

WordPressのテーマは無料でもハイクオリティのデザインと機能が多数存在します。また、最近の無料テーマのほとんどがレスポンシブ対応しているので、テーマを入れた瞬間からすぐにスマートフォン対応が実現できます。

また、ユーザビリティに優れているため機能を拡張してくれるプラグインと分析ツールを導入すれば比較的簡単にSEO対策が可能です。

WordPressを使ってスマートフォン対応させるメリットとしては、わからないことは検索すれば大量にリソースが手に入る点です。

情報は無料で手に入りますので、料金面を押さえたい方におすすめの方法です。

また無料テーマを使って制作する場合、かかるコストはドメインとレンタルサーバー代金だけで済みます。

これは最低限の機能とデザインが実現できれば良い場合ですが、制作会社に依頼するよりも大幅に費用が抑えられます。

無料テーマを使ってみて、もう少し機能やデザインを求めたい場合は有料テーマを使ってみてはいかがでしょうか。

検索すれば多くの有料テーマが存在するので、ぜひ調べてみてください。

<signumskyスタッフ評価>

  1. デザイン:★★☆
  2. 時間工数:★☆☆
  3. 料金:★★★

最後に:格安でオリジナリティを求めるなら

ホームページ制作

いかがでしたでしょうか。スマートフォン対応を実現する方法はたくさんありました。

今やスマートフォンユーザーの方がホームページを見る割合は多いです。もしホームページをスマホ対応させたいと検討している方はぜひ本記事をご参考くださいませ。

それでも自社でWebを触れる人材がいなければ、格安でハイクオリティのデザインを実現するSignumskyのデザインテンプレートも参考の一つにしていただけたら幸いです。

では、最後までお読みいただきありがとうございました。