Advertisement

grabient-1

 

海外サイト DesignModo で公開された Free Tools for Web Designers より許可をもらい、翻訳転載しています。

 

傑作と呼ばれるデザインの裏には、多大な努力と徹底したブレインストーミングが欠かせません。誰もがそうであるように、デザイナーは期限を決め、プレッシャーを克服しながら、毎日のルーチン作業を処理する必要があります。そのことから、PhotoshopプラグインやSketchプラグイン、自動生成ツール、オンラインサービスなどのツールをうまく使うことが重要になってきます。

 

今回は、デザイナーの制作スピードを格段にアップする、知っておきたい最新フリーツールをまとめてご紹介します。

 

 

ウェブデザイン制作スピードが大幅アップ!覚えておきたい最新便利ツールまとめ

 

理想的なグラデーションを手軽に見つけることができる Coolhue や、各プラグラムの人気ショートカットをまとめた Shortcuts、特殊文字をコピペできる Copychar のようなサービスは、デザイン制作のスピードアップにつながります。

 

1-coolhue

via Coolhue

 

2-shortcuts

via Shortcuts

 

3-copychar

via Copychar

 

 

Landscape は、ソーシャルメディアによるキャンペーンを想定した、画像サイズ変更、切り抜きツール。Twitterなど各プラットフォームに合わせたサイズに、画像を最適化できます。

4-landscape

via Landscape

 

 

Adele は、ワークフローの改善で知られるUX Pinが作成したレポジトリ。一般公開されている人気のデザインシステムやパターンライブラリを集めたリファレンスガイドで、充実の検索機能も。

5-adele

via Adele

 

 

 

配色ツール

 

デザイン制作において重要な「配色」は、デザイン全体の雰囲気を演出したり、注目を集めるフォーカル・ポイントを作成したりと、多くの用途に活用できます。以下のツールを利用することで、プロレベルの配色を手軽に作成することができます。

 

Gradpad は、選択した複数の色をしたら、マウスカーソルでカンバス上で上下左右に動かしながら、直感的に美しいグラデーションを作成できます。

6-gradpad

via Gradpad

 

 

Liveweave は、カラーホイールを柔軟にカスタマイズし、お好みの配色を見つけることができるツールです。カラーホイールの鮮やかさから、グリッドの数、リングの数、カラーホイールの向き、不要な色をマスクする機能などを自由に変更できます。

9-liveweave

via Liveweave

 

 

Hexnaw は、選択した配色のコントラストやアクセシビリティの確認に役立つツール。カラーコードを入力するだけで、文字テキストなどの可読性やコントラストなど、使いやすさをテストできます。

8-hex-naw

via Hexnaw

 

css-gradient-ultimate-collection
デザインでもっとも頭を悩ますことの多い「配色えらび」。配色を決まらずに、時間だけが過ぎてしまったという経験のあるひとも多いでしょう。 そんなときは、無
color-tool2015-top
PhotoshopVIP編集部: 2016年8月22日に公開された記事を再編集し、前回より17個のツールやサービスが増え、合計36ツールをご紹介しています。
101-color-combos-featured-image-1440x960-1
配色は、デザインにおける重要な要素のひとつです。この記事では、デザインプロジェクトの参考にしたい、最新の色の組み組み合わせ101種類をご紹介します。

 

 

タイポグラフィ、書体ツール

 

Font Combination Library は、Google Fontsで人気の書体を組み合わサンプル集で、Sketch と Adobe XD用のできあいテンプレート8種類を収録しています。

10-font-combinations-kit

via Font Combination Library

 

artboard_202
デザイン制作で時間のかかる工程、プロセスのひとつが、フォント書体の組み合わせ。色々ありすぎて、結局いつも同じフォントを使っているなんてひともいるかもしれません。

 

 

TypeHero は、Google Font のデータベースを完全網羅しており、文字サイズや文字色、背景色を自由にカスタマイズできる便利ツール。

11-typehero

via TypeHero

 

web-typography-resource
コンテンツ・ファーストに対する考え方が、デザイナーに認識、理解されるにつれて、デザイン過程において優れたタイポグラフィの作成がますます重要になってきています。

 

 

