ゲームや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でユーザーを一括登録する「Import Users from CSV」の使い方

WordPressを複数のユーザーで管理したい時、1人ずつ登録するのは大変だと思います。 そんな時はWordPressのプラグイン「Import Users from CSV」を使って効率化しましょう …

Darkmode.jsでブログにダークモードを実装してみた

最近、ダークモードが流行っている気がします。 長時間スマホを使う人が増えたので、明るい色だと目が疲れるんですかね? このブログのカラーは白なんですが、ブログの機能としてダークモードを実装してみようかな …

【3分で完成】CSS3だけでSVGアニメーションロゴ作ってみた

あまりにも地味すぎて、気づいている人はいないかもしれないけど…このブログのロゴはSVGをアニメーションさせています。 ページを読み込んだ時、線を書くようなアニメーションでロゴが表示されます。 イラスト …

WordPressの記事複製プラグイン「Duplicate Post」が便利すぎた。

仕事でWordPressを使っていると更新作業の時、全く同じ記事を複製する場面があります。 WordPressでWEB制作している人なら恐らく経験があるんじゃないかと思います。 わざわざ新規ページを作 …

クリック率をアップさせるボタンはHTML+CSSだけで超簡単に作れます

Webサイトを作る時、ボタンのデザインは意外と重要です。 ボタンのデザイン次第でクリック率が変わってしまうのは、実際に身をもって体験しています。 ちょっと前まではPhotoshopでボタンを作ることが …

この記事をシェアする

ranking人気の記事

plofileプロフィール

運営者:ERA
職業:WEBクリエイター
趣味:ゲーム
仕事中はずっとパソコン、家に帰るとずっとゲームをして1日中ブルーライトを浴び続ける生活をしています。
詳細はこちら