ゲーム大好きWEBデザイナーの雑記ブログ

WEB関係

ワイヤーフレームを作るなら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デザインです。







この記事をシェアする

関連記事

WordPressで勝手に設定されるロゴのファビコンを消す方法

WordPressの最新バージョンをインストールすると、勝手にWordPressのロゴがファビコンに表示されるようになりました。 ↓こんな感じです…。   勝手にファビってんじゃねぇよ…。 …

Microsoft Edgeを使うメリットはあるのだろうか

Microsoft Edgeとは Internet Explorerに代わり、Windows10で登場した標準ブラウザ。 新機能が追加され、IEと比べると読み込み速度の高速化・セキュリティの強化が行わ …

iPad版のPhotoshopが使いにくすぎて絶望した!「WEBデザイン無理です」

どうも、WEBデザイナー(笑)のERAです。 最近はPHPのプログラミングがメインですが、WEBデザインもひっそりと続けております。 iPad Proを持っているので、「せっかくならiPadでPSDデ …

勉強せずにWebアナリスト検定に挑んだら難易度がヤバすぎた件

つい最近、「Webアナリスト検定」という試験を受けてきました。 いまさら資格なんていらないだろ…と思いつつも、会社から「金は出すから受けてこい」と言われたのでやむなし。 「Webアナリスト検定」とは、 …

PDFのパスワード解除方法が簡単すぎた

クライアントから頂いたPDFデータにパスワードがかかっていたときの話。 仕事で、別の制作会社が作成したPDFをもらう時がたまにあります。 PDFにロックをかけて、データの編集や抜き取りを防ぐんですが、 …


コメント

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA