Webサイト制作におすすめのツール

WEBサイト制作はヒアリングから始まり、デザインを検討したりテキストを考えたりと作業工程がとても多いですよね。
作成するものも、ワイヤーフレームやサイトマップ、デザインカンプはもちろん、場合によっては提案書やイメージボードなども提出したりと、多岐に渡ります。クライアントさんにとって見やすいものをご提供したいし、自分の作業効率もアップしたいですよね。

今回は、WEBサイト制作で実際に私が使っているおすすめツールをご紹介いたします。

WEBサイト制作のおすすめツールご紹介

Adobe XD

まず初めに、私がWEBサイト制作をする上で絶対に欠かすことのできないデザインツールである、Adobe XDをご紹介します。
Adobe XDはどのようなツールなのでしょうか。公式サイトの説明は下記のようになっています。

Adobe XDは、ワイヤーフレームの作成からデベロッパーへの引き渡しまで、あらゆる作業に対応できるワンストップアプリです。

https://www.adobe.com/jp/products/xd.html

この通り、Adobe XDはWEBサイト制作の工程のあらゆる作業に対応することができる、WEBサイト制作のための便利ツールなのです。

さらにはコーディングをする際に必要な情報を自動で表示してくれる機能もあるので、あれ？ここは何pxだったっけ？というときもすぐに確認できてしまいます。コーダーさんが入る場合など、チームでの作業にも強いということができますね。
ちなみに、個人的にXDの好きなところはその動きの軽さです。通常、photoshopなどでデザインカンプを作ると動きが悪く、画面が固まってしまって、「急いでいるのに、もうー！」ということも少なくありません。XDはその点とても優秀で、軽やかな動きでサクサク作業を進めることができるので、とてもストレスフリーなのです。まだ使ったことのない方はぜひ、試してみてください。とてもおすすめです。

Google ドキュメント

続いては、Googleドキュメントです。こちらはWEBデザインに限らず、ドキュメントを作る際に幅広く使われるツールなのでご存知の方も多いかもしれません。
公式サイトの説明は下記の通りとなっています。

Google ドキュメントを利用すれば、どこにいても文書の作成、編集、共同作業を無料で行うことができます。

https://www.google.com/intl/ja_jp/docs/about/

そうなんです。Googleドキュメントの良いところは、場所やデバイスを問わずにいつでも文書を書くことができ、さらにその文書を他の人が閲覧したり共同で編集することができるところなのです。

さらには、自動で保存してくれるので「うっかり保存し忘れた！」ということもなく、Wordとの互換性もあるのでMicrosoft Wordで書いた文章をGoogleドキュメントで開くこともでき、あらゆる面で手軽にストレスなく使えるところがとても魅力的です。

Canva

続いては、WEBデザイナーもノンデザイナーさんも、デザインを作る全ての人におすすめしたいCanvaです。
公式サイトの説明は下記の通りとなっています。

Canvaは、オンラインで使える無料のグラフィックデザインツールです。パソコンのブラウザがあればいつでもデザインが可能です。もちろん、スマートフォンやタブレットなどのモバイル端末のアプリにも対応してます。

https://www.canva.com/ja_jp/learn/easytodesign/

Canvaに作れないデザインはないんじゃないかと思うくらい、とにかくあらゆるものをデザインすることができてしまいます。有料版もありますが、無料版でも利用可能な範囲が広く、デザインのアイディアが浮かんで来ない時にヒントをもらうためだけでも利用価値があります。

Evernote

最後に、メモ帳やタスク管理に使えるアプリ、Evernoteをご紹介します。
公式サイトの説明は下記の通りです。

仕事もプライベートもすっきり整理　ノート、タスク、スケジュールが１ヶ所にまとめられるので、情報の記憶と目標の実現が加速します。

https://evernote.com/intl/jp

Evernoteひとつあれば、スケジュールは手帳を見て、メモはノートを見て、とあちこちと情報を探す手間を省くことができます。ノートもリストにしたり見出しを付けたりと、後から見て分かりやすくすることが可能です。タスクについても、パッと見て消化できていないものがすぐに分かるのでとても効率的です。

WEBサイト制作に、illustratorやphotoshopは必要ない!?

上記でご紹介したツールを使えば、illustratorやphotoshopを使わなくてもWEBサイトを作ることができるのでしょうか？案件にもよりますが、私は実際にそれらを使わずにWEBサイトを作成したことがあります。

もちろん、デザインパーツをillustratorで作ることは非常によくあります。あくまでも、使わないことも可能、というイメージです。ただ、photoshopに関しては、元々デザインカンプを作るために使用していましたが、カンプをXDで作成するようになってからは使用頻度が減ったことは事実です。サイトに使う写真素材の加工やサイズ変更の時に使用する程度です。
このように、使いやすいツール、動きの軽いツールを使用してサクサクとデザインやカンプの制作ができると理想的ですよね。デザインの後に控えているWordPressでの構築作業に入る前の作業はなるべく効率的にスピーディーに対応して、納品までの全体の工数が少しでも削減できると良いと思います。

まとめ

Adobe XDはWEBサイト制作の超おすすめツール

総じて、私が今回の記事で最もお伝えしたいことは、「Adobe XD」はWEBサイト制作の超おすすめツール！ということです。XDを使うようになって、デザインカンプの作成時間がphotoshopを使っていた頃と比べて半分以下になりました。とにかく動きが軽く、直感的に操作もしやすい、デザインパーツも作れるし、デモも見れる。そして嬉しいことに、かなりの頻度でアップデートされていて、新機能が追加されているのです。これからますます便利な機能が増えていくことが予想されるAdobe XDなのです。