Q&A:Theresa Mershonがアジャイルパブリッシングについて語る

ウェビナー「 ハーストの新しいアジャイルデザインプロセス」でクリエイティブディレクターのTheresa Mershonは、どのようにウォーターフォールモデルからアジャイルプロセスにシフトしたのかについて説明しています。その後、ツール、デザイナーのコードのスキルアップ、ペア作業、反対意見の克服、ワークフローなどに関する質問に答えています。下記の概要をご参照ください。

導入過程中での反対意見はありましたか。その場合には、どのように対処しましたか。

当初は多くの人が「すべてを根こそぎ焼き払ってもいいけれど、変わるものを構築できなかったらどうするのか」と言われました。みんな、とても怖がっていたのです。でも、社長やエグゼクティブチームからのサポートがありました。それはとても重要なことでした。それをいくら強調しても足りないくらいです。ボトムアップで何かを変えることも可能ですが、トップダウンでの方がずっと楽ですから。私たちの変化への取り組みは、大きな支持を受けていました。

社員は主に、自分たちの製品に対するコントロールと影響力を失うことを恐れていました。全員を適切な場所に配置するのは依然として容易なことではありませんが、全般に以前のプロセスよりはるかに良い成果が出ています。プロジェクトの所要時間がずっと短縮されましたし、ステークホルダーは、自分の観点をインプットしないと製品には全く採用されないと心配することがなくなりました。ステークホルダーは、私たちがいつでも戻って修正し、フェーズ2、3、4と段階があることを理解したからです。それによって、かなりプレッシャーが少なくなりました。プレッシャーが軽減すると、人は身構えた反応をしなくなります。

どのようにして、コーディングを増やすようにシフトしたのですか。

シフトの妨げになったのは、開発環境へのアクセスだけでした。エンジニアリングチームに、私たちはインターネットを破壊することはないと納得してもらうと、すんなりとコーディングを推進でき、順調に移行が進みました。かつて数人のデザイナーをコードベースのワークフローに移行するよう指導した経験から言って、HTMLとCSSの基本を学ぶことをお勧めします。プレゼンテーションとレイアウトを重視するのであれば、主にCSSにフォーカスします。ハーストでは、デザイナーはSCSSの書き方を覚えなくてはなりませんが、学習のフレームワークは整っています。最初の数件のプロジェクトでは、デザイナーは一からコーディングするのではなく、既存のコードを変更するという作業をします。

そういうゆとりがないのであれば、CodePensを利用し、別の人が始めたことを変更してみてください。最高のモチベーションは、自分がワクワクした気持ちになることです。変化を起こしているのは自分なのですから!

また、ハーストのデザイナーはGitワークフローを学び、ターミナルの使い方にも慣れなくてはなりません。これらはどれも、Photoshopを覚えるより簡単なのです。ただこのスキルは、実践しないと身につきません。デザイナーのトレーニングでは、コースを受けるより、CodeSchoolで学習する方が成功していますが、自宅で時間が取れない人は、コースに参加するのが良いでしょう。

「デザイナーの成功は、特定のデザインのクオリティではなく、製品そのものの成功にかかっています。」

プロジェクトにおいて、デザイナーとエンジニアを組ませたということですが、ペアを組むにあたり、それぞれの働き方の違いをどのように克服しましたか。

グループとして考えると、デザイナーとエンジニアの間に働き方の差はないと思います。個人では、作業の仕方の好みに違いがあるかもしれませんし、密接な共同作業が必要とされるアジャイルなフレームワークでの作業には向かない場合もあります。

デザイナーと終始話をしなければならない事を嫌うエンジニアも確かにいました。この人たちは、モックアップを受け取って、実装するだけのやり方を希望していました、でも、私たちは既にアジャイルで作業していたことで、この問題は解決しました。一部のエンジニアは、しばらくの間バックエンドエンジニアリングに移りましたが、そのうちの一部はこのようなアジャイル作業に慣れると戻ってきました。ハーストではデザイナーはコーディングを行わなければなりませんが、一部のデザイナーはコーディング業務をやりたがりませんでした。

ですから、デザイナーとエンジニアの分野の違いではなく、エンジニアが好む作業の仕方とアジャイルプロセスの仕組みの間で軋轢があっただけのことです。

