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


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

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

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

image

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

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

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

webflow

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

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

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

image Adobe Edge Reflow CC

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

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

Design & UI の「sketch 3」

image Sketch 3

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

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

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

image Coda 2

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

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

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

image Textastic Coda Editer

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

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

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

image slicy

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

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

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

image CSSHat 2

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

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

image

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

image CSS Gradient Animator

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

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

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

image Google Web Designer

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

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

Microsoft 好きなら「Microsoft Expression Web 4」

image 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」

image Pixlr Editor

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

Google Web Designer や Microsoft Expression Web 4 のようにソフトをインストールしなくても画像処理ができるサービスになります。Pixlr Editorにアクセスするだけで、ブラウザ上で画像加工を行うことができます。

図表やグラフなら「Infogram」

image Infogram

  • 対応 / 各ブラウザ上で起動
  • 価格 / 無料 ~ $ 42/月
  • 表示言語 / 日本語
  • Free トライアル / 無

Infogram は、データの可視化をサポートするサービスになります。図表やグラフを簡単に作成でき、説得力のある web デザイン 作成に大いに役立ちます。Google ドライブとの連携やチームでの共有など使い勝手に定評があります。

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

image Material-UI

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

Google マテリアル・デザインに基づいたアイコンやボタンなどの CSS が公開されているサイトになります。フラットデザインをベースにアレンジしていくので、web デザイナー初心者には使えるサイトです。

一流デザイナーのスキルが身に付く

無料カウンセリングはこちら

まとめ

いかがでしたでしょうか?役に立ちそうなデザインツールはありましたでしょうか?各ツール共に豊富な機能が備えられていて、使い込めば込むほど便利な機能を発見でき、web デザインの作業効率を良くしてくれます。

慣れないツールに馴染むまで少しシンドイかもしれませんが、使えるようになると自身のスキルアップにもなりますし、自信にもつながります。それでは便利なツールを活かして、面白いデザインを発信していきましょう!

image


関連記事

オシママサラ
この記事を書いた人
オシママサラ
まずは7日間お試し!人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp