参考にしたい!スマホサイトデザイン集5選

スマホサイトデザイン.jpg

各調査機関によると、2015年の段階でスマホの普及率は5~7割に上り、うち20代に限っては9割を超えているようです。

参考:
スマートフォンの国内普及率は49.7% スマホ満足度はNTTドコモが初の1位、携帯電話を含めるとKDDI(au)が9年連続1位に! | nikkei BPnet 〈日経BPネット〉

スマートフォン所有率は69%、タブレットは28%にまで躍進(2015年)(最新)

20代のスマホ所有率は94%、SNS利用率は30代でも8割超 - 総務省が統計調査 | マイナビニュース

若年層を中心にスマホは生活に欠かせない存在となり、インターネット利用もPCからスマホへ移行するなか、Web上でビジネスを行うのであれば、ホームページのスマホ最適化は必須です。
しかし、スマホ最適化と言っても、自社のホームページの場合、どのような形式が最適なのか、悩まれている方も多いのではないでしょうか。

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

スマホサイトデザイン集

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

スマートフォンサイト集めました。.png
http://sp-web.jp/

新しいスマホサイトが出るたびに更新されているため、最新のスマホサイトを閲覧することができるうえ、掲載数も大量で、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.SPS collection

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

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

5.lovely ui

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

海外サイト専門のスマホデザイン集です。
フラットデザイン、マテリアルデザイン等、Webデザインのトレンドを抑えたサイトを中心に掲載しています。

比較的若年層向けのデザインが揃っているため、若年層をターゲットとする業種は特に参考になるでしょう。
デバイスやデザインのトレンドでの検索が可能です。

まとめ

スマホサイトのデザインは多種多様で、あらゆる表現が可能です。
企業イメージを最大限表現することも大切ですが、最も重視するべきはユーザビリティです。

デザインはUI/UXを考慮して作られるべきものなので、独りよがりにならないよう注意が必要です。
デザインのトレンドは変わりやすく、ユーザーが使いやすいと感じるUIも変化しています。

デザイン集を定期的に確認し、今はどのようなデザインが主流なのか、どのようなUIが好まれるのかを把握しましょう。

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

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

このニュースに関連するカリキュラム

スマートフォン(スマホ)EFOの最適化ポイント
スマートフォンはパソコンと違い、どうしても画面が狭く操作しづらいという特徴があります。そこで、入力フォーム自体を大きくしたり、ページを分割したりなどど工夫が必要になります。また、トグルボタンやドラムなどスマートフォンならではのインターフェースも使うと良いです。
Profile

この記事の著者

水落 絵理香

Profile

水落 絵理香

webマーケティング事業部 副編集長、ライター。
前職はCMS制作会社でwebコンサルティングに従事。Ferretでは記事作成、SNS運用を担当。「読めば誰でもwebマーケターになれるようなメディアを目指します!^^」

-Facebook:水落絵理香
-Twitter:@saturunus

本気で、働こう
会員になると、お気に入りに保存ができたり、
便利な機能が使えるようになります。

or

▼SNSで登録/簡単ログイン

Icon fb
Icon yahoo
Icon twitter

利用規約プライバシーポリシーに同意の上、ボタンをクリックしてください。

会員になると、限定記事を全て読めるようになります。
他にも便利な機能が使えます。

or

▼SNSで登録/簡単ログイン

Icon fb
Icon yahoo
Icon twitter

利用規約プライバシーポリシーに同意の上、ボタンをクリックしてください。

現会員298,226

会員になると限定機能が使えます。
or

▼SNSで登録/簡単ログイン

Icon fb
Icon yahoo
Icon twitter

利用規約プライバシーポリシーに同意の上、ボタンをクリックしてください。

Line medium
Original

この記事に関連したタグ

人気記事ランキング

  • 昨日
  • 週間
  • 殿堂
  • はてブ

2月1日(月)にアクセスの多かった記事

1Thumb

プレゼンテーションで使えるフレームワーク6選

2Thumb

参考にしたい!スマホサイトデザイン集5選

3Thumb

Twitterをスパム乗っ取りから解除する作業手順まとめ(PC/iPhone/Android)

4Thumb

【商用可】和風な日本語のフリーフォント40選

5Thumb

目からうろこ!Twitterを便利にしてくれる裏技10選

Sponsored

現会員298,226

会員になると限定機能が使えます。
or

▼SNSで登録/簡単ログイン

Icon fb
Icon yahoo
Icon twitter

利用規約プライバシーポリシーに同意の上、ボタンをクリックしてください。

ferretはWebマーケティングを基礎から学べるサイトです。

無料会員登録すると、カリキュラムなどの限定機能が全て使えるようになります。