スマホサイトのWebデザインに！参考にしたいまとめサイト9選

2022年2月8日

スマホサイトのデザインで悩むことはないでしょうか？今回は、スマホサイトやアプリデザインの参考になる、ギャラリーサイトを集めてみました。さまざまなクリエイティブを見てみると新しいアイデアが浮かんでくるかもしれません。気に入ったサイトをじっくり確認してみてください。

＜この記事に関連する記事＞

Webデザイナー案件を提案してもらう

1.SANKOU! sp

Webデザインの参考になる、国内のスマホサイトを集めたギャラリーリンク集「SANKOU! sp」です。

カテゴリからの検索機能が充実しており、Webサイト・ランディングページ・コンテンツページなどみたいデザインだけソートがかけられます。また、業種や言葉のイメージ、サイトのメインカラーイメージなど、おおよそのイメージからも検索が可能です。

各サイトに表示されているハートマークを押すと、自動で「お気に入りのサイト」に保存されるなど、便利な機能も使えます。さまざまなデザインの調べものに役立つギャラリーリンク集で、アイデアストックにおすすめです。

https://sankoudesign.com/sp/

Webデザイナー案件を提案してもらう

2.sps cllection

デザイン性に優れたスマホサイトを掲載しているのは「spscollection（エスピーエス・コレクション）」です。サイト自体もレスポンシブデザインに対応しており、スマホからでも簡単に閲覧できます。

掲載されているサイトの下には、カテゴリやイメージカラーも表示されており、見やすいつくりを意識しているのが分かります。「>Detail」を押せば閲覧したサイトと同じイメージのサイトが自動で表示されますので、直感的に使えるのもうれしいポイントです。ブックマークを押せば好きなイメージを保存することもできます。

サイト運営者もフリーランスのWebサイト制作業務に携わっているとのことで、サイト制作のヒントが満載のリンク集です。

https://spscollection.com/

Webデザイナー案件を提案してもらう

3.AGT smartphone design gallery

スマートフォンやiPhone向けのデザインを国内・海外問わず集めたギャラリーサイトが「AGT smartphone design gallery」です。

UI/UXを意識して作られているサイトを中心に集められているため、ユーザビリティを意識したデザインを探している人に役立ちます。

マウスオーバーすることで、表示サイトのフッターまでが縦に長くスクロール表示されるのがポイントです。検索はカラーイメージ・業種ごとにタグがついており、特に業種ごとの特徴を知りたい場合は参考になるでしょう。

http://agtsmartphonedesign.com/

Webデザイナー案件を提案してもらう

4.iPhoneデザインボックス

パンダの愛嬌があるアイコンが目印の「iPhone デザインボックス」です。iPhoneのWebサイトデザインに特化しており、主に国内のスマホサイトが掲載されています。

パソコンでの表示とiPhoneでの表示の最適化やUI表示の参考になるように作られているため、気に入ったサイトをクリックすると両方のトップページキャプチャが見られるのがポイントです。

気に入ったデザインのURLをメールで自分に送れるようになっており、管理がしやすいでしょう。選んだページの関連サイトも自動で表示されるため、イメージをまとめやすく検索の手間も省けます。

http://design.web-hon.com/

Webデザイナー案件を提案してもらう

5.RESPONSIVE WEB DESIGN JP

日本国内に特化しレスポンシブWebデザインを集めたギャラリーサイトが「RESPONSIVE WEB DESIGN JP」です。

スマホ・タブレット・パソコンとサイト別のトップページのキャプチャが表示されておりレスポンシブデザインの変遷が一目で分かりやすいつくりとなっています。

検索は、通常のカテゴリやカラーイメージ、業種タイプの他、「React」「jQuery」など使用したJavaScriptライブラリやWordPressなどの技術ごとにも探せるというWebデザイナーにはありがたいサイトです。

https://responsive-jp.com/

Webデザイナー案件を提案してもらう

6.Inspired UI

iPhone・iPad・Androidなどの3機種に対応している「Inspired UI」は、海外のギャラリーサイトです。

海外のサイトですが、見やすいつくりになっており、上部にあるiPhoneなどのアイコンを押せば、iPhone用のデザインが自動で表示されます。カテゴリごとに見たいページのキャプチャが表示されるので、モバイルアプリのUIデザインパターンの参考にぴったりです。

https://inspired-ui.com/

Webデザイナー案件を提案してもらう

7.Web Design Clip

国内・海外問わず優れたWebデザインサイトを検索できるのが「Web Design Clip」です。

Webデザインや開発の際に参考にしたいサイトを集めており、検索方法も「国内サイト」「海外サイト」「ランディングページ」「レスポンシブデザイン」と4つのカテゴライズで探せます。

また、メニューボタンからはキーワード・カラーイメージ・レイアウト別などさまざまなイメージごとにも検索でき、Webデザインのインスピレーションを掻き立てる工夫がされているのもポイントです。

3325サイト（2021年9月時点）も掲載数があり、日々更新されているので、定期的にチェックするのもおすすめです。

https://www.webdesignclip.com/

Webデザイナー案件を提案してもらう