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

関連記事

  1. AI関連

    【新型コロナとの戦い方】ロックダウンか集団免疫獲得か

    5月29日現在、日本国内の新型コロナウィルス(COVID-19)感染状…

  2. SNS関連

    便利なSNSの陰には危険がいっぱい!?

    こんにちは!SNS初心者のデザイナーY.Kです。みなさんはSN…

  3. Web関連

    ネット通販で買える生き物

    生き物大好き。犬派だけど猫を飼っています。何でもネット通販で買える便利…

  4. Web関連

    進むペーパーレス化

    地球に優しいペーパーレス地球温暖化などの脅威に対して、エコ活動は随分…

  5. Web関連

    時代はハンドメイド!作品を魅せるWebデザイン!

    最近、ハンドメイド雑貨のWebサイトへ誘導する広告が増えていると思いま…

  6. Web関連

    和とパララックスデザインから生み出される魅力

    さてさて、以前スマホとパララックスデザインについてお話をさせていただ…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    こんなリクルートサイトは困る!就職活動中の学生が避けるサイトとは?
  2. Web関連

    日本の美徳を活かしたインバウンド接客をとりいれよう!
  3. Web関連

    エクセル管理はもうやめよう!プロジェクト管理ツール「Backlog(バックログ)…
  4. Web関連

    そのオムニチャネル、大丈夫ですか?
  5. AI関連

    【人工知能(AI)×ホームページ解析】Googleアナリティクスの新機能「ユーザ…
PAGE TOP