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

      2016/03/01

web-design
Code部

忙しい web デザイナーの方、web デザイン勉強中の方、CSS やプログラミングからチョット目を離してデザインツールを見直してみませんか?今までやっていた作業、可視化に時間のかかっていた作業を劇的に変えてくれるツールがたくさん存在します。チョット作業の手を止めて、以下のツールを覗いてみてください。きっとこれからのあなたの web デザインを快適にしてくれますよ!

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

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


webflow
対応 / Mac、Windows
価格 / 無料 ~ $84 /月
表示言語 / English
Free トライアル / 有
デザインには自信があるけれど、実はプログラミングはチョット苦手、という方にお勧めのツールが「webflow」になります。直感的に web デザインすることができ、作成したデザインもファイル出力もしくは web 上で公開することができます。細かい調整にはプログラミング編集が必要となりますが、だいたいの作業は webflow が行ってくれます。

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

adobe edge reflow
Adobe Edge Reflow CC
対応 / Mac、Windows
価格 / 無料
表示言語 / English
Free トライアル / ―
Adobe 社がレスポンシブ・デザイン向けに提供している無償ツールになります。無料のわりには使いやすく、作成したデザインも Google クロームと連携してプレビューを確認することができます。レスポンシブ・デザイン初級の方には、十分使えるツールです。詳しい解説はこちらから確認できます。

Design & UI の「sketch 3」

sketch
Sketch 3

対応 / Mac
価格 / $ 99
表示言語 / English
Free トライアル / 有
近年利用者数が増えてきているといわれる「Sketch」。web 制作やUI デザインに特化したソフトで、海外のweb デザイナーが利用しています。日本ではSketch に比べると Photoshop や Fireworks が有名ですが、web デザインの視点で考えると Sketch の方が使いやすいツールと評価されています(by webdesignerdepot.com)。

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

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

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

textastic
Textastic Coda Editer

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

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

slicy
slicy
対応 / Mac、iPad、iPhone
価格 / 3,600 円
表示言語 / 日本語
Free トライアル / 有
デザインを作成した後のコーディング用素材の書き出し作業を劇的にスムーズにしてくれるツールが「Slicy」です。素材として書き出したい PSD ファイルを開いて、「.png」や「.jpg」などの拡張子を追加し、PSD ファイルを保存し、Slicy へD&D すると書き出しが自動で行われます。

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

csshat
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
CSS Gradient Animator
対応 / 各ブラウザ上で起動
価格 / 無料
表示言語 / English
Free トライアル / ―
色とグラデーションの調整をクリックで指定するだけで、グラデーションのCSSコードを自動で生成してくれます。ブラウザ上で完結するのでグラデーション・カラーのチェックに利用できます。

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

googlewebdesiner
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
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 デザインのみならず多様な場面で活用できるツールの仕様となっています。

とりあえずの画像処理に「Pixlr Editor」

pixlr
Pixlr Editor

対応 / 各ブラウザ上で起動
価格 / 無料
表示言語 / 日本語
Free トライアル / ―
Google Web Designer や Microsoft Expression Web 4 のようにソフトをインストールしなくても画像処理ができるサービスになります。Pixlr Editorにアクセスするだけで、ブラウザ上で画像加工を行うことができます。

図表やグラフなら「Infogram」

infogr
Infogram

対応 / 各ブラウザ上で起動
価格 / 無料 ~ $ 42/月
表示言語 / 日本語
Free トライアル / 無
Infogram は、データの可視化をサポートするサービスになります。図表やグラフを簡単に作成でき、説得力のある web デザイン 作成に大いに役立ちます。Google ドライブとの連携やチームでの共有など使い勝手に定評があります。

Google マテリアル・デザインなら「Material-UI」

material-ui
Material-UI

対応 / 各ブラウザ上で起動
価格 / 無料
表示言語 / English
Free トライアル / ―
Google マテリアル・デザインに基づいたアイコンやボタンなどの CSS が公開されているサイトになります。フラットデザインをベースにアレンジしていくので、web デザイナー初心者には使えるサイトです。

まとめ

いかがでしたでしょうか?役に立ちそうなデザインツールはありましたでしょうか?各ツール共に豊富な機能が備えられていて、使い込めば込むほど便利な機能を発見でき、web デザインの作業効率を良くしてくれます。
慣れないツールに馴染むまで少しシンドイかもしれませんが、使えるようになると自身のスキルアップにもなりますし、自信にもつながります。それでは便利なツールを活かして、面白いデザインを発信していきましょう!

 - デザイン, デザインツール ,