ワイヤーフレームを作るならAdobe Compが超実用的【iPad・スマホ】

最近iPad Proを買ってから、ワイヤーフレームはずっとAdobe Compで作っています。便利すぎる。

Webサイトの制作を進める工程で、デザイン、コーディング、システム制作などがありますが、序盤の重要な工程として「ワイヤーフレーム」の作成があります。

イメージの食い違いを防ぐために、まずは設計図であるワイヤーフレームを作る必要があるのです。

Webサイト制作ではかなり重要ですが、多分ワイヤーフレームを作らずにいきなりデザインを始める人もいると思います。

経験上ワイヤーフレームを作らずにデザインを作ってもなんとかなる場合が多いですが、20%くらいの確率で↓こうなります。

設計段階で意図が間違っていたらこうなります。

クライアントの「コレジャナイ」をなくす為にも、ワイヤーフレームを作って情報やイメージを共有することが大切です。

紙に手書きでササッと書くのが一番早いんですが、走り書きのワイヤーフレームをクライアントに見せるわけにもいきません（時間をかけて綺麗に書く人もいますが）。

結局無料ツールやPhotoshopなどでカンプを作ることになるんですが、めんどくさいんですよね。ワイヤーフレームに時間をかけたくない！

そんな人には無料のアプリ「Adobe Comp」が超便利で実用性が高いのでオススメです。

Adobe Compとは

iOSとAndroidの無料アプリです。

スマホ・タブレットで簡単にカンプを作ることができます。

外出先でのちょっとしたスキマ時間に作業することができるので、デザイナーは入れておいて損はないアプリです。

個人的にはiPadとペンの組み合わせがオススメです。

スマホでもできるとはいえ、Webデザインのピクセル単位の調整はスマホの画面だとちょっとやりにくいので。

Adobe Compのメリット

紙にワイヤーフレームを書くより早い＆綺麗

ワイヤーフレームはまず紙に書いてみるのが一般的だと思います。

僕は手書きが汚すぎて、最初からPhotoshopでワイヤーフレームを作ることもありました…_(:3」∠)_

Adobe Compではジェスチャーで自動的に適切な図形を描画できるので、手書きよりも早く書けて、見た目も圧倒的に綺麗です。

でも、Adobe Compならワイヤーフレームの作成に特化しており、超走り書きで書いても自動的に綺麗に整えてくれます。

使えるジェスチャーは下記の通り。

手書きでこれらのジェスチャーを書けば、自動で正方形や円、そして文字や画像まで挿入してくれます。

Photoshopでワイヤーフレームを作る場合は、長方形ツールや文字ツールなどを毎回切り替える必要がありますが、Adobe Compはツールの切り替え無しで、全て手書きで作ることができます。

僕がAdobe Compを使う前はPhotoshopでワイヤーフレーム作成→OKならそのままデザイン…という流れだったんですが、今はワイヤーフレームは完全にAdobe Comp一択です。

手書きのほうが作業も早いですし、個人的にマウスを動かすよりペンを動かしたほうがイメージも出てきやすいので、かなりの時間短縮になりました。

Adobe Stockの画像が使える

これも手書きやPhotoshopより圧倒的に優れている部分ですが、画像を簡単に挿入できます。

しかもAdobe Stockの写真をダミーとして使うこともできるので、例えば「ビジネス関係の画像が欲しい」という時はアプリ内で「ビジネス」で検索すればすぐ見つかります。

候補の画像一覧が出てきます。Adobe Stockの画像ラインナップはかなり豊富なので、欲しいものはすぐ見つかると思います。

一覧から使いたい画像を選択すればワイヤーフレームに即反映されます。超便利。

クライアントに見せる際は、それっぽいダミーの写真があったほうがイメージしやすいと思います。

わざわざフリー画像をネットで探す手間が省けるのでかなりの時間短縮になりますね。

ちなみに、Adobe Stockの画像を本番でも使いたい場合は有料なので注意。

あくまでAdobe Comp用のダミーとして使用できます。

初心者でもデザインできる

ワイヤーフレームの作成は会社によってデザイナーだったりディレクターだったりすると思います。

「手書きでなんとなく書けるけど、PhotoshopやIllustratorのツールは使えない…」という人でも、Adobe Compを使えばそれっぽいデザインができてしいます。

Adobe Stockの画像も有料プランならそのままデザインに使えますし、画像の切り抜き機能・透明度・文字色の調整もできます。

さらに、同じAdobeの別アプリとの連携で、Adobe Compだけで画像の補正まで出来てしまうのです。

しかも無料。これにはPhotoshopも涙目。

例えばこんな感じの超シンプルなワイヤーフレームを作ってみる。

ちなみに、このワイヤーフレームを作るのに30秒もかかりませんでした。

割と適当に走り書きしただけですが、かなり綺麗に整えてくれます。

手書きなら絶対汚くなるし、Photoshopなどのツールならもうちょい時間がかかるはず。

で、このワイヤーフレームを元に、更に分かりやすいWebデザインのイメージもAdobe Compで作ってしまいます。

↓画像やボタンなど、ちょっとWebサイトっぽく整えてみる…

ツッコミはNGでお願いします( ˘ω˘)

画像を探す時間も含めて大体3分くらいで出来ました。

円状に切り抜いた画像がありますが、円をタップして画像を設定しただけです。

Photoshopでやるような作業が誰でも簡単に出来ます。素晴らしい。

こんな感じで画像やボタンなども見せてあげれば、クライアントもかなり完成品をイメージしやすいはずです。

とはいえ、よほどシンプルなサイトでない限り、Adobe Compでデザインを完璧に作るのは至難の業なので、あくまでカンプとしてクライアントに見てもらった後は、Photoshopなどでしっかりデザインを作りこみましょう。

あと、欠点として手書きの文字を書き込めないのはちょっと痛いかな。「ここは動くよ！」といった注釈もキーボードで文字を入れる必要があるので注釈を多めに使う人には向いてないかもです。

ちょっとレイアウトのアイデアを残しておきたい場合や、クライアントからヒアリング中に言われたことをそのまま書いたりと、有効活用できる場面はかなり多いと思います。

Webデザイン以外のカンプ（紙のA4など）も作れますが、実用的なのはやっぱりWebデザインです。