🗂️ Design Materials：優れたデザインの柱は優れたコミュニケーション：ベストプラクティスが含まれたデザインテンプレート。

2021年8月8日 12:45

デザイナーやエンジニアのやりとりの中で、「最新のデザインはどれですか？」「このレイアウトはサインオフ済ですか？実装する準備ができていますか？」「ユーザビリティ・テストに使用する予定のプロトタイプはどれですか？」などと言ったやりとりをよく耳にします。

今日はコラボレーションを促進し、プロジェクトの開始時にチームや個人がより迅速にセットアップできるテンプレートをご紹介させていただきたいと思います。

Shopifyのプロジェクト・スタートアップテンプレート

Shopifyは世界中の楽曲やアーティスト、アルバムに無料でフルアクセスできる音楽ストリーミングサービスです。

Shopifyでもコラボレーションを促進するためにデザイン・システムやデザイン・テンプレートを使用しています。Shopifyはそれらを常に改善し続けてきています。

Shopifyのスタッフ・プロダクト・デザイナーのTobiasがShopifyプロジェクトの開始時に使用しているFigmaテンプレートを公開しています。

ShopifyはこのFigmaテンプレートを使用して、コラボレーションを促進し、プロジェクトの開始時にチームや個人がより迅速にセットアップできるようにしています。

テンプレートの使用方法

このテンプレートはGSDと呼ばれています。

💡Get Sh * t Doneの略で、物事を済ませるということです。

このテンプレートはShopify全体のプロジェクトを管理するためのシンプルなフレームワークです。デザイン上、GSDは最大の価値を得るための最小のプロセスを提供しています。 GSDには、Think（考える）, Explore（探索する）, Build（構築する）という3つのフェーズがあります。

テンプレートのページ構造

このテンプレートのページ構造は、GSDプロセスの逆の順序に従っています。最初に最も重要な情報を提供します。すべてのページの上部にビルドの準備ができているものを示せるようになっています。

1. 新しいファイルを作成するとき、まずはカバーページとプロジェクトの概要エージを作成します。その後「Think」セクションのページにコンテンツを入力し始めます。

2. 「Explore」探索のフェーズに移行したら、新しい発見とプロトタイプ用に必要な数の新しいページを作成します。これはプレイグラウンドであり、アイデアやコンセプトをたくさん作り出す場所でもあります。

3. 「Build」（構築する）ビルドの準備ができたらすぐに、一番まとまったページやレイアウトをコピーして、ビルドにペーストして、ビルドフェーズ移動します。

では、詳細をご紹介します。

全てはカバーから始まります

カバーをカスタマイズして、新しいファイルをスタートさせます。これにより、プロジェクト名、プロジェクトを一緒にするチーム、プロジェクトのステータスなどの高レベルの情報を共有しましょう。

ヒント：カバーがあると、Figmaプロジェクトのグリッドビューで探しているファイルを簡単に見つけることができます。プロジェクトの進行に合わせて、ステータス・インジケーターを更新すると、チームメンバーみんながが作業状況を理解することができます。

プロジェクトの概要

概要ページは、より多くのコンテキストを提供するもう1つの機会です。チーム、またはクライアントが追加のリソースを見つけるのを助け、フィードバックや質問で誰にコンタクトをすべきか一目で理解できるように情報を提供しましょう。

必要に応じてプロジェクトの概要や調査などのドキュメントに個別のリンクを追加することを検討してください。

ヒント：FigmaではドキュメントまたはSlackプロファイルへのリンクを貼り付けることができます。

Think：考える。問題点を理解する

このセクションは、プロジェクトの基盤を作成するために使用する必要があります。このプロジェクトを成功させるために必要なすべての情報を収集します。

ここで、ユーザーフローやジャーニーマップを作成したり、他のドキュメントにリンクしたり、ジョブストーリーを書き留めたり、デザイン・スプリントの探索の写真を追加したり、スクリーンショットや古いデザインを追加してインスピレーションを得たりすることができます。

