ワイヤーフレーム作成におすすめのツール(最強はAdobe XD)

ワイヤーフレーム作成におすすめのツール(最強はAdobe XD)

こんにちは、北島です。

今回はWEBサイトのワイヤーフレームを作る際に使えるツールをご紹介したいと思います。

この記事は普段WEBサイトの設計を担当している、WEBディレクターの方に向けて書いてます。

サイト設計では、主にワイヤーフレームと呼ばれるページ毎のコンテンツ配置図を作成します。
このワイヤーフレームは、主に線と四角、そして画像などで組み立てていきます。

一般的には次のようなツールが利用されているようです。

  • マイクロソフト エクセル
  • Cacoo
  • Adobe イラストレータ
  • Adobe XD

これら以外にも様々なツールがあるようですが、私が使ってみたところ使いづらかったのでほとんど記憶してません。

それでは私が使用してきた中でオススメのツールを2つに絞ってお伝えします。

オススメのツール第1弾は「Adobe XD」

Adobe XD

Adobe XD、正直これは最強ですね。

直感的に操作できて慣れるまでが早いです。

ワイヤーフレームの作成だけでなく、やろうと思えばWEBサイトのデザイン制作までこれ1つでできると思います。

そして画面遷移などが確認できるプロトタイプ機能も付いてるので、お客様やデザイナーと情報を共有しやすいメリットもあります。

ちなみにこのAdobe XDは頻繁にアップデートしていて、Adobeとしてだいぶ力を入れている気がします。

懸念点としては、このAdobe XDは有料のAdobe CC(Creative Cloud)に含まれているソフトの1つということです。
Adobe CCは2019年8月時点で、月額約6,000円ほどかかります。

AdobeCCの料金

ですが、XDはお金を払ってでも利用したい便利なソフトですね。
実際に私も個人でAdobe CCを契約して使ってます。

もし、これからAdobe XDを含めAdobe CC製品を学んでいきたい方は、ヒューマンアカデミーが提供している学習サービス「たのまな」を利用することをオススメします。

オススメする理由は、アドビオンライントレーニング通信講座の1ヶ月受け放題に加えて、Adobe CCを学生・教職員版の料金で購入することができるからです。

オススメのツール第2弾は「マイクロソフト エクセル」

マイクロソフトOfficeエクセル

次にオススメなのがマイクロソフトOffice製品のエクセルです。

エクセルは私がWEBディレクターになりたての頃から、かなりの頻度で使用してきました。

サイトマップを作ったり、ワイヤーフレームを作ったり、ディレクトリマップを作ったり、見積書を作ったりと、WEBサイトの設計に必要な資料を一通り作れます。

そしてWindowsのパソコンであれば基本的にインストールすることになるソフトなので、どのパソコンでも閲覧したり編集したりできることが一番のメリットですね。

Adobe CCを使用しない方はエクセルがあれば十分WEBサイトの設計ができると思います。

 

以上が、ワイヤーフレームを作る際のおすすめのツール2選となります。

これからWEBディレクターとして活動していく方や、現在WEBディレクション業務を担当している方は参考にしてみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

two + seven =

ABOUTこの記事をかいた人

フリーランスのWEBエンジニアとして活動中。 WEBの専門家としてWEBディレクションからコーディングまでを一通り経験。 WEBで悩んでいる方に役立つ情報をブログで配信中。 ライフワークでは、キャンプにはまってます♪