スマホサイトデザインの参考になる、高品質なギャラリーサイト10選

令和4年の総務省の発表によれば、モバイル端末の世帯保有率は97.3％であり、そのうち日本人のスマートフォン保有率は88.6％とされています。これは、PC保有率の69.8％を上回る数値です。

出典：「令和４年版情報通信白書」（総務省）

企業として対応するべきだということは周知の事実でしょう。ただ実際に自社サイトをスマートフォン向けにデザインしようとしたとき、最適解がわからず迷う人も多いのではないでしょうか。

今回はスマホサイトのデザインで参考になるギャラリーサイト10選と、デザインを決める際のポイントを紹介します。

パソコンのディスプレイは横長ですが、スマホサイトはスマホのディスプレイに合わせて縦長に作られているのが特徴です。

さらに、タッチやスワイプといった画面操作がしやすいように最適化されており、容量をできるだけ軽くしてサイトの表示速度を速めています。
 

スマホサイトの構築において、スマホのディスプレイに特化したページをPCサイトとは別に用意する手法は古く、現在ではレスポンシブデザインを用いた作成が主流となっています。

スマホサイトとPCサイトを別々に作成する場合、URLも異なりますが、レスポンシブデザインを採用すると、一つのURLでさまざまな端末に適応した表示が可能です。

レスポンシブデザインを用いれば、異なる端末ごとにサイトを作成・管理する手間が省けるため、ホームページの更新も容易になります。URLが1つであるため、検索エンジンからのページ評価の分散も避けられます。

また、Google の評価基準の1つであるモバイルフレンドリーをクリアできます。モバイルフレンドリーをクリアしてGoogle からポジティブな評価を受けていると、検索結果の上位表示を狙いやすくなるでしょう。

ではさっそく、スマホサイトデザインの参考になるギャラリーを紹介していきます。
 

1.sps collection

• 掲載数：1,840
• 検索しやすさ：◎
• 更新頻度：◎

「sps collection」は、デザイン性に優れた国内のスマホサイトを集めたギャラリーです。

気になる事例をクリックすると類似のデザインが表示されます。自身が気に留めなかったデザインを受動的に閲覧することで、アイデアの派生が期待できるのではないでしょうか。

更新頻度が高いのも良いですね。ブックマーク機能もあり、アイデアのストックツールとして日常的に使えます。
 

2.Web Design Clip [S] 

• 掲載数：1,286
• 検索しやすさ：◎
• 更新頻度：◯

「Web Design Clip [S] 」は、洗練されたデザインと優れたアイデア・技術のサイトを厳選したギャラリーです。検索がしやすく、目当てのテイストの事例をすぐ見つけられるでしょう。

ほぼ毎日更新されており、定期的にチェックしたいサイトです。
 

3.iPhoneデザインボックス

• 掲載数：652
• 検索しやすさ：◯
• 更新頻度：◯

「iPhoneデザインボックス」は、iPhoneで表示した際のデザインを集めたギャラリーです。デザインだけでなく、UIでも参考になるサイトを厳選。

サムネイル表示のおかげで、ページ遷移をすることなくデザイン全体を確認できます。検索の手間が省けて便利ですね。
 

4.Responsive Web Design JP

• 掲載数：2,900
• 検索しやすさ：◎
• 更新頻度：◯

「Responsive Web Design JP」は、国内の秀逸なレスポンシブデザインを集めたサイトです。スマホ・タブレット・PCそれぞれのキャプチャが一覧に表示されていて、デバイス間での違いを確認しやすいのが特徴。

カテゴリやカラーのほか、使われている技術で検索する機能もあり、目的に応じて幅広く調べ物ができるでしょう。
 

5.AGT

• 掲載数：472
• 検索しやすさ：◯
• 更新頻度：◯

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

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

6.pttrns. 

• 掲載数：8,158
• 検索しやすさ：◎
• 更新頻度：△

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

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

7.Mobile Patterns

• 掲載数：418
• 検索しやすさ：◯
• 更新頻度：△

「Mobile Patterns」は、海外のUI/UXデザインのギャラリーです。

ユーザビリティの高いデザインが厳選されており、見た目と実用性の両立を目指すうえで参考になるでしょう。サムネイル上で実際の操作感を確認できるのも便利なポイントです。
 

8.SANKOU！sp ver.

• 掲載数：292
• 検索しやすさ：◎
• 更新頻度：◎

「SANKOU！sp ver.」は、スタイリッシュなデザインをギャラリーサイトです。

検索機能が充実していて、サイトの種類、業種、デザインのテイスト・効果、機能など、さまざまな角度から調べ物ができます。まだ事例は少ないものの更新頻度は高いので、アイデアストックのひとつにおすすめです。
 

9.bookma！

• 掲載数：448
• 検索しやすさ：△
• 更新頻度：◯

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

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

10.Mobbin

• 掲載数：436
• 検索しやすさ：◯
• 更新頻度：◯

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

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

先ほど紹介したサイトの比較表です。情報整理にお使いください。

Webサイトは、ただ見た目が良いだけでは効果を発揮しません。使いやすさも両立しないと、ユーザーにストレスを抱えられて離脱されます。

ここからは、ユーザビリティの高いデザインを目指すうえで押さえておきたいポイントをご紹介します。
 

サイズは390×844pxを基準に

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

日本語だとフォントサイズは14〜16px、行間は1.5〜2pxが一般的です。デザインにより適正値は異なるものの、可読性を確保するのであれば一般的な値を参考にしましょう。

ちなみに記事タイトルは18〜24pxとバラツキがみられます。タイトルはデザインとのバランスに依存する部分が大きいのですが、コンテンツの中身はユーザー目線の読みやすさ重視が肝要です。
 

サイトの階層を深くしすぎない

スマホサイトでは、階層は深くしすぎないようにしましょう。何度もページ遷移する必要があると、ユーザーは目的のページに辿り着く前に離脱してしまいやすくなります。

シンプルな構造で、ユーザーが迷わない設計を心がけてください。
 

レイアウトはシンプルにまとめる

レイアウトはできる限りシンプルにしましょう。近年のスマホは大画面化しているとはいえ、タブレットやPCに比べると小さいことに変わりはなく、情報量の多いサイトは見にくいのです。

ユーザーの求める情報がどこにあり、どのボタンを押せば良いか。分かりやすい設計であればユーザーは閲覧に集中でき、ひいてはユーザー体験の向上につながります。
 

サイトの動作を軽くする

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

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

Webデザインにおいて見た目の良さはもちろん大事ですが、同時にユーザビリティとそれによるユーザー体験にも焦点を当てましょう。いくら素晴らしい商品や情報を載せていても、サイトの使い勝手が悪いと正しいメッセージを伝えられず、コンバージョンに結びつきにくいでしょう。

このファーストビューで理解してもらえるか、コンテンツは分かりやすく整理されているかなど、ユーザー目線に立ったデザインを心がけましょう。