【WEB制作に使える】デザインまとめ・参考サイト集
![デザインまとめ・参考サイト集アイキャッチ](https://shibablog.online/wp-content/uploads/2023/12/429e998a0e8e58cf06dbf21a775721cd.png)
こんにちは!シバです!
WEBデザインを勉強している方で、こんなお悩みはありませんか?
![](https://shibablog.online/wp-content/uploads/2023/07/e7838726c11b6c846fd7e2f51de24489-150x150.jpg)
さまざまなデザインが載っているサイトが知りたい…。
![](https://shibablog.online/wp-content/uploads/2023/06/5722a255d786a14ef1456a0f9d017766-150x150.jpg)
![](https://shibablog.online/wp-content/uploads/2023/06/5722a255d786a14ef1456a0f9d017766-150x150.jpg)
![](https://shibablog.online/wp-content/uploads/2023/06/5722a255d786a14ef1456a0f9d017766-150x150.jpg)
デザインで新しいアイデアを取り入れたい!
この記事は、WEB制作をされている方に向けてデザインまとめ・参考サイト集をご紹介しています。
![](https://shibablog.online/wp-content/uploads/2023/12/cropped-a649b2ec417fd02ad9bf3a0e052e1e9f-150x150.png)
![](https://shibablog.online/wp-content/uploads/2023/12/cropped-a649b2ec417fd02ad9bf3a0e052e1e9f-150x150.png)
![](https://shibablog.online/wp-content/uploads/2023/12/cropped-a649b2ec417fd02ad9bf3a0e052e1e9f-150x150.png)
私はWEB制作を始めた頃、良いデザインが思いつかず、考える時間が長くて時間をムダにしていました…。
デザインまとめ・参考サイトをブックマークしてからは、おしゃれなデザインがたくさん載っているので、時間も短縮でき新しい発見を見つけることができています!
WEB制作をする際に、効率良くデザインできるように、デザインまとめ・参考サイトを準備しておきましょう。
本記事を書いている人
![](https://shibablog.online/wp-content/uploads/2023/12/a649b2ec417fd02ad9bf3a0e052e1e9f.png)
![](https://shibablog.online/wp-content/uploads/2023/12/a649b2ec417fd02ad9bf3a0e052e1e9f.png)
- WEBデザイナー×ブロガー
- 1児のママ
- 年間50冊以上(週1~3冊ペース)
- 読書歴13年
- スキマ時間=読書
【WEB制作に使える】デザインまとめ・参考サイト集
WEB制作の際に、使えそうなデザインまとめ・参考サイト集をご紹介していきます。
![](https://shibablog.online/wp-content/uploads/2023/12/Pinterest-www.pinterest.jp_-1024x468.png)
![](https://shibablog.online/wp-content/uploads/2023/12/Pinterest-www.pinterest.jp_-1024x468.png)
Pinterestは、多岐にわたるデザインのアイデアが揃っています。
WEB制作の際に、私が参考になった部分をまとめてみました。
- ランディングページ
- リスト
- コーポレートサイト
- トップページ など
また、空白を入れて追加の単語を入力すると、より詳しく調べることができます。
Pinterest検索例
- ランディングページ スタイリッシュ
- リストデザイン シンプル
- イラスト かわいい
![](https://shibablog.online/wp-content/uploads/2023/12/cropped-a649b2ec417fd02ad9bf3a0e052e1e9f-150x150.png)
![](https://shibablog.online/wp-content/uploads/2023/12/cropped-a649b2ec417fd02ad9bf3a0e052e1e9f-150x150.png)
![](https://shibablog.online/wp-content/uploads/2023/12/cropped-a649b2ec417fd02ad9bf3a0e052e1e9f-150x150.png)
WEB制作だけではなく、バナーやイラストの参考にも使える!
SANKOU!
![](https://shibablog.online/wp-content/uploads/2023/12/b60da6cc99120165b4283f21f43d49ef-1024x468.png)
![](https://shibablog.online/wp-content/uploads/2023/12/b60da6cc99120165b4283f21f43d49ef-1024x468.png)
日本で制作されたステキなサイト集です。
左上に検索窓があるので、自分が制作したいイメージの単語を入れると、近いイメージのサイトが表示されます。
また、商用可能な有料・フリーフォントも検索できます。
![](https://shibablog.online/wp-content/uploads/2023/12/cropped-a649b2ec417fd02ad9bf3a0e052e1e9f-150x150.png)
![](https://shibablog.online/wp-content/uploads/2023/12/cropped-a649b2ec417fd02ad9bf3a0e052e1e9f-150x150.png)
![](https://shibablog.online/wp-content/uploads/2023/12/cropped-a649b2ec417fd02ad9bf3a0e052e1e9f-150x150.png)
私はSTUDIOで制作しているので、「STUDIOで制作されたサイト一覧」が非常に参考になっています!
Web Design Clip
![](https://shibablog.online/wp-content/uploads/2023/12/708764338d0803df1666b883458faeae-1024x468.png)
![](https://shibablog.online/wp-content/uploads/2023/12/708764338d0803df1666b883458faeae-1024x468.png)
4つのカテゴリ別に分かれていて、参考になるサイト集が揃っています。
- Japan(Webサイト制作の参考になる日本のWebデザインリンク集)
- World(Webデザイン制作の参考になる海外のWebデザインギャラリー・クリップ集)
- Landing Page(LP・ランディングページ制作の参考になるWebデザインギャラリー・クリップ集)
- Smartphone(スマホサイト制作の参考になるスマホサイト・レスポンシブWebデザインのクリップ集)
site inspire
![](https://shibablog.online/wp-content/uploads/2023/12/Siteinspire-All-Websites-www.siteinspire.com_-1024x468.png)
![](https://shibablog.online/wp-content/uploads/2023/12/Siteinspire-All-Websites-www.siteinspire.com_-1024x468.png)
洗練されたスタイリッシュなサイトが多く載っています。
トップページの上部にカテゴリやスタイルを選択する部分があるので、自分の気になるキーワードをチェックすると、選択したキーワードのサイトが表示されます。
![](https://shibablog.online/wp-content/uploads/2023/12/cropped-a649b2ec417fd02ad9bf3a0e052e1e9f-150x150.png)
![](https://shibablog.online/wp-content/uploads/2023/12/cropped-a649b2ec417fd02ad9bf3a0e052e1e9f-150x150.png)
![](https://shibablog.online/wp-content/uploads/2023/12/cropped-a649b2ec417fd02ad9bf3a0e052e1e9f-150x150.png)
英語表記のサイトが多いので、海外向けのサイトを制作したい方におすすめ!
Dribble
![](https://shibablog.online/wp-content/uploads/2023/12/dribbble.com_-1024x468.png)
![](https://shibablog.online/wp-content/uploads/2023/12/dribbble.com_-1024x468.png)
世界のWebデザインが見れるギャラリーサイト。
フィルター検索では、タグと色味を選べます。
デザインのお気に入り数や見られている数がわかります。
Awwwards
![](https://shibablog.online/wp-content/uploads/2023/12/Awwwards-www.awwwards.com_-1024x468.png)
![](https://shibablog.online/wp-content/uploads/2023/12/Awwwards-www.awwwards.com_-1024x468.png)
Awwwards は、最高のデザイナー、Web 開発者、デジタルエージェンシーが制作したサイト集。
下部にあるフィルターで好きなカテゴリを選べます。
おわりに:ブックマークしておくと便利!
今回は【WEB制作に使える】デザインまとめ・参考サイト集をご紹介しました。
WEB制作をする際、デザインやアイデアの参考サイトがあると、非常に助かりますよね。
Kindle Unlimitedで読めるデザイン参考書の記事もありますのでご参考に!
![](https://shibablog.online/wp-content/uploads/2023/12/Design-300x169.png)
![](https://shibablog.online/wp-content/uploads/2023/12/Design-300x169.png)
サイトによって検索方法やカテゴリの種類が違いますので、自分の使いやすいサイトを活用してください。
コメント