【NEW 】転職や給料アップに向けて、Webマーケティング関連の資格について調べてみた [ → 記事を読む ]

レスポンシブ・SPデザインの参考サイトまとめ

サイト制作時役立つ参考サイト|レスポンシブ、SP編

本頁は、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 Design Clip(Smartphone)

このWEBサイトの特徴

Web Design Clip のグロバルメニュー(Smartphone)です。
こちらもSPデザインに特化してデザインが集約されているため、構成やデザイン制作の際に役立つサイトです。

絞り込み検索をしたい場合は、画面右上のハンバーガーメニューをクリックすると、サイトのカラーや業種・デザインの種類などの絞り込みができます。

【SP】iPhoneデザインボックス

スマートフォンサイトの最適化の参考サイト
→ iPhoneデザインボックス

このWEBサイトの特徴

このサイトも、スマートフォンサイトに特化しているサイトで、個性的なサイトが多く掲載されています。

WEBデザインの参考サイトはたくさんあるけれど、PCとSPのデザインの違いやUIの最適化を考慮したり・参考にできるサイトが欲しいという想いから生まれたサイトのようです。

運営者さんの「手間を少しでも軽減してもらえるように」という点に、深く共感です。

【SP】spscollection

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

→ 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サイトの検索以外はイマイチ使い方が分からず…
カラーアイコンなどもあるので、それをクリックすると検索できるのかと思いきや、うまく表示されず…。
検索したい時は、画面左上の熊アイコンをクリックすると検索ボックスが表示されるのですが、検索の仕方がイマイチわからず…。良いサイトも多数表示されているので、使い方を知りたいサイトです。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA