スマホのサイトデザインに困ったときに見るスマホデザインサイト7選!

スマホのサイトデザインに困ったときに見るスマホデザインサイト7選!

PDF無料プレゼント|「必見!ユーザーの離脱を防ぐ ストレスフリーなサイトを作るために気を付けたい7つのポイント」無料プレゼント!

ウェブサイトを見るときは、デスク上のパソコンを立ち上げるよりも、常に携帯しているスマートフォン(以降スマホ)をさっと取り出して見るというスタイルが定着しました。

ところがスマホユーザーは、スマホの画面で見づらいサイトはすぐにスキップしてしまいます。

そのため、情報を発信する側には、既存のウェブサイトだけでなくスマホに最適化されたウェブサイトも用意することが急務となりました。

しかし、スマホに最適化されたウェブサイトのデザインには独自の注意点に加え、見やすさだけではなく扱う情報にふさわしい印象を持たせることも重要です。

そこで、スマホサイトの制作者がデザインに困ったときに参考になるサイトを紹介します。

[目次]

1. スマホサイトデザインの基本的な4つの注意点

2. 参考にしたいスマホサイト集7選

3. まとめ

1. スマホサイトデザインの基本的な4つの注意点

スマホサイトデザインの基本的な4つの注意点

PDF無料プレゼント|「必見!ユーザーの離脱を防ぐ ストレスフリーなサイトを作るために気を付けたい7つのポイント」無料プレゼント!

スマホサイトの参考になるサイトを参考にしてスマホサイトのデザインの方向性を決める前に、今一度スマホならではの基本的な注意点を確認しておきましょう。

1. スマホの画面サイズを意識する

スマホサイトのデザインでは、横幅に注意する必要があります。

iPhone4の横幅の解像度が640pとなって以来、スマホサイトは横幅を640pxでデザインすることが多くなりました。

また、スマホはパソコンと異なり、画面を縦にしたり横にしたりして見ますから、横幅の変化に対応できるリキッドデザインが好ましいです。

2. シンプルなデザインにする

パソコンでの閲覧を前提にしたウェブサイトでは、コラムを2~3にすることが当たり前のように行われますが、スマホでは1コラムが基本となります。

また、一覧式のメニューも、パソコン用サイトのように常時表示させるのではなく、必要なときだけタップして開閉できるアコーディオンメニュー方式が基本です。

3. フォントサイズは小さくしすぎない

スマホサイトのデザインを行うとき、たくさんの情報を小さな画面に納めようとするために、ついフォントサイズを10pxなどの大きさにしてしまいがちです。

しかし読みやすさに配慮するならば、小さくても12px以上が好ましいでしょう。

レイアウト上、不格好にならないのであれば14px~16pxのサイズを使用することでより読みやすくなります

また、Android端末ではボールドに対応していないため、ボールドを使わないデザインを心がけます。[四方健悟1] 

4. リンクはタップしやすい大きさで

パソコン用のウェブサイトのデザインに慣れてしまっていると、ついリンクボタンを小さく作成してしまいます。

パソコンの場合はマウスポインタでクリックしますので、かなり小さな領域でも正確に選択できるためです。

一方、スマホの場合は指先で操作しますので、選ぶ部分が指先で隠れて見えなくなってしまったり、指先が画面に接する面積がマウスポインタに比べてかなり広くなるため、ある程度広い範囲をカバーできるボタンを作成しなければなりません。

そのため、iOSやAndroidのガイドラインでは、リンク領域は44px以上[四方健悟2] が好ましいとされています。これは、画面を指でタップしやすいサイズが必要になるためです。

このように、ボタンなどのリンク領域を作成する場合は指でタップしやすいサイズを心がけなくてはなりません。

また、パソコン用サイトのようにポインターが重なると色やデザインが変化するマウスオーバーの技法を使えませんので、ボタンらしい立体感や明るい屋外でも識別しやすい色を使うことなども心がけましょう。[四方健悟3] 

まだまだほかにもスマホサイトならではの気を遣う点はありますが、最低でも押さえておきたい注意点は以上です。

後は使いやすさや見やすさ、そして注意を惹くデザインとはどのようなものか、実際に多くのデザインを見ることが参考になりますので、優れたスマホサイトを掲載しているサイトを紹介します

2. 参考にしたいスマホサイト集7選

 参考にしたいスマホサイト集7選

PDF無料プレゼント|「必見!ユーザーの離脱を防ぐ ストレスフリーなサイトを作るために気を付けたい7つのポイント」無料プレゼント!

これから作ろうとしているスマホサイトはどのようなデザインにすべきだろうか…。

もし明確なビジョンが浮かばなければ、まずは他の優れたスマホサイトを見てみましょう。きっと参考になるデザインがあるはずです。

そこでここからは、スマホサイトデザインを集めたサイトを紹介します。

1. スマートフォンサイト集めました

http://sp-web.jp/

このギャラリーサイトでは、常に最新のスマホサイトが紹介されているため、いつ見ても新たな発見が期待できます。また、最新のデザイントレンドも確認しやすいです。

膨大な掲載数がありますが、右側のカテゴリーから業種やカラーで絞り込めるため、求めている参考デザインを探しやすくなっています。

2. AGT smartphone design gallery

http://agtsmartphonedesign.com/

国内外のサイトを常時約300種掲載しているスマホサイト集です。

各画面がマウスオーバー[四方健悟4] でスクロールするだけでなく、クリックするとそのスマホサイト全体のデザイン構成を確認できる頁に切り替わりますので、サイトデザイン設計の参考にしやすいことが特徴です。

また、このサイトでもカラーと業種によるカテゴリーで分類されているため、参考にしたいサイトを探しやすくできています。

3. iPhoneデザインボックス

http://design.web-hon.com/

iPhoneサイトが集められたギャラリーサイトですが、iPhoneに限らずスマホサイト全般のサイトデザインの参考になります。

特に、掲載されているスマホ画面をクリックすると、パソコン用のサイトも並べて表示されるため、既存のパソコンサイトからどのようにスマホ用サイトを作れば良いのかという参考になります。

また、下の階層の頁も表示されますので、サイト全体のデザインの参考に便利です。

4. THINK THING

http://thinkthing.net/

投稿型のスマホサイトデザイン集です。

Facebookの「いいね!」を付けたりコメントを投稿することができたりしますので、どのようなサイトがどのように評価されているのかを知ることができます。

また、国内外のサイトをカテゴリー別に見ることもできますので、参考にしたいデザインを探すのに便利です。

5. SPS collection

http://spscollection.com/ 

国内のスマホサイトを集めたデザイン集です。

かなり細かなカテゴリー分類をしていますので、参考にしたいサイトを探すのに便利です。

また、ブックマーク機能があるので、気に入ったサイトを後で探し直す手間が省けます。

最大で120件ずつ表示することができますので、改ページするよりもスクロールしながら閲覧したい人には便利です。

6. iPhoneデザインアーカイブ

http://iphonedesignarchive.jp/

iPhoneに特化したスマホデザイン集ですが、掲載キャプチャ数が1,000を越える豊富さが特徴です。

特に国内の大手サイトが中心に掲載されていますので、代表的な企業のスマホサイトのデザインを参考にできます。

カテゴリーも細かく分類されていますので、参考にしたい業種を探すのに便利です。

7. MOBILE PATTERNS

http://www.mobile-patterns.com/ 

海外のスマホサイトを対象としているので英語ですが、スマホサイトのトップページだけでなく、タブデザインやハンバーガーメニューのキャプチャも掲載されているので、画面の動きが予想できます。

また、カテゴリーはログイン画面や検索画面、設定画面などの細かなシーンごとに分類されていますので、シーンごとの参考デザインを見つけやすいです。

3. まとめ

まとめ

PDF無料プレゼント|「必見!ユーザーの離脱を防ぐ ストレスフリーなサイトを作るために気を付けたい7つのポイント」無料プレゼント!

スマホサイトのデザインが浮かばないときのために、上記で紹介したスマホサイトデザイン集の中から、最も使いやすいサイトをブックマークしておくと良いでしょう。

同業他社や悩んでいるシーンごとのデザインを見て回る内に、良いアイディアが浮かぶはずです。

また、時間があるときに眺めておけば、スマホサイトデザインのトレンドがつかめるようになりますし、デザインの引き出しが増えることも期待できます。

以上のように、スマホサイトの表現力は非常に豊かになってきています。

しかし最も肝心なことは、奇をてらったデザインでは無く、ユーザーが使いやすいデザインであることです。

パット見て直感的に操作できるかどうか、目的の情報に簡単にたどり着けるかどうかといったユーザビリティを最優先しなければなりません。

そのことを常に意識した上で、より表現力のあるスマホサイトをデザインしてください。

 

松本剛徹

松本剛徹

株式会社リアルネットホールディングス 代表取締役 株式会社リアルネット 代表取締役 一般社団法人日本スマートフォンマーケティング協会 代表理事 スマートフォンマーケティングにより300社以上の企業の売上を上げてきた実績を持つ。また、自社で通信販売事業を展開し、初年度から5億円を売り上げも達成。

「必見!ユーザーの離脱を防ぐ ストレスフリーなスマホサイトを作るために気を付けたい7つのポイント」無料プレゼント!

「サイトをスマホに最適化するのが重要だとはわかっているけれど、結局正しい最適化って何なの?」
とお悩みのあなた必見!
「これはやってないとまずい・・・」項目を7つにまとめました。
・○○はできるだけ少なくしよう!
・ボタンは○○を意識して作るべし!
・○○はできるだけ早くする!
などなど、やっておくだけでユーザーにとってグンと見やすいページになるコツがあるのです。
あなたはどれだけスマホサイトの最適化ができていますか?
ページを訪れた瞬間に離脱される・・・なんてことがないようにしっかり対策を取りましょう!

ユーザーの離脱を防ぐストレスフリーなサイトを作るために気を付けたい7つのポイント

スマホ集客実践会

この内容で送信します。よろしいですか?