令和4年の総務省の発表によれば、モバイル端末の世帯保有率は97.3％であり、そのうち日本人のスマートフォン保有率は88.6％とされています。これは、PC保有率の69.8％を上回る数値です。
【無料】パフォーマンスが高いウェブサイトを作ってみませんか？
HubSpotとCanvaは共同で、パフォーマンスが高く見栄えの良いウェブサイトを作成、管理する手順を詳しく説明する無料のガイドを作成しました。
もし、まだ自社Webサイトのスマホサイト対応ができていない場合、機会を損失しないために対応は急務といえます。
出典：「令和４年版情報通信白書」（総務省）
今回はスマホサイトのデザインで参考になるギャラリーサイト10選と、デザインを決める際のポイントを紹介します。
Webサイトはもともと、パソコンの横長のディスプレイにあわせて情報を表示するようデザインされてきました。しかし携帯電話、スマートフォンとモバイル端末が発達するにつれ、縦長の小さい画面でも見られるようにとモバイル向けサイトが増加してきました。
そしてスマートフォンが広く普及することにより、インターネットへのアクセスはパソコンよりも増加。Google がモバイルフレンドリーを打ち出したことにより、スマホサイトの重要性はどんどん増してきています。
スマホサイトの現在の主流は、URLもデザインもパソコン版と同じものを共有する「レスポンシブデザイン」です。
かつてはスマホサイトとして独立したページを作成することもありましたが、トラフィックを別々のURLで分ける意味は薄く、今は推奨されていません。
デザインについてもスマホサイト用に別のものを用意するケースがありましたが、レスポンシブデザインでは1つのデザインを端末によって出し分けます。具体的には、表示するディスプレイの横幅に合わせてコンテンツを調整し、どの端末からでも同じユーザー体験が得られるようにします。
レスポンシブデザインでスマホサイトを構築する意味をまとめると、以下のようになります。
すでに述べたように、インターネット利用の主軸はすでにモバイル端末に移っています。一方でパソコンでの利用がなくなったわけではなく、企業サイトとしてはどちらも重視しなければなりません。
そんな場合に、1つのデザインでどちらも対応できるレスポンシブデザインが重要とされます。
モバイル端末では、そのWebページに訪れて目的が達成されなかった場合、すぐさま別のサイトへ離脱されてしまいます。
レスポンシブデザインではスマホでの体験をベースにデザインされていることも多く、いいユーザー体験を構築しやすいといえます。
検索だけでなく、SNSからの流入も重要です。
SNSはほとんどの場合モバイル端末で見られることから、リンク先のスマホ対応が重要なことはいうまでもありません。
Google はレスポンシブデザインで作成されたWebサイトを高く評価する傾向にあります。
一方で、現在は多くのWebサイトがレスポンシブデザインで作成されており、レスポンシブデザインでなければ上位表示は難しいということもできます。
レスポンシブデザインではスマホでの表示を前提としているため、一定の表示速度が期待できます。
SEOにおいても、ユーザー体験においても、ページが早く見られることは大きなアドバンテージとなります。
レスポンシブデザインはディスプレイ（正確にはブラウザ）の横幅に合わせてコンテンツの幅や要素を調整するため、端末に合わせて人の手で調整する必要はありません。
管理のしやすさもレスポンシブデザインのメリットの1つです。
ではさっそく、スマホサイトデザインの参考になるギャラリーを紹介していきます。
「sps collection」は、デザイン性に優れた国内のスマホサイトを集めたギャラリーです。
気になる事例をクリックすると類似のデザインが表示されます。自身が気に留めなかったデザインを受動的に閲覧することで、アイデアの派生が期待できるのではないでしょうか。
更新頻度が高いのも良いですね。ブックマーク機能もあり、アイデアのストックツールとして日常的に使えます。
「Web Design Clip [S] 」は、洗練されたデザインと優れたアイデア・技術のサイトを厳選したギャラリーです。検索がしやすく、目当てのテイストの事例をすぐ見つけられるでしょう。
ほぼ毎日更新されており、定期的にチェックしたいサイトです。
「iPhoneデザインボックス」は、iPhoneで表示した際のデザインを集めたギャラリーです。デザインだけでなく、UIでも参考になるサイトを厳選。
サムネイル表示のおかげで、ページ遷移をすることなくデザイン全体を確認できます。検索の手間が省けて便利ですね。
「Responsive Web Design JP」は、国内の秀逸なレスポンシブデザインを集めたサイトです。スマホ・タブレット・PCそれぞれのキャプチャが一覧に表示されていて、デバイス間での違いを確認しやすいのが特徴。
カテゴリやカラーのほか、使われている技術で検索する機能もあり、目的に応じて幅広く調べ物ができるでしょう。
「AGT」には、運営が厳選したスマホ向けのハイクオリティなデザインが掲載されています。UI/UXに優れたものも多く、ユーザー体験向上の参考に有用です。
掲載数は少なめですが、各事例をその場でキャプチャ表示できるなど、見やすく・使いやすく工夫されています。
「pttrns.(英語)」は、海外のiOSアプリのUIデザインを集めたギャラリーです。起動画面やロード画面、サイドバー、チャートなど細かくカテゴライズされたUIがアルファベット順に並んでいて、設計時にピンポイントで参考になるデザインを検索できます。
ただし、掲載されているすべてのデザインを見るには有料会員登録しなければいけません。
「SANKOU！sp ver.」は、スタイリッシュなデザインを集めたギャラリーサイトです。
検索機能が充実していて、サイトの種類、業種、デザインのテイスト・効果、機能など、さまざまな角度から調べ物ができます。まだ事例は少ないものの更新頻度は高いので、アイデアストックのひとつにおすすめです。
「bookma！」は、合同会社燈のWebデザインギャラリーです。
シンプルでわかりやすく、またスタイリッシュさを両立したデザイン事例が多数掲載されています。扱うテーマもさまざまで、気になったものが見つかるでしょう。
「Mobbin(英語)」は、海外のデザインギャラリーサイトです。
アプリ用の優れたデザインが多数掲載されています。アプリの掲載数が436である一方、10万枚以上のスクリーンショットが掲載されており、一つひとつのデザインを細かく確認できるのがポイントです。
Webサイトは、ただ見た目が良いだけでは効果を発揮しません。使いやすさも両立しないと、ユーザーにストレスを抱えられて離脱されます。
ここからは、ユーザビリティの高いデザインを目指すうえで押さえておきたいポイントをご紹介します。
2023年現在、日本では390×844pxの画面が主流です。これは、iPhone 12や12 Pro、13、13 Pro、14、14 Proに該当するサイズです。
iPhoneで使用されているRetinaディスプレイは、サイズによって必要とされるピクセル数が異なり、上記の端末では、一般的に3倍の1170×2532pxで制作されます。しかし、このサイズでは3で割り切れないサイズの画像を表示した際にレイアウトが崩れる可能性があります。
そのため、実際には2番目にシェア率が高い375x667pxを基準にしているケースもあります。Retinaディスプレイでは2倍の750×1334pxが必要です。
サイトメニューはドロップダウンが主流のようです。ユーザーがタップした時だけメニューの詳細が展開されるので、ページに表示する情報量を抑えることができます。
スライドやモータルウィンドゥと違ってメニューが少なくとも多くともデザインが崩れにくいのも魅力です。
日本語だとフォントサイズは14〜16px、行間は1.5〜2pxが一般的です。デザインにより適正値は異なるものの、可読性を確保するのであれば一般的な値を参考にしましょう。
ちなみに記事タイトルは18〜24pxとバラツキがみられます。タイトルはデザインとのバランスに依存する部分が大きいのですが、コンテンツの中身はユーザー目線の読みやすさ重視が肝要です。
スマホサイトでは、階層は深くしすぎないようにしましょう。何度もページ遷移する必要があると、ユーザーは目的のページに辿り着く前に離脱してしまいやすくなります。
シンプルな構造で、ユーザーが迷わない設計を心がけてください。
レイアウトはできる限りシンプルにしましょう。近年のスマホは大画面化しているとはいえ、タブレットやPCに比べると小さいことに変わりはなく、情報量の多いサイトは見にくいのです。
ユーザーの求める情報がどこにあり、どのボタンを押せば良いか。分かりやすい設計であればユーザーは閲覧に集中でき、ひいてはユーザー体験の向上につながります。
サイトの動作を軽くすることは、ユーザビリティのみならず、SEO対策においても重要になります。これはPC向けのWebデザインでも言われますが、スキマ時間にさらっと閲覧する場合の多いスマホサイトだとなおさらです。
画像の容量を少なくしたり、余計なコードを削ったりして、なるべく軽快に閲覧できるサイトを作りましょう。
なお、サイトスピードの計測にはGoogle が提供している「PageSpeed Insights」がおすすめです。検索最大手であるGoogle が自らサイトスピードを細かく計測してくれるため、どこを改善すればいいのかまでわかります。
サイトスピードについて詳しいことは、以下コラムをご覧ください。
これからスマホサイトに対応したい、あるいはWebサイトを新しく構築したいという場合には、CMS（コンテンツ・マネジメント・システム）の利用が一般的です。
CMSとは、Webサイトの構築やコンテンツの更新を簡単に行えるようにしたパッケージのことです。テンプレートを利用できることから、専門的な知識がなくてもWebサイトを制作でき、直感的に操作できるエディターを用いてコンテンツを更新できます。
CMSを使ってスマホサイトに対応したWebサイトを作成することで、一部あるいはすべての工程を内製化できるというメリットがあります。特にWebサイト公開後の更新については、画像とテキストさえあれば誰でも更新が可能なことから、コンテンツの更新については社内のチームでまかなうことが可能です。
また、多くのCMSには複数人で管理できる機能が備えられており、これによりWebサイトの運営を分業化できます。属人化の防止はもちろん、多彩なコンテンツの更新も可能になるでしょう。
SEO対策がしやすい点もCMSのメリットです。多くのCMSにはSEO対策を支援する機能が備えられており、狙ったキーワードでの上位表示がしやすくなります。
CMSでは多くの場合、テーマと呼ばれるテンプレートを用いてWebサイトを作成します。テーマには各ページのレイアウトやコンテンツの雛形が組み込まれており、これをカスタマイズして自社仕様にしていくことになります。
現在、このように提供されているテーマのほとんどはレスポンシブデザインに対応しています。これからWebサイトを構築する場合は、レスポンシブデザインかどうかを悩む必要はほとんどないといえるでしょう。
CMSは簡単にWebサイトを構築できる一方で、すでに作成し運用しているWebサイトをCMSへ接続するには一定の手間が必要となります。
CMSによっては移行も簡単に行えることを謳っているものもありますが、予期せぬトラブルを割けるため、制作会社に依頼するのが一般的です。
ここでは、スマホサイトの対応にも適したおすすめCMSを3つご紹介します。
WordPressは、世界で最も利用されているCMSです。日本でもシェアは圧倒的に高く、多くの企業サイトがWordPressで制作されています。
WordPressはオープンソース型のCMSであり、ソースコードが公開されています。そのため誰でも開発に参加することができ、豊富な数のテーマやプラグインが無料で利用できます。
ブログシステムから発展したCMSのため、コンテンツの更新しやすさにも特徴があります。更新頻度を上げていきたい場合には、WordPressが大きな選択肢になるでしょう。
EC-CUBEは、WordPressと同じくオープンソース型のCMSです。EC機能に特化している点が特徴であり、国産のECオープンソースとしてはナンバー1を謳っています。
EC-CUBEは豊富なテーマと柔軟なカスタマイズ性を特徴としており、基本的な利用料は無料ながら大規模ECサイトの開発にも向いています。また、独自のセキュリティ対策により、悪質なハッカーに狙われやすいオープンソース型ながら安全な通信を確保しています。
Content Hubは、当社HubSpotが提供するマーケティングソフトウェアです。
Content Hubの中にはHubSpot独自のCMSを含み、ビジネスに特化したテーマを選択して直感的にWebサイトを構築できます。HubSpotの各マーケティングソフトウェアと連携できることから、マーケティングを強化したい場合に最適です。
Content Hubはコンテンツマーケティングを支援するソフトウェアであり、AIによるコンテンツ作成を特徴としています。トピックとプロンプト（指示）を入れるだけで下調べやアウトラインの作成を完了してくれるため、担当者は少ない手間で高品質なコンテンツを更新できるようになります。
Webデザインにおいて見た目の良さはもちろん大事ですが、同時にユーザビリティとそれによるユーザー体験にも焦点を当てましょう。いくら素晴らしい商品や情報を載せていても、サイトの使い勝手が悪いと正しいメッセージを伝えられず、コンバージョンに結びつきにくいでしょう。
このファーストビューで理解してもらえるか、コンテンツは分かりやすく整理されているかなど、ユーザー目線に立ったデザインを心がけましょう。