Blog

Figmaは、UXチームのコラボレーションを加速する人気のあるデザインツールです。ヘッドレスCMSと組み合わせて使用すると、さらに強力なツールになる可能性があります。

組織が設計プロセスの一部としてFigmaを使用している場合、あなたは良い仲間です。 Figmaは、大企業と急成長中の新興企業の両方がUIデザインを開発するための好ましいツールとして急速に台頭してきました。世界中のUXチームは、Figmaと連携してその可能性を最大限に活用する方法を積極的に模索しており、より成熟したチームは、新しいデザインを作成するときに、Figmaを使用してデザインシステムを活用しています。

Figmaのコンテンツデザイナーへの人気

Figmaは、UIデザインのオンラインホワイトボードとして説明されています。チームは、オンラインでデザインを開発およびレビューし、デザインのコピーをリアルタイムで更新できます。

UXチームによるFigmaの広範な採用は、別の傾向と一致しています。UXデザインプロセスへのUXライターとコンテンツデザイナーの参加の増加です。Figmaにより、実際のコンテンツをUIデザインに配置できます。これは、静的なワイヤーフレームやモックアップからの大きな飛躍です。プレースホルダー」コンテンツ、特に恐ろしい「loremipsum」テキスト。リアルなコンテンツをUIデザインに配置して、どのように表示されるかを確認できます。 Figmaを使用すると、デザイナーとライターは、それ以前の他のUIデザインツールよりもはるかに優れたコラボレーションを行うことができます。

Figmaは、各画面コンポーネントがその画面に固有の固有のコンテンツ、特に一度作成されて後で改訂されることのないコンテンツを表示する場合に最適に機能しますが、さまざまなコンテンツやデザイン変数を処理する場合、Figmaは使いにくくなります。

コンテンツのFigmaの制限

Figmaはライティングツールではなくビジュアルデザインツールです。UXチームはライティングがデザインの一部であることをますます認識していますが、Figmaのような専用のデザインツールはコンテンツデザイナーのニーズを念頭に置いて開発されていません。

Figmaを使用するには、ライターは、レイヤーやフレームを含む見慣れないメンタルモデルを備えたビジュアルデザインツールを学ぶ必要があります。Figmaがビジュアルオブジェクトを管理する方法は、コンテンツの編成および管理方法と一致していません。ライターがFigmaの基本を学んだ後でも、コンテンツ要件を推進することになると、彼らは不利になる可能性があります。

Figmaは、多くの場所で利用可能にする必要のある多くのコンテンツを開発しているライターにとって特に困難な場合があります。テキストをUIコンポーネントに従属させることにより、Figmaは、特定のコンテンツが多くの画面またはさまざまなアプリケーションでどのように使用されているかを確認するのを困難にします。 Figmaページに表示されるものは断片化されています。Figmaページはコンテンツの構造を表していません。画面のレイアウトは、作成者がアクセスできる正式な構造に変換する必要があります。

チームには、コンテンツの統合ビューが必要です。さまざまなページやフレームにまたがるコンテンツの断片化により、コンテンツの維持と改訂も困難になります。デザインからコンテンツを分離して、それぞれを個別に改訂できるようにすることを提唱する確立されたベストプラクティスとは対照的に、Figmaでは、コンテンツとデザインは緊密に結合されています。テキストの「文字列」で表されるコンテンツと、コードで表現されるデザインは、共通のファイルに絡み合っています。これにより、1つの画面での変更により、他の画面での変更が強制される場合に問題が発生する可能性があります。開発者は、グローバルな「置換」操作を実行する必要がある場合があります。次に、チームは各画面を個別に確認して、変更によって他の問題が発生しないことを確認する必要があります。

Figmaは、視覚的なデザインの信頼できる情報源として機能する場合がありますが、そのデザインで提示されるコンテンツに対して同じことを行うことはできません。提示されているコンテンツの集中インベントリはありません。どのコンテンツが利用可能で、そのコンテンツが何に関連しているか、そしてそれが一貫しているかどうかを知るのは難しいです。

これらの問題は、複数の言語で作業する場合にさらに顕著になります。フレーズと用語は、現在設計されている少数の画面だけでなく、公開されているすべてのコンテンツで一貫している必要があります。ただし、Figmaは、多くの異なる画面に表示される可能性のあるソースコンテンツを表示するのではなく、特定の画面のコンテンツを表示します。

