みんなの「作ってみた」

【個人開発】非デザイナーがデザインするために使いやすいサイトまとめ

2019/09/03

KawabeAtsushi
KawabeAtsushi
大学院生。VR・ARの研究をしています。 Androidアプリの個人開発を行っています。 グループ分けアプリKUMIWAKEリリース https://play.google.com/store/apps/details?id=com.pandatone.kumiwake

今回は、学生の私でも使いやすいデザイン系のサイトを集めました。
有名なサイトが多いと思いますが、個人開発でデザインも頑張りたい駆け出しの開発者の方に参考にしていただければと思います。
ご紹介するサイトは、
1.コンテンツの質
2.サイトの使いやすさ
に重きを置いています。すべて無料で利用可能です。

UIデザイン
MATERIAL DESIGN
イラスト・アイコン
MATERIAL ICONS
ICOOON MONO
Free Icons
FLAT ICON
アニメーション
Lottie
オンライン画像エディタ
オンライン イメージエディタ
draw.io

UIデザイン

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
いい感じの色をカラーコード付きで簡単に探せます!
カラーデザインに迷ったときはとりあえず開いています(笑)

イラスト・アイコン

MATERIAL ICONS

URL : https://material.io/resources/icons/?style=baseline
再掲です。MATERIAL DESIGNのリソースの一つです。
シンプルで汎用性の高いピクトグラム的なアイコンを一覧で探せます。
「中抜き」「角丸」など様々なタイプに変換してダウンロードできます。

ICOOON MONO

URL : https://icooon-mono.com/
MATERIAL ICONSのような統一性のあるヒストグラムが数多くダウンロードできます。
個人的にUIが好き。

Free Icons

URL : https://icons8.com/icons
デザインの統一性はないものの、とにかく種類が豊富です!
ダウンロードの際に色や太さの変更ができます。

FLAT ICON

URL : https://www.flaticon.com/
フラットアイコンを探すのにおすすめです。
ただ、種類がめちゃめちゃ多いです...多すぎて探せない!って方には以下のサイトのほうがおすすめです。
FLAT ICON DESIGN : http://flat-icon-design.com/

アニメーション

Lottie

URL : https://airbnb.design/lottie/
アニメーションはプログラムで記述することも多いですが、出来合いのものを導入して簡単にクオリティの高いアニメーションを実現できます。
LottieはJSONファイルによってアニメーションが記述されているため、組み込みが簡単・しかも画像リソースより軽量です!導入に少々手間がいるので、お使いの環境に対しての導入方法を調べてください。

オンライン画像エディタ

オンライン イメージエディタ

URL : https://www.peko-step.com/tool/imageeditor.html
オンラインでここまでできるのか!と驚きました。大体の画像処理がこのサイトで叶います。
機能としては、以下のようなことができます。シンプルで使いやすいです。

選択範囲:画像処理を行う領域を設定します。
切り抜き:画像の一部を切り抜き、新しい画像を作ります。
サイズ変更:画像の大きさを変更します。(!よく使う!)
余白の追加:画像の周囲に余白を追加します。(!よく使う!)
反転:画像を上下、もしくは左右に反転させます。
回転:画像全体、もしくは一部を回転させます。
結合・連結:複数の画像を結合・連結して1つの画像にまとめます。
テキストの追加:画像の任意の場所にテキストを追加します。
ネガポジ反転:画像の色を反転しネガフィルムのようにします。
グレースケール・セピア:画像の色をグレースケールやセピア調に変換します。
色の透過:画像の指定した色を透明にします。
明度・コントラスト:画像の明度とコントラストを調整します。
色の取得:画像の指定した色のRBG値とHSL値を取得します。(!よく使う!)

draw.io

URL : https://www.draw.io/
無料で使えるオンラインドローイングツールです。
フローチャートを作る用途などで多く使用されますが、デザインエディタとしても優秀です。アイコンを組み合わせて画像を作ったり、図形を足したり、簡単な編集に嬉しい機能がそろっています。作ったデザインは透過pngとしても出力できます。

最後に

いかがでしたか?私自身が様々なサイトを試した上での選りすぐりのサイトたちです。今回はオンラインで誰でも使用できるサイトを並べましたが、アプリやソフトウェアでも多くのツールにお世話になっているのでまた紹介できればと思います。
これからもデザインに便利なサイトを見つけ次第追加していきます。