Web制作をさらに便利にするツール集【2020年7月】

こんにちは。しゅん（@shun_webdesign）です。普段はデザインとコーディングのお仕事をしています。

web制作やwebデザインで「使いたいフォントがない」「配色が決まらない」「使いたい画像が無い」なんてことはあるでしょうか？
そんなボクが先月見つけたWeb制作やデザインに使える面白そうなツールをご紹介します。

Web制作に役立つリンク、ツール集【2020年6月まとめ】

Web制作に役立つツール、リンク集【2020年5月まとめ】

Webデザインに役立つ無料ツール、素材集【2020年4月まとめ】

有名なブランドで使用されてるフォントを探せます。
ブランド名をフォームで検索、該当のブランドが使用してるフォントをダウンロード。

ニューモフィズムのコードジェネレーター。

形、カラー、サイズ、シャドウなどを指定することでコードを生成してくれます。凹凸も表現可能ですあまり見かけませんが近未来感があって良いですね。

オリジナルロゴデザインメーカー。
業界➡︎デザインスタイル➡︎ビジネス名の入力をするだけで簡単にロゴが作成できます。
自動で作られたロゴも後で色、フォント、フレームの編集可能です。

画像のブレークポイントジェネレーターツール。
アップロードされた各画像に最適なブレークポイントをHTMLで生成してくれるのでコードを貼ればすぐ使えます。

太い線のシンプルなベクターアイコン。全4,400種。
文化、スポーツ、テクノロジーまで幅広く、モバイルデザインに合いそうです。
全て利用する場合は有料になりますが 200種類のベクターアイコンが無料でダウンロード可能です。

AIが作った2万5千枚の人物画像を配布するプロジェクト。選択した画像からAIの生成した顔を変更できます。まだ制作途中らしく用意された画像のみしか変更できませんが今後は任意の画像に変更できるようになるかも知れません。

写真素材サイト。数百万のロイヤリティフリー写真を検索できます。「Unsplash」に比べると写真の素材感があるイメージです。

プロジェクトを参照して使用できるフリーフォントを集めたコレクション。
フォントのスタイルから絞り込め、視覚的に検索結果を見れるので見るだけでも楽しいです。

カラーコードを三色ランダムで表示するカラーパレット。
ロゴ、カード、テキスト他のテンプレートがあるのですぐに組み合わせを確認できます。

558種類のベクターアイコン。色、サイズ、太さまで手軽に変更できます。アイコンのセットは無料で一括ダウンロード可能です。

何十億ものパターンが異なるユニークなキャラクターを作れます。
Webサイトに埋め込んだり、お気に入りのデザインソフトウェアで使用したり、Reactライブラリからインポートしたりできます。

Webデザイナー、コーダー向けのツールのコレクション。全78カテゴリーと965リソースがあり、ブックマークするだけでたくさんのツールを探す手間が省けます。ツールコレクションの中でもリソース数はかなり多いですね。

AIアルゴリズムにより、わずか5秒以内に画像から背景をすばやく削除できる、強力な背景除去ツール。背景が単純なものなら綺麗に切り出してくれます。

ウェブサイトやアプリのデザインプロジェクトで使用できる無料のイラスト。全73種類。

数秒でモックアップを作成できるジェネレーター。ウェブサイトまたはモバイルアプリケーションのスクリーンショットを使って、高解像度のデバイスモックアップを無料で作成できます。

カラーパレットをすばやく生成するツールです。 CSSコードをコピーして貼り付けるだけで、パレットをWebプロジェクトで使用できます。日本語にも対応しているので使いやすいです。

コードスニペットからスクリーンショットを生成できます。
多種多様な言語に対応しているのでコードも見やすいです。 SNSでコードを共有したいときに便利ですね。

ウェブサイトやアプリ用の無料のアバターイラスト集。商用または個人使用も可能、ロイヤリティフリーのイラストのライブラリを自由に使用できます。 png,svg素材が無料でダウンロードでき、種類も豊富です。

フリーフォントと有料フォントをすばやく見つけれるサイト。 Googleフォント、Adobeフォントを簡単にフィルタリング検索可能。フォントを検索するのがメインですがインスピレーションとしても使用できます。