スマホサイトの参考になるギャラリーサイト4 選＆ユーザー体験を高めるデザインのポイント

近年、スマホサイトの重要性がいっそう高まっています。令和4年版情報通信白書によれば、日本国内におけるスマートフォン保有率は88.6％にのぼり、PC保有率の69.8％を大きく上回っているのが実情です（※）。現状、自社のWebサイトがスマホ対応していないようなら、早急に対応する必要があるでしょう。

5ステップでパフォーマンスの高いウェブサイトを作成、管理する方法

HubSpotとCanvaは共同で、パフォーマンスが高く見栄えの良いウェブサイトを作成、管理する手順を詳しく説明する無料のガイドを作成しました。

• オーディエンスとそのニーズについて理解する
• オーディエンスに合ったコンテンツを作成する
• ウェブサイトを最適化し最大限の成果を上げる
• パフォーマンスレポートの作成、分析、継続的な改善

今すぐ無料ダウンロードする 詳しく見る 今すぐ無料ダウンロードする

今すぐダウンロードする

全てのフィールドが必須です。

ダウンロードの準備ができました

下記のボタンよりダウンロードいただけます。

今すぐダウンロードする

今回は、スマホサイトのデザインで参考になるギャラリーサイト4選と、デザインのポイントについて紹介します。ホームページをスマホ対応させるべき理由や、一般的な構築方法にもふれていますので、参考にしてください。

※出典：総務省｜令和4年版情報通信白書

スマホサイトを構築するにあたって、さまざまな既存のWebサイトを参考にすることは重要なポイントの1つです。参考になるスマホサイトギャラリーを厳選しましたので、デザインを検討する際に役立ててください。
 

1. AGT

「AGT」には、運営が厳選したスマホ向けのハイクオリティなデザインが掲載されています。UI/UXに優れたものも多く、ユーザー体験向上の参考に有用です。

掲載数は少なめですが、各事例をその場でキャプチャ表示できるなど、見やすく・使いやすく工夫されています。
 

2. bookma!

「bookma!」は、合同会社燈のWebデザインギャラリーです。

シンプルでわかりやすく、またスタイリッシュさを両立したデザイン事例が多数掲載されています。扱うテーマもさまざまで、気になったものが見つかるでしょう。
 

3. pttrns.

「pttrns.(英語)」は、海外のiOSアプリのUIデザインを集めたギャラリーです。起動画面やロード画面、サイドバー、チャートなど細かくカテゴライズされたUIがアルファベット順に並んでいて、設計時にピンポイントで参考になるデザインを検索できます。

ただし、掲載されているすべてのデザインを見るには有料会員登録しなければいけません。
 

4. Mobbin

Mobbin(英語)」は、海外のデザインギャラリーサイトです。

アプリ用の優れたデザインが多数掲載されています。アプリの掲載数が436である一方、10万枚以上のスクリーンショットが掲載されており、一つひとつのデザインを細かく確認できるのがポイントです。
 

ホームページをスマホ対応させるべき理由として、次の6点が挙げられます。

• 理由1：モバイル端末ユーザーが増えている
• 理由2：モバイルでのユーザー体験が重視されている
• 理由3：SNS経由の流入が期待できる
• 理由4：SEO効果が期待できる
• 理由5：表示速度が向上する
• 理由6：管理がしやすい

それぞれ詳しく見ていきましょう。
 

理由1：モバイル端末ユーザーが増えている

1つ目の理由は、スマホなどのモバイル端末のユーザーが増えていることです。インターネット利用のメインは、すでにPCからモバイルへと移行しています。はじめからスマホサイトに特化して構築する「モバイルファースト」という考え方も登場しているほどです。

ただし、企業ホームページに関してはPCによる閲覧も依然として多いことから、PC向けのサイト構築を軽視してよいわけではありません。そのため、1つのデザインでさまざまな画面サイズに対応可能なレスポンシブデザインを採用する企業が増えています。
 

理由2：モバイルでのユーザー体験が重視されている

モバイルでのユーザー体験を検索エンジンが重視するようになったことも大きな理由の1つです。Google は2015年2月、スマホ利用に最適化されたサイトをモバイルでの検索結果において優遇すると発表しました。スマホ表示に対応していないWebサイトは、モバイルユーザーの検索結果に表示されにくくなるおそれがあります。

実際、PC向けのサイトをモバイル端末で閲覧した場合、文字や画像が小さく見にくい表示となりがちです。モバイルユーザーが離脱する直接的な原因となるため、スマホ対応は急務といえます。
 

理由3：SNS経由の流入が期待できる

