更新日: 2022 / 09 / 03

無料で使える最新Webデザインアプリまとめ 2022

カテゴリー: design

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

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

  1. 無料で使えるWebデザインアプリ 2022

    1. Figma
    2. Adobe XD(エックスディー)
    3. inVision
    4. Origami Studio
  2. デザインした後にWebサイトとして公開できるビルダー系ツール

    1. STUDIO
    2. Wix
    3. Jimdo
  3. FigmaやXDで作ったデザインをPSDで納品できる!?

  4. まとめ

無料で使えるWebデザインアプリ 2022

まずはデザインに特化した無料のツールです。

Figma

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

-> Figmaを使ってみる

最近日本語にも対応してますます使いやすくなってデザインツールの定番になりつつあるのがこのFigma。

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

エディター部分も高機能でXDのような画面遷移を使ったプロトタイピングもできるので本格的に使えるデザインツールです。

Adobe XD(エックスディー)

Adobeデザインツール XD

-> Adobe XD(エックスディー)を使ってみる

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

フォントの調整や配色、線のスタイルなどWebでできることはほぼ対応してます。

ワイヤーフレームからプロトタイピング、コーダーさんに渡すデザインデータの作成までこれ1本でできるのがすごいところ。

inVision

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

-> inVisionを使ってみる

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

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

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

Origami Studio

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

-> OrigamiStudioを使ってみる

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

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

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

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

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

STUDIO

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

-> Studioのサイトを見る

最近話題になっているのがSTUDIO。コーディング不要でWebサイトを作成できるためデザイナーさんに人気のWebアプリです。

画面のUIもシンプルでみやすく、操作も簡単なのでPhotoshopのように何ができるのかわからん!ということもありません。

STUDIOの使い方については以下の記事にまとめているのでノーコードツールに興味ある方は是非チェックしてみてください。

-> 「STUDIOとは?使い方をまとめてみた

Wix

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

-> Wixのサイトを見る

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

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

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

Jimdo

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

-> Jimdoのサイトを見る

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

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

FigmaやXDで作ったデザインをPSDで納品できる!?

この記事で紹介したFigmaやXDなどのアプリは無料で使えてサクサクWebデザインできる便利なツールです。

でも実際の仕事ではPSD(Photoshopデータ)で納品を求められることもまだまだありますよね。

そんなときはFigmaやXDをPSDに変換できるツールを使えば一発でPSDファイルを作成できます!

詳しいツールの解説やは使い方は以下の記事をご覧ください。

-> 「XDのデータを今すぐPSDに変換できる簡単な方法

まとめ

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

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

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