テキストはビジュアルデザインに従属するべきではありません。フィグマのテキスト管理制限は、ヘルプのチームのようなフィグマdesigns.Pluginsに表示されていることを、テキストを管理するために広くrecognized.Variousサードパーティベンダーは、先進のプラグインを持っている同上とストリングスがフィグマのアウトオブボックスの機能に比べて明らかな利点を提供します。しかし、Figmaをライターにとってより親しみやすいものにする一方で、プラグインは依然としてFigmaのネイティブテキスト機能に依存しており、コンテンツよりもビジュアルデザインを優先します。ライターは、コンテンツから始めてデザインを形作るのではなく、さまざまなUIコンポーネント内にコピーを入力することが期待されます。これは、特定のコンポーネント用にカスタム作成されたコピーではなく、既存のコンテンツまたはデータをデザインが提示する必要がある場合に特に重要な問題になります。

プラグインは、限られた数の画面と限られた量のコピーでアプリを開発するなど、小規模なプロジェクトでうまく機能します。ただし、多くのアプリやプラットフォームで提示する必要のあるコンテンツを抱える企業に完全なソリューションを提供するわけではありません。コンテンツデザイナーは、一貫性があり、保守が容易なコンテンツを計画できる必要があります。幸いなことに、ヘッドレスCMSはその不足している機能を提供できます。

FigmaでヘッドレスCMSを使用する方法

Figmaは、外部ツールがそれに接続できるようにします。APIからアクセスでき、JSON形式を使用して記述されたコンテンツを受け入れるため、ヘッドレスCMSの完璧なコンパニオンになります。

多くのUXチームは、FigmaプロジェクトをKenticoのKontentなどのヘッドレスCMSに直接接続できることに気づいていません。AdamAmranは、UX Collective Webサイトでこれを行う方法についてのチュートリアルを提供し、「コンテンツファースト」アプローチがどのようにできるかを示しています。 Figma.Adamと協力して、プロセスの3つのステップについて説明しました。

1. コンテンツ構造のモデリング
2. コンテンツの作成
3. ユーザーインターフェイスの設計

チームはヘッドレスCMSを使用して、既存および潜在的なすべての種類のコンテンツを使用してUIデザインのプロトタイプを作成できます。Figmaに接続されたヘッドレスCMSは、さまざまなデザインシナリオをサポートできます。コンテンツがすでに存在する場合は、コンテンツとデザインの両方、またはデザインのみを反復するために使用できます。

UXチームは、ヘッドレスCMSとFigmaを組み合わせて、次の2種類の決定をサポートできます。

1. 内容が決まったらデザインを決める
2. コンテンツとデザインの両方を決定するには

最初のシナリオでは、チームがFigmaで作業を開始する前にコンテンツがすでに決定されています。これは、新しいインターフェイスで表示する必要のある既存のコンテンツがある場合に発生します。また、法的に義務付けられているステートメントを提示する必要がある場合など、ビジネスの利害関係者がビジュアルデザインよりも先にコンテンツを決定する場合にも発生します。どちらの場合も、デザインはコンテンツに適合し、提示する必要のあるものを適切に強調する必要があります。読みづらい、気づきにくい。

2番目のシナリオでは、提示されるコンテンツはまだ決定されていません。これは、チームがコピー内のさまざまな表現を試して、ユーザーにとって最適なものを確認する必要があるためである可能性があります。それ以外の場合は、含める詳細の量を決定する必要があります。文言の選択と詳細の量がデザインに影響を与える可能性があります。デザインによってテキストの必要性が減る場合があります。テキストとデザインレイアウトの相互作用は流動的です。メッセージや情報が複数の画面に表示される場合があります。チームは、コンテンツとデザインオプションのさまざまな組み合わせを試してみたいと思うでしょう。

コンテンツとデザインの決定には、次の2つのレベルの問題が含まれます。

1. 単独で検討した場合に「理想的なソリューション」に直接影響する要因
2. 「理想的なソリューション」がさまざまな状況でどのように機能するか

