新しいファッションニュースのデザインが完成するまで | アドビUX道場 #UXDojo
エクスペリエンスデザインの基礎知識
ファッションスタイルを扱うメディアにとって、今はめまいがしそうな時代です。ファッション誌業界は恐ろしいほど競合が激しく、日々オンラインやソーシャルメディアに、時には秒単位でコンテンツを公開するというプレッシャーにさらされています。読者は引き込まれるようなデジタル体験を当然のように期待し、何か分かりにくい箇所があれば、別の場所に同じ情報を見つけるまではクリックひとつです。
このように参入がとても難しい領域に、New York Postは新しいデジタルメディアPage Six Styleで挑戦しました。公開からまだ5カ月余りの新しいファッションポータルは急速な成長を見せており、New York Postのデジタルクリエイティブディレクターのジャン-ジャン・テイソンによれば、特に1月から2月にかけてユニークユーザー数が飛躍的に伸びたそうです。
Page Six Style公開への道のりは、新しいブランドアイデンティティとデザインシステムの作成から始まりました。
「私たちは、エディトリアルチームのメンバーと向き合い、彼らのニーズや実現したいブランドの方向性を聞きました。コンテンツはどのようなものになるのか？どんなトーンが好みか？洗練されたものか？陽気で楽しいものか？こうした種類の質問に対する答えを手にブランドアイデンティティをつくり、また、ワイヤーフレームとテンプレート、そしてデザインアセットを、エディトリアルチーム・ソーシャルチーム。ビデオチームのために制作しました」とテイソンは語ります。
テイソンは既存の媒体（New York Post、Page Six、Decider）を管理しながらPage Six Styleを支援しました。その際に一緒に働いたのは、正規のデザインスタッフでとても才能のあるデザイナーのジョン・フリーゼと、外部デザイナーのネットワークです。彼女のチームは、機敏に大きなイベントに対応できるよう、Adobe XDに頼りました。
「XDでテンプレートを作成することで、限られた時間しかないことが事前にわかっていた、グラミーからオスカーまでのアワードが集中する期間中も、素早くデザインを修正し拡張することができました」とテイソンは言います。「プロジェクト調整してチームを組織することがより柔軟にできました。それは、大きなイベント（予定外のイベントも含めて）に対応しなければならない局面で、本当に重要な役割を果たしました」
以前、テイソンのチームはデザイン要素ごとに時間のかかるモックアップを作成しては、フィードバックのために自らチーム内を回っていました。今では、チーム内のメンバーとリアルタイムでブレインストームを行えます。
「デザインスペックとプロトタイプ機能を利用することで、インタラクティブなプロトタイプ作成と実際のアセットの公開と修正をリアルタイムで行えます。私たちにとってこれは大きな変革でした」と彼女は語ります。「メモ書きを付けたドラフト資料のやり取りを繰り返す代わりに、直接議論してその場で修正を反映できます。また、この方法だとデザイナーではないチームのメンバーがアイデアを理解しやすくなります。リアルコンテンツを利用可能なために、初期のモックアップに個性を与えることもできます」
テイソンは彼女のチームがより協調して働くようになったと言います。
「コンポーネントを作成して、それをプロジェクト内のすべてのファイルとリンクすることができます。これは、複数のデザイナーがデザイン全体の異なる箇所に対して同時に作業することを可能にします。その際、変更はシームレスに反映されます」とテイソンは言います。「必要なファイルの数が減りましたし、互いに相手の作業を上書きしてしまう心配がありません。レイヤーを公開すればアセットを共有できるため、他のプロジェクトの要素のデザインも一気に始めることができます」
ファッションウィークやアワードで忙しい時期にPage Six Styleを公開するためには、高度なコラボレーション機能が欠かせませんでした。というのは、正規のデザインチームには全く余裕がなく、新しい媒体のデザインのような大きなプロジェクトには、外部にリソースを広げ、契約したデザイナーと素早くスムースに作業することが求められたからです。
「私たちは、必要に応じてフリーランスのデザイナーを招き入れ、サードパーティの開発会社にコードの支援を依頼しました。最終的に、私たちのデザイン作業は、ビデオ・ソーシャル・広告チームを含むNew York Postの100名以上のデジタルチームをサポートすることになりました。この規模に拡大したチームが効果的に協業するためのデザインソリューションが必要でした」
そして、タイソンとPage Six Styleにとって、デザインレビューをより高速に回すことが、プロジェクトのマイルストーンを達成し期限に間に合わせるための鍵になりました。
「ニューヨークファッションウィークの前に公開準備が完了していなければなりませんでした。つまり、本当に時間に追われていました。通常の倍のデザインアセットを半分の時間でつくる方法を見つけなければなりませんでした。その際、私たちにコントロール可能だったのがデザインレビューだったのです」とテイソンは説明します。
デザインプロセス全体を加速するため、テイソンのチームはXDで制作した簡易なコンセプトのスケッチからプロセスを始めました。
「直感的に使えるツールのお陰で、コンセプトを繰り返し修正し、いくつかのオプションを主要なステークホルダーに示して先に進む承認を得ることが、他のデザインツールでは不可能な速さでできました。一旦プロトタイプが完成したらデザイン仕様をそのまま開発チーム全体に共有できました」
出版業界の日々の時間との闘いにとっては、時間を節約するどんな機能も恵みです。XDファイルをアドビのモーショングラフィックスツールAfter Effectsに読み込めたことで、すぐにデザインに動きを付けることができました。
もちろん、出版を成功させるには、効率的なデザインと期限の厳守だけでは不十分です。斬新なデザインと魅力的なコンテンツで読者の心をつかむ必要があります。それには実験が必要です。
「ほぼすべてのものをA/Bテストしました」とテイソンは語ります。コンテンツのパフォーマンスを引き出したり、読者に素早くクリックさせるなど、最適な要素の配置を理解するのに必要なデータは、Adobe XDが与えてくれました。「思いついた様々なアイデアやデザインをすぐ形にして、テストを通じて進むべき方向を知りました。成功の多くはテストしたデザインと多様性に負っています」と彼女は付け加えます。
Page Six Styleのような媒体を成功裏に公開することは決して簡単なチャレンジではありません。競争の激しい業界で、それを維持し発展させるには、さらなる柔軟性、効率の良さ、継続的に読者を引き付ける（そして収益を上げる）タイムリーなコンテンツが必要です。
最新のデザイン&プロトタイピングツールのお陰で、テイソンと彼女のチームは将来に向けて成長を続ける体制ができています。いつでも次の大きなファッションイベントに立ち向かえる状態です。
この記事はTackling Experience Design in Fashion News（著者:Colleen Schweizer）の抄訳です