更新日: 2017年09月26日
公開日: 2015年06月10日

プロ御用達！WEBデザインに役立つデザインツール13選

忙しい web デザイナーの方、web デザイン勉強中の方、CSS やプログラミングからチョット目を離してデザインツールを見直してみませんか？

今までやっていた作業、可視化に時間のかかっていた作業を劇的に変えてくれるツールがたくさん存在します。チョット作業の手を止めて、以下のツールを覗いてみてください。きっとこれからのあなたの web デザインを快適にしてくれますよ！

WEBデザインに役立つデザインツール 13選
プロ顔負けのデザインツール「webflow」
レスポンシブデザインを助けてくれる「Adobe Edge Reflow CC」
Design ＆ UI の「sketch 3」
デザイン＋データベースの「Coda 2」
Mac ユーザーなら「Textastic Coda Editer」
コーディング用素材なら「slicy」
CSS の書き出しなら「CSSHat 2」
グラデーションなら「CSS Gradient Animator」
バナー制作に強い「Google Web Designer」
Microsoft 好きなら「Microsoft Expression Web 4」
とりあえずの画像処理に「Pixlr Editor」
図表やグラフなら「Infogram」
Google マテリアル・デザインなら「Material-UI」
まとめ

WEBデザインに役立つデザインツール 13選

プロ顔負けのデザインツール「webflow」

webflow

対応 / Mac、Windows
価格 / 無料～ $84 /月
表示言語 / English
Free トライアル / 有

デザインには自信があるけれど、実はプログラミングはチョット苦手、という方にお勧めのツールが「webflow」になります。直感的に　web デザインすることができ、作成したデザインもファイル出力もしくは web 上で公開することができます。細かい調整にはプログラミング編集が必要となりますが、だいたいの作業は webflow が行ってくれます。

レスポンシブデザインを助けてくれる「Adobe Edge Reflow CC」

Adobe Edge Reflow CC

対応 / Mac、Windows
価格 / 無料
表示言語 / English
Free トライアル / ―

Adobe 社がレスポンシブ・デザイン向けに提供している無償ツールになります。無料のわりには使いやすく、作成したデザインも Google クロームと連携してプレビューを確認することができます。レスポンシブ・デザイン初級の方には、十分使えるツールです。詳しい解説はこちらから確認できます。

Design ＆ UI の「sketch 3」

Sketch 3

対応 / Mac
価格 / $ 99
表示言語 / English
Free トライアル / 有

近年利用者数が増えてきているといわれる「Sketch」。web 制作やUI デザインに特化したソフトで、海外のweb デザイナーが利用しています。日本ではSketch に比べると Photoshop や Fireworks が有名ですが、web デザインの視点で考えると Sketch の方が使いやすいツールと評価されています（by webdesignerdepot.com）。

デザイン＋データベースの「Coda 2」

Coda 2

対応 / Mac
価格 / 9,800 円
表示言語 / 日本語可
Free トライアル / 無

coda 2 は、あらゆるプログラミング言語に対応しているテキストエディタです。サーバー上のファイルを直接編集することもでき、MySQLエディタで構造確認やテーブルの追加、データ編集なども可能となっています。ダウンロードは、Panic 社もしくは iTunes から購入することができます。

Mac ユーザーなら「Textastic Coda Editer」

Textastic Coda Editer

対応 / Mac、iPad、iPhone
価格 / $7.99
表示言語 / English
Free トライアル / 無

「Textastic Coda Editer」は、80以上のプログラミング言語に対応してるテキストエディタです。DropBox や FTPサーバーと連携し、HTML や CSS のプレビューを表示しながら作業を進めることができます。外出先でも気軽にデザインを編集できるツールになります。

コーディング用素材なら「slicy」

slicy

対応 / Mac、iPad、iPhone
価格 / 3,600 円
表示言語 / 日本語
Free トライアル / 有

デザインを作成した後のコーディング用素材の書き出し作業を劇的にスムーズにしてくれるツールが「Slicy」です。素材として書き出したい PSD ファイルを開いて、「.png」や「.jpg」などの拡張子を追加し、PSD ファイルを保存し、Slicy へD&D すると書き出しが自動で行われます。

CSS の書き出しなら「CSSHat 2」

CSSHat 2

対応 / Mac、Windows + Photoshop CC 2014 only
価格 / $34.99
表示言語 / English
Free トライアル / 有

Photoshop の CSS 書き出し機能に満足できない方に「CSS Hat 2」はお勧めのツールです。シンタックス・ハイライトに対応していて、すぐコードを確認することができます。また通常のCSSだけでなく、SassやLessにも対応しています。

グラデーションなら「CSS Gradient Animator」

CSS Gradient Animator

対応 / 各ブラウザ上で起動
価格 / 無料
表示言語 / English
Free トライアル / ―

色とグラデーションの調整をクリックで指定するだけで、グラデーションのCSSコードを自動で生成してくれます。ブラウザ上で完結するのでグラデーション・カラーのチェックに利用できます。

バナー制作に強い「Google Web Designer」

Google Web Designer

対応 / Mac 10.7.x 以降、 Win 7 以降、 Linux
価格 / 無料
表示言語 / 日本語
Free トライアル / ―

Google Web Designer (GWD) は、各種グラフィックツールとタイムラインでアニメーションを作成すると、プラットフォームを問わず動く HTML5 / CSS3 / JavaScript を出力してくれるツールになります。読めないコードを自動生成する一方通行ブラックボックスではなく、コードエディタ側にも機能が揃っています。ダッシュボードも直感的に使いやすい、とweb デザイナーからも定評があります。

Microsoft 好きなら「Microsoft Expression Web 4」

Microsoft Expression Web 4

対応 / Windows 7, Windows 8, Windows Vista, Windows XP
価格 / 無料
表示言語 / 日本語
Free トライアル / ―

Microsoft の製品に慣れている方には「Microsoft Expression Web 4」が直感的に扱いやすいでしょう。ワードやエクセルの様な感覚で操作し、web デザインを制作していきます。視覚的な画像処理操作も行えますが、比較的自分でコードを入力する人に向いているツールになります。PHP、 HTML/XHTML、 CSS、 JavaScript、 ASP.NET もしくは ASP.NET AJAX にも対応していますので、web デザインのみならず多様な場面で活用できるツールの仕様となっています。