デザインする時に参考にしているサイト・サービスまとめ

### Webデザインギャラリー

#### MUUUUU.ORG

https://muuuuu.org/

#### I/O 3000

https://io3000.com/

#### SANKOU!

https://sankoudesign.com/


他にもいろいろなギャラリーサイトがあるので、「`Webデザインギャラリー`」で調べて自分のお気に入りのサイトを見つけてるのがおすすめです。

### デザインプラットフォーム

#### Pinterest

https://www.pinterest.jp/

画像をピンしたり、探索できるサービスです。
さまざまなテーマでボードを作成でき、似た画像をレコメンドしてくれるのでホームを見ているだけで楽しいです。

#### Behance

https://www.behance.net/

Adobeが運営する、クリエイターのプラットフォームです。
さまざまなクリエイターの作品を見つけることができます。

#### Dribbble

https://dribbble.com/

こちらもクリエイター向けのプラットフォームです。
求人サイトとしても使われており、ポートフォリオ的な作品が多いです。

https://openprocessing.org/

クリエイティブ・コーディングの作品を投稿・閲覧できるプラットフォームです。


### UIギャラリー

#### Mobbin

https://mobbin.design/browse/ios/apps

様々なモバイルアプリのUIを閲覧できるUIデザインギャラリーです。
また、`画面の種類`や`UIパーツ`、`サービスのジャンル`、`色`などで絞り込んで検索することができます。

#### Screenlane

https://screenlane.com/

こちらも様々なモバイルアプリのUIを閲覧できるUIデザインギャラリーで、画面の種類やUIパーツ、サービスのジャンル、などで絞り込んで検索することができます。

#### consim. β

https://consim.design/

iOSとAndroidの比較ができるUIデザインギャラリーです。

UIデザインギャラリーも、色々なサイトがあるので目的に応じて色々探してみると面白いです。

#### UI Pocket

https://ui-pocket.com/apps/

日本のアプリのUIデザインギャラリーです。

### デザイン関連のツールやギャラリーなどをまとめたサイト

https://uud.io/resos.php

### メディア

#### コリス

https://coliss.com/

#### DTP Transit

https://www.dtp-transit.jp/

#### UX MILK

https://t.co/wg1V93vcB4

#### Creator Zine

https://creatorzine.jp/

私はこれらのメディアを`Feedly`というRSSリーダーに追加して見ています。
それぞれのサイトにアクセスしなくても更新を確認できて、あとで読みたいものをストックしたりボードを作成したりも手軽にできるのでおすすめです。

https://feedly.com/i/discover

### リファレンス・ガイドライン

#### freeeアクセシビリティー・ガイドライン

https://a11y-guidelines.freee.co.jp/intro/index.html

freeeが公開しているアクセシビリティー・ガイドラインです。
[WCAG 2.0](https://www.w3.org/TR/WCAG20/)がわかりやすく噛み砕かれていて読みやすく、実際にコードで対応すべきことが記載されておりとても勉強になります。

[アクセシビリティー・チェック・リスト
](https://a11y-guidelines.freee.co.jp/checks/index.html)も公開されています。

#### MDN

https://developer.mozilla.org/ja/docs/Web

とりあえずコーディングで迷ったり困った時はまずはここを読みます。

#### Sociomedia ヒューマンインターフェース ガイドライン

https://www.sociomedia.co.jp/category/shig

UIデザインをする際のコツ・ポイントがとてもわかりやすくまとめられています。

#### 伝わるデザイン 研究発表のユニバーサルデザイン

https://tsutawarudesign.com/

少しズレますが、資料作成時のコツがわかりやすくまとめられており、おすすめのサイトです。
フォントの選び方やレイアウトなど見やすく・伝わりやすくする基礎が簡潔にまとまっています。

### イラストサイト

基本的に無料で使えるイラスト素材サイトでお気に入りのものを集めました。

#### DELESIGN

https://delesign.com/free-designs/graphics/

シンプルでフラットなイラストが可愛いサイトです。個性的なシーンが多く、一風変わったシチュエーションを作れます。
`SVG`とPNG`でダウンロードできるほか、メインカラーを変更できます。
[ライセンスについて](https://delesign.com/free-designs/free-license/)

#### unDraw

こちらも`SVG`と`PNG`でダウンロードできるフラットなイラストのサイトです。
種類がとても多く、様々なシーンに対応しています。

https://undraw.co/illustrations

[ライセンスについて](https://undraw.co/license)

#### ちょうどいいイラスト

https://tyoudoii-illust.com/

硬すぎず、ゆるすぎない、絶妙な「ちょうどいい」イラストのサイトです。
シチュエーションも絶妙に痒い所に手が届くものが揃っています。

[ライセンスについて](https://tyoudoii-illust.com/%e5%88%a9%e7%94%a8%e8%a6%8f%e7%b4%84/)

#### Loose Drawing

https://loosedrawing.com/

手書き感が可愛いライすとが揃ったサイトです。
赤・緑・黄・青・黒の5色か線のみから選んで`PNG`でダウンロードできます。
[ライセンスについて](https://loosedrawing.com/contact/)

#### Icons8

https://icons8.com/

個人的にとても推しているイラスト・アイコンのアセットサービスです。
様々なテイストのアイコンやイラストがあり、有償ライセンスを購入するとサイズや機能が無制限になります。
[ライセンスについて](https://icons8.jp/license)

### アイコンサイト

#### Material Design Icons

https://fonts.google.com/icons?selected=Material+Icons

Googleが提供しているシンプルで使い勝手が良く、種類も豊富なアイコンフォントです。
[ライセンスについて](https://google.github.io/material-design-icons/#:~:text=mockups%20or%20prototypes.-,Licensing,-We%20have%20made)

#### Font awesome

https://fontawesome.com/

とても有名なアイコンフォントです。とにかく種類が豊富で、無料プランでも2000以上のアイコンを利用できます。
[ライセンスについて](https://fontawesome.com/license/free)

#### Fluenticons

https://github.com/microsoft/fluentui-system-icons

https://fluenticons.co

個人的に推している、絶妙なRが可愛いオープンソースアイコンです。
サイト上から`SVG`または`PNG`でダウンロードできます。
[ライセンスについて](https://github.com/microsoft/fluentui-system-icons/blob/master/LICENSE)

#### Feather

https://feathericons.com/

上記サイトに比べると数は少ないですが、ミニマルで使い勝手が良くお気に入りのアイコン集です。
[ライセンスについて](https://github.com/feathericons/feather#license)


### 写真

#### Unsplash

https://unsplash.com/

とても有名なストックフォトサイトです。
高画質・高品質の画像が多く、眺めているだけで楽しいサイトです。
[ライセンスについて](https://unsplash.com/license)

Figmaで簡単にUnsplashから画像を挿入できるプラグインがあるため、よくダミー画像に使っています。

https://www.figma.com/community/plugin/738454987945972471/Unsplash