Adobe XD事例： 株式会社LIFULLコーポレートサイト – デザインをコミュニケーションする手段としてAdobe XDを活用
Adobe XD事例
総掲載物件数No.1の不動産・住宅情報サイト「LIFULL HOME’S」の運営などを手がける株式会社LIFULL。2017年4月には、社名変更・会社移転・ブランドのリニューアルを行い、同時にコーポレートサイトも刷新されました。
これらのプロジェクトは常に同時進行していたため、担当チームで1つの案件に対して割ける時間は限られていました。更に、サイトデザイン担当者はディレクションから開発フォローまでこなす多忙な状況にあり、そのため、限られた時間で効率よく作業できる手段を求め、動作が軽くて安定していたAdobe Experience Design（以下Adobe XD）の採用を決定しました。
Illustratorと似た操作感のため、すぐに使えるようになり、初採用でも心理的な抵抗は低かったとのことです。その結果、デザイン作業だけでなく、コミュニケーションも迅速に行うことができた事例です。
XDでデザインされ完成した新しいコーポレートサイト
Adobe XDを採用したメリット
- とにかく軽い、速い
起動が早くて動作が軽いため、人に見せるのもデザインの修正も、思いついたらすぐにその場で - つくって、見せてをひとつのツールで
描いたデザインをそのままプロトタイプとして見せられる。打ち合わせ中に修正して承認を取ったことも - コンテンツとデザインの分業を実現
テキストライティングを同時進行。更新されたテキストは外部ファイルをドラッグするだけでデザインに適用できた - XDファイルを開発指示書として共有
デザインに開発指示を追記し遠隔地の開発会社と共有。別途Excelを使っての仕様書作成が不要になった
とにかく軽い、速い
アートボードをたくさん追加してもストレス無く作業を続けることができた
Adobe XDの採用を決めた理由について、クリエイティブ部クリエイティブグループの田中 忍氏が挙げるのは以下のポイントです。
「とにかく起動が早く、動作が軽かったこと、そして、操作がシンプルで思い通りに動かせたことで、複数ページを短時間で作るのに向いていると判断しました」
また、プロジェクトで実際に使ってみると、アートボード上の要素が増えても動きが重くなることもなく安定して動作して、常に目の前のデザイン作業に集中できたのは、使って分かったAdobe XDのメリットのひとつだそうです。
それ以外にも、起動が速い、動作が速い、という性質から、Adobe XDはコミュニケーションツールとしても使いやすかったようです。田中氏は、従来のツールでは躊躇のあったこの使い方は、機会を逃さずコミュニケーションを図るのに役立ったと言います。
「Macbookさえ持っていれば、時と場所を選ばず井戸端会議の感覚で、その場でパッとデザインを開いて見せて、説明したり意見を聞くことができました」
つくって、見せてをひとつのツールで
画面左側のアートボード郡が画面右側のプレビュー画面にプロトタイプとして表示されている
Adobe XDに描いたデザインは、クリック操作ひとつでプロトタイプになります。ページの見た目（静的な配置）に加えて、ページ遷移の様子も実際に操作して確認できます。田中氏はこれをコミュニケーションを目的に活用したそうです。
「打ち合わせでAdobe XDのプロトタイプを使ってデザインを説明しました。デザインがそのままプロトタイプになるため、プレゼンテーション資料を別途作成する手間を省略できました」
更に、同じツール内で、デザインとプロトタイプ間を素早く行き来できることが、以下のようなメリットにもなったそうです。
「プロトタイプに対する指摘を受けたら、その場でデザインを修正して、更新されたプロトタイプを見せるというフローが可能でした。そのため、課題を持ち帰る代わりに、打ち合わせ中に承認までこぎつけられた事もありました。限られた時間で、開発する単位ごとにデザインを切り出して、一つひとつ実装まで完了することが必要だったため、迅速なデザイン承認の助けになったのは大きかったです」
コンテンツとデザインの分業を実現
画像右下のテキストファイルをドラッグしてアートボード上のリストを更新した
新しいコーポレートサイトには、画像やテキスト等の組み合わせが繰り返し並ぶページがいくつもあります。実際にデザインした田中氏によれば、
「Adobe XDのリピートグリッドは、このようなビジュアル要素のグループを、繰り返し配置したいときに便利な機能だと思いました。リスト作成や、リストのスタイル修正を少ない手順で行えるように、よく考えられていると思います」
リピートグリッドが作業の効率化に役立ったのは、この点だけではなかったようです。外部ファイルとして用意した画像やテキストをリピートグリッドにドラッグ＆ドロップすると、各セル内の画像あるいはテキストをまとめて更新することが可能です。これは、リストの「見た目」と「コンテンツ」の管理を分けられることを意味します。田中氏によれば、この機能も活用されていたそうです、
「プロジェクトでは、テキスト作成はデザイン作業と平行して、別の担当者により進められていましたが、最新のテキストファイルを貰ってドラッグするだけでデザイン更新ができたため、分業による手間の発生を最小限に抑えることができました」
XDファイルを外部の開発者に指示書として共有
画面遷移が分かるようにアートボードを並べ、コメントを青色のボード上に記述した
従来は、PSDファイル等から書き出したページの画像と必要な説明をExcelファイルにまとめ、仕様書を作成していたそうです。しかし、今回のプロジェクトでは、Adobe XDドキュメントにアートボードを並べて遷移を表し、コメントを併記することで仕様書としたため、別途Excelで仕様書を作ることなくXDファイルの共有だけで開発者への指示を行ったそうです。田中氏曰く、
「これは、アートボードのコピーを抵抗無く行えるAdobe XDの軽さのお陰で実現できたフローです。ごく自然に、アートボードを並べて遷移を示すようなつくり方になっていました」
また、Adobe XDは簡単に操作方法を理解できるため、開発者側でもAdobe XDを使用して、書体やサイズ情報を直接デザインから取得してもらうことができて、仕様を記述する作業を減らすことができたそうです。
遠隔地の会社に開発を委託する場合は、誰が開いても分かるように仕様を記述することが重要になります。田中氏からは、開発者との仕様の共有が行いやすい点も、Adobe XDがプロジェクトの要件にはまったと言えると指摘がありました。
今回は、複雑なパス描画が必要だったことから、あるページだけIllustratorを使ってデザインしたそうですが、プロジェクトが終わってみると、曲線だけ部品としてIllustratorで作ってAdobe XDに読み込めば、全ページをAdobe XDでデザインできてもっと楽だったのではと田中氏は語っていました。正式にバージョン1.0が公開されて、デザイン機能や共有機能が更に拡張されるのが待ち遠しいそうです。
今回の事例取材に対応していただいた株式会社LIFULLクリエイティブ部 クリエイティブグループ 田中 忍氏
取材協力：
株式会社LIFULL 〒102-0083 東京都千代田区麹町1-4-4
新しい社名「LIFULL（ライフル）」は、“LIFE（暮らし、人生）”と“FULL（満たす）”から生まれた造語で、あらゆる人の暮らしや人生を満たすサービスを届けたいという想いが込められています。