スマホ対応サイトの作り方2つ|注意点やおすすめ作成サービス・ツール7つも紹介!|Webサイト制作・CMS開発|LeadGrid

スマホ対応サイトの作り方2つ|注意点やおすすめ作成サービス・ツール7つも紹介!

目次

「スマホ対応したWebサイトを作りたい」「簡単にスマホ対応のWebサイトが作れるツールはないの?」

このような疑問やお悩みはありませんか?

最近ではスマホからWebサイトを閲覧する割合が増え続けています。Webサイトを作るうえで、スマホ対応は欠かせない時代となりました。

そこで今回はスマホ対応サイトの2つの作り方やオススメの作成ツールを解説します。スマホサイトを作る際の5つの注意点も紹介しますので、これからスマホ対応を進める方はぜひ参考にしてみてください。

なお、既存のホームページをスマホ対応させる方法は、下記記事で解説しています。

関連記事:ホームページをスマホ対応にする方法は?6つの方法を解説!

スマホ対応サイトを作成するメリット2つ

スマホ対応サイトを作成する理由は次の2つです。

  • ユーザーにとって見やすくなる

  • 検索順位が上がりやすくなる

1. ユーザーにとって見やすくなる

スマホ対応のサイトにすることで、画面が見やすくなります。

スマホ対応しているサイトは文字が見やすく、ボタンも指で押しやすいサイズとなっているので、ストレスを感じずに操作ができます。

逆にPC画面がそのままスマホへ移っただけのサイトだと、文字が小さくて操作もしにくいもの。スマホはマウスを使わないので、毎回画面を拡大させなければならないとさらにストレスの原因となってしまいます。

スマホ対応しているサイトは、ユーザーがストレスを感じにくいように設計されています。スマホ利用者が増えている現代では、スマホやタブレットからも見やすいサイトを作るのは必須と言えるでしょう。

なお、現在利用しているサイトがスマホ対応されていない場合、サイトそのものが古いと考えられます。この場合はスマホユーザーの利便性以外の面においても不便が生じているおそれがあるため、サイト全体をリニューアルし、リニューアル作業時にスマホ対応も同時に進めるのがおすすめです。失敗しない!コーポレートサイトリニューアル-費用、工期、制作の流れまで丸わかりマニュアル-では会社の顔ともいえる重要なコーポレートサイトを改修するために必要な知識を網羅した資料となっておりますのでぜひお役立てください。


失敗しない!コーポレートサイトリニューアル-費用、工期、制作の流れまで丸わかりマニュアル-|Webサイト制作・CMS開発|LeadGrid

goleadgrid.com

og_img

2. 検索順位が上がりやすくなる

スマホに対応したサイトを作ることで、検索順位が上がりやすくなります。なぜならスマホからサイト閲覧するユーザーにとって、使い勝手がよくなるからです。

スマホを使ってWebサイトにアクセスする人の割合は増加傾向にあり、GoogleもWebサイトがスマホ対応しているかどうかをSEOの評価基準に入れています。それを裏付ける例として「モバイルファーストインデックス」の推奨が挙げられます。

モバイルファーストインデックスとは、モバイルサイトのクロールを優先させてインデックス・評価されていく方針に移行することです。

これまではPCサイトを中心に、クロールが行われてきました。しかしスマホユーザーの増加に伴い、検索エンジン側はモバイルに対応したサイトを優先的にクロールするようになったのです。

Webサイトをスマホ対応させることは、ユーザーと検索エンジンの両面からの評価向上につながっています。

スマホ対応サイトの作り方2つ

スマホ対応サイトの作り方は次の2種類があります。それぞれメリットとデメリットを紹介します。

  • スマホサイト対応のレスポンシブデザインにする

  • PC用とスマホ専用の2種類のサイトを作る

1. スマホサイト対応のレスポンシブデザインにする

レスポンシブデザインとは、サイトを閲覧しているユーザーのデバイスに合わせてデザインを最適化させることです。

共通のHTMLで配信され、CSSによってデバイスの判定が行われます。1つのデータで表示を最適化できるため、作るサイトの数は1つですみます。

