はじめに
トライベックのクリエイティブチームでは、コーポレートサイトのデザインを多く手がけています。
コーポレートサイトは企業とステークホルダーとの接点として、サイト内でのユーザビリティ・アクセシビリティへの配慮や、質の高いブランド体験が重要です。
その中で、「サイト全体におけるUIデザインやブランド体験の課題が把握しづらく、改善の方向性を分析することが難しい」といった課題を持つ企業からご相談をいただくことがあります。
私たちはこのような課題に対し、コーポレートサイトデザインの知見を活かしながら、デザインの視点でサイトの課題を分析・見える化する「デザイン分析」を実施しています。
このコラムでは、過去に実施したデザイン分析において特に多く見られた課題（改善点）から、コーポレートサイトにおけるUIデザインの課題を洗い出すヒントをご紹介します。
デザイン分析とは？
デザイン分析は、「UIデザイン分析」と「ブランド体験分析」という2つのヒューリスティック分析から成り立ちます。
「UIデザイン分析」は、操作性に重点を置いた診断軸による分析です。
「ブランド体験分析」は固定の診断軸はなく、企業が策定した戦略・強みが的確に表現されているかなどのブランド体験にフォーカスし、ブランドが表現すべき内容やデザインの方向性・改善点を明らかにする分析です。
いずれも、重点ページのみを抜粋して分析します。
「ブランド体験分析」は企業の特性による違いが大きく、共通課題として整理しにくいため、今回は「UIデザイン分析」に絞ってご紹介いたします。
「UIデザイン分析」の診断軸は、以下の通りです。
UIデザイン分析の診断軸
A. サイトを横断するルール
基本レイアウト・ナビゲーション定義：デザインの明確性・統一性を評価
デザインコンセプトを体現できているか、ユーザーの目的（期待動作）に合致しているか、遷移を繰り返した際にページの内容を把握しやすいかなどを評価します。
B. サイトを構成するデザインパーツ
1. デザインモジュール(コンポーネント)：テキスト、ボタン、フォームの明確性、統一性を評価
操作の基本となるデザインパーツの使いやすさ、視認性、統一性を評価します。
2. カラースキーム：カラーの配色（使い方）、サイト全体の配色ルールの明確性、統一性を評価
カラーは正しく使用されているか、ユーザーをスムーズに誘導する配色がされているかを評価します。
3. アイコン：アイコンの明確性・統一性を評価
アイコンのデザインや配色の明確性、統一性、視認性を評価します。
4. レイアウトグリッド：レイアウトフォーマットの統一性
レイアウトの統一性、マージン（余白）やグリッドの適正などを評価します。
C. アクセシビリティ
アクセシビリティへ配慮されているか
コントラスト比など、ウェブアクセシビリティのガイドラインの中で、デザインに関わる項目を中心に評価します。
実施してきたUIデザイン分析では、「B：サイトを構成するデザインパーツ」の「2.カラースキーム」と「3.アイコン」に課題を持つサイトが多くありました。
それぞれ、具体的なUIデザインの課題の事例をご紹介します。
UIデザイン分析で多く見られた課題
1. カラー
コーポレートカラーの多用
コーポレートサイトでは、メインカラーにコーポレートカラーが多用されるケースがよく見られます。
ユーザーが直感的に企業を識別できるようにするなどの目的で設定されますが、以下のような問題点があるため、ユーザビリティ・アクセシビリティの観点から注意が必要です。
1）ユーザーの誤操作の原因になる
例えばクリックできるテキスト（リンク）と強調のテキスト（非リンク）に同じカラーが設定されていると、ユーザーの誤操作を招く恐れがあるため、カラールールを見直す、リンク箇所へ下線を付けるなど、視覚的な区別をしやすくすることが望ましいです。
▼例：リンクと非リンクが判別しづらい
2）アクセシビリティの問題
コーポレートカラーによってはテキストと背景色の視認性が確保できず、アクセシビリティ基準をクリアできない（判別できない方は情報取得ができない）ため、コントラスト比を担保したカラー設定が必要です。
▼例：「お問い合わせ」ボタンと文字のコントラスト比が不足している
2. アイコン
1） 同じユーザーの動作に関わるアイコン（ビュレット）の形状が不統一
※ビュレット…ユーザーの動作に関わるアイコン（別ウィンドウなど）は「ビュレット」と定義し、視覚的な表現のアイコンとは区別をしています。
同じ動作のビュレット形状が複数存在するとユーザーの直感的な操作を妨げる場合があるため、統一することが望ましいです。
▼例
2） 異なる動作のビュレット同士で形状が似ている
ユーザーが判別しづらく誤操作を招く恐れがあるため、異なる動作のビュレット同士の形状は、差別化する必要があります。
▼例
まとめ
このように、ユーザー操作を考慮しているか、一貫性があるか、などの観点からサイトで分析することで、現行サイトにおけるUIデザインの改善点を洗い出すことができます。
デザイン分析に限らず、デザイン提案において、現行サイトの課題点を洗い出して言語化・見える化した上で改善の方向性を決めると、合意形成をスムーズに行いやすくなります。
お客様からは「今まで評価基準が掴みづらかったデザインが言語化され、デザインへのレビューがしやすくなった」「社内への説明がしやすかった」などの評価をいただきました。
最後に：サービスに関するお問い合わせ
自社サイトにおいて「専門家が在籍していないのでデザインの評価ができない」「現状のデザインがトレンドに合っているかわからない」などの課題を感じている方は、ぜひお気軽にお問い合わせください。
お客様の特徴に合わせたデザイン分析をいたします。
https://www.tribeck.jp/contact/service/
この記事の執筆者
Y.K
クリエイティブUX事業部
この記事に関するご相談やご質問など、お気軽にお問い合わせください。
関連する記事
-
デジタル・AI時代のロゴデザインの考え方
オピニオン/クリエイティブ
-
サービスデザイナーの改善プロセスと考え方
オピニオン/クリエイティブ
-
アクセシビリティとデザイン性の両立
オピニオン/クリエイティブ