各調査機関によると、2015年の段階でスマホの普及率は5~7割に上り、うち20代に限っては9割を超えているようです。若年層を中心にスマホは生活に欠かせない存在となり、インターネット利用もPCからスマホへ移行するなか、Web上でビジネスを行うのであれば、ホームページのスマホ最適化は必須です。しかし、スマホ最適化と言っても、自社のホームページの場合、どのような形式が最適なのか、悩まれている方も多いのではないでしょうか。

今回は、スマホ最適化を実施する前に見ておきたいスマホサイトの参考にしたデザインがまとまったものをご紹介します。これからスマホサイトを制作する予定の方、またはリニューアルを考えられている方はぜひ参考にしてみてください。

目次

  1. サイトデザインの参考にしたい
  2. アイコンデザインの参考にしたい

サイトデザインの参考にしたい

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

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

新しいスマホサイトが出るたびに更新されているため、最新のスマホサイトを閲覧することができるうえ、掲載数も大量で、400近いデザインを閲覧できます。 サイトカラー、業種でカテゴリ分けされているため、自社のイメージに近いデザインが探しやすくなっています。サイトごとにユーザーからの評価が付いており、客観的な意見も把握できます。

2.AGT

スマートフォンサイト_デザイン集_AGT_smartphone_design_gallery.png
http://agtsmartphonedesign.com/

AGTは各スマホサイトのデザインをすぐに把握できるための工夫が施されています。1つ1つのサイトが大きく表示されており、マウスオーバーすることでスマホサイトが自動的に縦スクロールされるよう設計されています。国内外のスマホサイトが常時約300種類掲載されており、豊富な掲載数がある一方で、こちらも色と業種ごとにタグ付けされているため簡単に検索ができます。

3.iPhone Design Box

スマフォサイトで使えるネタ帳iPhoneデザインボックス.png
http://design.web-hon.com/

国内外のシンプルでスタイリッシュなスマートフォンサイトを中心に掲載しています。 掲載されているサイトをクリックすると、スマホ用とPC用のキャプチャが表示されるので、PCサイトをどのようにスマホサイトに展開すればいいのかわからないという方には非常に参考にしやすい設計になっています。

選択したサイトに関連づけした類似デザインや人気のスマホサイトデザインも一覧表示されるので、目的のデザインが見つかりやすいでしょう。 「スマフォサイト制作で困ったら」、「スマフォサイトで使えるネタ帳」のカテゴリには、スマホサイト制作時に役立つコンテンツも充実しています。

4.THINK THING

THINK_THING.png

THINK THINGはユーザー投稿型のスマホデザイン集サイトです。Facebookのいいねが多い順で閲覧することができるため、ユーザーの評価の高いデザインを見ることができます。

5.Responsive Web Design JP

Responsive_Web_Design_JP.png
http://responsive-jp.com/

レスポンシブデザインをまとめたデザイン集サイトです。今人気のレスポンシブデザインで、スマホサイトを作成するときの参考にできます。スマホ、タブレット、PCのデザインがまとまっています。

6.Media Queries

Media_Queries.png

海外のレスポンシブデザインをまとめたデザイン集サイトです。Responsive Web Design JPの海外版とイメージすると分かりやすいです。こちらもスマホ、タブレット、PCのデザインがまとまっています。

7.SPS collection

スマートフォンサイトのデザインリンク集_sps_collection.png
http://spscollection.com/

カテゴリやカラーからサイトの検索が可能、ブックマーク機能もついているので参考サイトをストックし、後から選別したい時に便利です。 各スマホサイトのファーストビューが、サイト内のテキストが読めるほどの大きさで表示されるため、プレビューの段階で詳細まで確認できます。

8.lovely ui

lovely_ui.png
http://www.lovelyui.com/

海外サイト専門のスマホデザイン集です。フラットデザイン、マテリアルデザイン等、Webデザインのトレンドを抑えたサイトを中心に掲載しています。比較的若年層向けのデザインが揃っているため、若年層をターゲットとする業種は特に参考になるでしょう。デバイスやデザインのトレンドでの検索が可能です。

9.iPhoneデザインボックス

iPhoneデザインボックス.png
http://design.web-hon.com/

iPhoneサイトに特化したデザイン集サイトです。しっかりと更新されていて参考にしやすいサイトです。

10.MOBILE PATTERNS

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

TOPページのデザインだけ載っているデザイン集サイトも多いですが、このサイトはハンバーガーメニューのデザイン、タブデザインなど、それぞれのキャプチャが載っているサイトです。

アイコンデザインの参考にしたい

11.iOSpirations

iOSpirations.png

アイコンデザインが豊富にまとまっているサイトです。アイコンだけでなく、サイトデザインもまとまっているオールマイティーなサイトと言えるでしょう。

まとめ

スマホサイトのデザインは進化し、あらゆる表現が可能になりました。

企業イメージを最大限表現することも大切ですが、最も重視するべきはユーザビリティです。デザインはUI/UXを考慮して作られるべきものなので、独りよがりにならないよう注意が必要です。デザインのトレンドは変わりやすく、ユーザーが使いやすいと感じるUIも変化しています。デザイン集を定期的に確認し、今はどのようなデザインが主流なのか、どのようなUIが好まれるのかを把握しましょう。

このニュースを読んだあなたにオススメ

ホームページをスマホ化する4つの方法
レスポンシブデザインの基礎と制作時の注意点を解説