(私たちが行っているように) デジタル製品のデザインに携わっていて、より迅速に作業し、より良い作品を制作したいのであれば (私たちは実際にそれを行っています)、協力は必要不可欠なのです。とても重要なことです。ですから、私たちは新入社員を採用するとき、ハーストの文化と仕事の仕方をしっかりと説明します。私たちは、この働き方を希望し、向いている人材を集めています。

スタッフが同じ場所で働いていない時には、ペアリングはどうするのですか。

私たちは、ハーストマガジンズ・インターナショナルと密接に仕事をしていますが、基本的に拠点は英国です。また、ニューヨーク、サンフランシスコ、ナッシュビル、コロラドを拠点にした分散型チームメンバーもいますし、全員が毎日のスクラムに参加しているという状況です。強力なデジタルコラボレーションツールを利用が、遠隔でのコラボレーションを可能にしているのです。私たちは、あらゆることにウェブ会議を使用しています。Skypeも頻繁に使います。社内ではHipChatを使い、Jiraと統合しています。また、チームメンバー全員が会議での発言すべてをはっきりと聞き取れるように、高品質のマイクに投資しています。

ですから、遠隔のチームメンバーとのコラボレーションはそれほど難しくありませんが、ニューヨークの社内チームと同じワークフローに従わなければなりません。英国チームとのコラボレーションでは、米国チームと英国チームがそれぞれお互いの時間帯に合わせながら、作業をします。

アプリ専門のデザイナーとウェブ専門のデザイナーは別々にいるのですか。それとも1人のデザイナーが多分野をこなし、ビジュアル、UX、UIデザインを担当しているのですか。

私のチームは、ウェブプラットフォーム用のUXに特化しています。アプリデザインは、別のデザインチームが担当しています。また、クリエイティブチームもあり、エディトリアルデザインを担当し、ブランドコンテンツのためのすべての写真、イラスト、モーショングラフィックス、インフォグラフィックスを制作します。しかし、別のクリエイティブチームとコラボレーションすることも頻繁にあり、UX、アプリやエディトリアルデザインのクリエイティブディレクションに協力しています。

私は、柔軟で、新しいスキルを身につけることに興味のある人を採用しています。ハーストのチームには、様々な経歴と専門分野を持った人材が集まっています(優れたフロントエンドデベロッパーやUI/UXデザインでの経験が豊富な人、従来型のグラフィックデザインで活躍してきた人もいます)。でも、最終目標は、各自がユーザーフローからUIデザイン、スタイルの適用、コードでのインタラクションに至るまでエンドツーエンドで作業できるようになることです。これによって、私たちは総合的なスクラムチームとなり、プロジェクトチームのサイズを管理しやすい人数に抑え、リソース配置がフレキシブルに行えます。

私たちが人材募集を行うとき、すべての スキルセットに優れている人を求めているのではありません。自分のメディアをより深く知ろうと熱心な人、プロジェクトを完全に掌握したい人、新しいツールやアイデアを思い切って試す人を求めているのです。

私は、自営業の人や、様々な教育や職歴を経験した人を採用するのが好きです。新しい分野に飛び込み、模索することを恐れないからです。デザイナーの成功は、特定のデザインのクオリティではなく、製品そのものの成功にかかっています。

何よりもまず、優れたビジュアルデザインの才能、クリエイティブな問題解消力、コミュニケーションスキルに富み、デジタルコンテンツに情熱を持っている人を求めています。その他のことはすべて、仕事の中で学ぶことができます。私自身の経験から言って、テクノロジー分野でデザイナーとして働くなら、メディアとしてはまだとても新しく、急激に進化していますから、新しいスキルを進んで身に着ける姿勢がなければなりません。

「・・・自分のメディアをより深く知ろうと熱心な人、プロジェクトを完全に掌握したい人、新しいツールやアイデアを思い切って試す人を求めているのです。」

多くのプロトタイプ作成をし、このプロセスをずっと前から始めていらっしゃいますが、今でもカンプはするのですか。