💡ジョブストーリーとは、すなわち顧客の課題であり、「オンラインで購買をする際、欲しいものを見つけるための時間を最小化したい」というような表現になります。ジョブストーリーとは、実際にしていることというよりも、したいと望んでいる顧客の真のニーズに言及するものです。

この『Think』セクションを使用して、次の「Explore」探索のフェーズを開始するのに役立つすべての情報を収集します。

Explore：可能な解決策を模索するための発散および収束

このセクションのページを自由に使用し、できるだけ多くの異なるアプローチとオプションを検討しましょう。

💡このセクションはほとんどの場合、コラボレーションするセクションになります。たくさんのコメントやフィードバックを受け取る準備をしましょう。

私は、これまでさまざまなプロジェクトに関わってきましたが、一番大切なことはフィードバックを包括的に受けとることだと思っています。フィードバックを上手く受け取ることでUXを簡単に改善できます。

→ またさまざまなデバイスやフォームファクター（タブレットとモバイルなど）を探索するための個別のページを作成しましょう。

→ セクションを明確に区別するために全ての（Explore）探索とフローにタイトルを追加しましょう。

→ また進行状況を一目瞭然にするためにバッジを追加しましょう。

→ 作成した新しいページに日付を追加して、作業がどの程度最新であるかを示しましょう。

→ ユーザーでテストするプロトタイプには、別のページを使用することを検討してください。

→ 付箋コンポーネントを使用して、メモを追加したり、考えを共有したり、単に作業したいフィードバックやアイデアを収集したりします。

これは、さまざまなレイアウトとメモを含む探索フェーズのページの例です。

Build：統合して適切なソリューションを構築し、リリースしてフィードバックを受け取ります

プロジェクトをExplore探索フェーズからビルドフェーズに移動する準備ができたら、いくつかのページをExploreセクションから移動してビルドに移動するだけです。理想的には、ビルドに表示されるページ数は制限されています。これは、さらなるオプションを検討する時間と場所ではありません。これは、実装の準備ができている必要がある場所です。

このセクションのページは、Exploreセクションよりも構造化されています。ターゲットユーザに正しい情報を伝えることに焦点を当てます。

ここでは、さらにいくつかのヒントと、このセクションを可能な限り効率的に使用する方法について説明します。

→ プロジェクトのマイルストーンごとに個別のページを作成します。

→ さまざまなデバイス（iPhoneとiPadなど）のデザイン用に個別のページを作成しましょう。

→ このセクションのデザインを最後に更新したのはいつかを明確にしてください。

→ これらのページへのリンクは、プロジェクトの進行状況を追跡するために使用している問題、チケット、またはツールで非常に役立ちます。

→ チェックリストは、デザインを実装する前に実行する必要のあるプロセスとレビューのリマインダーとして使用してください。

チェックリストを独自のものにし、チームにとって重要なすべてのプロセスを反映するように変更します。

アーカイブ

他のデザインのアイデアやページにはアーカイブを使用してください。後でこれらの探索に戻りたい場合に備えて、ここにリマインダーとして追加できます。これは、数か月にわたる長くて複雑なプロジェクトで非常に役立ちます。

まとめ

優れたデザインの柱は優れたコミュニケーションです。ベストプラクティスのコレクションを含むこのデザインテンプレートを使用すると、デザインの決定を同僚やクライアントに、より自信を持って、より簡単に伝えることができます。

このフレームワークを使って、これまでで最高の作業を作成、調整、および貢献するのに役立ててください。

ダウンロード

参考資料

私も、色々勉強中なので、皆さまの、ご意見・ご感想をお聞かせください。お読み頂きまして、ありがとうございました。

メルボルンを拠点にプロダクトデザイナーとして働いています。主にデジタル・プロダクトの制作に携わっています。

この記事が気に入ったらサポートをしてみませんか？

🗂️ Design Materials： 優れたデザインの柱は優れたコミュニケーション：ベストプラクティスが含まれたデザインテンプレート。