現在のスマホ対応はこのレスポンシブデザインが主流となっており、Googleもレスポンシブデザインを用いたスマホ対応を推奨しています。そのため、特別な理由がない場合はレスポンシブデザインでWebサイトを設計するべきでしょう。

レスポンシブデザインのメリット・デメリット

レスポンシブデザインのメリット・デメリットは下記表の通りです。 

メリット

  • サイト更新やメンテナンス、管理が楽

  • 作成費用を抑えられる

  • SEOに有利

デメリット

  • サイト表示が遅くなる可能性がある

  • スマホ専用サイトよりもデザインの自由度が低くなる


レスポンシブデザインは1つのサイト作成ですむので、サイト更新やメンテナンス、管理等が楽になります。スマホ専用のサイトを作る必要がなく、作成費用も抑えられるでしょう。

またレスポンシブデザインはPC用とスマホ用のURLが同一です。閲覧ユーザーがデバイスによって分散しないので、閲覧先が統一されSEOにも有利といえます。

デメリットとしては、サイト表示が遅れる傾向にあることが挙げられます。これはユーザーがスマホやタブレットで閲覧していても、PC用のHTMLコードや、サイズの大きな画像を読み込む必要があるためです。

またスマホ専用サイトと比べて、デザインの自由度は低くなります。画像サイズはデバイスに最適化されますが、基本的にデバイスごとのデザインのレイアウトやフォントの変更はできません。

2. PC用とスマホ専用の2種類のサイトを作る

スマホ対応させる方法として、PC用のサイトとスマホ用のサイトをそれぞれ別に作ることもあります。閲覧環境に応じ、PC用・スマホ用と2つのファイルを出し分けることでスマートフォンの表示に対応する仕組みです。

1つのサイトで表示を最適化するレスポンシブデザインとは違い2つのサイトを管理する必要があり、特別な事情がなければレスポンシブデザインがおすすめです。

2種類のサイトを作るメリット・デメリット

PC用・スマホ用2種類のサイトを作るメリット・デメリットは下記表の通りです。


メリット

  • デザインの自由度が高い

  • 表示速度が速い

デメリット

  • レスポンシブデザインよりも費用や管理の手間がかかる

  • SEOでマイナス評価になりかねない

スマホ専用サイトはスマホ閲覧に特化したレイアウト設計ができます。そのため、 自由なデザインのWebサイト作成ができる点がメリットです。

またHTML5やCSS3などの新しい言語を使うこともでき、見やすくて表示速度の速いWebサイトを作成できるという利点もあります。

ただしPC用とスマホ専用サイトは内容がほぼ同じであることに加え、それぞれURLが異なることから、検索エンジンからコピーサイトと認識される恐れも。

このような重複を避けるために画像などの素材を2種類用意したり、タグを埋め込んだりする必要があり、 レスポンシブデザインと比べて作業の手間や費用が増えるデメリットもあります。

見やすいスマホサイトを作るときの注意点5つ

スマホ対応サイトは見やすさ、操作のしやすさを重視しましょう。スマホ対応サイトを作成する際の注意点を5つ紹介します。

  • デザインをシンプルにする

  • スマホサイトのフォントサイズは16pxを目安にする

  • 高解像度ディスプレイに対応させる

  • 画像を圧縮する

  • 指で操作しやすい間隔を意識する

デザインをシンプルにする

スマホサイトはシンプルなデザインにするのがおすすめです。なぜならモバイルでは画面が小さいため、ごちゃごちゃしたデザインだと見づらくなるからです。

たとえば情報の多すぎるトップページだと、自分の欲しい情報をわざわざ探さなければなりません。スマホサイトは画面が小さいため、シンプルなデザインでないと情報にたどり着きにくくなってしまうのです。

シンプルなサイトは読みやすいので、ユーザーはストレスなくコンテンツを読み進められます。ストレスがないサイトは滞在時間が長くなり、離脱率は下がります。よってSEO効果も上がるメリットがあるのです。

特にレスポンシブデザイン対応の場合は、スマホからの見方を考慮してサイト制作するとよいでしょう。

スマホサイトのフォントサイズは16pxを目安にする