今はほとんどしていません。しかし、迅速でシンプルに、またフレキシブルな姿勢を維持するという信条に基づき、モックアップやカンプを制作するほうがソリューションを実装するより速い時もあります。ソリューションの図を見せるだけで、プロセスの次のステップに進むよう説得するのに十分な場合もあります。例えば、社外チームやエージェンシーが開発を行い、その人たちがカンプを必要としていて、こちらから何かを提示する必要がある場合は、カンプを制作します。時には、ピッチの説得材料として、大きくてピカピカの絵を見せる必要があります。このような場合でも、デモなどを使用してできるだけ実際の体験を見せるよう努力し、私たちがピッチしている追加機能だけをカンプするようにしています。

チーム内では、先ほどお話ししたように軽い低解像度ワイヤフレームとムードボードだけを作っています。

ハーストは早期にスクラムエキスパートを雇い、移行を手伝ってもらったとおっしゃいましたが、他にどのような人事異動と研修が必要でしたか。

2014年より前には、正式な製品管理チームはありませんでした。製品はサイロ式に開発される傾向があり、それぞれのグループが担当していました。エディトリアル、宣伝、消費者マーケティングのグループはすべて、ある程度お互いに競争している状況でした。純粋に製品を管理する製品マネージャーを起用することで、ハーストの文化が大きく変わりました。

また、社内の開発チームのサイズも大幅に拡大しました。以前はオフショア開発と協働していましたが、現在はほぼ全部社内技術部と協働しているため、スクラムが可能になりました。

Mershonさんのアジャイルでは、スプリントはどのようになっていますか。

私たちは約1年半にわたりアジャイルスクラムで作業してきましたが、ベロシティは着実に上がってきています。これは私がアジャイルでとても気に入っている点の1つです。しかし、アジャイルに取り組むなら、スクラムに忠実に従うことがとても大切です。

デザイナーは、現在4つのスクラムチームに分散しています。全チームが2週間のスプリントを適用しています。各スクラムチームが毎日スタンドアップミーティングに出席し、メンバーはそれぞれのプロジェクトで予定を組んだ分科会も行っています。スプリントごとに、バックログ作成、スプリント計画、振り返りが行われます。全員が計画ミーティングとバックログ作成に参加するため、ミーティングではチームメンバーは自分がやらなければならないことを押さえ、すべてのプロジェクトを全体的に把握することができます。たいていメンバーは自らの意思でプロジェクトに参加します。場合によっては、私がチームメンバーの経歴や関心事を考慮し、特定のプロジェクトに取り組むよう勧めることもあります。

振り返りはとても有益で、私は非常に気に入っています。スプリントで発生した問題、次回のスプリントでのその問題に対する改善策について話し合う機会があるからです。この振り返りのおかげで、ずいぶん作業方法を改善することができました。

Mershonさんのアジャイルでは、リニアにループしますか、それとも各段階がうまくいくまで各ステップを行ったり来たりするのですか。

プロセスはらせん状です。あまりバックトラックしないように心がけていますが、これで良いと感じるまで同じ問題に複数回取り組むことがよくあります。たとえば、各スプリントでのスクラム会議の目標は、スプリントの始めにやり遂げると決めた仕事を達成することです。本番に移行すると約束したことが、実際に移行することを期待しています。完成すると言った製品が、実際にプッシュされることを期待しています。ですが、いったんプッシュしたら、それが荒野の中でどのように成功するか、それとも失敗するかを見守ります。確かなデータを入手し、同じことをまた繰り返し、改善を重ねます。ですから、明らかにリニアではありません。

サイクルの最初に時間をかけてプランニングが行います。よほどうまくいかない場合を除いて、サイクルの途中で中止、再計画することはありません。ただし、基本的には計画した構想に基づいて前進しようと努めますが、後から戻って細かいところを調整することもあります。

プロジェクトの作業以外の部分で、チームのモチベーションを高めて、インスパイアするためにはどうしていますか。

週1回「Design Chapter」というミーティングを開催して、全員で自分たちの分野について話し合ったり、新しいデザインのワークショップをしたり、実際のワークフロー以外でも楽しい、実験的なプロジェクトでコラボレーションしたり、絶えず意思疎通を図っています。「Design Chapter」にはこの業界に関心がある人ならだれでも参加でき、ハーストの別のデザインやUXの専門家や、関連する製品や技術関係のスタッフが参加します。他にも、グループスケッチやペアデザイン/開発分科会なども行っています。

