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. 新しい販売形態であるDtoCについて考えてみる
  3. AIに求められているものは、実は意外な物だった
  4. 新型コロナウイルスで日本の働き方改革が起こる

関連記事

  1. Web関連

    やっぱり、顧客育成って大事。って感じた出来事

    ユーザーの興味毎に、適切なアプローチをしないと。そうは分かっていても、…

  2. Web関連

    初心者Webデザイナーが「ダサい」から脱却する方法とは?

    Webデザイナーとして仕事をするようになってから、より強くなったひとつ…

  3. Web関連

    モックアップ主導のUI・UXの検証!デザインはこうして着手!

    皆さんはホームページ制作をするとき、どのように進めていますか?…

  4. Web関連

    お薬手帳、電子版のススメ

    みなさんはお薬手帳を持ち歩ていますでしょうか。常に病院で薬を処方されて…

  5. Web関連

    最近話題の「ニュースアプリの傾向」で検索してみた

    どうも!完全主観をモットーに記事を作成していく コンサル(仮) の…

  6. AI関連

    マーケティング4.0におけるAI/WEB制作会社としての行動について考えてみる

    目次- 接続性について考えてみる- 新しいタイプの顧客について…

おすすめ記事

最近の記事

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

アーカイブ

  1. AI関連

    RPAが解決する単純作業! ~ECサイト活用編~
  2. Web関連

    東京オリンピックに向けインバウンド対策を!
  3. RPA関連

    専門性の高い不動産会社の定型業務をRPAで自動化
  4. Web関連

    リッチな表現でサイトを彩る -SVGアニメーション(線画)-
  5. Web関連

    料理が上手い人は仕事も出来るのか
PAGE TOP