サインアッププロセスをサポートするためのプライマリアクションとセカンダリアクションを提示するコンポーネントの単純なケースを考えてみましょう。チームは、2つのアクションのテキストと、テキストを提示するためのボタンまたはリンクのデザインを決定する必要があります。この単純なコンポーネントは、さまざまなテキストを表示する他のより大きなUIコンポーネント。チームは、自分たちの決定があらゆる種類のサインアッププロセスをサポートするのに役立つかどうかを知りたいと思うでしょう。

提示する必要のある多様性を理解します。実際のコンテンツを使用したデザインは、プレースホルダーコンテンツを使用する場合よりも面倒な場合があります。これは、既存のコンテンツを操作する場合に特に当てはまります。チームはさまざまな質問やオプションを検討できます。

コンテンツもデザインも「形」になります。コンテンツの形状（フィールドの数と長さ、または画像の特性）は、UIの形状（要素のレイアウトと強調）に影響を与えます。

形が変わることがあります。コンテンツのさまざまなインスタンスが同じプロファイルを持たない場合があります。UIカードなどのさまざまな種類のコンテンツを表示する汎用UIコンポーネントは、一部のフィールドが常に使用できるとは限らない情報に対応する必要がある場合があります。チームは、コンテンツを表示するタイミングを決定する必要があります。基本UIコンポーネントのバリエーションが必要であるか、代替UIコンポーネントの方が優れているかどうか。

次の表は、チームがさまざまなシナリオで調査する可能性のあるいくつかの質問を示しています。

FigmaでヘッドレスCMSを使用する利点

ヘッドレスCMSは、さまざまなUIに表示されるすべてのコンテンツへの単一のウィンドウを提供します。それは4つの主な利点を提供します：

1. 提示されている実際のコンテンツを正確に管理する機能
2. 多くのコンテンツとデザインバリエーションでプロトタイプを作成する機能
3. 作家やビジネス関係者に優しいオーサリング環境
4. コンテンツの真の真実の源

フラグメントをコピーするだけでなく、実際のコンテンツにアクセスする

ヘッドレスCMSは、チームに実際のコンテンツの整理されたインベントリを提供します。 Figmaに接続すると、コンテンツがどのように表示されているかを理解できます。 UIコピーの文字列を単に保存するのではなく、UIで公開されるすべてのコンテンツを管理します。

Figmaアプリは、テキスト管理プラグインを使用しても、UIに表示されるエンタープライズコンテンツの完全なインベントリを提供しません。プラグインは、企業のコンテンツの1つのサブセットにすぎないUIコピーの文字列を処理します。プラグインで管理されたテキストへのアクセスは制限される可能性があります。すべての利害関係者が利用できるとは限らず、コンテンツのライフサイクル全体を通じてアクセスできるとは限りません。

目標はFigmaデザインで実際のコンテンツを提示することであるため、実際のコンテンツを保存されている場所（CMS）から提供することは理にかなっています。

コンテンツデザイナーは、単語、フレーズ、およびその他のコンテンツが使用されるコンテキストを知る必要があります。コンテンツのより広い風景を見るために、特定の画面を見ることからズームアウトする機能が必要です。

顧客に提示されるすべてのコンテンツのユーザビリティに焦点を当てます。企業が直面する一般的なユーザビリティの問題を考えてみましょう。スマートフォンアプリは機能やサービスを指すために1つの用語を使用していますが、ウェブサイトは別の用語を使用しています。残念ながら、それは難しい場合があります。特にスマートフォンアプリのデザインにのみ使用されている場合は、Figmaアプリ内でその問題をキャッチします。Webサイトは以前に別のチームによって作成された可能性があり、2つのフレーズが使用されているコンテキストを確認せずに確認することは困難です。多くの画面で。

さまざまなUIに表示されるコンテンツを管理するには、UIの文言や「コピー」を管理するだけでは不十分です。チームは、UIに表示される実際の情報やデータを使用できる必要があります。たとえば、既存の製品情報を確認する必要があります。が表示されるか、UIでデータが適切にフォーマットされていることを確認します。また、画像アセットのライブラリがデザインに明確に表示されることを確認したいと考えています。

ヘッドレスCMSはすでにこれらすべての種類のコンテンツを保存しており、それらをFigmaに提供できます。

