Adobe XD事例：ヤフー株式会社 eスポーツサイト – 新しいデザインツールとしてAdobe XDを評価

Adobe XD事例

Yahoo! JAPANが運営する「Yahoo!ゲーム」内に、eスポーツ（※1）情報を発信する新サイトが開設されました。eスポーツは、世界各国でプロチームやプロリーグが多数存在し、急速な成長を遂げており、国内でも近年多くの大会が行われています。その日本における認知度向上と普及を目的とした新しい取り組みです。
制作に着手した2016年10月は、ちょうどアドビ最大のイベントMAXでAdobe XDのベータ版が発表され、Adobe XDが様々な媒体で話題になっていたタイミングでした。それらの記事に紹介されていた機能がプロジェクトに適しているという印象を受け、「Yahoo!ゲーム」を担当しているデザインチーム内でのツールの評価を目的として、Adobe XDが採用されました。
その際、特に注目していた機能はプロトタイプ機能だったそうですが、「ワイヤーフレーム – デザイン – プロトタイプ」をひとつのツールで対応できる点は、実際に使用してやはり強みだと感じたということです。
※1：「エレクトロニック・スポーツ（Electronic Sports）」の略

XDでデザインされ完成した新しいeスポーツサイト

Adobe XDを採用したメリット

簡単に使い方が把握できる
シンプルな使い勝手のワークスペースと他のアドビ製品に近い操作性で、初めてでもすぐに使えるように
レイアウト作業が容易
距離情報やガイドが表示されて細かい調整作業が容易。リピートグリッドは複数行をまとめて修正できた
シンボルやマスク機能で効率的にデザイン
画像配置はシェイプの塗りとマスクの使い分けで効率的に。複数ページに共通の要素はシンボル化して一括管理
プロトタイプ機能をデザイン時にもレビュー時にも活用
実機での操作性をリアルタイムで確認しながらデザインできた。レビュー時もプロトタイプでの確認を実施

簡単に使い方が把握できる

最低限必要なツールだけが用意された分かりやすいツールバー

始めて使ったAdobe XDでしたが、特に戸惑うこともなく、すぐに使いこなせるようになったとサービス開発部の武川健太氏は語っています。その理由のひとつはAdobe XDのワークスペースのシンプルな使い勝手でした。

「ツールバーにアイコンが大量に並ぶPhotoshopとは違い、最低限デザインするのに必要な数個のツールだけに絞られているため、何ができるのか最初に目にした時から把握しやすいと思いました。その他の機能も、基本的なレイアウトやデザインには十分なものが目の届く範囲に配置されていて、戸惑うことなく作業に入ることができました。もっと便利な機能が存在することに、後から調べて気付いたこともありましたが」

すぐに使いこなせたもうひとつの理由として武川氏が挙げたのは、既存のアドビのデザインツールと共通する操作性です。

「アドビの他のデザイン製品と使い勝手が似ていて、例えば描画ツールの動きなどは、ほぼ事前のイメージ通りに操作できたので、特に説明を見なくてもPhotohsopやIllustratorの経験がある人なら、すんなり入れると感じました」

レイアウト作業が容易

自動的にガイドや距離が表示され、簡単に等間隔に配置できる

武川氏が、ツールのシンプルな操作性に加えて、便利だと感じたもうひとつの特徴と話していたのはレイアウトのしやすさです。

「アートボード上に長方形を描いてから、移動させたり他の長方形に揃えたいとき、自動的に周囲のシェイプとの距離や、スナップの目安になるガイドを表示してくれて、細かい調整がやりやすかったです。それから、2つの長方形を並べて間隔を決めると、その後、次の長方形を等間隔に並べていくのが容易な点も便利でした」

情報サイトのデザインだったことから、ニュース記事や大会情報など、サムネイル画像を含むリストをいくつもレイアウトする必要がありました。その際に重宝したのがリピートグリッドだということです。

「リピートグリッドに変換すると、一行分の要素から、ドラッグ操作だけで複数行のリストに展開できて、更に、要素のマージンを一箇所調整すればすべての行に反映されるのが一番便利だったかもしれません。これはPhotoshopでは簡単にはいかない作業です」

シンボルやマスク機能で効率的にデザイン

ナビゲーションなど各ページに共通する要素はシンボル化されている

レイアウト作業に関しては、位置の調整だけでなく、画像の配置も行いやすかったと武川氏は話してくれました。

「プレースホルダーとして図形を並べておいて、画像をブラウザーからドラッグ＆ドロップするというやり方で、簡単に画像を並べたレイアウトをつくって確認できます。この方法だと画像が自動的に図形のセンターに配置されるのですが、レイアウトを確認してみて、画像の位置を右寄りにしたいと思った場合などには、シェイプでマスクする機能を使って位置を調整するという機能の使い分けをしました」

加えて、画像が増えても操作が重くならない点も、Adobe XDでデザインする利点であると武川氏は指摘していました。
また、複数ページに共通する要素のレイアウトには、シンボルを活用したそうです。

「ページのヘッターとフッターはシンボルを使用しました。各ページに配置したインスタンスはリンクされているため、一箇所を修正することで全ページをまとめて変更できたのが楽でした」

プロトタイプ機能をデザイン時にもレビュー時にも活用

スマートフォンサイトは常に実機で確認しながらデザイン

Adobe XDをインストールしたMacとデバイスをUSBで接続すると、デスクトップ上のデザインを、リアルタイムでデバイス上でプレビューし、操作もできます。武川氏はデザイン中、iPhoneをほぼ繋げっぱなしにして作業していたそうです。

「PCとスマホの両方のサイトをデザインしたのですが、スマホのサイトはデスクトップ上のデザインを見ても、ボタンの位置に親指が届くか、サイズが押し易いかとか、使い勝手の部分がイメージしにくいので、実機で確認しながらデザインできたのはありがたかったです。修正が即座に確認できるのがとても便利で、文字が小さいと思ったら、デザインを修正すると即座にテキストの読みやすさを確認できるため、効率的に作業できました」

チーム内のレビューでは実機に表示して確認するのが通例になっているそうですが、そうした場面でもプロトタイプ機能が役立ったそうです。

「従来は画像をデバイスに表示して確認していましたが、プロトタイプなので見た目だけでなく挙動も確認できますし、何か意見が出たときに簡単な修正であればその場で直して再確認も可能でした」

武川氏は、直接説明できない相手にデザインしたサイトの使い勝手を共有するために、Adobe XDの録画機能を使い、プロトタイプを操作する様子を録画して、その動画ファイルを共有することも行ったそうです。ひとつのツールでデザインとプロトタイプができることは、デザイン作業の効率化だけではなく、チーム内でのコミュニケーションの質と効率の向上にも貢献したようです。