つばさのーと

つばさの日常を綴るのーと

スマホサイトのカスタマイズ時に参考になるデザインギャラリーサイト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

 

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

 

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

 

さいごに

 

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

 

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

 

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

 

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