関係と区別を理解するためにコンテンツを構造化します。ヘッドレスCMSを使用する場合、UIに表示されるコンテンツを正式に構造化できます。コンテンツはCMSのコンテンツモデルで編成され、企業で使用されるすべてのコンテンツの関係を示します。

コンテンツモデルは、Figmaの一般的なテキストフィールドの寄せ集めとは対照的に、コンテンツを一意のフィールドを持つ個別のコンテンツタイプに構造化します。 Figmaは、コンポーネントに関連してテキスト文字列を関連付けます。テキスト管理プラグインは、タグを使用してUIコンポーネントに表示されるコンテンツを遡及的に管理できます。ただし、UIコンポーネント内に表示されるコンテンツにタグを付けることは、スケーラブルなアプローチではありません。Figmaのコンテンツには独自の構造がないため、各UIコンポーネントが追加されるたびに、タグ付けが段階的に行われます。CTAボタンのボタンテキストに「CTA」というタグを付けることができます。 」—別のCTAを作成する必要があることに気付くまで。チームは、UIコンポーネントを説明するタグに従ってコンテンツの特性を推測するのではなく、コンテンツを直接正確に説明する機能を必要とします。コンテンツには多くのバリエーションとニュアンスがあるため、何が利用できるかを把握することが重要です。

コンテンツモデルは、画面全体のトピックまたはタスクごとにコンテンツの構造を示します。正式な構造を定義することで、チームはコンテンツをより徹底的に管理し、メッセージ、情報、またはフレーズが何に関連するかについてのあいまいさを回避できます。ヘッドレスCMSを使用する場合、チームは異なるタイプのコンテンツに正確な分類用語でタグを付けることができます。フレーズを使用しているかどうかだけでなく、どのコンテンツタイプでそのフレーズが使用されているかを確認できます。チームは分類用語を適用して、テキストがサポートしている目標を示すことができます。この粒度により、チームは、各画面を個別に表示しなくても、単語やその他のコンテンツが表示されるコンテキストを高レベルで理解できます。

ズームインおよびズームアウトしてコンテキストを取得します。ヘッドレスCMSは、複数の場所に表示されるコンテンツの単一のビューを提供できます。優れたCMSは、次のようなコンテンツにアクセスして管理するための多数の機能を提供します。

• コンテンツタイプでコンテンツアイテムをフィルタリングして、一貫性または相違点を判断する
• カスタマージャーニーステージ、カスタマーセグメント、または製品に関連する分類タグによる整理とフィルタリング
• 文脈に応じて単語やフレーズの出現を検索する
• 特定の分野の情報を比較する
• 異なるバージョンでの変更の追跡

構造化されたコンテンツ管理により、チームはズームアウトして、多くの異なる画面に埋め込まれたときに気づきにくい詳細を比較できます。チームは、特定の表現を使用したり、特定の情報を提供したりするのに適切な時期と場所を探索できます。チームは、さまざまなバリエーションやオプションを比較できます。提示されているか、そうである可能性があります。

コンテンツを使用したより優れたプロトタイピング

2つ目の利点は、ヘッドレスCMSを使用すると、コンテンツのプロトタイピングがより効率的になることです。既存のコンテンツをコピーしたり、キーを再設定したりする必要がなく、デザインに組み込むことができます。さまざまなバリエーションやオプションを試してみる場合は、次のようになります。さまざまなFigmaデザインに簡単に提供されます。

構造により、チームはより多くのシナリオのプロトタイプを作成できます。

• 限られたスペースに直面したときに提示するフィールドを決定する
• さまざまなメッセージバリエーションを提示する必要がある場合の代替フィールドの開発
• 長さが異なる可能性のある実際の情報を提示する設計の能力をテストする

コンテンツはCMSに保存され、UIコンポーネントのレイヤーに埋め込まれていないため、チームは同じコンテンツをさまざまな方法で表示できます。特定のUIコンポーネントのさまざまなバリエーションでコンテンツがどのように表示されるかを試してみることができます。また、その方法を確認することもできます。コンテンツはさまざまなUIコンポーネントに表示される場合があります。これは、さまざまなチャネルまたはさまざまなプラットフォームで表示する必要があるコンテンツを計画する場合に特に便利です。

より便利で使いやすいオーサリング環境

