本頁は、PCデザインだけでなくSPデザインも掲載されているサイトをメインで集めています。リスト化した参考サイトは、レスポンシブ・PC/SP・SPのみを掲載しているサイトなど様々です。
WEBサイトを新しく制作する際に役立つ参考サイトをリスト化していきます。
【PC/SP/TAB】Responsive Web Design JP
日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト
→ Responsive Web Design JP
このWEBサイトの特徴
このサイトの1番良い点は、やはりレスポンシブデザインを参考にできる点です。
PC・タブレット・SPの各端末でのレイアウトやデザインを紹介してくれているので、とても参考になります。
掲載されているカテゴリは、以下などがあります。
- 業種・業態
- WEBサイトのカラー
- 技術
- サイトのタイプ
また、掲載されているWEBデザイン自体もスタイリッシュなものが多いため、WEBサイトを制作する際に愛用しているサイトの1つです。
【SP】AGT smartphone design gallery
スマホサイト WEBデザイン集
→ AGT smartphone design gallery
このWEBサイトの特徴
スマートフォンサイトに特化しているため、スマートフォンサイトを制作する際に参考になるサイトです。
スタイリッシュで質の高いデザインが多く掲載されています。
昨今では、「モバイルファースト」「スマホファースト」と言われているので、作ろうとしているサイトの閲覧者がスマートフォンを多く使っているようであれば、このサイトが参考になります。
掲載されているカテゴリは、以下などです。
- WEBサイトのカラー
- サイトのジャンル
グローバルメニューの「TAGS」から検索できます。
【SP】Web Design Clip（Smartphone）
このWEBサイトの特徴
Web Design Clip のグロバルメニュー（Smartphone）です。
こちらもSPデザインに特化してデザインが集約されているため、構成やデザイン制作の際に役立つサイトです。
絞り込み検索をしたい場合は、画面右上のハンバーガーメニューをクリックすると、サイトのカラーや業種・デザインの種類などの絞り込みができます。
【SP】iPhoneデザインボックス
スマートフォンサイトの最適化の参考サイト
→ iPhoneデザインボックス
このWEBサイトの特徴
このサイトも、スマートフォンサイトに特化しているサイトで、個性的なサイトが多く掲載されています。
WEBデザインの参考サイトはたくさんあるけれど、PCとSPのデザインの違いやUIの最適化を考慮したり・参考にできるサイトが欲しいという想いから生まれたサイトのようです。
運営者さんの「手間を少しでも軽減してもらえるように」という点に、深く共感です。
【SP】spscollection
スマートフォンサイトのデザインリンク集
このWEBサイトの特徴
スマートフォンサイトに特化しているサイトです。多ジャンルかつスタイリッシュなデザインが多数あります。レイアウトを考える際にも重宝しています。
【PC/SP】URAGAWA
制作会社がわかるWEBデザイン・参考サイト集
→ URAGAWA
このWEBサイトの特徴
サイトの参考になるだけでなく、制作した制作会社の裏側などをみることができるWEBデザイン・参考サイト集です。サイトTOPからは、PCデザインだけが表示されているのですが、気になったサイト画像をクリックするとSPデザインを確認できます。
【PC/SP】bookma!
感性を刺激するWebデザインギャラリー
→ bookma!
このWEBサイトの特徴
PCデザインとSPデザインの両方が掲載されているサイトです。PCデザインだけでなくSPデザインのUIも画面上で確認できあるため、PC・SPともに気に入ったもの（参考サイト）を探すことができます。
PCデザインだけを確認したい場合は、ページ上部のPCアイコンをクリックすると確認でき、SPデザインだけを確認したい場合は、SPアイコンをクリックすると確認できます。
PS・SPサイトの検索以外はイマイチ使い方が分からず…
カラーアイコンなどもあるので、それをクリックすると検索できるのかと思いきや、うまく表示されず…。
検索したい時は、画面左上の熊アイコンをクリックすると検索ボックスが表示されるのですが、検索の仕方がイマイチわからず…。良いサイトも多数表示されているので、使い方を知りたいサイトです。
