【デザイナー必見!】デザインする時に便利なデザインツールサイト5選

f:id:uidesigner:20190330021225j:plain

こんにちは!楽しくデザインしてますか?

最低月に2回ブログを書くという目標を年始に掲げたものの、早速もうピンチ…!
最近特に、毎日あっという間にすぎてゆきますね…。
でもUIデザインって楽しい!ものづくりって楽しいなーって思いつつ日々過ごしています。

そんな感じでたくさんデザイン業務をこなすためにも、効率化って超大事!
特にお仕事でデザインするときはとにかく時間との戦いですから、いかに普段から便利なツールを知っていて駆使できるか、が大事と思います。

今日は私が使っている、オススメのデザインツールサイトを5つご紹介します。

wordmark

wordmark.it

まず最初にご紹介したいのがこのサイト。
ロゴ制作にめちゃくちゃ役立つサイトです。

f:id:uidesigner:20190228233818p:plain

このように文字を打つとですね…

f:id:uidesigner:20190315214707p:plain

こんな感じで、PCの中にインストールされているフォントで表示されるんです。
ロゴを作る時の書体決めにめちゃ便利!
「Show Google fonts」を選択すると、Google fontsでのプレビューも見れちゃう!
どんな見え方になるのかな〜と、こちらで確認してイメージを作れるのです。

他には、お目当のフォントに似たフォントを見つけたい時に利用したりもします。

f:id:uidesigner:20190315214839p:plain
ダークモードで確認したり、表示するサイズも調整できます。便利〜!
眺めているだけでも楽しいサイトですよね。

METALLIC RATIO

voidism.net

いつもめちゃくちゃ使わせてもらっているけど、個人のサイトだったと今初めて知りました…。
UIデザインする上で欠かせない、美しいとされる比率を簡単に出してくれるサイト。めっっちゃ重宝してます。
有名な1:1.618の黄金比をはじめ、白銀比白金比、青銅比などなど…世の中には美しいとされる比率がたくさんあります。
おそらく私以外の多くのデザイナーさんもそうだと思うのですが、計算……苦手ですよね?そんな自分で比率の計算なんてできませんよね??

そんな時に超活躍してくれるのがこのサイトです。
比率計算サイトいろいろありますが、私が一番いいなと思って数年使い続けているのがこちらです。感覚的にわかりやすくて、デザイナー向きなんじゃないかなと思います。

f:id:uidesigner:20190315220201p:plain

こんな感じで、基準としたい辺の数字を入れるだけ。
UIデザインする時、画像って特定の比率で入れると思うのですが、そういう際に重宝してます。小数点の切り捨ても、右上の「FLOATING POINT」で選択できますよ。

さらに右上のメニュー切り替えで、こんなこともできます。

f:id:uidesigner:20190315220257p:plain

こっちは、画面構成でよく使います。
ほんとに便利です。お試しあれ!


また、比率計算でいうと「Ratio Calc」というアプリも重宝してるのですが、もうアプリ提供終わってるぽかったです…ストアになかった…。
数百円くらいで購入したと記憶してますが、めちゃ使いやすかったのに残念!

f:id:uidesigner:20190327114554p:plain

でも同じことできるアプリが無料でありました。

RATIO CALC touch!

RATIO CALC touch!

  • Craps i.B.
  • ビジネス
  • 無料

f:id:uidesigner:20190327114557p:plain

こんな感じで出したい比率を設定して、決められたサイズを入力すると、もう片方のサイズを出してくれます。
やりたい比率の整数を見つける時にも使ったりしてます。

同じことができるアプリが無料でいろいろあるので、この機会に入れておくといいと思います!

無料だから広告入るけど…。私がカニ好きだということがバレますね。


TinyPNG

tinypng.com

もはや手放せない画像圧縮ツール…それがTinyPNG。

f:id:uidesigner:20190329203519p:plain

圧縮したい画像をドラッグ&ドロップするだけで、いい感じに圧縮してくれます。
キャラクターのパンダが可愛くて、クリスマスにはサンタ帽をかぶっていたりと、季節ごとに変化を楽しめたりするのもお気に入りです。
画像は必ず圧縮しましょう。早く表示されるのが、ユーザーにとって1番のUXだと思います。

Coolors.co

coolors.co
AIが、色のサジェストしてくれるツールです。自動で色の配色をしてくれるジェネレーター…というのでしょうか。
メインカラーを決めれば、残りの4色を提案してくれるのです。メインカラー以外に4色決まれば、さし色やその色が使われている写真やイラストを選んだりと、グラフィックやバナーにいろいろ使用できますよね。
サブカラーを考えたいときも便利です。思わぬ色の組み合わせが出てきて、すっごく楽しいのです。

使い方は…。

このボタンからスタートして

f:id:uidesigner:20190326133138p:plain

例えばこのブログのアイコンになっているピンクに合う色を探したいな〜という時は、まずピンクの色番号を左端に入力して、固定します。
左端の「#ED5E83」がそれです。

f:id:uidesigner:20190326133329p:plain

ピンクのエリアにある鍵のアイコンをクリックすると、その色だけ動かないように固定できるのです。
あとはスペースを押していくだけ!

f:id:uidesigner:20190326133433p:plain

f:id:uidesigner:20190326133504p:plain

こんな感じで、ピンク色に合った色をいろいろジェネレートしてくれます。楽しい〜!
もちろん、2色、3色…と固定できます。メインとサブカラーが決まってるものもこれで他の色を決められますね。
「今日中にバナーお願い!」なーんて言われた時はこれを利用して配色を決めて、ささっと作っちゃいましょう!

Material Design Colors

www.materialui.co

最後にご紹介するのが、Material Designのカラーパレットが簡単に使えるMaterial Design Colorsです。
Material Designについてはこちらのnoteが参考になると思いますが、それはまた別のエントリーにするとして。

Material Colorとは、要はGoogleが作っためちゃ良い感じのカラーパレット、カラーシステムのことです。
ビビッドで使いやすくてよく使うのですが、それを簡単にこのサイトでコピペできるのです。

f:id:uidesigner:20190330020134p:plain

こんな感じでMaterial Colorsが並んでいるので、色番号をコピーしたい色をクリックするだけ!
クリップボードにコピーされるのです。アニメーションも気持ちいい。

いかがだったでしょうか?

便利なデザインツールサイトはたくさんあるので、うまく利用して効率的にデザインして、本当に大事なことにたくさんの時間を使いましょう!

 

デザインの勉強の仕方についてはこちら。 

www.uidesigner.tokyo