「Design Chapter」やスクラムなど、ミーティングが多いように見えますが、デザイナーはまとまった自分の時間を取ることができます。ミーティングは、仕事の妨げにならないと思いますよ。製品のプッシュやイニシアチブを前進させるために、すべての会議がメリットを生むよう努力しています。実施する事項はすぐにConfluenceに記録し、素早くフォローアップします。またミーティング内で計画を終了するよう努めていますから、プロジェクトの進展を感じてミーティングを終えることができます。

2013年と2015年では、どのCMSを使用していましたか。

両方ともカスタムCMSでした。完全に一から構築しなおしている最中ですが、これは3回目のことです。

実際、WordPressを導入することも考えたのですが、広告製品などのカスタムニーズがあり、非常に特殊なため、それに対応するものが今の市場にないということに気が付いたのです。また、ハーストは大規模なメディア会社ですから、編集用の様々なツールを持っています。編集者が記事のトレンディング状況を見て、その状況に合わせネットワーク全体で同時に記事を配給できるツールや、自分の記事のベロシティが適切かを計るツール、コンテンツをテストするツールなど数え切れない種類があります。CMSの一部として新しいツールを絶えず開発していますから、自分たちでCMSを構築するのが理にかなっていたのです。私たちが現在進めているリビルドは、国際化対応の波を生み出しました。ハーストマガジンズ・インターナショナルは、独自のCMSを使っていますが、言語サポートなど、私たちが考えていなかった特殊なツールを必要としています。ですから、世界中でさらに拡張するためにリビルドをしています。

デザイン変更の中で、売上や顧客転換率に最も大きな影響を与えたものは何ですか。

ハーストのウェブコンテンツはすべて無料で、ユーザー登録も必要ありません。でも、雑誌 (紙媒体とデジタルの両方) の購読や懸賞、無料のiOSとアンドロイドアプリのプロモーションは行っています。

最近の雑誌購読に良い影響を与えた変更は、ウェブサイトのすべてのブレークポイントの最初の位置に、[購読する]というリンクを載せた常設の第2レベルナビゲーションバーを追加したことでした。以前は、幅が1024ピクセル以上のスクリーンにだけナビゲーションが表示され、小さいスクリーン (ほとんどのモバイル機器を含む) では、ハンバーガー式の隠れたメニューしか表示されませんでした。

タイポグラフィーのプロセスを詳しく説明していただけませんか。

ハーストの雑誌ブランドのサイトをデザインする場合は、オフラインのブランドアイデンティティをレビューし、デザインの方向性を掴むために印刷物担当のクリエイティブリードとミーティングをします。次に、Samantha Toy WarrenのStyle Tilesと近いプロセスを利用して、オフラインブランドをウェブサイト用のムードボードに変換します。

紙媒体の雑誌では、多くのフォントを使用する傾向がありますが、ウェブではパフォーマンスの関係上、4~5種のフォント (ウエイトを含む) に絞らなければなりません。Fonts.comとサブスクリプションベースの契約を締結していて、サイトすべてのライブラリの書体を使うことができるため、現在でも雑誌で使用している多くのクラシックなフォントを含め、書体には広い選択肢があります。Avenir®、Brandon、ITC Avant Garde®はすべて、プランに含まれている雑誌用として人気のある書体です。

新しいブランド用にデザインをしているけれども、オフラインのデザインカタログがない場合は (ハーストのレシピ紹介サイトDelish.comなど)、書体を模索することから始めます。Typecastを使用し、書体のペアリングのテスト用見本をタイプセットしたこともあります。ツールを介してサブスクリプションからすべての書体にアクセスできるため、簡単で便利です。

