【デザイナー必見！】デザインする時に便利なデザインツールサイト5選
こんにちは！楽しくデザインしてますか？
最低月に2回ブログを書くという目標を年始に掲げたものの、早速もうピンチ…！
最近特に、毎日あっという間にすぎてゆきますね…。
でもUIデザインって楽しい！ものづくりって楽しいなーって思いつつ日々過ごしています。
そんな感じでたくさんデザイン業務をこなすためにも、効率化って超大事！
特にお仕事でデザインするときはとにかく時間との戦いですから、いかに普段から便利なツールを知っていて駆使できるか、が大事と思います。
今日は私が使っている、オススメのデザインツールサイトを5つご紹介します。
wordmark
まず最初にご紹介したいのがこのサイト。
ロゴ制作にめちゃくちゃ役立つサイトです。
このように文字を打つとですね…
こんな感じで、PCの中にインストールされているフォントで表示されるんです。
ロゴを作る時の書体決めにめちゃ便利！
「Show Google fonts」を選択すると、Google fontsでのプレビューも見れちゃう！
どんな見え方になるのかな〜と、こちらで確認してイメージを作れるのです。
他には、お目当のフォントに似たフォントを見つけたい時に利用したりもします。
ダークモードで確認したり、表示するサイズも調整できます。便利〜！
眺めているだけでも楽しいサイトですよね。
METALLIC RATIO
いつもめちゃくちゃ使わせてもらっているけど、個人のサイトだったと今初めて知りました…。
UIデザインする上で欠かせない、美しいとされる比率を簡単に出してくれるサイト。めっっちゃ重宝してます。
有名な1:1.618の黄金比をはじめ、白銀比、白金比、青銅比などなど…世の中には美しいとされる比率がたくさんあります。
おそらく私以外の多くのデザイナーさんもそうだと思うのですが、計算……苦手ですよね？そんな自分で比率の計算なんてできませんよね？？
そんな時に超活躍してくれるのがこのサイトです。
比率計算サイトいろいろありますが、私が一番いいなと思って数年使い続けているのがこちらです。感覚的にわかりやすくて、デザイナー向きなんじゃないかなと思います。
こんな感じで、基準としたい辺の数字を入れるだけ。
UIデザインする時、画像って特定の比率で入れると思うのですが、そういう際に重宝してます。小数点の切り捨ても、右上の「FLOATING POINT」で選択できますよ。
さらに右上のメニュー切り替えで、こんなこともできます。
こっちは、画面構成でよく使います。
ほんとに便利です。お試しあれ！
また、比率計算でいうと「Ratio Calc」というアプリも重宝してるのですが、もうアプリ提供終わってるぽかったです…ストアになかった…。
数百円くらいで購入したと記憶してますが、めちゃ使いやすかったのに残念！
でも同じことできるアプリが無料でありました。
こんな感じで出したい比率を設定して、決められたサイズを入力すると、もう片方のサイズを出してくれます。
やりたい比率の整数を見つける時にも使ったりしてます。
同じことができるアプリが無料でいろいろあるので、この機会に入れておくといいと思います！
無料だから広告入るけど…。私がカニ好きだということがバレますね。
TinyPNG
もはや手放せない画像圧縮ツール…それがTinyPNG。
圧縮したい画像をドラッグ＆ドロップするだけで、いい感じに圧縮してくれます。
キャラクターのパンダが可愛くて、クリスマスにはサンタ帽をかぶっていたりと、季節ごとに変化を楽しめたりするのもお気に入りです。
画像は必ず圧縮しましょう。早く表示されるのが、ユーザーにとって1番のUXだと思います。
Coolors.co
coolors.co
AIが、色のサジェストしてくれるツールです。自動で色の配色をしてくれるジェネレーター…というのでしょうか。
メインカラーを決めれば、残りの4色を提案してくれるのです。メインカラー以外に4色決まれば、さし色やその色が使われている写真やイラストを選んだりと、グラフィックやバナーにいろいろ使用できますよね。
サブカラーを考えたいときも便利です。思わぬ色の組み合わせが出てきて、すっごく楽しいのです。
使い方は…。
このボタンからスタートして
例えばこのブログのアイコンになっているピンクに合う色を探したいな〜という時は、まずピンクの色番号を左端に入力して、固定します。
左端の「#ED5E83」がそれです。
ピンクのエリアにある鍵のアイコンをクリックすると、その色だけ動かないように固定できるのです。
あとはスペースを押していくだけ！
こんな感じで、ピンク色に合った色をいろいろジェネレートしてくれます。楽しい〜！
もちろん、2色、3色…と固定できます。メインとサブカラーが決まってるものもこれで他の色を決められますね。
「今日中にバナーお願い！」なーんて言われた時はこれを利用して配色を決めて、ささっと作っちゃいましょう！
Material Design Colors
最後にご紹介するのが、Material Designのカラーパレットが簡単に使えるMaterial Design Colorsです。
Material Designについてはこちらのnoteが参考になると思いますが、それはまた別のエントリーにするとして。
Material Colorとは、要はGoogleが作っためちゃ良い感じのカラーパレット、カラーシステムのことです。
ビビッドで使いやすくてよく使うのですが、それを簡単にこのサイトでコピペできるのです。
こんな感じでMaterial Colorsが並んでいるので、色番号をコピーしたい色をクリックするだけ！
クリップボードにコピーされるのです。アニメーションも気持ちいい。
いかがだったでしょうか？
便利なデザインツールサイトはたくさんあるので、うまく利用して効率的にデザインして、本当に大事なことにたくさんの時間を使いましょう！
デザインの勉強の仕方についてはこちら。
渋谷と恵比寿の間、渋谷ブリッジはレトロ可愛い空間
とある休日、いい感じに仕事ができるカフェを探していたのですが、渋谷ヒカリエから渋谷ストリームまで歩き、混んでいたのもあってなかなか見つけられずにいたら、こんなとこを発見しました！
その名も渋谷ブリッジ（SHIBUYA BRIDGE）！
去年の秋にできたばかりの、かつて東横線が走っていた路線跡地を再生して作った商業施設だそうです。渋谷ストリームもそうですよね。渋谷川のほとりを再開発したとのこと！
その渋谷ストリームと同じく東急系列の商業施設みたいです。6つの渋谷再開発プロジェクトのひとつだとか。
タイルがレトロな雰囲気で可愛い。
テナント一覧を見たら、なんと知ってる（というか子どもができたら入れたいと思ってる）幼稚園のこども園が入っているではないですか！渋谷にもできたんだ〜知らなかった！
すごいな〜〜めちゃ応援！
というわけでなにかの運命を感じて私のテンションも上がり、俄然期待が高まり。建物の雰囲気もまたいいんですよね〜〜！レトロ可愛くてリノベ物件好きの心をくすぐります。
そしたら探し求めていたカフェをはっけん！
いい感じ〜〜！かなり好きな感じ！
ヒカリエからてくてく歩いてきてよかったー！という気持ちに。
おしゃれ！オープンキッチンって活気があっていいですよね〜！
ランチメニューはこんな感じ。
オムライスとミーガンバーガーのラムの方をそれぞれ注文してみました。
オムライスは、中のライスだけでも美味しくて、とろとろの卵と合ってペロリとすごい勢いで食べちゃいました。
ランバーガーは、ザ・ラム！という感じでボリューミー。
パティスリーだけあって、デザートも可愛くてテンションがだだ上がり〜〜
ほんとに、デザインって大事ですよね…。こういうのも超大事なUXだよ…。可愛い。
あんまり可愛いので、友達へのお土産にパウンドケーキをたくさん買って帰りました。
MUSTARD HOTELなるホテルが併設されてるんですが、これがまたおしゃれなホテルで〜〜！
イエローベースのデザインが可愛いホテル。黄色い自転車がいくつか見えていたので、きっとレンタルして渋谷をいろいろ観光できるんだろうな。
おしゃれ！
渋谷ブリッジのサイトを見たらテナント第一弾とあったので、これから増えるみたいです。博報堂ケトルさんとかクリエイティブ系の会社さんが入居してるみたい。
ヒカリエとか大きな商業ビルもいいけど、こういう感じのオフィスで働くのも楽しいだろうな〜。
渋谷と恵比寿のちょうど間、並木橋の近くにある穴場的な場所なのでまだあんまり知られてないぽいです。
休日のお散歩がてら、行ってみるのはいかがでしょう？
また遊びに行きたいな。
渋谷ブリッジ（SHIBUYA BRIDGE）
Ａ棟 東京都渋谷区東一丁目29番1号
Ｂ棟 東京都渋谷区東一丁目29番3号
bar&patisserie megan
東京都渋谷区東1-29-3 SHIBUYA BRIDGE B棟1F
良い作品に触れよう！2019年まだ行ける都内美大・卒業制作展まとめ
卒制です。ミュージックビデオ作りました🎡🎠🎪
— やなお (@naonao_yanao) February 10, 2019
「グラフィックデザインをする楽しさ」を歌詞と映像に込めました。
拙い作品ではありますが、もしよければ見てってください🎢 pic.twitter.com/OGDnKIm7hl
このツイートを見て、あっもう卒制の時期だ…！と思いました。勢いがあって、デザインって楽しい！って気持ちがあふれていていいな〜と。
続きを読む【渋谷ランチ】松濤・ガーリックガーリックで、美味しいニンニク料理ランチ
【デザインの基本】デザイン系テストサイトを2つ紹介しつつ大事なことを伝えます
こんにちは！楽しくデザインしてますか？
今日はデザインをより楽しくお勉強できるテストサイトを2つご紹介します。
テストサイトと言っても、かなりお遊び感覚でできるものなので、ぜひぜひ楽しんでトライしてみてください！
現代のリアリティエンターテイメント！テラスハウス-TERRACE HOUSE
突然ですが、私はテラスハウスが好きです。
…って言うと、「若いねw」「やらせでしょ？」とかって言われることがあるのですが、いいんです。
「テラスハウス」というショーを見せてもらってる感覚なので、台本があるとかカメラワークがどうだとか、その辺りはどうでもいいのです。
他の人がどう楽しんでいるかはわからないけど、私はそうやって数年とっても楽しませてもらってます。
そしてデザイナーの人たちは結構テラスハウス好きな人が多い！気が！（ただの飲み会の時の会話調べ）
そしてデザイナーの人たちは結構テラスハウス好きな人が多い！気が！（ただの飲み会の時の会話調べ）
じゃあテラハの何がいったい楽しいのか？！
せっかくブログを作ったので綴ってみたいと思います。 続きを読む
せっかくブログを作ったので綴ってみたいと思います。 続きを読む
【青山ランチ】青山 川上庵でくるみだれ絶品お蕎麦ランチ
渋谷ランチおすすめ紹介・青山編です。
本当にランチ事情というか、お店事情に恵まれているエリアで働かせてもらってます。
絶品お蕎麦を食べに、青山 川上庵へ！
今日は、青山の川上庵に行ってきました！
川上庵、軽井沢に旅行へ行く時に、友人に「ここおいしいよ！」と本店を教えてもらって行って以来ファンです。麻布店も好き。
