【2018年11月 最新版】Webデザインに必要なおすすめツール6選

Webデザイン

これからWebデザインを始めようと考えている皆さん、使うツールは決めましたか?

「とりあえず有名なAdobe XDにしようかな」「ビルダー系ツールってどうなんだろう」と迷っている方も多いのではないでしょうか。

そこで今回は、Webデザインをする際に使えるツールをご紹介します。

6つともメリット・デメリットがありますので、しっかり考えたうえで自分に合ったツールを選びましょう!


目次

⑴ Adobe XD
⑵ Sketch
⑶ InVision Studio
⑷ Figma
⑸ STUDIO
⑹ Wix


 

おすすめの最新webデザインツール6選

⑴ 革命児【Adobe XD】

とにかくスゴイ、Adobe XDの特徴

ワイヤーフレームからUIデザイン、プロトタイプ作成、共有までを1つのアプリで実現できるUI/UXデザインツール、Adobe XD

プレビュー画面でページ移動やボタンを押した時の動きを再現できるので、完成に近い状態の動作も確認可能。Webサイトやモバイルアプリだけでなく、音声テクノロジーのプロトタイプにも対応しています。

煩わしさから解放される!Adobe XDの良い点

ワイヤーフレームから共有までのすべてを管理

これまでは、PowerPointやPhotoshopでワイヤーフレーム作成→画面設計書を作成→PDF化→メール送信のように、手間と工程が多かったのです。しかしXDは、ワイヤーフレーム作成から共有までのすべてを1つで作成・管理できてしまいます。まさに革命児。

様々なアプリと連携

Photoshopやillustrator、Sketchなどのファイルを、そのままXDで開いて使用することができます。

レスポンシブリサイズ

近年では、様々なデバイス向けのデザインを作成する必要がありますが、それらすべてを1から考えるのは時間も労力もかかりますよね。しかしXDを使えば、選択したオブジェクトやレイアウト情報を分析し、自動的に調整してくれるのです。

psdやaiで保存不可。Adobe XDの悪い点

どこをとっても素晴らしいとしか言えないXDですが、悪い点を挙げるならば、XDファイルでしか保存できないところでしょうか。

プロトタイプで作った画面をPhotoshopやillustratorなどでブラッシュアップしたくても、現時点では難しそうです。

有料プランがおススメ!Adobe XDの価格

スタータープランの価格は無料ですが、共有プロトタイプやデザインスペックは1つしか使えないので、単体プランかCreative Cloudコンプリートプランへの加入をおススメします。

単体プラン

価格 1,180円/月
・アクティブな共有プロトタイプ・デザインスペックは無制限
・XDのみしか使えない

Creative Cloudコンプリートプラン

・価格 4,980円/月
・アクティブな共有プロトタイプ・デザインスペックは無制限
・XDだけでなく、Photoshopやillustratorなど20のアプリも使い放題

Adobe XDのOS対応

  • Mac OS 10.12以降
  • Windows 10 Creators Update 64ビット v1703以降
  • iOS(XDモバイル版。デザインをプレビューできる)
  • Android(XDモバイル版。デザインをプレビューできる)

 

⑵ プラグインで作業効率化【Sketch】

Macユーザー必見、Sketchの特徴

Web制作やアプリ制作に携わっている人なら定番のSketch。Adobeの最大のライバルといえるでしょう使いやすいのにAdobeに比べとても安価で、プラグインも豊富。

ベクターグラフィックが得意で簡単な画像編集もできるので、イラストやアイコンを作りやすいです。ただし、Macでしか利用できません。

99ドルで1年間使える!Sketchの良い点

使いやすいのに安価

月額購入ではなく、1年単位でライセンスをアップデートできるSketch。99ドルを払えば、1年間無制限で使用できます。

ただ、1年後にライセンスを購入しなければ、アップデートされずに直前のバージョンのままで使い続けられるのだとか。

Library機能でデータを一括管理

多くのデザイナーと共に制作すると「画面によってUIが違う」「パーツが違う」などの問題が起こりがち。

しかしSketchのLibrary機能を使えば、カラーやテキスト、アイコンなどを一括で管理し、チーム全員で共有することができます。

プラグイン機能で作業を効率化

クリエイティブな制作をするために、効率よく作業したいですよね。Sketchには作業を効率化させるプラグインが豊富に用意されているので、あらゆる作業を時短できます。

プラグインに頼りすぎる?Sketchの悪い点

自由度の高さが魅力のSketchですが、豊富なプラグインに頼り過ぎて、ワークフローの模索に時間がかかってしまう可能性があります。

プラグインや連携サービスの力を借りる前提になってしまうところもデメリットでしょう。

99ドルで1年間無限に使える!Sketchの価格

「良い点」でもお伝えした通り、99ドル支払えば1年間無限に使えます。

ライセンスをアップデートするには1年後に再度支払う必要がありますが、支払わなくても直前のバージョンで使うことができます。

SketchのOS対応

  • Mac OS 10.13.4以上

 

