Webデザイナーの制作現場で役に立つ18の無料ツール

Nataly Birch

Natalyは、ウクライナのSevastopolのWeb開発者で、WordPressとITの執筆に情熱を注いでいます。彼女は自分のLand-of-Webを運営して、制作に役に立つ記事やチュートリアルなどを掲載しています。

この記事はDesignmodoからの翻訳転載です。配信元または著者の許可を得て配信しています。

Free Tools for Web Designers

デザイナーは彼ら自身を表現しようと常にもがいています。心や魂をプロジェクトに込めることが彼らのモットーです。 すべての仕事、コンセプト、スケッチ、そしてアイコンは、デザイナーの創造力とハードワークから生み出されています。

デザインをあまり知らない大多数の人にとってデザイナーは、ロマンチックで冒険的で、時にはつまらない職業かもしれません。 しかし現実には、自己犠牲を伴う苦職業なのです。

傑作と呼ばれるデザインは、計り知れない努力とブレインストーミングのもとに成り立っています。 さらに言えば、他の職業の人と同じように、デザイナーは締め切りを守り、プレッシャーを克服し、日々の仕事に対処しなければなりません。

そのためデザイナーはSketchのプラグインPhotoshopのプラグイン、アセット、ジェネレータ、オンラインサービスなどのサードパーティツールや、すぐに使えるグラフィックの情報に詳しいのです。Coolhueのような理想的な配色を見つけるためのツールや、ShortcutsCopycharのようによく使われているショートカットを網羅的に集めたサービスは、デザイン作業のスピードアップに大いに役立ちます。

 

この記事では、デザイナーのパフォーマンスを向上させる新しいツールを見ていきます。まず紹介するのはLandscapeAdeleです。 Landscapeはソーシャルメディアのキャンペーンを念頭に置いて作られた、画像をリサイズするツールです。 それぞれのプラットフォームに合わせて画像をトリミングし最適化してくれます。

Adeleは、ワークフローを改善するツールを作るのに非常に熱心なことで有名なUXPinのチームによって作成されました。人気のあるデザインシステムとパターンライブラリを1つにまとめて、すばやく検索できる参照ガイドに仕上がっています。

配色

配色は、美しさの要です。全体的なトーン&マナーから、目立たせるポイントの決定まで多くのことを担っています。GradpadHex NawLiveweaveを使えば、あなたの配色はプロフェッショナルのレベルになるでしょう。

GradPadとLiveweaveは、色をさまざまに試すツールです。 GradPadははじめにいくつもの要素やトーンを操作し、美しいグラデーションを作成します。Liveweaveは、カラーホイールを調整して色の実験ができるツールです。色の明度や区切り方、配色セオリーに基づく色相のピックアップなどさまざまな実験ができます。

Hexnawは先に紹介した3つのツールとよく似ていますが、その目的は配色によるアクセシビリティの改善です。パレットを追加すると、アクセシビリティの観点から最適な配色をチェックできます。

タイポグラフィ

タイポグラフィについては私たちのメディア上でも多く触れていますが、その主役であるフォントには特別な注意が必要です。Font Combinations KitTypeheroは、読みやすさを向上させ、ユーザー体験を強化するためのツールです。 kkuistoreによって作られたFont Combinations Kitは、書体の完璧な組み合わせを見つけるサービスを作りました。ここには、相性が良いと証明された34の組み合わせを含んでおり、すぐに使用することができます。

TypeheroはGoogle Font databaseにあるすべてのフォントをカバーしているため、好きなフォントを使用できます。フォントのサイズ、色、背景色を設定することで、起こりうるタイポグラフィの不具合を見極められます。

グラフィック

グラフィックは機能面と装飾面の2つのカテゴリーに分けられますが、その境界はとてもあいまいです。UnDrawを検討してみましょう。これは、丁寧に描かれたイラストのまとめサイトです。

Standartは、デザイン的にはそれほど印象的ではないグラフィックですが、機能性と美しさが共存しています。それぞれのアイコンは簡略化されながらも、エレガントに表現されています。

ディテールの装飾

ディテールの装飾はプログラムなどで自動で生成するほうが従来の方法より好まれます。 自動生成されたグラフィックは容量が軽く、カスタマイズしやすいからです。

WebGLの人気が高まっているにもかかわらず、HTML、CSS、JS、SVGが慣習的に選ばれています。BGPatternsSVG Backgrounds検討してみましょう。 SVG Backgrounds は、数十個の素晴らしい幾何学模様のパターンが特徴です。色やサイズ、透明度を変更して望むものを作りましょう。

BGPatternsは、Patternninjaの前身です。それほど強力なツールではありませんが、美しいパターンを作成するには十分です。

ブランディング

ブランディングなしにWebデザインは語れません。小さなロゴから会社全体のアイデンティティとなるパッケージまで、作るべきものは山ほどあり、これをサポートするツールもたくさんあります。DIY Free Logo Kitsや、Aeksey Belorukovによって作成された2つのモックアップジェネレーターを見てみましょう。

DIY Free Logo KitsはEnvatoによって提供されています。 一言で言えば、EPS形式で利用可能なグラフィック素材のコレクションです。思いつくままにロゴタイプを作ることができます。

Perspective Scene CreatorHome Vintage Mockup Sceneは、よく作り込まれたモックアップを伴った素晴らしい無料サービスです。どちらのサービスにも、希望に合わせて組み合わせることのできるリアルなモックアップを少しずつ含んでいます。

コラボレーションツール

Presentatorは、クライアントやチームメンバーにコンセプトを説明するためのコラボレーションツールです。 共同作業に最適な、シンプルで直感的かつ豊富な機能のインターフェイスを備えています。素晴らしいことに、UXPinやInVisionとは違って無料で使うことができます。

まとめ

このようにたくさんの便利なデザインツールがある中では、なにかをゼロから作り出すほうが難しいと言えます。ですが、短期間に仕事を終えることが求められるこの忙しい世界で、これらの役立つツールを利用しない手はありません。もちろん、細心の注意を必要とするプロジェクトはあるでしょうが、それはデザインツールを使わない理由にはなりません。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて

UX MILKのディレクター募集