スマホに最適なフォントサイズは、16pxと言われています。Yahoo! JAPANやAll Aboutなどの大手Webサイトでも、スマホサイトのフォントサイズは16pxです。

情報を多くするために、文字を小さくしすぎると見づらくなります。また逆に文字が大きすぎるとスクロールの回数が増えてしまい、サイトが使いづらくなってしまいます。視覚的に見やすいフォントサイズは、16px程度と覚えておくとよいでしょう。

またモバイルフレンドリーテストで問題がなければ、スマホからの使い勝手に優れているということです。16pxのサイトでテストすると、このように表示されました。

▲出典:モバイルフレンドリーテスト

もしフォントサイズがモバイルに向いていなければ「テキストが小さすぎて読めません」などのエラーが出ます。

高解像度ディスプレイに対応させる

スマートフォンはディスプレイの高解像度化が進んでおり、中には通常の倍以上の解像度を持つ機種も存在します。 高解像度ディスプレイに対応させることで、画像がぼやけることによるサイト全体の見栄えの悪さを防止できるでしょう。

対応策としては、あらかじめ表示させたい2倍サイズの画像を設定する方法が用いられています。画像を多く使う場合や、画像で企業や商品のイメージを伝える場合は必ず対策しましょう。

画像を圧縮する

スマホサイトに使う画像は圧縮し、データ容量を減らしましょう。

容量が大きい画像をそのまま設定してしまうと、ページ表示が遅くなってしまいます。ページ表示が遅いサイトはユーザーの離脱につながることから、SEO評価が低下する可能性も。

スマートフォンの場合、電波が届きにくい場所での使用も考えられるため、ページ速度はPCよりもシビアに考えるべきでしょう。

画像を圧縮するには、圧縮ツールを利用します。「Squoosh」「I love IMG」など会員登録不要・無料で利用できるツールもあるため、自分の利用しやすいツールを探してみてください。

指で操作しやすい感覚を意識する

スマートフォンは小さな画面を指でタップして利用します。 指で操作しやすい感覚を意識してサイト制作を行うことで誤タップを防ぎ、ユーザビリティを向上できるでしょう。

具体的には下記2点が対策となります。

  • ボタンサイズを小さくしすぎない

  • リンクやバナーは離して設置する

Googleが提供するSEOツール「Lighthouse」では タップ要素の間隔が48px × 48pxよりも小さい場合にエラーが発生するため、これを一つの基準と考えておくとよいでしょう。

スマホサイト作成ができるサービス・ツール7選

初心者が使いやすい、スマホサイト作成サービスを7種類紹介します。

  • LeadGrid

  • Wix

  • BASE

  • ペライチ

  • Ameba Ownd

  • Jimdo

  • Crayon

1. LeadGrid

LeadGridは株式会社GIGが提供するCMSです。特にリード(見込み顧客)獲得機能に強みがあります。 資料ダウンロードやフォームの最適化が標準で備わっているため、toBのデジタルマーケティングに力を入れたい企業にオススメです。

サイトを運営していると、さまざまな課題が出てくるもの。LeadGridは丁寧なヒアリングで、自社に合った運用方法を提案してくれます。無料のサイト作成サービスでは得られない、きめ細かなサポートを受けられるのが特長です。

さらにサービスサイト、コーポレートサイト、オウンドメディア、採用サイト、ランディングページなど幅広いWebサイトを制作できるため、さまざまなニーズに対応できます。 

機能詳細はサービス資料をご覧ください。


サービス紹介資料|Webサイト制作・CMS開発|LeadGrid

goleadgrid.com

og_img


サービス名

LeadGrid

URL

https://goleadgrid.com/

費用感

初期費用+月額3万円~

作れるサイトの種類

サービスサイト、コーポレートサイト、オウンドメディア、採用サイト、ランディングページ、キャンペーンサイト、イベントページ、採用広報メディア、資料ダウンロードページ


2. Wix

▲出典:Wix 

 Wixは世界190か国で2億人以上に使われている、サイト作成サービスです。

デザインテーマのテンプレートが800種類以上あり、初心者でも簡単に、レスポンシブデザイン対応のスマホサイトが作成可能です。Wix Marketplaceを利用することで、経験豊富なプロにサイト作成の依頼もできます。

