これまでWebデザインといえばPhotoshopが定番でしたが、より一層UXが重視されるようになり、単純なスタイリングより画面遷移やプロトタイピングも含めたツールが選ばれるようになっています。

このページではWebデザインの新定番になるかもしれない無料ツールに合わせて、サイトとして公開もできるツールを紹介します。

無料で使えるWebデザインツール

Adobe XD(エックスディー)

Adobe XD(エックスディー) Adobeデザインツール XD

Photoshopでもデザインを作ることはできますが、ページの移動を含めた全体の動作までは確認できません。

XDの場合はプレビュー画面でページ遷移やボタンを押した時の反応を再現できるため、より完成に近い状態の動作確認が可能。

フォントの調整や配色、線のスタイルなどWebでできることはほぼできるので、最近のWebデザインの現場ではこれを使うことが多くなってます。

inVision

inVision 無料で使えるWebデザインツール inVision

エアビーやAmazonでも使われている超意識高いデザインツールがこのinVision。

チーム間でデータの共有やデザインのバージョンコントロール、細かいアニメーションの作成、デバイスごとのレスポンシブデザインなどなど非常に多機能で完成度の高いツール。

しかもこれでまだベータ版なのでこれからの進化にも期待できます。

Figma

Figma 無料で使えるWebデザインツール Figma

ブラウザで使えるUIデザインツール。チーム間でコンポーネントの共有、スマホでライブプレビュー、Sketchファイルの読み込みなどWebアプリと思えないほど機能盛りだくさん。

エディター部分も高機能でXDのような画面遷移もできるのでかなり本格的なデザインツールです。

Origami

Origami 無料で使えるWebデザインツール Origami

こちらはゼロからデザインを作っていくというより、デザインされたものにインタラクティブなアニメーションなどを追加するもの。

アニメーションはかなり細かく設定できるので、アプリのプログラミングを始める前に動作のイメージを作るのに便利です。

デザインした後にWebサイトとして公開できるビルダー系ツール

無料でデザインした後に、作ったデザインをそのままWebサイトとして公開できるツールがこちら。

デザインがそのまま公開されるので、コーディングの手間を省いてWebサイトの制作ができるようになります。

Wix

Wix 無料で使えるWebデザインツール Wix

国内でも有名なWebサイトビルダーツール。アプリをONにするだけでブログやフォームを簡単に追加できます。

エディター部分は無料で使えるのでデザインまでは無料で行うことができます。広告ありならそのまま無料で公開することも可能。

関連記事: Wixでできる!はじめてのホームページ作成

Jimdo

Jimdo 無料で使えるWebデザインツール Jimdo

Wixに次いでよく使われるビルダー系ツールがこちら。エディター部分はWixよりシンプルでブログやポートフォリオサイトに向いています。

無料プランの場合はWix同様広告が表示されます。

Studio

Studio 無料で使えるWebデザインツール Studio

最近正式バージョンにアップデートされたツール。

WixやJimdoと比べてデザインツールとしての完成度が高く、自由度の高い編集が可能。

ドラッグ&ドロップやスタイルの変更などはすごくスムーズ。ツール自体のUIが美しいので使っててストレスになりませんね。

ついでに、要注目な有料Webデザインツール

ここまでは無料ツールや無料プランのあるサービスを集めてみましたが、有料でも注目しておきたいツールがあるので少しだけ紹介します。

Sketch

Sketch 要注目な有料Webデザインツール Sketch

Webデザイン界隈でPhotoshopキラーとまで言われているのがこのSketch。

出た当初はPhotoshopとイラレのいいとこ取りみたいな感じでしたが、最近ますますUXデザインに寄せてきていて見逃せない存在です。

XDのようなページ遷移やプラビュー機能があり、プラグインを追加することで機能をさらに追加できるため使いこなせればこれ一本でWebデザインはなんでもできる感じ。

WebFlow

WebFlow 要注目な有料Webデザインツール WebFlow

こちらは有料のWebサイトビルダー。WixやJimdoと異なるのはツールで作成したデザインのHTMLやCSSコードを取得できるところ。

なのでデザイナーさんがデザインしたサイトをそのままコード出力して、細かい部分の修正(headなど)をしてサーバーにアップロードするということができます。

まとめ

最近のデザインツールはデザインのためのツールと、Webへの公開まで繋がっているツール(Wixなどのビルダー系)に分かれてる感じですね。

ビルダー系はそのまま公開できるので一見便利そうですが、jQueryプラグインを入れることができなかったり、headタグ内の編集が制限されていたりと微妙なところもあります。

そのあたりを想定した上でならビルダー系ツールはすごく簡単にサイトを作れるのでオススメです。