Webデザイナー必見!配色に迷わない!フォントがわかる!便利ツールを紹介

2019.04.19WEB・IT

Right Caption

管理人

こんにちは。デザイナーをしている管理人のKayです♪

デザイン作業をするにあたって欠かせないツールが幾つかあるんですが

その中でも選りすぐりでコレは!というツールを紹介します。

配色に迷ったらコレ!

色選びに困ったときにまず参考にしている、普段使いにもぴったりな便利ツールを紹介します!

色選びはデザインの基本でありとても重要な要素の一つで、色を選ぶときは細心の注意が必要なので

これらのツールには本当に助けられています。

Web Safe Color (カラーチャート)

シンプルにまとめられたwebカラーチャートのサイト、【WEBセーフカラー一覧表】

特に際立った機能などは無いですが、見たままに好きな色を選んで参考にしています。

Color Chart

ウェブサイトやモバイルアプリ向けデザインを制作するときに参考にしたい実用的なWebセーフカラーをまとめられています。↓

htmlcolorcodes.com

Palx

基本色を指定するだけでフルスペクトルのカラーパレットを作成してくれる使えるサイト、【PALX】

配色センスがなくても、そのカラーに調和したより精度の高い組み合わせのカラーパレットが簡単に作成できます!

Colour hunt

色んな色の組み合わせを毎日更新しているサイト、【Colour hunt】です。

配色で迷ったときに参考になってます!

オンラインイメージ最適化・圧縮ツール

Optimizilla

【Optimizilla】はオンラインで効率よくファイルが圧縮できるWebサービスです。

高画質のまま可能な限り画像を簡単に圧縮してくれるツールで、他のも使ってみましたがこれは本当に便利で頼り切っています。

グラデーション配色ツール

webgradients.com

おしゃれで美しいグラデーションパターンを180種類集めたwebサービス【WebGradients】です。

気に入ったグラデーションが見つかったらコピペでデザインに適用することができます。

グラデーションのカラーパレットをお探しの方には重宝間違いなし!

uigradients.com

CSSでグラデーションを作る時に役立つジェネレーター系配色ツールの、【uigradients.com】

2色のグラデーションの組み合わせを次から次へと提示してくれて便利。

それぞれのグラデーションに「空の色」「ナイトホーク」のように名前がつけられていてイメージがしやすいのイイ♪

Chromeの拡張機能の便利ツール

Google ChromeはWebデザイナーにとってすごく便利なブラウザです。

デザインの作業がはかどるとても便利な拡張機能を紹介しまっす!

カラーピッカーColorZilla

ブラウザ上のカラーコードを取得するカラーピッカー、【ColorZilla】

webサイトをいろいろ見ていると表示されているコンテンツの色を調べたい時がしばしばあります。

指定した箇所のカラーコードを取得することが可能でとっても便利!

文字の上にカーソルを置くだけでフォント名が分かるWhatFont

デザイナーという仕事柄なのか、かっこいいフォントや珍しいフォントを見つけると

「どんなフォントを使っているのかな?」って調べたくなります。

そんな時に簡単にフォントを調べるのに便利なのがGoogle Chrome の拡張機能【WHATFONT】です。

最後に

デザインは色の選び方次第ではより洗練したデザインにすることができますし、組み合わせによっては素人のようなレベルにすぐ落ちてしまうほどセンスが問われるところです。

これらのツールをうまく使えばカッコイイ洗練されたデザインを早いスピードで作ることができることでしょう。

Chromeの拡張機能も合わせてぜひ参考にしてみてください。

WEB・IT

Posted by kay