Web Gallery デザインノミカタ

• 会員登録：必要（有料会員はダウンロードできる枚数が増えます）
• 加工：○
• クレジット表記：不要

会員登録は必要ですが、デザインに使える写真が多数掲載されています。

• 会員登録：不要
• 加工：○
• クレジット表記：不要

会員登録なし、無料で、ハイクオリテイな写真が使えます。

• 会員登録：不要
• 加工：○
• クレジット表記：不要

地図をデザインする時に本当に頼りになるサイト。

スタンダードなものから、デフォルメの地図、白地図など幅広く地図が用意されています。

また、地方ごと・都道府県ごとがパーツになったイラストもあるので、

このサイトさえあれば地図のデザインも困ることがありません。

• 会員登録：部分的に必要
• 加工：○
• クレジット表記：不要

海外のおしゃれなイラストサイト。

アーティストから検索できるため、テイストを揃えてイラストを使うことも可能です。

日本語対応していないと使いにくく感じてしまいがちですが、左上の『Illustrations』よりカテゴリーから検索もできるので安心です。

背景を変えること、スモールサイズのPNGデータのダウンロードは無料でできますが、一部のイラストや大きなサイズのPNGデータ・SVGデータのダウンロードは有料です。

• 会員登録：必要（ダウンロード時にメールアドレスとパスワードを入力）
• 加工：⚪︎
• クレジット表記：不要

おしゃれでパッと目を引くパターン画像が、22種類用意されています。

Figmaのプラグインがあること、Aiデータで必要に応じて色を変えられることなど、

デザイナー大助かりのサイトです！

• 会員登録：不要
• 加工：イラストをクリックした時に開かれるポップアップにて加工可
• クレジット表記：必要

外国のおしゃれなイラストが集まったサイトです。

クレジット表記必須のため、使用できる場所が限定される可能性がありますが、

色・背景・人物の肌の色・イラストの要素を編集できるので、

自分好みのイラストに出会えるはずです！

• 会員登録：不要
• 加工：○
• クレジット表記：不要

かっこいいイラストサイトです。

右上のカラースウォッチからイラストのカラーを自由に変更できるので、

デザインに合わせて使いやすいです。

• 会員登録：不要
• 加工：○
• クレジット表記：不要
• 料金：1つのコンテンツに使用する総数が30以内であれば無料（詳しくは利用規約を確認）

顔のアイコンを作れるサイトです。

チャットのアイコンからデザインまで幅広く使えます。

作るのが難しく感じる方は、サンプルから作成することもできますよ。

• 会員登録：必要（有料版は使えるアイコンが多くなります）
• クレジット表記：必要

幅広いアイコンが揃っており、1つのアイコンに対して数パターン用意されています。

ここならデザインに合うアイコンが見つかるはず！

• 会員登録：不要
• 加工：⚪︎
• クレジット表記：不要
• 料金：無料

丸みがあって太い線のアイコンが可愛いです。

有名すぎて紹介するまでもない気がしますが…

フォントがたくさん並んでいてみているだけで楽しくなります！

流行や人気順でも並び替えが可能です。

Adobeの配色サイトです。

サイト左側にある『カラーハーモニー』から、いろんな配色のパターンを見ることができます。

また画面上部の『アクセシビリティツール』では2色のコントラスト比を調べることができます。

日本の伝統的な色の名前とカラーコード（ CMYK/RGB）をまとめたサイトです。

画面右側の『MUNSELL』のボタンをスライドさせると表示が立体に切り替わります。

和風なデザインを作る時に活用したい素敵なサイトです。

236の形容詞から連想される色を検索できる便利なサイトです。

打ち合わせの時などに使えば、お客様と差異なくイメージが共有できそうです。

カラーコードを入力するだけで、いろんな配色を教えてくれる便利な配色サイトです。

配色だけでなく、メイドやサイド、色相を変えた場合などにどうなるのかも一目瞭然です。

グラフを作るときに大活躍の配色ツールサイトです。

フロントエンドで使える以下のCSSジェネレーターが集められています。

• グラデーションジェネレーター
• ボタンジェネレーター
• ボックスシャドウジェネレーター
• テキストシャドウジェネレーター
• 枠線・境界線（border）ジェネレーター
• CSSフィルタージェネレーター
• 三角形ジェネレーター
• CSS Backdrop-filterジェネレーター
• CSS Transform 2D/3Dジェネレーター
• CSS Transitionジェネレーター

clip-pathプロパティを使って要素を切り抜きたいけど、形が複雑すぎて設定する値がわからない時に使えるジェネレーターです。

コーディングで三角形作るのが苦手な方にぜひ使って欲しいサイトです。

• クレジット表記：必要（動画の概要欄から指定されているクレジットをコピー）

Vlogで使いやすい音楽が揃っているYoutubeチャンネルです。

• クレジット表記：必要（動画の概要欄から指定されているクレジットをコピー）

動画のBGMに使える音楽がたくさん投稿されています。

再生リストに雰囲気ごとに音楽がまとめられているので、探しやすいです。

• 会員登録：不要
• 加工：⚪︎
• クレジット表記：可能であれば表記

動画編集で使えるBGMがたくさん掲載されています。

ショートバージョンとロングバーションがあるのも嬉しいポイントです。

音楽ジャンル・用途などから検索することもできます。

ウェブ開発のためのToolが多数用意された素敵なサイトです。

ぜひ一度見てみてください！！！

WordPressのブロックエディタで使えるパターンを紹介しているサイトです。

使い方はこちらから→https://patterns.vektor-inc.co.jp/about/

Adobe After Effectsでつかえる全73種類のモーショングラフィックを集めたサイトです。

気になるものをクリックすると、作成方法や応用が載っており、作例も見られるので、

インスピレーションが欲しい時にも使えます。

デザインカンプをドラッグ＆ドロップするだけでPCやスマホでどのように表示されるかがわかります。

また、共有用のURLを発行してクライアントに見ていただくことも可能です。

ブラウザのシェア率や、デバイスサイズ、SNSなどいろんな統計が見られるサイトです。

コーダーさんもデザイナーさんも使って欲しいサイトです。

Webデザインで住所を入れるときに便利なツールです。

実在しない住所を最高1000件まで生成してくれます。

画像の比率、オブジェクトのサイズなどWebデザインで幅広く使える計算機です。