WEBサイトのデザイン完成しました！いかがでしょうか？
なんか思ってたイメージと違うなぁ…。やり直し。
ファッ！？（絶望）
デザイナーなら一度は体験するであろう出来事。
クライアントとの食い違いをなくす為にも、事前にワイヤーフレームを作って情報やイメージを共有することが大切です。
ワイヤーは紙に手書きでササッと書くのが一番早いんですが、走り書きのワイヤーフレームをクライアントに見せるわけにもいきません（時間をかけて綺麗に書く人もいますが）。
結局無料ツールやPhotoshopなどでカンプを作ることになるんですが、めんどくさいんですよね。
サイト設計を考える時間は大事だけど、ワイヤーフレームにあまり時間をかけたくない！
そんな人には無料のアプリ「Adobe Comp」が超便利なのでオススメです。
Adobe Compとは
iOSとAndroidの無料アプリです。
スマホ・タブレットで簡単にカンプを作ることができます。
外出先でのちょっとしたスキマ時間に作業することができるので、デザイナーは入れておいて損はないアプリです。
個人的にはiPadとペンの組み合わせがオススメ。
スマホでもできるとはいえ、Webデザインのピクセル単位の調整はスマホの画面だとちょっとやりにくいので。
Adobe Compのメリット
紙にワイヤーフレームを書くより早い＆綺麗
ワイヤーフレームはまず紙に書いてみるのが一般的だと思います。
僕は手書きが汚すぎて、最初からPhotoshopでワイヤーフレームを作ることもありました…
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サイトっぽく整えてみる…
やばい、このブログ記事に使うためだけに作ったとはいえ…流石に適当すぎた（笑）
画像を探す時間も含めて大体3分くらいで出来ました。
円状に切り抜いた画像がありますが、円をタップして画像を設定しただけです。
特殊な操作は何もしてません。紙に書くより何倍も効率がいいですね！
Photoshopでやるような作業が誰でも簡単に出来ます。素晴らしい。
こんな感じで画像やボタンなども見せてあげれば、クライアントもかなり完成品をイメージしやすいはずです。
とはいえ、よほどシンプルなサイトでない限り、Adobe Compでデザインを完璧に作るのは至難の技です。
あくまでカンプとして使い、仕上げはXDやPhotoshopなどでしっかり作りこみましょう。
あと、欠点として手書きの文字を書き込めないのはちょっと痛い。
ちょっとした注釈もキーボードで文字を入れる必要があるので注釈を多めに使う人には向いてないかもです。
ちょっとレイアウトのアイデアを残しておきたい場合や、クライアントからヒアリング中に言われたことをそのまま書いたりと、有効活用できる場面はかなり多いと思います。
Adobe CompではWebデザイン以外のカンプ（紙のA4など）も作れますが、実用的なのはやっぱりWebデザインですね。
