Web関連

思い通りのWebサイトにぐっと近づく!プロトタイピングツール「AdobeXD」の嬉しいポイント4選!

0

こんにちは!デザイナーの石井です。
皆さん、日頃の業務ではどんなツールを使っていますか?
デザイナーの私はもちろんおなじみのIllustratorとPhotoshop…と、思いきや、最近メインで使用しているのは別のツールなんです。
Webデザイナー歓喜のツール、AdobeXD(アドビ エックスディ)です!

Webや開発に関するお仕事をしている方以外は初めて聞くツールかもしれませんが、今となってはWeb制作には欠かせない便利ツール。私達制作者だけでなく、Web制作のご依頼をくださるお客様側にも嬉しい要素がたくさんあるAdobeXD。今回はその魅力をご紹介していきたいと思います!
【目次】
1.AdobeXDとは?
2.AdobeXDのココが便利
・ページ遷移を設定できる!
・実機で確認できる!
・お打合せ中でも簡単に調整ができる!
・コメントができる!
3.まとめ

1.AdobeXDとは?

Photoshopは写真の加工、Illustratorはロゴ等の画像データ作成を得意とするのに対し、
AdobeXDは「プロトタイピング」に特化したデザインツールです。近頃ティファナでは、画面設計の作成~デザインの作成までをAdobeXDで行っています。

プロトタイピング(Prototyping)とは、実働するモデル(プロトタイプ)を早期に製作する手法およびその過程を意味する。 その目的は、設計を様々な観点から検証する、機能やアイデアを形にすることでユーザーから早めにフィードバックを得るなど、様々である。
引用元:プロトタイピング – Wikipedia

今まではPowerPointや Excelで画面設計を進めることが多く、いざデザインやhtmlが出来上がってみると「思っていたのと少し違ったからもっとこうしたい」というアイデアが出てくることが度々ありました。ですが、XDを使用した場合は、画面設計の時点で実際のサイトに近い形(プロトタイプ)でお見せすることができるので、Webサイトの画面設計・デザインの制作がかなりスムーズになりました。

2.Adobeのココがすごい!

それでは、前置きはこの程度にしてAdobeXDの嬉しい機能をご紹介していきたいと思います!
制作者サイドに嬉しい機能も山程ありますが、今回はお客様にちょっとうれしい機能をピックアップしました。

1)画面遷移を設定できる!

XDでは画面の遷移を設定できます。
大型のサイトや、込み入ったシステムが組まれた案件だと特に「このボタンを押したらどのページに遷移するんだっけ。」「この条件の時にボタンを押したらどの画面が表示されるんだっけ。」等を思い出す事に時間がかかり、サイトをより良くする為のご要望を出すのが難しいことも度々あります。
ですが、画面設計・デザインの段階から画面遷移の流れを確認できるので、イメージも付きやすいですし、社内の方への共有も非常に簡単なんです。
Image from Gyazo

2)実機(PC/スマートフォン)で確認できる!

XDで作成したデータは画像書き出しだけではなく、確認用URLを発行することもできます。
PCはもちろん、スマートフォンからでも実物サイズの画面設計・デザインが確認できます。
実機だからこそ、下記のような実物を見なければ気づかないような観点で画面設計やデザインを見ることができますね。

  • 原稿が長すぎて画面が文字だらけになっていないか
  • 見せたい要素(お申込みボタンや、訴求したい情報等)がちゃんと目立っているか
  • 追従要素(ヘッダーやページトップへ戻るボタン、追従表示させるバナー)がコンテンツの邪魔になっていない
  • ナビゲーションやボタンは操作しやすいか

AdobeXDを使い始める前は、印刷した資料をお渡ししていましたが、総計100ページ超の資料をめくりながらお打合せするより、実際の端末でスクロールしながら確認する方がお手軽ですね。打合せ後に資料をシュレッダーにかける手間もいりません。

3)お打合せ中でも簡単に調整ができる!

Photoshopと比べると圧倒的にツールが軽いので、ちょっとしたバランス調整やデザイン変更なら打ち合わせ中に簡単に修正できます。
「ここ、もう少し位置をずらせないかな?」
「もう少しボタンの色を明るくしたいんだよね」
等の細かな位置・サイズ・色の調整がその場でできると、スムーズにイメージ通りの構成案・デザインが出来上がるので大助かりです。
更に!前述の通り、確認用URLを発行できるので、一瞬で最新データが全員の手元に届きます。
「…では、今頂いたご意見の通り調整したデータを明日送付するので、イメージに相違ないかご確認下さい」なんてやり取りをするよりずっと効率的で、間違いが無いですね。

4)コメント機能が便利!

AdobeXDはコメント機能も充実しています。修正要望や、仕様に関する備忘録を簡単に残せます。
「TOPページの選ばれる理由の箇所のボタンの色が少しイメージと違うんですが、もっとこんな風に変えてくれませんか?」
のように、丁寧に文章を書いていたら意外と時間がかかってしまった…なんて経験はありませんか?
コメントがどこを指しているかをマークする「ピン」を立てることもできるので…
Image from Gyazo
このようにして頂けると、説明の手間いらずで一瞬です。
認識の差異もできませんし、誰でも見られる場所に記録が残るのでとても便利ですね。

3.まとめ

いかがだったでしょうか?
お客様と二人三脚でWeb制作を進める私達にとって、重要なのは「いかに正確にイメージを共有し、理想通りのサイトを作るお力添えができるか」です。
AdobeXDは2017年10月にリリースされたばかりのツールですが、今でも毎月新機能がリリースされています。
どんどん便利になるWeb制作の強い味方、AdobeXDから今後も目が離せません!

0

【バズるコラム】10年間記事を書き続けた無名ブロガーの「読まれるコラムを書きたい」前のページ

AWSってなぁに?次のページ

ピックアップ記事

  1. AIに求められているものは、実は意外な物だった
  2. 新しい販売形態であるDtoCについて考えてみる
  3. 新型コロナウイルスで日本の働き方改革が起こる
  4. 大手企業も注目するMaaS(Mobility as a Service)とは何か…

関連記事

  1. Web関連

    Google CardboardでVR体験をしてみた

    皆さんこんにちは。最近屋内と屋外の寒暖差にやられている堀井です。PCを…

  2. Web関連

    作りっぱなしにNO!PDCAを回して、効果的なWEBサイトにしよう   第1回:そもそも、PDCAを…

    そのWEBサイト、作りっぱなしになっていませんか?Webサイトを立ち…

  3. Web関連

    デジタルマーケティングのインターネット広告について

    最近いろんなところで聞こえるようになってきたデジタルマーケティングはた…

  4. Web関連

    Webデザインの95%はフォントで決まる?!Webデザイナーなら知っておきたい3つのポイント

    Webデザインの95%はフォントで決まる?!Webデザイナーなら知って…

  5. Web関連

    整理術を磨いて仕事の処理速度をアップ?!佐藤可士和から学ぶ仕事の取り組み方

    こんにちは!最近、やりたい事が多過ぎて困っているデザイナーの大和田です…

  6. SNS関連

    マーケティングツールとしてSNSを使いたい

    消費者のロイヤリティーを向上させるマーケティングが重要マーケティン…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    集中力を上げたい人必見!おすすめストリーミングサイト
  2. Web関連

    仕事で使える!スマホ、iPodで印刷が出来るプリンターアプリ
  3. Web関連

    忙しいビジネスマンにオススメ!のLINEのサービス
  4. Web関連

    多言語翻訳Web制作は今や常識。あの人気スポットも!?
  5. AI関連

    非接触AI技術が世界を救う?
PAGE TOP