【Pando“パンドゥ”開発秘話】デザイン作成の流れ

今回は、【Pando“パンドゥ”開発秘話】ということで、株式会社クインテットのデザイン部がどのようにしてPandoのデザイン制作を進めていったか、といったお話をしようと思います。

クインテット独特の風土や仕事の流れも影響するので、どこまで参考になるものになるか分かりませんが。

Pandoプロジェクトの座組

https://pando.life/qwintet/team/2/member_list

この一覧のように、Pandoにおける部門は「運営本部（＝企画・運営など）」と「開発本部（＝制作・開発）」の2部門に分けられています。

その中で私は「開発本部」に属しています。
「開発本部」には、自社メディアの開発ディレクターである塚越と、制作開発部（エンジニア）部長の桐木も属しています。

そして本プロジェクトの統括（わかり易い表現でいうと総合プロデューサー？）はもちろん、弊社代表の松下耕三（以下、松下）になります。
本プロジェクトの発案者であり最終決裁者となるので、企画・運営は当然、デザインに関しても、最終的には松下の承認を得て進めることになります。

企画・仕様の選定

クインテットが全社的に取り組む新サービスとなるので、最初期の企画会議から我々「開発本部」のメンバーも参加し、全部門からの視点・知識などを結集してサービスの根幹を固めていきます。

主に松下の構想を基に、「運営本部」を中心とする企画部門が仕様の草案を作成し、我々「開発本部」を中心とした制作部門も意見を出しながら仕様を詰めていきます。

制作サイドとしては、このような場で決定したものを実際に制作することになるので、こちらからも忌憚なく意見を出し、徹底的に議論を重ねます。

1度や2度の会議では決定しませんので、毎週のように会議が行われていきました。

デザイン部の制作体制

やっと本題ですねｗ

デザイン部は、デザイン統括としての私（牛尾）以下、メインデザイナー、メインコーダー、UXデザイナーの計4名でチームを結成しました。

私はこの3名のことを「Pando三人衆」と呼んでいました。

この3人という人数が大きのか少ないのかはちょっと分からないですが、少数精鋭ということで、各分野に最も秀でていると思われるメンバーを選出しました。
サイトのデザイナーとは別に「UXデザイナー」というポジションを作ったのは、新たな試みでした。

この3名は実開発においての作業分担であるのは当然のこと、後述する「傾向分析」においても、それぞれ別々の調査を行わせました。

最終的にこの「UXデザイナー」は管理画面のデザインも担当することになったのですが、メインデザイナーとUXデザイナーが互いのUIをパクり合う、ということをやっていたのが個人的に面白かったです。
単に、サイトの統一感を担保するため行っていることなんですが。

傾向分析

大まかな仕様が見えてきた段階で、競合も含めた類似サービスの傾向分析を行いました。

この傾向分析において最も重要なのは、現在の主流となるUXはどのようなものであるかを分析・再確認するところにあります。

（決して既存サービスからパクろうと思っているわけではないですｗ）

今の時代はスマートフォンの爆発的な普及なども相まって、老若男女関わりなく、ウェブサイト・アプリケーションに日常的に触れています。

そのユーザーの方々にUXの高さを実感してもらうためには、初見でも違和感のない操作感を提供するところにある、と考えているからです。

各サービスの分析を行った上で、本プロジェクトにおけるベストプラクティス（最適解）を考案します。

レイアウト、配色などもさることながら、文字サイズ・字体・行間などミニマムな部分に関しても再検討しました。

その過程で導入した施策などに関しては、いずれまた詳しくお話できればと思います。

ラフ作成〜デザイン確認

「Adobe XD」の活用

以前から「Adobe XD」の有用性は社内でも話題になっており、試験的に導入をしていたのですが、本プロジェクトから本格的に「Adobe XD」によるデザイン作成を実施しました。

「Adobe XD」利点は

• ソフトが軽量で操作がしやすい
• とにかく修正対応に強い
• ラフがそのまま画面遷移図になる
• 閲覧用のURLを発行できるので共有が簡単
• 発行したURLはそのままで修正反映ができる

など。
デザイン制作そのものの効率化もさることながら、これまでかなり煩わしかったデザイン確認のための手順や工数をかなり削減できるので、開発が爆速化しました。

正直な話、企画立案当初は「このスケジュール感での開発はかなり無理があるのでは・・・？」と感じていましたが、「Adobe XD」を活用したデザインでかなりの工数削減をできたことが、デザイン部としての期日担保を可能にしたと思います。

