プロトタイプを使った手触り感のある設計コミュニケーション
こんにちは、Gaji-Labo フロントエンドエンジニアの金城です。
Gaji-Labo に入社して4ヶ月が経ちますが、弊社にはプロジェクトを円滑に進めるための行動を惜しまない文化があることを日々実感しています。中間成果物の積極的な用意や、議論の場をスピーディに設ける工夫など、周囲のメンバーの高い機動力から日々学びを得ています。
今回はその文化を背景として、CMS 構造設計初期の認識合わせで試みた事例をご紹介します。動くプロトタイプをベースに議論を進めたことで、認識合わせがスムーズに進んだ例です。
プロジェクトの背景
私の参画しているプロジェクトでは、コンテンツ管理に Directus を採用しています。
Directus は柔軟な投稿画面を作ることができるヘッドレス CMS です。
弊社他プロジェクトでも使用されている CMS で、社内で連携をとって知見を横軸で共有しています。
以前 @hikari-tanimoto が記事投稿のベストプラクティスについて深掘りした記事を投稿していますので、よろしければそちらもご覧ください。
プロジェクトが開始し構造設計を始めた初期の段階では、運用方針や仕様などをドキュメントベースで確認しながら進めていました。
ドキュメントに残す進め方は、後から振り返りやすく整理もしやすいというメリットがあります。
しかし、議論が進むにつれて「ドキュメントベースだけではイメージしづらい部分」も出てきました。そこで、認識をしっかりと擦り合わせるために、同期的に会話しながら確認する機会を設けることになりました。
認識合わせにおける課題
Directus のように柔軟性の高い CMS では
- コレクションをどう分けるか
- フィールドの粒度をどう設定するか
といった判断を、運用方針やデータの持ち方を総合的に見て考える必要があります。
例えば、記事データの管理において「記事とカテゴリーを1つのコレクションにまとめるか、別々のコレクションにするか」という判断では、記事をカテゴリーごとに任意の順番で並べ替えたいかなど、要件によって最適解が変わります。
また、「コンテンツを1つの WYSIWYG フィールドで持つか、項目ごとにフィールドを分けて持つか」といった粒度の判断も、元データの構造やコンテンツ管理者がどのような操作を想定しているかによって選択が異なります。
そういった様々な条件を元に最適解を考える際、ドキュメントや口頭ベースの議論では、具体的な画面での見え方や操作感を想像することに負荷がかかります。結果として、細部の認識が揃っているのか曖昧なまま進んでしまう不安がありました。
課題解決のために行なったこと
打ち合わせでは、できるだけ共通のイメージを持って具体的な状態で議論できるように、検証環境の Directus 上に、それまでの議論を基に設計した実装案を実際に構築しました。動くプロトタイプを用意することで、ドキュメントや口頭だけでは伝わりにくい画面の見え方や操作感を、実際に触りながら確認できるようにしたのです。
また、特に判断が難しくなりそうな箇所では、それまでの議論を基に設計した実装案に加え、代替案を事前に用意しました。複数の動くものを並べて比較することで、それぞれのメリット・デメリットをより具体的に議論できるようにしました。
実際にやってみて感じたこと
特に CMS の構造設計では「運用者がどう感じるか」という視点が重要になってきますが、動くプロトタイプをベースにした議論により、コンテンツ管理者の視点での「使いやすさ」や「運用のしやすさ」をより解像度高く議論することができました。
また、代替案を用意したことで、「 A 案は直感的に操作しやすいが保守性に懸念点がある」「 B 案は長期的な視点で見ると安心だが投稿時に少し手間がかかる」といったトレードオフを実際の画面を見ながら議論でき、より要件に合った選択ができたように感じます。
おわりに
「議論する際は具体例があると理解が揃いやすい場面がある」というのは、もしかすると当たり前のことなのかもしれません。しかし、実際にプロトタイプを動かしながら議論することで得られた気づきは、個人的に大きな学びとなりました。
ドキュメントや口頭での議論も重要ですが、動くものを先に用意してそれをベースに議論することで、より解像度の高い議論ができ、認識のズレを防ぐことができると実感しています。
Gaji-Laboには、プロジェクトを円滑に進めるための行動を惜しまない文化があります。中間成果物の積極的な用意や、議論の場をスピーディに設ける工夫など、周りのメンバーの高い機動力から学ぶことは多いです。今回の検証環境を用いた議論も、そうした文化の中で実践してみた一つの事例です。
今後もプロジェクトの推進力とコミュニケーションの質を高める工夫を続けていけたらと思います。
Gaji-Labo は新規事業やサービス開発に取り組む、事業会社・スタートアップへの支援を行っています。
弊社では、Next.js を用いた Web アプリケーションのフロントエンド開発をリードするフロントエンドエンジニアを募集しています！さまざまなプロダクトやチームに関わりながら、一緒に成長を体験しませんか？
もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください！
Gaji-Labo は Next.js 開発の実績と知見があります
フロントエンド開発の専門家である私たちが御社の開発チームに入ることで、バックエンドも含めた全体の開発効率が上がります。
「既存のサイトを Next.js に移行したい」
「人手が足りず信頼できるエンジニアを探している」
「自分たちで手を付けてみたがいまいち上手くいかない」
フロントエンド開発に関わるお困りごとがあれば、まずは一度お気軽に Gaji-Labo にご相談ください。
オンラインでのヒアリングとフルリモートでのプロセス支援にも対応しています。
フロントエンドの相談をする！