Figmaとは異なり、ヘッドレスCMSは書き込みをサポートするように設計されています。コンテンツを、ページ上の一般的な長方形ではなく、説明フィールドに構造化します。ライターは、コンテンツを開発するときに、何を言う必要があるかに集中できます。

ガイドラインで著者を助けます。特定のヘッドレスCMSでは、コンテンツフィールドごとに「ガイドライン」を埋め込んで、目標、対象者、トーン、テキストの長さ、画像の特性に関する追加の指示を提供できます。これらのガイドラインは、スタイルガイダンスやデザインシステム定義の文字などの企業標準を反映できます。制限。ガイドラインは、見出し、ラベル、ボタン、説明などのフィールドのオーサリング環境で提示できます。フィールドには、許可されたテキストの書式設定、プレーンテキストまたはリッチテキストの指定、箇条書きを使用できるかどうかを示すこともできます。

ライターは、使い慣れたオーサリング環境で作業して、デザインツールのレイヤーの使用方法を学ぶことなく、Figmaファイルに表示されるテキストを更新できます。ライターは、CMSに統合されている可能性のある用語リストやスタイルガイドラインなどのスペルチェックおよびカスタムライティングツールにアクセスできます。

レビュー担当者がコンテンツに集中できるようにします。コンテンツレビューにヘッドレスCMSを使用すると、同様にメリットがあります。フィードバックや提案を収集し、バージョンの記録を長期にわたって維持するのは簡単です。誰もがコンテンツに直接コメントを追加できます。ビジネスの利害関係者でさえ、他の編集ツールと同じように見えるツールを快適に使用できます。対照的に、 Figmaでコンテンツをレビューする場合、ビジネスの利害関係者は、めったに使用しない見慣れないアプリケーションに適応する必要があります。Figmaでは、ボタンの色など、コンテンツ以外のことについてコメントする傾向があります。既存の設計システムによって決定された場合。ヘッドレスCMSでのコンテンツレビューは、視覚的なプレゼンテーションではなく、コンテンツに焦点を合わせて、ディスカッションを軌道に乗せることができます。

最後に、ヘッドレスCMSを使用すると、チームはコンテンツに関連する補足情報を含めることができます。これらのフィールドには、アクセシビリティ情報に注釈を付けたり、表示されていない関連メタデータをキャプチャしたりするためのフィールドを含めることができます。

すべてのコンテンツの信頼できる唯一の情報源

ヘッドレスCMSは、すべてのコンテンツに包括的な真実の情報源を提供します。音声ボットなどの画面がないものも含め、あらゆるプラットフォームまたはチャネルで使用されるコンテンツを管理できます。翻訳されたコンテンツやローカライズされたバリエーションを管理および追跡することもできます。

著者に独立性を与える。ヘッドレスCMSのコンテンツは、ドラフト段階でコンテンツを保存するプラグインとは対照的に、作成者は常に利用できますが、展開時にGitHubなどのコード責任に文字列が保存されると、作成者はアクセスできなくなります。作成者は所有権と制御を維持します。 CMSのコンテンツであり、改訂を行うために開発者に依存する必要はありません。

CMSに保存されているコンテンツはデザインから切り離されており、それを表示するソフトウェアアプリケーションにハードコードされていません。フロントエンド開発者は、作成され、ビジネスの利害関係者によってレビューされ、ユーザーによってテストされたコンテンツを邪魔することなくコードライブラリを変更できます。これにより、コンテンツリビジョンがデザインリビジョンとは別に保持されるため、デザインファイルを台無しにすることはありません。

ヘッドレスCMSをUXデザインプロセスに統合する

ヘッドレスCMSを使用すると、チームがUIテキストを開発する他の方法を補完できます。彼らがあなたのニーズを満たしているなら、あなたはあなたの現在の慣行を落とす必要はありません。 Figma内で開発したコンテンツをヘッドレスCMSに同期できるため、すぐに展開できるコンテンツのインベントリが作成されます。コンテンツはコードに依存せず、後で簡単に修正できます。

目標は、プラクティスを拡張し、新しいアプローチを試すことです。UXツールキットにヘッドレスCMSを追加すると、チームはオプションを探索および検証し、より良い要件を開発するための多様性を高め、再利用と一貫性を促進することでコンテンツのガバナンスを改善できます。これにより、コンテンツデザイン操作の成熟度を高めることができます。