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. 新しい販売形態であるDtoCについて考えてみる
  4. AIに求められているものは、実は意外な物だった

関連記事

  1. Web関連

    段取りで大変な大掃除も負担軽減できる

    年末準備には大掃除・年賀状の準備・御節の準備などがありますね。特に大変…

  2. Web関連

    ホームページ制作会社が紹介する3つのブランディングポイント

    流行には常にアンテナを張っていなければいけないお仕事だったりするわけで…

  3. Web関連

    IoT、IoEの違いと今後の可能性

    インターネットの環境が整備され技術も発達したことにより新たに登場し…

  4. Web関連

    【人工知能・AI×CSR】最新技術で実現する新しい社会貢献の形

    CSRって何?CSRという言葉、企業のWebサイトではよく目にするか…

  5. Web関連

    Web制作でも重要!顧客満足度を高めるための3つポイント

    ちょっと前にうちの社長が「本を読むときに、オススメ!コレめっちゃ便利」…

  6. Web関連

    WordPressをCMSとして活用するためのプラグイン Custom Post Type UI の…

    こんにちは! 先週「宇宙戦艦ヤマト2199 星巡る方舟」を見てきたSE…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    QRコードとO2Oマーケティング
  2. Web関連

    初心者でもわかる!グーグルアナリティクスについて
  3. Web関連

    IoTの情報セキュリティに関して学んできた
  4. Web関連

    ただ面白いだけではない…ゲーミフィケーションを活用したアプリ
  5. AI関連

    AI(人工知能)がデータを分析して正確に在庫管理するサービス・システムが続々実用…
PAGE TOP