検索サイト以外にも、SNSからの流入が期待できるという理由もあります。多くの場合、SNSはモバイル端末で閲覧されていることから、リンク先であるWebサイトのスマホ対応が重要であることはいうまでもありません。SNSという重要な流入経路を有効活用するためにも、スマホ対応は必須の対策となっています。
 

理由4：SEO効果が期待できる

前述のとおり、Google はスマホ表示に対応しているWebサイトを優遇すると公表しています。これを受けて、現在では多くのWebサイトがレスポンシブデザインで作成されているのが実情です。裏を返すと、スマホ非対応のサイトではこれらの競合サイトに太刀打ちできない可能性が高いでしょう。SEO効果を高めるには、スマホ対応は必須条件といえます。
 

理由5：表示速度が向上する

スマホ表示に対応することで、Webサイトの表示速度が向上する効果が期待できます。レスポンシブデザインのサイトであれば、画面サイズに合わせて表示領域が調整されるからです。ページの表示速度を改善することは、SEOの観点からも、ユーザー体験を向上させる観点からも重要なポイントといえます。
 

理由6：管理がしやすい

スマホ表示に対応させることによって、Webサイトの管理がしやすくなるというメリットもあります。レスポンシブデザインで作成されたサイトはブラウザの横幅に合わせてコンテンツの幅や要素の配置を自動で調整するため、さまざまな端末の画面サイズごとに人の手で調整する必要がないからです。

スマホサイトのユーザー体験を高めるために、意識しておきたい6つのポイントを紹介します。
 

ポイント1：シンプルなレイアウトにする

1つ目のポイントは、レイアウトをできる限りシンプルにすることです。近年のスマホは大画面モデルが増えているとはいえ、タブレットやPCと比べると画面領域が限られています。情報量の多いサイトは見にくくなってしまうため、シンプルなレイアウトを心がけましょう。

たとえば、重要な情報がどこにあるのか、どのボタンを押せばよいのか、といった点をわかりやすく設計するのがポイントです。初見のユーザーが操作に迷うことのないよう、ボタンなどの要素の配置やサイズ、色などを工夫する必要があります。

ポイント2：タップ操作に合わせて最適化する

スマホサイトとPCサイトの大きな違いとして、タップ操作かクリック操作かという点が挙げられます。スマホでの閲覧を想定するなら、タップ操作しやすいよう最適化しておくことが重要です。

たとえば、サイトメニューをドロップダウンにすることで、ユーザーがタップした時だけメニューの詳細が展開されるサイトデザインにできます。これにより、ページに表示する情報量を抑えられる点が大きなメリットです。また、スライドやモータルウィンドウのように、メニュー数によってデザインが崩れる心配が少ないことも長所といえます。
 

ポイント3：基準となる画面サイズを決める

スマホサイトをデザインするにあたって、基準となる画面サイズを明確にしておくことも大切です。基準が曖昧な状態のままデザインを進めてしまうと、外注先との間で認識のずれが生じるおそれがあります。

2024年現在、スマホ画面のサイズは390×844pxが主流です。ただし、高解像度ディスプレイによっては、この3倍の解像度が採用されているケースも少なくありません。よって、3で割り切れないサイズの画面を表示した際にレイアウトが崩れる可能性があります。

こうした事情により、実際には2番目にシェアが高い375×667pxを基準にしているケースもあります。Retinaディスプレイでは2倍の750×1334pxが必要です。
 

ポイント4：見やすいフォントサイズ・行間に設定する

スマホ画面で見やすいフォントサイズや行間を意識することも重要です。日本語の場合、フォントサイズは14〜16px、行間は1.5〜2pxに設定するケースが多く見られます。可読性を重視するなら、この範囲内に収まるように設定するのが得策です。

なお、記事タイトルに関しては18〜24pxとサイトによってまちまちです。タイトルのフォントサイズはデザインとの兼ね合いによって決まる面があるものの、あくまでもユーザーの視点に立ち、読みやすさを重視することが大切です。
 

ポイント5：サイト構造・導線をわかりやすくする

サイト全体の構造や、別のページへ遷移する際の導線をわかりやすくすることも欠かせないポイントといえます。階層を深くしすぎたり、何度もページを遷移しなければ目的のページに到達できない構成になっていたりすると、ユーザーが離脱しやすくなるからです。できるだけシンプルな構造にし、ユーザーが迷わないようサイトを設計しましょう。
 

ポイント6：サイトの動作を軽くする

サイトの動作を軽くすることは、ユーザビリティのみならず、SEO対策においても重要になります。これはPC向けのWebデザインでも言われますが、スキマ時間にさらっと閲覧する場合の多いスマホサイトだとなおさらです。

画像の容量を少なくしたり、余計なコードを削ったりして、なるべく軽快に閲覧できるサイトを作りましょう。