Wix モバイルエディターを使うことで、スマホ専用のパーツも追加できます。スマホサイトはPCサイトと違うデザインにしたい場合でも、簡単にカスタマイズできるのがWixの強みです。

テンプレートが豊富に用意されているため、制作できるWebサイトも幅広く、個人ブログからECサイト、企業サイトまでほぼすべてのサイトを制作可能。エンタープライズプランを使えば、ビジネスでも安心して利用できます。

Wixの詳細はWixとは?使い方や利用料金・Wixで作ったホームページ事例などを解説も合わせてご覧ください。

サービス名

Wix

URL

https://ja.wix.com/

費用感

月額500円~3,800円
※無料プランあり
※エンタープライズプランの費用は要問合せ

作れるサイトの種類

ECサイト、ポートフォリオサイト、サービスサイト、コーポレートサイト、キャンペーンサイト、ランディングページ、オウンドメディア、採用サイト


3. BASE

▲出典:BASE

BASEでは本格的なネットショップが作れます。 スマホアプリでサイト作成、編集できるのがBASEの大きな特徴です。

商品管理やデータ管理はもちろん、デザインの編集や決済の管理まで、スマホ一台あればショップが運営できます。運用費がかかるのは、商品が売れた場合のみ。都度代金の6.6%+40円だけで、それ以外に費用はかかりません。

またInstagramと連携できて、BASEの販売ページに直接リンクが送れます。SNSと併用することで、集客と販売のサイクルが作れます。

サービス名

BASE

URL

https://thebase.in/

費用感

月額5,980円+決済手数料2.9%
※無料プランあり

作れるサイトの種類

ECサイト


4. ペライチ

▲出典:ペライチ 

ペライチはブロックを組み立てるように、サイトが作れるサービスです。 ペライチは「サイトデザインをテンプレートから選ぶ→内容を作る→公開する」の3ステップでサイトが作れます。

テンプレートは450種類以上あり、ホームページだけでなくサービスサイトやコーポレートサイト、ECサイト、採用サイトなど幅広いサイトを制作できます。

もちろんサイトはスマホ対応しており、スマホ画面のみの変更・編集も可能です(※ブロックやテンプレートによっては変更できないものもあります)。

ページ数などによって料金が変わりますが、0円からサイト作成ができるので、一度お試しで作ってみてはいかがでしょうか。 

ペライチの詳細はペライチの無料プランで何ができる?有料がおすすめなケースも紹介で解説しています。

サービス名

ペライチ

URL

https://peraichi.com/

費用感

月額1,465円~6,910円
※無料プランあり

作れるサイトの種類

ECサイト、ポートフォリオサイト、サービスサイト、コーポレートサイト、キャンペーンサイト、ランディングページ、採用サイト

5. Ameba Ownd

▲出典: Ameba Ownd 

Ameba Owndはレスポンシブデザインのサイト作成が可能です。デザインテーマのテンプレートはさまざまな目的に合わせたものが用意されています。 オウンドメディアやECサイト、コーポレートサイトまであり、商用利用もOKです。

またSNSの連携表示ができるので、宣伝効果も期待できます。

サービス名

Ameba Ownd

URL

https://www.amebaownd.com/

費用感

無料
※プレミアムプランは月額960円

作れるサイトの種類

オウンドメディア、ECサイト、コーポレートサイト、ポートフォリオサイト、キャンペーンサイト


6. Jimdo

▲出典:Jimdo 

Jimdoで作られたサイトは3,200万以上のページが公開されています。2014年8月以降に追加されたデザインテーマのテンプレートは、すべてレスポンシブ対応化されています。

サービスサイトやコーポレートサイトをはじめ、ランディングページやオウンドメディアにも幅広く対応できるため、さまざまなシーンで利用できるでしょう。

Jimdoには専用アプリがあり、スマホからのサイト更新も可能です。 移動中や外出先でも編集できるので、スキマ時間を使ってサイト更新できます。

操作性に優れており、ドラッグ&ドロップで編集できるため、初心者でも簡単にサイト作成ができると評判の高いサービスです。