⑶ アニメーションも作成できる【InVision Studio】

もしや最強のツール?InVision Studioの特徴

プロトタイピングツールで有名な「InVision」のデザインツールInVision Studio。デザインからプロトタイプ、アニメーションまで作成できます。

Adobe XDやSketchのようなUIデザインの作りやすさに加え、同じデザインを何度も使う際に活用できるシンボル機能、リアルタイムでのフィードバック機能も実装。もしかしたら最強のツールかもしれません。

アニメーションを作成可能!InVision Studioの良い点

アニメーションが作成できる

プロトタイプ作成ができるツールはいくつもありますが、InVision Studioはアニメーションも作成できてしまいます。

デザインツールイベントでデモンストレーションを見た人によると、

大まかな作成イメージとしては対象となるアートボードを複製して、スワイプ前後で変化のある要素を調整していく感じです。

https://note.mu/ikechamu/n/n4d692d6f1106より引用

レスポンシブデザインに対応

要素のwidthを%で入力することができます。したがって、画面の拡大・縮小時に%を維持したまま自動的にサイズ調整をしてくれるのです。

また、レイアウトエンジンを利用すると、画面拡大・縮小に応じてデザインがフィットしてくれます。

リアルタイムでのフィードバック機能

InVision Studioは、プロトタイプ上にリアルタイムでフィードバックをすることができます。同じ画面を見ながらみんなで一斉にフィードバックできるなんて効率的ですよね。

あと1歩!InVision Studioの悪い点

「これだけ素晴らしい機能が揃っているのに、なぜプラグインがないのだ?」と思っている方、多いのではないでしょうか。

直観的にサクサク使えてアニメーション作成もでき、リアルタイムでのフィードバックもできるのだから……あと1歩!

無料でも利用可能。InVision Studioの価格

1プロトタイプは無料で利用できますが、それ以上使いたいのであれば有料プランがおススメ。有料プランは4種類ありますが、今回は2種類をご紹介します。

スタータープラン

・15ドル/月
・3プロトタイプ

プロフェッショナルプラン

・25ドル/月
・プロトタイプ無制限

InVision StudioのOS対応

  • Mac
  • Windows

 

⑷ マルチプレイヤーデザインができる【Figma】

ブラウザ上でデザイン可能!Figmaの特徴

ブラウザ上でデザインできるツールといえば、Figma。ブラウザで動作するため、場所や環境を選ばずにデザインができます。

また、複数のデザイナーが同一ファイルで作業できるので、チームでの制作に向いています。機能はSketchやAdobe XDに劣りません。

チームでの共同作業に使いたい。Figmaの良い点

環境を選ばない

ソフトのダウンロード・インストールが必要ないので、Webサイトに接続さえできれば、いつでもどこでもデザインできるところが強み。例えば別のパソコンで作業しなければならなくても、Figmaなら対応できてしまうのです。

マルチプレイヤーデザインで進捗確認できる

複数のメンバーがリアルタイムで同一のデザインファイルを使用し、作業することをマルチプレイヤーデザインといいます。「リアルタイムコラボレーション」とも呼ばれていますね。Figmaを使えば複数人でデザイン・修正ができます。

また、他の人のデザイン画面を追えるので、作業の進捗確認も可能。リモートワークをしていてコミュニケーションを綿密に取れない時でも、お互いの状況を確認できるのです。

Figmaの悪い点は、英字フォントで日本語が表示されないこと

特に英字フォントだと日本語が表示されないはiOSの場合辛くて、SF Pro Textで日本語が打てないためHiragino Kaku Gothic Stdにして英数字もそれで許容する、みたいなことしないといけません。

合成フォントで解決するか、英数字だけの部分はSF Pro使うなど解決方法はいくつかありますが、僕はしばらく様子見でアップデートに期待ということにしました。

本当に辛くなったら合成フォントでカバーします。

http://kenshir0f.hatenablog.com/entry/sketch-to-figmaより引用

英字フォントだと日本語が表示されないようですね。この方はSketchからFigmaに移行して開発スピードが上がったと感じているようですし、早めに対応してくれることを祈ります。

チームなら有料がおススメ。Figmaの価格

無料で利用できるスタータープランもありますが、Figmaはチーム制作に強いため、チームで利用する場合は有料プランへの加入をおススメします。

それでは、Figmaの3プランをご紹介します。

スタータープラン

・無料/月
・ファイルストレージ無制限
・プロジェクト数は3つまで
・メンバー数2人まで
・バージョン管理は30日まで

プロフェッショナルプラン

・12ドル/月
・ファイルストレージからバージョン管理まで無制限
・チームライブラリ
・プライベートプロジェクト

チームプラン

・45ドル/月
・ファイルストレージからバージョン管理まで無制限
・チームライブラリ、プライベートプロジェクト
・チーム無制限、デザインシステム管理など

FigmaのOS対応

  • Mac
  • Windows

 

⑸ デザインするだけで完結【STUDIO】