本当にこのタイミングで「Adobe XD」が正式リリースされていて助かりました。
松下もデザイン確認の利便性にたいへん驚いていたのをよく覚えています。

ちなみに本プロジェクトで「Adobe XD」の有用性が実証されたので、これ以降のすべてのサイト制作において「Adobe XD」が使われるようになりました。

事件は現場で起きてますね（ネタ古し）。

デザイン確認の高速化

意図を正しく理解するという手順

これまでの弊社の作業進行としては、デザイナーが作成したデザインをディレクターが確認・修正指示を行った上で、ディレクターが松下の確認を取っていました。

しかしこのやり方では、少なくともデザイナーにとっては、直接決裁者の意見や思いを聞くことなく修正対応をしなくてはならなくなるので、結果的に齟齬が生まれることも少なからずありました。
逆に、我々がデザインに込めた意図や思いを伝える場もありませんでした。

その溝は少なくとも本プロジェクトの進行においては大きな弊害になると感じたため、デザイン確認に関しては、ディレクターも同席の上で、直接デザイナー（本プロジェクトの場合はデザイン統括の私）が説明を行うデザイン確認のためだけのミーティングを実施させていただきました。

我々が知りたいのは、結果だけでなく、「何故？」なのです。
意図や理由が明確に理解できれば、よりベストな提案をできる、という可能性を感じているからです。

「よりベストな提案をできる」ということは、裏を返せばそれを行うだけのものを持っていなければならず、現場のメンバーにもプレッシャーではありますが、同時にやりがいに繋がる部分でもあると思います。

即断即決

デザインミーティングの実施には、前述した「Adobe XD」の活用が不可欠でしたね。
「Adobe XD」の画面を松下・ディレクター・私の3人で確認し、直接修正要求や、調整などを行いました。

責任者同士の意見交換の場になるので「持ち帰り検討」という時間がなくなり、必要な事項はすべてその場で決定しました。

その決定事項はチャットワークや議事メモなどで即座に現場に共有していたので、場合によっては我々のミーティングと並行して現場では修正作業が行われる、ということも。

「Adobe XD」は修正対応にも柔軟に対応できるツールなので、午後イチのミーティングで決定した修正事項が、その日の夕方には対応完了し、その日中に承認される、ということは割と頻繁にありました。

このような直接的な対話を繰り返していく中で何よりも大きな変化があったのは、私と松下の距離感、だと思います。

ミーティング自体も当然、事前予定の場合もありますが、結構な割合で松下が直接私のところに来て「いまちょっと話せますか？」と言われてミーティングを行ったことがありました。
これは本プロジェクトにおいてだけでなく、上司と部下という我々の関係性にも大きな意味があったように感じています。

ちょっとした反省

やや後日談ですが、先日あるメンバーから「デザインミーティングに末席でいいので参加させていただきたかった」と言われました。

私自身が「デザインミーティング」の有用性を大きく実感しているのですから、現場のメンバーたちもそう感じて当然なわけで、そういう場を上司でもある私が部下であるメンバーたちに提供できるかどうかも、私の上司としての手腕を問われる部分なんだなと、再認識した次第です・・・。

まとめ

なんか結果的に、「Adobe XD」の宣伝みたいになってしまいましたがｗ
ツールが現場を変え、それを活かすために現場が変わり、現場の変化がプロジェクトの進行に影響を与えた、のかな、と。

コーディング方面の話は小貫くんも執筆してくれているので、そちらもご参考に。

【Pando“パンドゥ”開発秘話】 CSSフレームワーク Pure の採用

日々感じることですが、デザインは作業工程上は下流工程に位置しているため、ともすれば本流を感じることができず、孤独感を感じることがあります。

しかし、UI・UXなどを包括した「デザイン」は最もユーザーの近くにあるもので、プロジェクトそのものの本流を体現すべきものであるはずです。

目先の事柄やこれまでの慣習といった表層的な部分ではなく、真にプロジェクトにとっての最適解を妥協なく追求する、という姿勢が重要なのだと痛感しました。

それはトップダウンであろうとボトムアップであろうと関係ないと思います。

互いに信頼性を高められるコミュニケーションこそ、プロジェクトを成功に導く重要な鍵だと思います。

本プロジェクトにおいて採用したデザイン制作フローは、少なくとも今後のクインテットの標準になるであろうと確信しています。

特に現場で悶々としている方は、一歩外に踏み出してみると、思ってもみない発見があるのではないかな、と思ったりしています。
（この話はまた別の機会にしたいところです）

以上です。

この記事が何かの参考になれば幸いです・・・。

＝うしお＝