※本ブログはRefined「5 Ways to Structure and Organize Your Confluence Knowledge Base」を翻訳したものです。内容に相違がある場合は、原文を優先とします。
ナレッジベースを生き返らせるための6つのデザインのヒント
※本ブログはRefined「6 Design Tips to Bring Your Knowledge Base to Life」を翻訳したものです。内容に相違がある場合は、原文を優先とします。
Confluence ナレッジベースを輝かせるために、私たちデザイナーが簡単に実践できるアドバイスをお伝えします。
これを読んでいる方であれば、ナレッジベース構築が簡単ではないことを説明する必要はないでしょう。特に大規模な組織では、Confluenceの構造、整理、タグ付けだけでも膨大な作業であり、言うまでにもなく、レガシーなプラットフォームからの移行作業は作業は大変なはずです。
しかし、ユーザーはどれだけの時間と計画に費やされたかを一連の作業が完了した際に知る機会はなく、ただただ必要な作業をこなし、作り上げていくしかないのです。
優れたデザインは、見た目の美しさだけでなく、直感的なナビゲーションから必要情報を見つけやすくするサポートをします。
Refined for Confluenceは優れたデザインを構築するツールですが、Refined サイトの構築を担当する多くのナレッジマネジメント、サポート、または IT プロフェッショナルと同様に、デザインはあなたにとってメインの分野ではないかもしれません。そんな場合でも大丈夫です。今回紹介する内容はより効果的なナレッジベースを構築するために誰もが実践・適用している事実に基づいたデザイン原則になります。
また、今回はRefinedの社内デザイナーであるマチルダ・アイストレ氏とカタリーナ・オロフスドッター氏にもノウハウを聞きました。彼女らは、１０年半にわたるデザインの経験を持ち、Refinedのサイト構築においての経験も豊富にあります。では実際に彼女らのアドバイスを紹介していきましょう。
目次
1. ナレッジベースのデザインは一貫性を保つ
サイトをデザインする上で、あなたができる最もシンプルで効果的なことはデザインの要素に一貫性をもたせることです。
「まず、サイトのスタイルを決め、そのスタイルをサイト全体に反映させます。テーマとコンテンツ両方に反映することでまとまりが出るようにするのです。」とカタリーナ氏は言っています。
実はここではある心理学が働いています。ゲシュルタルトの類似性の法則によれば、人間の脳は見たものをグループ化する傾向があります。また、そのグループ内の項目を同目的または同機能として解釈する傾向があるようです。
つまり形と色に一貫性を持たせて使用することで、ユーザーをピンポイントで誘導することが出来る可能性があるのです。また、カタリーナ氏は「基本的に同じようなものは同じように見えるべきです。」と言っています。この目的にはこのタイプのナビゲーションを使用すると決定した場合、それに則ってサイト構築を進めてください。例えば、テキストはどこにどのサイズと色を当てていくのかを決め、そのスタイルを、全体に反映させていくなどが挙げられます。
他に一貫性を保つ方法として下記のような方法もあります。
-
サイト全体に同じテーマを使用する
-
サイト全体で一貫したサイズのナビゲーションモジュールを使用する
-
サイト全体で同じスタイルの画像や図を使用する
-
ページの片側に見た目がアンバランスなものや無駄な空白等をなくし、それぞれのコンテンツが整った状態で表示されているようにする
-
ナレッジベースや社員または顧客が定期的にアクセスするイントラネット及び一般的なウェブページ等が常につながる状態にしておく
-
カラーパレットに一貫性を持たせる。例えばテーマのモジュール色や画像を同じようなものでまとめる等
2. 3つの避けるべきこと: 情報過多・デッドリンク・必要以上の階層
ここではサイトのデザインを構成する際に避けるべき３つのポイントについて紹介をします。
-
情報過多
ごちゃごちゃ感はユーザーエクスペリエンスにとって天敵です。そのため、1つのエリアに多くの情報を詰め込みすぎないようにしましょう。代わりに、ユーザーニーズに沿ったコンテンツを種類別にセグメント化し、ホワイトスペースで区切りましょう。
ここで取り上げているナレッジベースでは、様々なカテゴリーのコンテンツにリンクができるナビゲーションモジュールのクラスター機能を使用し「情報過多」を上手く回避しています。
-
デッドリンク
どこにもリンクしないナビゲーション・コンテンツモジュールの使用や、空白ページへのダイレクト、空白の検索結果等、ユーザーが行き詰まりになる事態を回避しましょう。常に動くリンク先の設定とその確認、未完成Confluenceページ/スペースへリンクすることを避ける、推奨リンクや検索ヒットワードの表示設定をおこなう等は回避策の一例です。
ユーザーをどこに誘導する場合でも、前のページへのリンクバックやサイトトップへのナビゲーション等の別のスペースへ移動ができるオプションを兼ね備えておくことは重要です。
-
必要以上の階層
「重要コンテンツは、2,3回クリック以上先に置かないようにしましょう」とマルチダ氏は言います。理想的には、ユーザーが必要としているコンテンツへは3回クリック以内でアクセス出来るようにすべきなのです。
これにはサイトビルダーを使用し、サイトの階層をコントロールしましょう。Confluenceコンテンツをサイトビルダーにドロップすると、フロントエンドのナビゲーションのように対応させることができます。尚、Confluenceサイトの構築方法についてはこちらも詳しくご確認いただけます。
3. プレースメント・カラー・サイズを使い、最重要コンテンツを強調する
全てのコンテンツが同じように作られているわけではありません。あるコンテンツは他のコンテンツよりも重要性が高いと、より頻繫にアクセスされることになります。そのようなコンテンツと、ユーザーがそのコンテンツに行きつくまでの道のりを明確にすることがデザインの何を強調するべきかの判断材料になるのです。
カタリーナ氏は「配置の工夫もしましょう。まず、最も重要なものから手を付け、徐々に細部に取り掛かります。コントラスト色やサイズなどを使用して、最重要要素を視覚的に協調していくのです。」と言っています。
最も重要なコンテンツは、個別に設定を行うこともできます。
「このコンテンツは、より多くのスペースが必要なのか？区別化し、重要性を高めるべきなのか？または、他コンテンツとグループ化すべきなのか？」と自分に問いかけてみましょう。
「例えば、4列のアイコンと2列の分割画像、そしてフルスクリーン画像を相互に配置するとよりダイナミックな印象を与えることができます。また、フォーカルポイントを目立たせ、大きくすることも効果的です。」とマルチダ氏は言います。
最も重要なコンテンツを強調するには、ページの幅いっぱいに配置されたナビゲーションハイライトが最適かもしれませんが、他にも簡単にできるデザイントリックがたくさんあります。
-
色と画像：サイトの色合いとは対照的な色や画像を使用することでモジュールを目立たせます。多くの場合、ブランドガイドラインに使用すべきカラー規定があるかと思います。まだ規定がない場合は検討してみましょう。
-
サイズと配置：ページの幅全体に広がる大きなナビゲーションハイライト(上述参照)など、ページの大部分をモジュールに割り当てることはユーザーの目を引く確実な方法と言えるでしょう。
-
テキスト：上記と関連しますが、ナビゲーションハイライトの大きなテキストが目を引くことは稀です。
尚、フォーカルポイントに関していくつか注意点があります。それは意図的にユーザーの目に留まる必要があるコンテンツのみにハイライトを入れるようにすることです。マルチダ氏も「すべてをハイライトの対象とすると、なにも目立たなくなってしまいます。」と警告しています。
4. イメージを使用し、ナレッジベースのデザインをより華やかにする
ナビゲーションハイライト、検索ハイライト、ナビゲーションコンテンツなどのモジュールは画像を使用してカスタマイズすることもでき、これは「サイトを生き生きとさせるためにとても有効な方法です。」とマルチダ氏は言っています。そして「ザ!!本命という感じのがちがちの写真ではなく、よりオリジナル性に富んだ画像を使用するようにしましょう。オリジナル画像にアクセスできない場合はPexels、Unsplash、Snapstockなどのサイトを試してみてください。」とも言っています。
ブランド、マーケティング、デザインチームにアクセスできる場合は、ブランドイメージのポートフォリオ管理がどのようになされているのかを確認してみるのもいいかもしれません。
また、画像は必ずしもモノや人物である必要性はありません。一部の企業では、ブランド化されたデザイン、抽象的なイメージやイラストを好んで使用しているところもあります。ぜひ、SpotOnのヘルプセンターや、私たちの移行サイトを確認し、私たちが今述べたことを確認してみてください。
注意事項：画像サイズはサイトの読み込み時間にも影響するため、モバイルデバイスのデータ量を多く消費してしまう可能性があることを念頭に置きましょう。変更できる場合は、合計のファイルサイズを1ページ当たり400㎅未満に抑えることをお勧めします。
5. 余計なものは省く
モジュール・レイアウト・カラーやテキスト等のカスタマイズは無限大にできますが、無茶苦茶にカスタマイズするのではなく、ユーザーに親切なデザインを行うことを心がけましょう。
例えばカラーですが、「1，2色でずいぶんと印象を変えることができます。また、色相を1つにしぼり、その色相の中で色合いやコントラストの調整をすることもできます。もし、自分が何をしているか100%の確認が持てない場合や、ブランドのカラーセットがまだ確立していない場合等は、シンプルなデザインを採用するほど良いでしょう。」とカタリーナ氏は言います。
また、ホワイトスペースは、物事をシンプルに保つ際に効果的で、「スペースを作ることで、落ち着いた雰囲気にすることができます」とカタリーナ氏も言っています。
シンプルなデザインの事例を確認するには、Gruntify のヘルプセンターを参考にしてみてください。単色のカラーパレットの使用や、検索ハイライトの使用、そしてナビゲーションハイライトの使用を行うなど余計なものを省いた上での工夫がされています。
6. 検証することを恐れない
デザインプロジェクトは流動的です。そのため、数回のクリック操作だけでその変更ができない場合もありますが、配色やモジュール、レイアウト等気に入ったものに出会うまで操作を行いましょう。
「何が機能していて、何がいけないのかを公開という形ではなく、プレビュー表示で確認・把握することができます。また、Refinedは未公開の変更も下書きとして保存し、変更に満足のいかない場合は以前のバージョンに復元させることも可能なため、誰でも簡単にストレスなく利用することができます。」とカタリーナ氏はいいます。
特にモジュールを色々と設定してみましょう。カタリーナ氏も「モジュール内容を把握し、何ができるのかを試してみてください。カスタムコードでできることも多くあるため時間をかけて色々試してみてください。」と言っています。
例えば、ナビゲーション・コンテントモジュールだけでも、下記の要件を盛り込むことができます。
-
プライマリーテキスト（大見出しテキスト）
-
セカンダリーテキスト（小見出し・説明文）
-
アイコンまたは画像
-
アイコンや画像サイズ
-
ボタンとボタンテキスト
-
リンク
他のモジュールも同様にカスタマイズが可能で、モジュールの高さや、ページのルックアンドフィールの変更を行うこともできます。更に、ナビゲーションハイライトと検索ハイライトは必要に応じて幅の調整を行うことができます。
7. さあ次は、あなたの番です
時間をかけて適切なデザインを作り上げていくことは、ユーザーエクスペリエンスの向上や、リピーター率の向上、Confluenceベースのナレッジマネージメント及びサポート戦略におけるROI向上等プラスに作用します。
「サイトはコンテンツを表示させるためだけのものではないということを認識してください。そしてそのことを念頭にユーザーがまた戻ってきてくれるようなエクスペリエンスを体験してもらいましょう。」とマルチダ氏は言います。
尚、ナレッジベースの構成・整理する方法を最大限に活用するためのガイドはこちらからご確認いただけます。また、構成中に疑問が生じた場合は、Refinedのドキュメントを参照するか、サポートチームへお問合せください。
Refinedで構築するConfluenceナレッジベースのテーマについて詳しく知りたい方
30日間無料トライアルができるRefined for ConfluenceはAtlassian Marketplaceにてダウンロードが可能です。
最後に
今回も、よりナレッジベースを使いやすく・見やすくするために必要なポイントについて翻訳をしました。ゼロから作るのではなく、Refinedのテンプレートや機能を使用するので、外注費や調査等のコストも抑えることもできます。過去のブログでも同様のトピックを翻訳紹介してきました。是非参考にナレッジベースのラッピングを行ってみてはいかがでしょうか？
Confluenceで構築された社内ポータルでテーマを設定する方法
Confluenceのナレッジベースを構築および整理する5つの方法
その他、質問等がありましたら、右下のチャットボタンよりお問い合わせください。