デザイン‘‘しか’’しなくていい!STUDIOの特徴

日本製のUIデザインツール、STUDIO。プログラムコードを一切書かずに、Webサイトのデザインから公開まで完了できる驚きのツールです。

プランによってはSEO対策や独自分析機能がついており、Webサイトの運用までもサポートしてくれます。

コーディングもサーバーアップも必要なし。STUDIOの良い点

ドラッグ&ドロップでデザイン

Photoshopでデザインを作り、検証ツールと睨めっこしながらコーディングをする必要はありません。

STUDIOならドラッグ&ドロップで素材を追加し、マウスでmarginやpaddingを変更できるのですから。透明度やborderなどの細部も調整可能です。

デザインを1クリックで公開

Webサイトを公開するうえで面倒なサーバー設定。もちろんこちらも、STUDIOなら必要ありません。デザインを、たった1クリックでオンライン上に公開できてしまいます。

有料プランは登録必須?STUDIOの悪い点

サイトデザインと公開は無料ですが、作成ページのソース参照には有料プランへの加入が必要です。

また、「SEO対策をしたい」「独自ドメインに接続したい」場合にも、有料プランでなければなりません。

デザインと公開は無料。STUDIOの価格

STUDIOの価格は、以下3プランに分けられます。デザインと公開は無料で行えますが、SEO対策や独自ドメイン接続には有料プランへの加入が必須です。

Designプラン

・無料/月
・デザインツール全機能
・プロジェクトの公開など

Publishプラン

・9ドル/月
・Designプラン全機能
・STUDIOバッジ非表示
・SEO対策、独自ドメイン接続など

Growプラン

・27ドル~/月
・Designプラン、Publishプラン全機能
・独自分析機能
・CMS

STUDIOのOS対応

  • Mac
  • Windows

 

⑹ 豊富な素材で理想を形に【Wix】

自分好みのサイトを制作。Wixの特徴

デザイン後、そのままWebサイトとして公開できるビルダー系ツール、Wix

好みのテンプレートを選び、テキストや画像などのパーツをドラッグ&ドロップで追加するだけで、自分好みのWebサイトを制作できます。もちろん、アクセス解析やSEOなどの管理、独自ドメインの登録も可能。

200以上の素材がある!Wixの良い点

デザインをそのまま公開。コーディングの必要なし

HTMLの知識がなくても、テンプレートを選んでパーツをドラッグ&ドロップするだけで理想を形にし、そのまま公開できます。

デザインテンプレートは500種類以上、写真や素材には無料でアクセスできるところも強みですね。

200以上の素材を追加できる

ネットショップやお問い合わせフォーム、音楽配信などの機能は200以上。オンラインショップも簡単に開設できますよ。

テンプレートの変更不可。Wixの悪い点

サイト制作の前にたくさんのテンプレートの中から選びますが、決定後の変更は出来ません。

悩みながら作成すると「あっちにしておけば……」と後悔することになりかねないので、先にデザインを決定してからテンプレートを選ぶか、できる限りシンプルなものを選びましょう。

しっかり運用したいなら有料プランへ。Wixの価格

Webサイト公開までは無料で行えますが、独自ドメインが取得できない・広告が表示されるなどのデメリットもあります。

広告を表示したくない人、しっかり運用していきたい人は、用途に合わせたプレミアムプランへの入会がおススメです。

今回は、5種類の中から3種類ご紹介します。

ドメイン接続プラン

・¥416/月
・1GBの帯域幅
・500MBのデータ容量
・独自ドメイン接続

コンボプラン

・¥841/月
・2GBの帯域幅
・3GBのデータ容量
・独自ドメイン接続
・Wixの広告費表示など

無制限プラン

・¥1,266/月
・無制限の帯域幅
10GBのデータ容量
・独自ドメイン接続
・Wix広告無表示など

WixのOS対応

  • Mac
  • Windows

まとめ

自分に合いそうなツールは使いましたか?

Webデザインをする上でツールの使い心地はとても大切なので、周りの「良い」「悪い」という声に惑わされずに、自分が良いと感じたものを使ってみてくださいね。

Webデザインを学んでみたいあなたはこちら↓

【執筆】

SHEshares編集部 めくばせ
2016年、服飾の専門学校に進学するも「わたしの人生で大切なものではない」と気づき、2017年1月に中退。同時期にライターを開始。現在はshares編集部としてライターさんのフォローなどをしている。
昔からモノづくりが好きで、2018年4月にはSHElovesでWebデザインを受講。ピアス制作やWeb制作にも注力中。
生粋の天秤座女で、常にフラット・バランス命。すべてを肯定し愛せる人間になりたい。
Twitter(@_____ilil_
おすすめ執筆記事
服飾学校を中退→Web業界へ。やさしい言葉で人々を救う‘‘保健室の先生’’が選んだ「自分を幸せにする」生き方
【私を救ったコトバたちvol.4】「あなたは大丈夫。人生はめちゃくちゃ魅力的だ。」

関連記事一覧

ライター育成します