MENU UIデザイン

構造をビジュアルとして表現し、ユーザビリティの高いインタフェースを構築します。

戦略から表層のデザインを一貫して行い、その最終的なアウトプットとして、お客さまのサービスの体験を向上するUIデザインに落とし込みます。このUIデザインによって、ユーザーのサービスに対する印象や体験は大きく変わります。サービスが提供するユーザーの体験価値はコンテンツ価値とUIの適切性による掛け合わせです。このUIの適切性というのは、UIの質はもちろんの事、UXリサーチを使って定義したターゲットにとって、使いやすいものになっているUIであるかが重要です。そのため、セブンデックスはUXリサーチなどのターゲット策定の戦略部分から、UIデザインなどの制作部分までの一貫した支援を行うことで、最適なUIデザインのご提供を可能としています。 セブンデックスが作成するUIデザインは、ユーザー体験を向上させるのは前提として、開発フレンドリーなデザインの作成も意識しています。最終的な成果物としては、デザインシステムの開発までをゴールとし、開発運用の簡易化も図ります。

ワイヤーフレームの分解

UIデザインを作成する際は、ワイヤーフレームの構成をそのままデザインに落とし込むのではなく、一つ一つの要素に分解した上でそれぞれの情報を最適にユーザーに見せるレイアウトを作成します。まずは情報の配置や見せ方の確認をワイヤーフレームで行い、内容が確定し、プロトタイプによる検証等も済ませた上で、詳細なデザインに移行します。この時、ワイヤーフレームだけを参考にしてデザインを作成するのではなく、カスタマージャーニーに基づくユーザーのペインとゲインを考慮した上でデザインを作成します。

UIライブラリの利用

UIデザインに落とし込む際は、いきなり全てのパーツを自作するのではなく、既存のUIライブラリの利用を検討する場合もあります。例えば、「早めにリリースを行いたい」「機能が単調で開発運用のコストをなるべく下げたい」などの条件がある場合です。その際、UIライブラリを使用する事により、UIデザイン、開発ともにスピード感を持って進行します。エンジニアを交えた議論で工数を見積もり、機能要件を考慮した上で全てオリジナルで作成するか、UIライブラリを利用するかを判断します。

アトミックデザインの活用

コンポーネントのデザインを作成する際は、アトミックデザインを活用して作ります。最も細かいコンポーネントの最小単位を原子として、原子を組み合わせつつ、コンポーネントを形成していきます。それにより、開発フレンドリーなデザイン設計を目指すとともにデザインの変更が起きた際の作業効率を最大化させます。このコンポーネントの単位は、ただ原則である「原子」「分子」「生体」「テンプレート」「ページ」の5つに分けることにこだわるのでなく、お客さまのサービスによって最適な分類を探し出し、適切な粒度でコンポーネントの分類を行います。

デザインシステムの構築

サービス全体のデジタルクリエイティブのデザインに統一感を持たせるため、デザインシステムを構築します。デザインシステムを構築する上で、まずはそのサービスのデザイン原則を定義します。デザイン原則とはプロダクトに関わるステークホルダーがサービスを作っていく上で重要視することを言語化し、何を優先してデザインを作るかの指標になります。この原則を定義した上で、それに沿ったスタイルガイドとコンポーネントライブラリを作成します。場合によってはインタラクションやアニメーション、サウンドの定義まで行い、必要に応じた細かいデザインシステムを構築します。こうして構築したデザインシステムにより、質の高いデザインを担保して、継続的なサービス開発の運用を行うことを可能とします。

提供メニュー MENU

上流の調査分析、ユーザー定義、UIデザインまで、提供できるUXデザインプロセスが多いからこそ、企業のあらゆる課題を解決できます。デザインプロセスをそのまま行うのではなく会社に合わせて最適なプロセスを組み提供するため、自社課題に合わせたオリジナルの最適解を提案しています。