なお、サイトスピードの計測にはGoogle が提供している「PageSpeed Insights」がおすすめです。検索最大手であるGoogle が自らサイトスピードを細かく計測してくれるため、どこを改善すればいいのかまでわかります。

サイトスピードについて詳しいことは、以下コラムをご覧ください。

これからスマホサイトに対応したい、あるいはWebサイトを新しく構築したいという場合には、CMS（コンテンツ・マネジメント・システム）の利用が一般的です。

CMSとは、Webサイトの構築やコンテンツの更新を簡単に行えるようにしたパッケージのことです。テンプレートを利用できることから、専門的な知識がなくてもWebサイトを制作でき、直感的に操作できるエディターを用いてコンテンツを更新できます。
 

CMS導入のメリット

CMSを使ってスマホサイトに対応したWebサイトを作成することで、一部あるいはすべての工程を内製化できるというメリットがあります。とくにWebサイト公開後の更新については、画像とテキストさえあれば誰でも更新が可能なことから、コンテンツの更新については社内のチームでまかなうことが可能です。

また、多くのCMSには複数人で管理できる機能が備えられており、これによりWebサイトの運営を分業化できます。属人化の防止はもちろん、多彩なコンテンツの更新も可能になるでしょう。

SEO対策がしやすい点もCMSのメリットです。多くのCMSにはSEO対策を支援する機能が備えられており、狙ったキーワードでの上位表示がしやすくなります。
 

テーマのほとんどはレスポンシブ対応

CMSでは多くの場合、テーマと呼ばれるテンプレートを用いてWebサイトを作成します。テーマには各ページのレイアウトやコンテンツの雛形が組み込まれており、これをカスタマイズして自社仕様にしていくことになります。

現在、このように提供されているテーマのほとんどはレスポンシブデザインに対応しています。これからWebサイトを構築する場合は、レスポンシブデザインかどうかを悩む必要はほとんどないといえるでしょう。
 

CMS移行には一定の手間が必要

CMSは簡単にWebサイトを構築できる一方で、すでに作成し運用しているWebサイトをCMSへ接続するには一定の手間が必要となります。

CMSによっては移行も簡単に行えることをうたっているものもありますが、予期せぬトラブルを避けるため、制作会社に依頼するのが一般的です。
 

おすすめCMS

ここでは、スマホサイトの対応にも適したおすすめCMSを3つご紹介します。
 

WordPress

WordPressは、世界で最も利用されているCMSです。日本でもシェアは圧倒的に高く、多くの企業サイトがWordPressで制作されています。

WordPressはオープンソース型のCMSであり、ソースコードが公開されています。そのため誰でも開発に参加でき、豊富な数のテーマやプラグインが無料で利用可能です。

ブログシステムから発展したCMSのため、コンテンツの更新しやすさにも特徴があります。更新頻度を上げていきたい場合には、WordPressが大きな選択肢になるでしょう。

EC-CUBE

EC-CUBEは、WordPressと同じくオープンソース型のCMSです。EC機能に特化している点が特徴であり、国産のECオープンソースとしてはナンバー1をうたっています。

EC-CUBEは豊富なテーマと柔軟なカスタマイズ性を特徴としており、基本的な利用料は無料ながら大規模ECサイトの開発にも向いています。また、独自のセキュリティ対策により、悪質なハッカーに狙われやすいオープンソース型ながら安全な通信を確保しています。
 

Content Hub

Content Hubは、当社HubSpotが提供するマーケティングソフトウェアです。

Content Hubの中にはHubSpot独自のCMSを含み、ビジネスに特化したテーマを選択して直感的にWebサイトを構築できます。HubSpotの各マーケティングソフトウェアと連携できることから、マーケティングを強化したい場合に最適です。

Content Hubはコンテンツマーケティングを支援するソフトウェアであり、AIによるコンテンツ作成を特徴としています。トピックとプロンプト（指示）を入れるだけで下調べやアウトラインの作成を完了してくれるため、担当者は少ない手間で高品質なコンテンツを更新できるようになります。
 

今回紹介してきたとおり、スマホ対応はすでにWebサイト作成上の必須条件となりつつあります。スマホサイトを作成さえすればよいのではなく、ユーザー体験を高めるための工夫の一環と捉えることが大切です。

Webデザインにおいては見た目の良さはもちろん重要な要素ですが、同時にユーザービリティを向上させ、ユーザー体験を高めていくことも大切です。この記事で紹介したギャラリーサイトやデザイン上のポイントを参考に、ユーザーの視点に立った使いやすいスマホサイトの構築を実践してください。

HubSpotではこの他にもマーケティングやセールスに役立つ資料を無料で公開していますので、ぜひこちらからご覧ください。