スマホサイトのカスタマイズ時に参考になるデザインギャラリーサイト10選

f:id:tsubasa123:20161219135037j:plain

こんにちは、つばさ(@tsubasa123)です。

はてなPro契約が完了してからひたすらスマホサイトのデザインを研究しております。今までまじめにデザインに取り組んだ経験がないため大変苦戦しておりますが、少しずつでも自分の理想とするサイトに近づけていきたいと思います。

デザインは模倣から

学ぶことは真似ること。ということでまずは徹底して参考サイトに目を通していこうと思います。徹底的にパクる。TTP。

ありがたいことにスマホデザインに特化したギャラリーサイトがいくつかあるのでご紹介したいと思います。見てるだけでも楽しいのでお時間がありますときにどうぞ。

優れたiPhoneサイトデザイン集 – iPhoneデザインボックス

design.web-hon.com

iPhone向けのギャラリーサイト。結構昔からある老舗のサイトです。細かくカテゴリが分けられているので、目的に合わせて参考サイトを探すときに役立ちます。もうちょっと色でのカテゴライズがパワーアップしてくれると嬉しいかな。

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

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

こちらも昔からお世話になっているサイト。最近更新が止まってしまっているようですが一昔前のデザインも十分参考になります。

デザインに対してポイントのようなものを投票できるような仕組みあり、平均点が表示されるようになっています。人気のデザインがなんとなくわかるかもです。

スマートフォン(スマホ)デザインまとめサイト | thinkthing

thinkthing.net

ユーザー投稿型のデザインギャラリーサイト。先の2サイトよりも外国のサイトが若干多めの印象です。英語にするだけでなんかオシャレに見えるのはずるいと思います。

こちらも「いいね!」数が一覧で見れるようになっているので人気のあるデザインの傾向がなんとなくつかめるかもしれません。

それと、スクショをクリックするとメニューを開いた状態やトップページ以外のスクショもチェックすることができます。これは地味にうれしい。トップページだけオシャレなサイトもたまにありますからね。

スマートフォンサイトのデザインリンク集 sps collection

spscollection.com

私的に最近一番お世話になっているのがこちらのサイト。まずこのサイト自体がオシャレ。

カテゴリ毎の一覧も便利ですが、やはり色ごとに一覧で見れるのは非デザイナーにはうれしいところです。このサイトに限りませんが「白」「黒」は当然として、「青」がスマホサイトにはよく使われる傾向にあるようです。なんで青なんだろうか。

agtsmartphonedesign.com

こちらも最近よく見るサイトです。

比較的新しめのサイトで掲載数はそこまで多くはないのですが、スクショをクリックした際に詳細ページなど複数のページのスクショもチェックできます。非常に助かります。

Capture – Mobile Design Patterns

pttrns.com

英語のサイトになります。掲載されているサイトも基本的には英語のサイトです。とはいえ、デザインを閲覧するだけなら英語が得意でない人でも特に問題はありません。

Inspired UI – Mobile Apps Design Patterns

inspired-ui.com

iPhone、iPad、Androidとデバイスごとにデザインの一覧を確認できるサイト。デバイスごとはここしか知らないですね。

ここも各デザインに対して複数のキャプチャが用意されているので使い勝手がなかなかよい感じです。

lovely ui

lovely ui

サイトというよりはサイトで使われているボタンやアイコンなどのパーツにフォーカスを当てたサイト。

全体のデザインが詰まってきたらこちらを参考によりオシャレになるように調整するとよさそうです。

Android Niceties

androidniceties.tumblr.com

Android向けのデザインサイト。WEBサイトではなくネイティブアプリ向けのギャラリーですが、参考にできる部分は多分にあると思います。

こちらもスクショの数が多いので眺めているだけでも楽しいです。

Responsive Web Design JP

responsive-jp.com

スマホとはちょっと違うかもですが、レスポンシブデザインのギャラリーサイト。日本国内のオシャレなレスポンシブが網羅されています。

色やジャンルのカテゴライズは大体どのギャラリーサイトでもありますが、こちらでは利用されている技術によるカテゴライズもされています。なので、利用しているフレームワークやライブラリをベースに参考サイトを探すことも可能。なにこれ便利すぎ。

さいごに

以上、最近超お世話になっているサイトのご紹介でした。

デザイナーの方じゃなくてもただ眺めているだけでもなんとなく楽しいと思いますし、ブログのデザインを変えたいと思っている方にはどのサイトもとても勉強になると思いますので参考にしてみてください。

ただし、ダラダラと眺めているとかなりの時間を奪われますのでお気を付けください。

ではでは、最後までお付き合いいただきありがとうございました。