デザインを考える時、コーポレートサイトやECサイトのデザインは参考サイトがあり、その中でたくさんの参考を集めることができます。
しかし、管理画面や社内システムのような一般に公開されないWebサービスのデザインはどうでしょうか？
「他社サービスを見ることができないから、何が一般的なのか分からない」
「手探りでデザインするしかない…」
こうした悩みを抱えている方も多いはずです。
そこで今回は、これまで多数のBtoBシステムや管理画面のデザインを担当した私の経験から、非公開システムのデザインに役立つ考え方をご紹介します。
どこで参考を探すか、そしてどう考えれば良いデザインにたどり着けるのか、参考になれば幸いです。
まずはシステムの「仕様」を理解する
デザインを始める前に、まず最も重要になるのがシステムの仕様をしっかりと理解することです。
公開されるWebサイトと違い、管理画面や社内システムは情報のつながりが複雑なことが多いです。
「このフォームに入力されたデータは、どこにどのように反映されるのか？」
「この情報は、別の画面でも再利用できるか？ユーザーの入力負担をどう減らせるか？」
こうした情報の流れを整理せずに、いきなり見た目のデザインから入ってしまうと、大きな手戻りが発生する可能性が高くなります。
スムーズにデザインを進めるためには、開発を担当するエンジニアと密にこれらの情報をすり合わせることが不可欠です。
チームで共有する「設計図」を作ろう
仕様をすり合わせた内容は、簡単な図として残しておくのがおすすめです。
これにより、チーム内の共通認識を築き、デザインを決める大きな指針となります。
画面遷移図
画面遷移図は、システム全体の画面構成と、それぞれの画面がどのように繋がっているかを示すものです。
画面遷移図の例
この図を作成することで、ユーザーがどの画面からどの画面へ移動するのか、全体像を把握できます。
ユーザーフロー図
ユーザーフロー図は、特定の機能をユーザーがどのように利用するかを段階的に示すものです。
ユーザーフロー図の例
「この操作にはどのような手順が必要か？」
「どうすればユーザーが迷わず、スムーズに目的を達成できるか？」
こうした思考を整理するのに役立ちます。画面遷移図と併せて作成することで、より使いやすいシステムを設計するためのヒントが見えてきます。
これらのステップを踏むことで、後々の手戻りを防ぎ、ユーザーにとっても論理的で使いやすいデザインへとつながっていきます。
ベースとなるUIライブラリを決めよう
仕様の整理が終わったら、次はシステムの「見た目」の土台となる部分を固めていきます。
この段階で、どんなUIライブラリを使う予定なのかをエンジニアに確認します。
管理画面やBtoBシステムは、コーポレートサイトのようにゼロからデザインするよりも、UIライブラリを活用する方が効率的に進めることができます。
これにより、デザインの統一感を保ちつつ、開発スピードを大幅に向上させられます。
アクトビでよく使用されているライブラリとしては以下があります。
Vuetify
Vue.js向けのコンポーネントライブラリです。Googleの提唱するマテリアルデザインに準拠した、洗練されたUIコンポーネントが豊富に用意されています。UIデザインの知識がなくても、直感的に美しい画面を作成できるのが強みです。
tailwind
こちらもVue.js向けのコンポーネントライブラリで、特に管理画面や業務システムとの相性が良いとされています。シンプルかつプロフェッショナルなデザインが特徴で、カスタマイズ性も高く、多くのプロジェクトで採用されています。
Element Plus
ユーティリティファーストのCSSフレームワークです。class属性に直接text-2xlやp-4といったクラスを記述することで、HTMLだけでスタイリングを完結させられます。自由度が高く、オリジナリティのあるデザインをスピーディーに作成したい場合に適しています。
それぞれのライブラリには、コンポーネントの種類であったりデザインの考え方に違いがあります。
「どのような機能が必要か？」「どのようなデザインにしたいか？」
これらからプロジェクトに最適なライブラリを選択することができます。
また、もしライブラリの既成コンポーネントだけではデザインの要求を満たせない場合、どの程度のカスタマイズが可能かをエンジニアに確認しておくと実装時に困ることもなくなります。
いよいよ、具体的なデザインの参考を探す
システムの仕様を整理し、UIライブラリの選定も終わりました。
これで、デザインの方向性が見えてきたのではないでしょうか。
しかし、「UIライブラリのコンポーネントだけでは、理想のデザインにならない」「どんな組み合わせでレイアウトすればいいか分からない」といった悩みも出てくるかもしれません。
そこで、UIライブラリの既成デザインに頼るだけでなく、より良いアイデアを見つけるための具体的な方法をいくつか紹介します。
⭐️類似サービスの「機能」を参考にする
BtoBシステムの画面や他社の管理画面を直接見ることは難しいですが、そのサービスが提供している機能からデザインを推測する方法があります。
サービスLPや紹介ページを見る
多くのBtoBサービスは、LPや紹介ページに管理画面のスクリーンショットを掲載しています。
ここからどのようなUIが使われているか探ることができます。
製品紹介の動画や使い方の紹介資料を探す
YouTubeなどの動画サイトで、機能紹介やチュートリアル動画を探すと、実際の操作画面を見られることがあります。
また「サービス名+使用方法」などで検索すると該当のサービスの使い方の資料がスクリーンショット付きで公開されている場合があります。
⭐️公開されている「デザインシステム」からヒントを得る
多くの大手企業が、自社のサービスで利用しているデザインのルールやコンポーネントをまとめたデザインシステムを公開しています。
デジタル庁
SmartHR Design System
Sparkle Design
これらのデザインシステムは、UIコンポーネントの見た目だけでなく、「どのように使われるべきか」という哲学やガイドラインも含まれています。
これらを参考にすることで、論理的で一貫性のあるデザインの考え方を学ぶこともできます。
特定の用途に特化したUIライブラリを参考にする
ag-Grid
複雑なデータグリッド機能に特化しています。
高いパフォーマンスとカスタマイズ性が特徴です。
Chart.js
シンプルでモダンなデザインのグラフを、軽量かつ簡単に作成したい場合に適しています。
カスタマイズも可能で、多くのプロジェクトで採用されています。
FullCalendar
Webアプリケーションでのカレンダー機能の実装に特化しています。
月表示、週表示、日表示など、様々なビューをサポートしています。
イベントのドラッグ＆ドロップ、リサイズなど、インタラクティブな操作も可能です。
まとめ
このように、管理画面やBtoBシステムのデザインには、一般的なWebサイトとは違うアプローチが必要です。
UIライブラリは、効率的に開発を進めるための強力な「部品」にすぎず、単に並べるだけでは本当に使いやすいシステムは生まれません。
大切なのはシステムの仕様を理解し、ユーザーの行動を想像することです。
画面遷移図やユーザーフロー図で、情報の流れやユーザーの動線を整理する。
類似サービスの機能や公開されているデザインシステムからヒントを得る。
これらのプロセスを経て、UIライブラリという部品を論理的に組み合わせることで、ユーザーにとって使いやすく、開発者にとっても扱いやすいデザインが完成します。
見本が少ない非公開システムだからこそ、一つひとつの思考プロセスを丁寧にたどることで、より良いデザインにたどり着くことができます。
この記事が、あなたのデザインワークの一助となれば幸いです。
Discussion