グラフィック系ツール

 

グラフィックツールに関しては、大きく分けて「機能面(英: Functional)」と「装飾面(英: Decorative)」の2つに分けられますが、どれも豊富な機能が揃います。

 

UnDraw には、ディテールまで描かれた高品質なイラストを、SVGファイル形式でダウンロードできるサイト。オンライン上で配色も自由に変更でき、イラストテーマも豊富すぎるほどに充実しています。

 

13-undraw

via UnDraw

 

 

Standart は、デザインの美しさと機能性を兼ね備えた、合計256個のアイコン素材をSVGファイル形式でダウンロードできます。シンプルですがエレガントな見た目が特長。

14-standart

via Standart

 

free-vector-tools-feat-image
グラフィックデザイナーにとって、6万円近くする CorelDraw Suite を購入することは、最適な自分への投資と言えないかもしれません。また、Adobe製品の
medibang-paint-pro
これまでは絵やマンガを描くには、ペンと紙を使うということが当たり前でしたが、今ではパソコンを使って、手描きと変わらないレベルのイラストを制作することができるようにな

 

 

装飾デザイン系ツール

 

デザイン素材をあらかじめ用意する一般的な方法とは別に、プログラムをつかって自動生成できるツールも登場しています。より軽量で柔軟性があり、カスタマイズも自由に行うことができます。

 

SVG Backgrounds は、数十種類の幾何学パターンが公開されており、色や透明度、サイズなどお好みで変更し、SVGファイル形式でダウンロードすることができます。

15-svg-backgrounds

via SVG Backgrounds

 

 

BGPatterns は、用意された動物や植物などのイラストを、スタンプ感覚で自由にデザインできるオンラインツールです。サイズや配色の変更はもちろん、作成したパターンはSVGファイル形式でダウンロードできます。

16-bgpatterns

via BGPatterns

 

 

 

ブランディング向けツール

 

小さなロゴタイプから企業向けのパッケージにいたるまで、ブランディングにはさまざまなデザインが必要となります。

 

DIY Free Logo Kits は、ブランド名を入力するだけで、数百を超えるプロフェッショナルなロゴを作成でき、EPSファイル形式でダウンロードできるサービス。ハイクオリティなデザインが特長の有料サービス。

17-diy-free-logo-kits

via DIY Free Logo Kits

 

 

Perspective Scene Creator は、ロゴや文字テキストなどを配置するだけで、リアルなブランディング向けシーンを作成できる無料モックアップ素材です。編集はPhotoshopでどうぞ。

18-perspective-scene-creator

via Perspective Scene Creator

 

 

Home Vintage Mockup Scene は、温かみのあるワークスペースを演出できるモックアップ素材。配置されているオブジェクトの位置も自由に変更できます。

19-home-vintage-mockup-scene

via Home Vintage Mockup Scene

 

name-card-mock-up
せっかく時間をかけて完成したデザインなら、より魅力的に演出してみませんか。Photoshopの「モックアップ素材」を利用すれば、ほんの少しの作業で、見た目の印象がグ
minimal-samsung-galaxy-s9
完成したデザインを適切に展示、披露するのに便利な、無料モックアップテンプレート素材をまとめてご紹介します。Photoshopで利用できるPSDモックアップは、スマー

 

 

Presentator は、クライアントまたはチームにアイデアやコンセプトを提案する、プレゼンテーション作成ツールです。シンプルで直感的な操作性で、豊富な機能が揃ったインターフェースは、他のデザイナーとの共同作業にも最適です。もちろん、無料で利用できます。

20-presentator

via Presentator

 

 

さいごに。

 

どんなデザインも、ゼロからつくるとなると時間もかかってしまいます。ペースの早いウェブデザインの世界では、今回紹介したプロツールを利用することで、時間短縮やワークフローの改善にもつながります。今後のデザイン制作に活用してみてはいかがでしょう。

 

サムネイル@ : Grabient by Eddie Lobanovskiy – Dribbble

参照元リンク : Free Tools for Web Designers – DesignModo