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

関連記事

  1. Web関連

    ホームページ制作会社がまとめるカスタマーサポートに必要なポイント!

     お客様は神様!とは良く言ったもので、利用客からの苦情1つで企業の経営…

  2. Web関連

    iPhone 6sが気になる!!

    iPhone 6sが気になる!!アップルからiPhone 6sが発売…

  3. Web関連

    業界のWebトレンド調査!スポーツ用品メーカーのサイトについてまとめてみました

    最近朝や夜が涼しく、ちょうどよい気温でとても過ごしやすいですね。私の友…

  4. Web関連

    ECサイトの売上を向上させたい 第2回目

    連載第2回目の今回は、「ポイントはひとつ!効果にこだわれ!」について触…

  5. Web関連

    小売業界必見!ビジネスの見方が変わる!?小売業界のミライ予測

    小売業のECチャネル進出が当たり前になった今、小売業のビジネスのカタチ…

  6. Web関連

    実は日本が発祥だった…!?ホワイトデーに隠された真実!!

    皆さんウキウキ、ワクワク、ショボーンの「バレンタインデー」を迎え、1ヶ…

自治体向けDX推進サービス

AIさくらさん for 自治体DX

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    自前のサイトとプロのWeb制作会社が作ったサイト、どこが違う?
  2. Web関連

    web制作会社が考える更新メンテナンスのポイント
  3. DX関連

    知っているようで知らない。Googleについてまとめてみる
  4. Web関連

    「ビデオコンテンツ」が主流!デジタルマーケティングの今を見る
  5. AI関連

    採用にもテクノロジーを!
PAGE TOP