ウェブデザイナーの仕事③ワイヤーフレーム作り

ワイヤーフレーム作るには?

ワイヤーフレーム作るのなら手描きでも十分できます

とはいえ手描きで考えるのはひとりで進めていく場合のみです。

別のスタッフと共同で作業を行っていくのであれば、共同で作業が行えるソフトウェアが必要になります。

私が知っているもので2つあります。

Cacoo

Cacooはフローチャート、ワイヤフレーム、UML図、ネットワーク構成図などを作成して安全に共有するためのオンライン作図…

オンラインで共同で作業が行えるクラウドサービス型のデザインツールです。

リアルタイムで一緒に作業することができ、他のデザイナーが作ったアイデアにコメントを残したり、自分が変更した部分を履歴として残すこともできます。

Cacooでは、ワイヤーフレームだけでなく、サイトマップ作業フローチャートの作成もでき大変便利なツールで250万人以上のユーザーが利用しています。目的別のテンプレートも用意されていて大変使い勝手がよくなっています。

フローチャート、ワイヤーフレーム、ネットワーク構成図、UMLなどのテンプレートを使ってCacooで無料で図を作成しましょ…

一人なら無料トライアルで利用できます。正式に利用する場合は3人以上のユーザーの参加で最低で月額600の支払いが必要になります。詳しくは公式サイトをご覧ください。

AdobeXD

Adobe XDスタータープランを無料でダウンロードできます。XDは、webサイトやモバイルアプリのデザインに適した、U…

私が以前加入していたオンラインサロンのメンバーから教えていただいたデザインツールで、PhotoshopやIllustratorで有名なAdobe社が開発しています。こちらでは、オンラインでもオフラインでも使えるようになっています。

またXDでも他のデザイナーとの共同制作が可能で作業のやり取りについてコメント等で共有することができます。

ちなみにこちらのツールを使えば一気にWebページの完成図(デザインカンプ)まで作れます。

もし手順を短縮したいのなら、ワイヤーフレームデザインカンプAdobeXDで行うのも一つの手です。

料金については契約したプランによって変わっていきます。契約プランについては作業に使うアプリをどれにするか決めておいてから最適なものを選ぶといいです。詳しくは公式サイトをご覧ください。

Adobe Creative Cloud プラン比較表…

最低でもPhotoshop、Illustrator、AdobeXDの3つが使えるものを選んでおきましょう。
余談ですが、同じAdobe社が開発したアプリでAdobeCompというものがあります。

Adobe Compで、ワイヤフレーム、レイアウト、モックアップを簡単に作成。Creative Cloudデスクトップア…

こちらだと、スマホタブレットを使ってワイヤーフレーム作りが行えます
ですが、スマホの作業だと正直使い勝手がよくないので作業するならせめてタブレットで作業するか、CacooやXDを使う方がいいです。

 

記事内容よかったらフォローお願いします。