2017年、日本人のスマートフォン保有率は75.1%となり、PC保有率(72.5%)を上回りました。翌年の総務省の調査では10代〜50代までが、PCよりもスマートフォンでネットに接続していることが明らかに。

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

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

統一感あるWebサイト作成に役立つスタイルガイド無料テンプレート

オススメのスマホサイトギャラリー10選

スマホサイトデザインのおすすめギャラリー10選

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

1.sps collection

sps collection

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

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

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

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

2.Web Design Clip [S] 

Web Design Clip [S]

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

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

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

3.iPhoneデザインボックス

iPhoneデザインボックス

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

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

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

4.Responsive Web Design JP

Responsive Web Design JP

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

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

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

5.AGT

AGT

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

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

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

6.pttrns. 

pttrns.

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

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

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

7.Mobile Patterns

Mobile Patterns

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

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

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

8.SANKOU!sp ver.

SANKOU!sp ver.

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

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

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

9.IOS Design Inspirations

IOS Design Inspirations

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

IOS Design Inspirations」は、iOS端末とMacで表示されるデザインを集めたギャラリーで、アプリアイコンとアプリLPを掲載しています。アプリ関連に特化したギャラリーは少ないので貴重です。

一方、日本ではApple端末を意識する機会が多いため、参考のために押さえておきたいサイトといえます。
 

10.iconDrop

iconDrop

  • 掲載数:336
  • 検索しやすさ:◎
  • 更新頻度:△

iconDrop」は、iOSアプリのアイコンを集めたギャラリーです。サムネイルをクリックすると、拡大画像とともにデザインの簡単な解説が表示されます。

細かいタグ検索機能もあってサーチしやすく、アイコンデザインのストックに重宝すると思いますよ。
 

スマホサイトデザインのギャラリーサイト比較表

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

サイト名 掲載数 検索しやすさ 更新頻度 おすすめポイント
sps collection 1,840 優れたデザインが豊富
Web Design Clip [S] 1,286 デザインと使いやすさの両立の参考に
iPhoneデザインボックス 652 iPhone向けデザインの参考に
Responsive Web Design JP 2,900 秀逸なレスポンシブデザイン
AGT 472 ハイクオリティなデザイン
pttrns. 8,158 UI設計時の参考になる
Mobile Patterns 418 実用的なUXデザインの参考に
SANKOU!sp ver. 292 検索機能が豊富
iOSpirations 443 海外のアイコンデザインが豊富
iconDrop 336 アイコンデザインが豊富

 

ユーザビリティの高いスマホサイトデザインのポイント

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

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

サイズは750×1334pxを基準に

スマホサイトは、750×1334pxのサイズで作成するのが主流です。

これは、日本のモバイル市場でシェア6割超を持つApple製品に合わせられています。Apple製品の画面サイズは375×667pxが多く、これにRetinaディスプレイのドット比2をかけた画面解像度、つまり750×1334pxがメインになっているわけです。
 

サイトメニューの表示形式はドロップダウンが主流

サイトメニューの表示はドロップダウンが主流のようです。ユーザーがタップした時だけメニューの詳細が展開されるので、ページに表示する情報量を抑えることができます。スライドやモータルウィンドゥと違ってメニューが少なくとも多くともデザインが崩れにくいのも魅力です。
 

フォントサイズは14〜16px、行間は1.5〜2px

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

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

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

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

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

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

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

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

サイトの動作を軽くする

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

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

自社ユーザーが心地よく使えるスマホサイトを構築しよう

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

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

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

 

スタイルガイド テンプレート

元記事発行日: 2020年6月23日、最終更新日: 2020年6月24日