今回は、非デザイナーでも使いやすいデザイン系のサイトを集めました。
アプリ開発、スライドづくり、研究のコンセプト画像等の考にしていただければと思います。
ご紹介するサイトは、
１．コンテンツの質
２．サイトの使いやすさ
に重きを置いています。すべて無料で利用可能です。
デザイン
・MATERIAL DESIGN（トレンドデザインを踏襲）
・原色大辞典（理想の色が見つかる）
イラスト・アイコン
・MATERIAL ICONS（Googleの標準アイコン）
・ICOOON MONO（豊富なピクトグラムアイコン）
・Free Icons（好きな色や形でダウンロード）
・FLAT ICON（ダントツのアイコン数）
アニメーション
・Lottie（軽量＆お手軽アニメーション）
オンライン画像編集
・オンライン イメージエディタ（多機能オンライン画像編集）
・draw.io（画像を組み合わせたり、図を描いたり、文字を入れたり）
・remove.bg (画像の背景削除)
オンライン画像変換
・Image Vectorizer（画像をSVG形式に変換）
・waifu2x （ニューラルネットワークできれいに画像をリサイズ）
デザイン
MATERIAL DESIGN
URL : https://material.io/
天下のGoogleが公開するデザインのリファレンス。
アプリデザインのトレンドを踏まえたデザインを簡単に享受できる神サイトです。
特に以下のコンテンツは重宝しています。
Components : https://material.io/components/
Android, iOS, Web, Flutterで使えるUIデザインをソースコード付きで閲覧できます。
Icons : https://material.io/resources/icons/?style=baseline
シンプルで汎用性の高いピクトグラム的なアイコンを一覧で探せます。
「中抜き」「角丸」など様々なタイプに変換してダウンロードできます。
Color Tool : https://material.io/resources/color/#!/?view.left=0&view.right=0
いい感じの色をカラーコード付きで簡単に探せます！
カラーデザインに迷ったときはとりあえず開いています.
原色大辞典
URL : https://www.colordic.org/
色見本の大辞典です。カラーコードが色の名前から探せたり（"金色"など）、パステルカラー一覧などが見れたり、色のことならなんでもござれなサイトです。イメージ通りの色が簡単に見つけられます。あと見てて楽しい。
イラスト・アイコン
MATERIAL ICONS
URL : https://material.io/resources/icons/?style=baseline
再掲です。MATERIAL DESIGNのリソースの一つです。
シンプルで汎用性の高いピクトグラム的なアイコンを一覧で探せます。
「中抜き」「角丸」など様々なタイプに変換してダウンロードできます。
ICOOON MONO
URL : https://icooon-mono.com/
MATERIAL ICONSのような統一性のあるヒストグラムが数多くダウンロードできます。
モノトーンアイコンを探したいのなら一番良いサイトではないでしょうか。
サイトが使いやすくて好きです。
Free Icons
URL : https://icons8.com/icons
使い勝手の良いアイコンがたくさんあります！
アイコンパックも多様に用意されているので作るパッケージごとに統一感を持たせることができます。
ダウンロードの際に色や太さが簡単に変更できて便利です。
ただ、SVG形式でダウンロードするにはお金がかかります。
FLAT ICON
URL : https://www.flaticon.com/
フラットアイコンをはじめとした豊富なアイコンが無料ダウンロードできます。（知っている中ではダントツで最多のアイコン数）
種類が多すぎて探すのにも苦労しますが、フィルターや検索機能が優秀なのでうまく使えば欲しいアイコンがきっと見つかります。
ダウンロード前にデザインの編集なんかもできちゃいます。
クレジットを載せればSVG形式でも無料でダウンロードできます。
フラットアイコン関連で以下のサイトもおすすめです。
FLAT ICON DESIGN : http://flat-icon-design.com/
アニメーション
Lottie
URL : https://airbnb.design/lottie/
Files : https://lottiefiles.com/
アニメーションはプログラムで記述することも多いですが、出来合いのものを導入して簡単にクオリティの高いアニメーションを実現できます。オンラインで配色の編集も可能です。
LottieはJSONファイルによってアニメーションが記述されているため、組み込みが簡単・しかも画像リソースより軽量です！こちらからお使いの環境に対しての導入方法を調べてください。
https://airbnb.design/lottie/#get-started
オンライン画像編集
オンライン イメージエディタ
URL : https://www.peko-step.com/tool/imageeditor.html
オンラインでここまでできるのか！と驚きました。簡単な画像処理がならこのサイトで叶います。
機能としては、以下のようなことができます。シンプルで使いやすいです。
- 選択範囲：画像処理を行う領域を設定します。
- 切り抜き：画像の一部を切り抜き、新しい画像を作ります。
- サイズ変更：画像の大きさを変更します。
- 余白の追加：画像の周囲に余白を追加します。
- 反転：画像を上下、もしくは左右に反転させます。
- 回転：画像全体、もしくは一部を回転させます。
- 結合・連結：複数の画像を結合・連結して1つの画像にまとめます。
- テキストの追加：画像の任意の場所にテキストを追加します。
- ネガポジ反転：画像の色を反転しネガフィルムのようにします。
- グレースケール・セピア：画像の色をグレースケールやセピア調に変換します。
- 色の透過：画像の指定した色を透明にします。
- 明度・コントラスト：画像の明度とコントラストを調整します。
- 色の取得：画像の指定した色のRBG値とHSL値を取得します。
draw.io
URL : https://www.draw.io/
無料で使えるオンラインドローイングツールです。
フローチャートを作る用途などで多く使用されますが、デザインエディタとしても優秀です。アイコンを組み合わせて画像を作ったり、図形を足したり、簡単な編集に嬉しい機能がそろっています。作ったデザインは透過pngやベクター画像としても出力できます。
remove.bg
URL : https://www.remove.bg
画像の背景を透過するサイトです。
同じようなツールの中では一番精度がいいと感じます。
オンライン画像変換
Image Vectorizer
URL : https://www.vectorizer.io
アプリなどではベクター画像であるsvgを使うのが推奨される機会は多いと思います。
既に用意しているpng,jpeg形式の画像をsvg形式に変換できるのがこのツール。
変換の際に閾値やカラー数が設定できて、ノイズなどにも強いsvgコンバータです。
waifu2x
URL : http://waifu2x.udp.jp/
画像リソースを使いまわそうと思ったときに大きいサイズが欲しくなった！ということありませんか？小さい画像を拡大すると一般的には画質が落ちてしまいますよね。でもこの"waifu2x"を使うと画質を落とすことなく（むしろきれいにして）画像を拡大することができます。畳み込みニューラルネットワークの技術を適用することで画素を予測補完します。イラスト系のほうがきれいに復元できるようですが、写真にも使えます。科学技術の発展に感謝。
←元画像
←ペイントで二倍拡大
←waifu2xで二倍拡大
最後に
いかがでしたか？私自身が様々なサイトを試した上での選りすぐりのサイトたちです。今回はオンラインで誰でも使用できるサイトを並べましたが、アプリやソフトウェアでも多くのツールにお世話になっているのでまた紹介できればと思います。
これからもデザインに便利なサイトを見つけ次第追加していきます。