最初の検索終了後、Fonts.comから直接ウェブフォントをダウンロードし (自社のウェブフォントをホストし、サーバーコールを削減する方法を優先しています)、サイトをスタイルすると直ちにローカル開発インスタンスでテストします。デザイナーは、サイトのCSSをスタイルしながら、書体のスタイルやウエイトを素早く変更できます。ライブプラットフォームのコピーで作業し、コンテンツに特定サイトのデータベースを使用していますから、書体を「実際のコンテンツ」の環境でテストすることができます。次にステークホルダーとサイトデザインをレビューする時、デバイスで表示し、デザインにはステークホルダーのコンテンツが挿入されます。こうすることにより、読みやすさ、スタイル、その他の書体の問題について素早くかつ現実的に対処することができ、サイトがアップしてから問題が見つかって慌てるなどということがなくなります。

サイトのパフォーマンスには、どの程度の注意を払いますか。

モバイル機器での高速サイトパフォーマンスは事業に不可欠ですし、これについてはハーストマガジンズ・デジタルメディアの全チームで頻繁に話し合われています。私たちは、ベストプラクティスが開発されるとそれに従い、自社ネットワークのベンチマークと異常値を検討します (ハーストは20件超のサイトを運営していて、比較が可能)。モバイルファーストをデザインして構築、画像を最適化、遅延読み込み、キャッシングサービスを活用、CSSを縮小、インライン.SVGをできる限り使用しています。

デザインチームでは、ウェブ書体に関するパフォーマンスの問題がよく起こります。書体は、デザイン通りにページに素早く読み込まれることが大前提です。私たちは、サイト1件ごとに使用するフォント数を厳しく制限しています。ほとんどの場合、ウェブフォントは4ファイルに限定しています。初期画面ビューに読み込む必要のあるウェブフォント数も制限するようにしています。

「私のチームでは、1日から2日かけて新しいツールを学び、結局は既存ツールの方が強力だという結論に達したとしても、時間を無駄にしたとは思いません。」

Photoshop vs. Sketch?戦いだ!

ウェブデザインツールに十分な競合製品とユーザー基盤がある段階に達し、ついに真のイノベーションが起こるようになったことがとてもうれしいです。私のチームでは、1日から2日かけて新しいツールを学び、結局は既存ツールの方が強力だという結論に達したとしても、時間を無駄にしたとは思いません。何年もの間、毎日何時間も手際の悪い同じワークフローを続けるより格段に良いからです。現在は、すべてのUIデザイン、グラフィックプロダクション (アイコンフォントなど)、UXSドキュメントすべてにSketchを使用しています。Adobeのツールも使用しています。Sketchが十分にロバストでなかった時には、ベクターベースのデザインにはIllustrator、ラスターイメージ操作にはPhotoshop、ドキュメントレイアウトにはInDesignを使用していました。私たちは、チーム全員にSketchを強制するようなことはしたくなかったのですが、Sketchでかなりの量の仕事を完成した後は、全員が同じツールの同じファイルから作業するほうが理にかなっているという結論に達しました。必要最低限のものだけを装備した機能セット、ベクターデザイン対応、スタイルをセットする能力、エクスポートオプション・・・このすべてによって作業速度が改善したため、Sketchに切り替えたのです。でも、私は常に新しいツール、特に拠点が分散しているチームのコラボレーションを円滑にするツールを探しています。デザインチームは、デザインプロセスの一部として、プロトタイプ制作作業により多く取り組むようになりました。

長年勤めているスタッフが新しい体制に適合するのを拒んでいるような環境にいるデザイナーに、アドバイスをお願いしたいのですが。

最善の策は、まず自分の仕事の仕方を変えていくことです。未だにレビュー用に高解像度のカンプを制作しなければならないという場合でも、いずれはエンジニアにCSSの最後のクリーンアップをさせてもらえるようになります。例えば、ピクセル・パーフェクトを達成するために長いパンチリストを送る代わりに、ブラウザのデベロッパ向けツールを使用して変更を巧妙に行い、正しいCSSを送信します。そして徐々に、あなたに実際にコードの変更を確定させてくれるよう流れを作るのです。

それから、自分もデザイナーの素質を持っていると思っているデベロッパーなど、別のチームで味方になってくれる人を探します。そのデベロッパーと協力しましょう。プロセスを変更することで、所要時間が短縮し、他の人の手間が減ることを示せば、その人は素直にあなたを助けてくれると思います。

Facebook icon Instagram icon LinkedIn icon Twitter icon