手書きでワイヤーフレームが作れちゃう!!Adobe COMPを使ってみた

ワイヤーフレーム

念願のiPadを購入し、ワイヤーフレームを簡単にiPadで作れるという記事を見かけて気になったので早速無料で使えるAdobe COMPを使ってみました。今回は使ってみてどんな感じなのか、ご紹介します。

目次

ワイヤーフレームとは

ワイヤーフレームとは、WEBデザインを作るときに、ざっくりとどんな構成にするか考えるときに作成するものです。

実際サイトを作るときは

  • サイトマップ(サイトに必要なページ数、項目、サイトの階層を考える)
  • ワイヤーフレームを作る(手書きでイメージを形にする→クライアントに見せるために清書する)
  • WEBデザインを考える(写真、フォント、イラスト構成など)
  • コーディング

ざっくりと↑の工程で作成します。ワイヤーフレームは最初の段階で必要になってくるものです

ワイヤーフレームを作るツールとしては

などがあります。依頼者様から仕様書が既にある場合は作成しなくてもいいのですが、
何もない状態の場合はこちらで提案、作成する必要があります。

Adobe COMPとは

AdobeCOMPとは
AdobeCOMPダウンロードページより引用

Adobe COMPとは無料で使えるiPhone、iPad専用のワイヤーフレームアプリです。アイデアを思い付いたらその場でアウトプット。Photoshopやillustratorなど他のツールと共有できたり、PDF化やURLで共有することもできます。

AdobeCOMP
Adobe COMP公式サイトより引用

この左の画像、衝撃的ではないですか??手書き、もしくはペンツールでなぞるように描くだけでワイヤーフレームを作ることができる…画期的すぎではないですか?これはAdobe COMPの凄さです!!

Adobe COMPの凄いところその① Adobe stockの写真使える

アプリ内の写真のツールから簡単にAdobeAtockへのリンクが可能なので、豊富な写真からデザインを作ることができます。有料のものもそちらから購入可能です。

Adobe COMPの凄いところその② フォントがAdobeのものが使える

無料フォント、またはデバイスにインストールされた Adobe Fontの利用ができちゃいます。

Adobe COMPの凄いところその③ Creative Cloudライブラリと同期している

Photoshopなど他のツールを使っている人ならば、他で使用している画像やコンテンツなどを利用することが可能です。

Adobe COMPの弱点

私が使ってみて感じている弱点について

  • キャンパスサイズの変更ができない&高さは上限あり??
  • Photoshopなどへの転送には時差がかかる??
  • あまり情報がない…

キャンパスサイズは最初に指定したものから変更のやり方がわかりませんでした…余った分、短くしようと設定したら必要な部分が切り取られてしまって…ググったんですが、キャンパスサイズの変更について全然情報がなく…利用者数少ないんですかね…

それと、作ったものをPhotoshopに送り清書しようとしたのですが、何度やっても送れない…Adobeにログインしなおしたりいろいろ試したけどうまくいかず、あきらめてAdobeXDでワイヤーフレームを作り直したのですが、完成直前になっていきなりPhotoshopに反映されるというよくわからない事態になりました。これはどういうことなんでしょうか???

よかったらシェアしてね!

この記事を書いた人

調剤薬局にてフルタイムの薬剤師をしながら副業でweb制作&お薬相談。ココナラ売り上げ実績50件以上オール5評価いただいております。Wordpressカスタマイズにて個人向けblogサイト構築から美容系サロンのサイト、コーポレートサイト、ペライチサイト作成実績あり。低価格で品質、初心者でも安心な丁寧なやり取りを心がけております。お仕事の依頼も随時受付中です。

コメント

コメントする

CAPTCHA


目次
閉じる