ウェブサイトやブログの情報量が増えると必要になるのがリニューアル作業。
立ち上げの際に完璧な情報設計と導線を作っていれば必要がないかもしれませんが、ブログを始めとする情報蓄積型のコンテンツでそれをやるのは難しいと思います。
このブログも適当な設計で立ち上げてしまったので情報をまとめる必要が出てきました。 WEBデザインではUI/UX設計の仕事が多いので、AdobeがリリースしたUI/UX専用ツールであるAdobe XDを使用してレスポンシブのWEBサイト設計をしてみました。
結論から言うとPhotoshopとIllustratorが業務レベルで使用でき、ワイヤーフレームやUX設計などのデザイン上流工程に関わる人にとっては便利なツールです。
WordPressを使い自分でテーマを作っているブロガーには最高のツールではないでしょうか。
Adobe XDとは
ユーザー体験（UX）を重視したサイトやアプリ設計をするために開発されたデザインツールです。
PhotoshopやIllustratorのようにデザインを作り込むものではありませんが、デザインの枠（ワイヤーフレーム）などを直感的に作ることができます。
公式URLに【experience-design】が使われていることからAdobeの本気を感じます。
http://www.adobe.com/jp/products/experience-design.html
複数パターンのデザインをアウトプットするためのツールが豊富
UI・UXという考えがWEBデザインで浸透してWEBデザイナーの仕事の仕方も変わりつつあります。
特にWEBサービスやアプリ開発のデザインで如実なのがPCや紙でのデザインを見ても実機で動作確認するまで良いデザインかわからないということです。 そのためWEBデザイナーがHTMLだけで骨組みだけ組んで使い勝手を確認したり、スマホにデザインカンプ（Photoshop上で作ったデザイン）を読み込ませてタップで次の画面に遷移させたりと、四苦八苦したデザイン現場も多いと思います。
ボトルネックになっていたプロトタイピングを高速に行えるツールがAdobe XDには豊富に揃っていました。実際のデザインの組み立てと一緒に機能をご紹介します。
ほぼすべてのデバイスに対応したキャンバス
スマホ・タブレット・PCの主要サイズが網羅されているため、めんどうな初期設定でサイズを指定する必要がありません。
大量のデザイン案を１つのプロジェクトまとめることができるキャンバス
PhotoshopのWEBサイト専用のキャンバスやIllustratorなどもAdobeCCになってから複数キャンバスを使用できるようになりましたが、Adobe XDはデザインを作り込む作業ができない代わりに軽快に動作します。
WEBサイトの複数案とレスポンシブデザインなど10ページほどデザイン案をAdobe XDで制作しましたが最初から最後まで動作が重くなることはありませんでした。
同じようなデザインの繰り返しを補助するリピートグリッド
Adobe XDの売りの１つでもあるリピーグリッド。複数連続するデザインを１つのまとまりにして自動でリピートできる機能です。
デザインした要素を複数選んでグループ化することで、この要素を連続で表示させることができます。要素のマージンの指定も細かくできます。
この機能の面白いところはFinderから画像をドラッグアンドドロップするとリピートグリッドの中にある画像要素が自動で置き換わるところです。
5枚の写真をリピートグリッド中に入れると、画像5パターンのデザインがリピートされます。「ダミー画像だとイメージが湧かない…」という問題を素早く解決できます。
実際の動作を確認できるプロトタイプ
UX設計で一番便利だと思ったのが画面の遷移を実際のデバイスサイズで行なうことができるプロトタイプ機能。
今までスマホに画像を落とし込んで確認したり、HTMLで骨組みを組むストレスから開放されます。
遷移させるボタンを遷移先を指定する
Adobe XDでデザインしたキャンバス同士を繋ぐことでプレビューした時に実際のスマホやWEBサイトと同じような動きをします。
同じデザインの上にメニューを加えた２つの画面を作成すれば、スライドメニューなどの使用感の確認もできるすぐれものです。
遷移先を指定したらプレビューで確認
Command＋Enterでキャンバスで指定したサイズでプレビューができます。
プロトタイプ画面で指定したリンクをクリックすると遷移します。情報設計やファーストビューに違和感がないか、使い心地がいいか、目的の情報に最短でたどり着くことができるか。そういったUXの基本構造を確認するには便利です。
プレビューを録画してプロジェクトで共有可能
Adobe XDの便利だと思った点がプレビューを録画してmov型式で保存できることです。
UX施策のために第三者を呼んで観測をする前にデザイナーやディレクターなどを集めて、それぞれにAdobe XDを使用してもらいウェブサイトやアプリをどのように使用するのかの確認を取るという使い方もできます。
WEBサービスを作る際のレビューで使用すると開発がスムーズに進むかもしれないと思いました。
操作感はIllustratorとほぼ同じ
ドキュメントを殆ど読み込むことなくスムーズにデザイン作業をすることができました。ラーニングの動画をさらっと見た程度です。
https://helpx.adobe.com/jp/experience-design.html?promoid=3SH1B97W&mv=other
ワイヤーフレームを書くWEBディレクターやUIUXスペシャリストだけではなく、Adobe製品を使用しているほぼすべての人がストレスを感じることなく作業をすることができそうです。PhotoshopのみでWEBデザインをしているデザイナーはこれを期にIllustratorの勉強をしてみる価値はあると思います。
ブログデザインに最適。それがサイトリニューアルデザインをすべてAdobe XDでおこなった感想
ブログなど情報を発信するウェブサイトの設計には理想的なツールだと感じました。
PhotoshopやIllustratorだと、できることが多すぎてデザインの細部がきになったりもしますがAdobe XDは画像の配置と簡単なオブジェクトしか作れないため無駄なものが削ぎ落ちミニマルなものができあがります。
「余計なことができない」ということから自然と情報整理（インフォメーションアーキテクチャ）やサイトの導線設計に費やす時間が増えます。 加えて作ったページ同士をつなげてプレビューすることで使用感の確認をすることができます。 WEBデザインは本来ならばコンテンツ内容はプロデューサーやディレクター、情報設計はIA・UIやUXも専門家が入り、WEBデザイナーは彼らと話し合いながらサイトを作っていきます。
しかしフリーランスのWEB屋やブロガーはこれらをすべて１人で行わう必要があるので、目に見える技術でないUIやUXを考えることが難しいと感じます。 そういう意味もありブロガーがよりユーザーに対して最短距離で情報を伝え、使いやすいサイトを作るためには有効なツールだと感じました。
スポンサーリンク
コメントを残す