なお、Jimdoの詳細はJimdoの評判は?メリット・デメリットや各機能の評判を解説の記事で解説しています。

サービス名

Jimdo

URL

https://www.jimdo.com/jp/

費用感

月額990円~5,330円
※無料プランあり

作れるサイトの種類

ポートフォリオサイト、サービスサイト、コーポレートサイト、キャンペーンサイト、ランディングページ、オウンドメディア、採用サイト、ECサイト

7. Crayon

▲出典: Crayon

CrayonはSEOに強いサイト作成サービスです。 ディスクリプションの設定ができ、有料プランならHTMLコードの記述、Googleアナリティクスとの連携もできます。

CrayonはPCだけでなく、専用アプリを使ってもサイト作成が可能。画像やテキスト、ボタンなどのパーツを組み合わせていくだけで、誰でも簡単にオシャレなサイトが作れます。

Crayonのプランは3種類あります。最初はフリープランで試用し、ページ数や画像枚数を増やす必要が出てきたら有料にするとよいでしょう。

制作できるWebサイトはサービスサイト、コーポレートサイト、ECサイトなど。「Webサイトを名刺代わりにしたい」と考える方にオススメのサービスです。 

サービス名

Crayon

URL

https://crayon.e-shops.jp/

費用感

月額990円~3,190円
※無料プランあり

作れるサイトの種類

サービスサイト、コーポレートサイト、キャンペーンサイト、ECサイト、

スマホ対応のホームページ作成ならLeadGrid

ホームページを作成するなら、スマホ対応が必須です。メリット・デメリットをふまえて、レスポンシブデザインかスマホ専用のサイトを作るか、検討してみてください。

作成ツールを7種類紹介しましたが、なかでも LeadGridはただスマホサイトを作るだけではなく、リード獲得に強いCMSです。

担当者が丁寧なヒアリングをして、的確に課題抽出を行います。その後適切な解決策を提案するので、運用方法がわからない人や売上が伸び悩んでいる人にもおすすめです。

自社でイチからサイト制作するのは難しくても、実績豊富のプロが適切なアドバイスをしてくれれば心強いもの。

LeadGridの機能詳細をまとめたサービス資料サイト制作事例集もご用意しておりますので、レスポンシブ対応サイトの制作を検討している方はぜひ比較検討の一助になさってください。


サービス紹介資料|Webサイト制作・CMS開発|LeadGrid

goleadgrid.com

og_img

LeadGridサイト制作事例集|Webサイト制作・CMS開発|LeadGrid

goleadgrid.com

og_img


60以上のCMSから32のサービスを厳選し、それらを表で比較しました

CMS比較一覧表を見る

リード獲得に強いCMS・Webサイト運用ツール LeadGrid

LeadGridを使えば、Webマーケティングに強いサービスサイト、オウンドメディア、コーポレートサイト制作をスピーディに制作可能です。

ページを見たまま編集できる「ページ編集機能」や「フォーム管理機能」など、Webの知識がなくても担当者ベースで施策が実行できます。

くわえてご希望の方には、WebマーケティングやSEOコンテンツの設計、運用、分析までトータルでご支援しています。

Webサービスやオウンドメディアの立ち上げ、コーポレートサイトリニューアルなど、御社のプロジェクトをお気軽にご相談下さい。

得意領域

  • Webマーケティングに強いWebサイト制作
  • サービスサイト、オウンドメディアサイトの立ち上げ
  • Webマーケティングの戦略設計、運用支援

記事を書いた人

LeadGrid BLOG編集部

LeadGrid BLOG編集部

LeadGrid BLOG(リードグリッド ブログ)は、リード獲得に役立つ情報を発信するWebマーケティングメディアです。

お役立ち資料

サイト制作、マーケティング戦略設計、コンテンツ制作、Webコンサルティング
関連のお役立ち資料をご紹介します。

Web制作・CMS開発・Webマーケティングに関してお気軽にご相談ください。

多くのWeb制作、オウンドメディア制作、Webコンサルティング、コンテンツマーケティングの実績から制作から運用・改善までトータルでサポートします。