こんにちは。株式会社GIG メディア事業のライター・鈴木（りなち）です。

「自社で作っているSaaSの管理画面が使いにくい！」「でも、どこを改良すれば使いやすくなるのか、わからない！」と悩んでいませんか？

今回は、実際にGIGでデザイン周りを担当している3名にインタビューを行いました。現場の生の声を元に、管理画面におけるUIデザインの重要性や、優れたデザインにするためのポイントをご紹介します。

齋藤 緑（さいとう みどり）：アートディレクター / デザイナー。2019年11月にGIGにデザイナーとしてジョイン。現在はクリエイティブ事業部でロゴやWebサイト、サービスを中心に幅広くクライアントワークを行なっている。

曽我部 祐作（そがべ ゆうさく）：フロントエンドエンジニア。立命館大学で情報理工を専攻後、2021年に新卒でGIGに入社。現在はLeadrid事業部にてリードジェネレーションプラットフォームである「LeadGrid」の開発、案件のサポートに携わる。

向田 嵩（むこうだ たかし）：LeadGridデザインチームマネージャー。ニューヨーク州立大学パーチェス校で数学・情報工学、メディアアートを学び、2020年に新卒としてGIGに入社。クライアントワークでのデザイン・アートディレクションを担当。

なぜ管理画面のUIデザインが重要なのか？

管理画面には、機能・レイアウト・色・フォントなどのUIデザインを意識する必要があります。しかし、「ある程度、使いやすいデザインなら問題ないのでは？」と考える方も多いのではないでしょうか。

以下では、より良いUIデザインが重要な理由を解説します。

UIデザインが重要な理由1. 感覚だけで操作できるようにするため

齋藤：
管理画面のUIは、Webサイトやサービスなど利用ユーザーのペルソナに関わらず、幅広いリテラシーのユーザーに使われるため、初見で説明がなくても使えるように表現されている必要があります。

曽我部：
Webの知識、ほかの管理画面を触る頻度、運用方法など、操作する人の幅が広いためどんな人でも操作がわかりやすく、ストレスのないようにしなければいけません。

向田：
説明がなくても理解してもらえるよう、情報を正しく直感的に伝えるようにしましょう。

UIデザインが重要な理由2. ユーザーに使いたいと思わせるため

齋藤：
構成がめちゃくちゃなUX、アクションがわかりづらいUIなど、デザインされていない管理画面は使いづらいものです。ユーザーを制限し属人化してしまうことで、満足に使われなくなってしまう可能性があります。

曽我部：
とくにSaaSの管理画面は、仕事に使うものがほとんど。せっかく導入しているのだから、ミスを減らしたり効率化できたりするものでないと意味がありません。そのためには、そもそもどういう機能が備わっているのかという点は大きいですが、良いUIかどうかもまた大きく関わってきます。

向田：
ユーザーに使ってもらえるデザインにすることが大切です。難しい印象ではなく、簡単に操作できそうな印を、UIデザインで印象付ける必要があります。

管理画面のUIデザインで気をつけたい7のポイント

ポイント1. 自分の基準で考えない

齋藤：
幅広いリテラシーを持つユーザーが存在するので、作る側にとっての当たり前が、ユーザーにとってはまったく当たり前ではないことが多いです。たとえば、右クリックの機能を知らないことも。やはり、ユーザー目線で考えることが重要です。

ー自分基準で考えないために、心がけていることは何ですか？

齋藤：
GoogleやWindowsなど、多くの人が使うサービスの管理画面を参考にします。ほとんどのユーザーが知っているので、説明するときに、お客様にもわかってもらいやすいんですよね。

ーユーザーが、どれだけストレスフリーで使えるかということを一番に考えているのですね。

ポイント2. 作る前に考える＆話し合う

曽我部：
本当にニーズに合った機能かどうかを考えることが重要です。「とりあえず良さそうだから作ってみよう」と言って、いろいろな機能を作ってしまうと、後で使わない機能が出てきてしまいます。つまり、エンジニアが実装した機能を「消す」作業が必要です。実装した機能を消すことは、実装することと同じくらい難しいんですよね。

また、ユーザーが1人でもその機能を使っていたら、後から消すことはそのユーザーにとってストレスとなります。このように、機能を後から消すことは、さまざまなストレスを生むので、作る前に「本当に必要な機能なのか」を考えることは重要です。

ー本当に必要な機能かどうか見極めるために、何をしていますか？

曽我部：
チームのメンバーと、しっかり議論することが大切ですね。もちろん、競合他社のサービスを参考にするのも大切です。ただ、見極めるという意味では、チーム内でしっかりと話し合うことが多いです。

向田：
チーム全体で、共通認識を持っている必要がありますね。勝手にデザイナーだけが1人で突っ走ってしまうと、相違が生まれてしまいます。そこはきちんと、デザイナーだけでなく、直接お客様に関わるディレクターを含めて情報の確認をしたうえで、デザインをするようにしていますね。

ーたくさんの方と繰り返し、情報のすり合わせを行う必要があるんですね。

向田：
そうですね。実際に使うユーザーもそうですし、開発するエンジニア、ディレクター、デザイナーそれぞれの意見を把握しなければいけません。いろいろなところから板挟みになります（笑）。

ーチームでのコミュニケーションが、デザインの質に関係してくるのですね。

ポイント3. 直感的に操作しやすく、シンプルに

齋藤：
「とにかくシンプルに」を心がけています。

昔、私が初稿で出したものが、機能を盛りだくさんにして、アイコンもたくさんつけて、わかりやすくすることを目指したデザインだったんです。結局、機能がありすぎて、逆にわかりにくくなってしまいました（笑）。その経験を踏まえて、いまはシンプルが一番わかりやすいと感じています。

ーシンプルなUIデザインといえば、何がありますか？

齋藤：
iPhoneですね。手に馴染んでくるような使いやすさがあります。

ーシンプルの基準はありますか？

齋藤：
たとえば、左の固定メニューのすべてにアイコンをつけてしまうと、製作側のコストもかかるし、ほかの機能との区別も難しくなります。そういったデザインは、シンプルとは言えないですね。

向田：
私も、直感的に操作できるような文言や導線設計になっているかが重要だと思います。

ー具体的に、どういうことでしょうか？

向田：
たとえば、言葉として「キャンセル」と「閉じる」を比べると、ニュアンスが変わってくるなと思っています。「閉じる」はただ単に閉じるイメージですが、「キャンセル」だと、いままでやってきたアクションをすべてリセットするニュアンスになっていると思っていて。

かなり昔、自社サービスの管理画面を見たときに、「閉じる」と「キャンセル」の文言があまり気にせず配置されていたんです。「あれ。これって消えるの？ それともただ閉じるだけ？」と、混乱が生まれたことがありました。

自分が思うことは、ユーザーも感じること。文言ひとつ取っても、そこに含まれているニュアンスをきちんと考えたうえで、作っていく必要があると思います。

ー「直感的に操作しやすく、シンプルに」のメリットは何ですか？

向田：
使いやすさは、サービス全体の信頼に繋がります。直感的に使えるということは、ユーザーにとってストレスがないということです。結果的に快適な体験を得られ、サービスや会社に対する信頼へと繋げることができます。

曽我部：
そもそも、新たな管理画面UIデザインの導入には、「ミスを減らしたい」「業務を効率化させたい」といった背景があります。せっかく導入したのに、複雑でわかりにくく、ミスが増えたら、導入する意味がなくなってしまいます。

齋藤：
ポイント1つめの、「自分の基準で考えない」にも当てはまりますが、誰でも使えることが大切。シンプルで直感的なUIが必要ですね。

ーユーザーが混乱する種は、徹底的になくすことが重要なのですね。

ポイント4. 優先度をつける

ー優先度をつけるというのは、どういうことですか？

向田：
情報には優先度があります。優先度をつけたうえで、「このページでは記事のタイトルを一番目立たせたほうがいいよね」など、優先度に沿ってボタンやテキストをデザインしておかないと、ユーザーを混乱させてしまうんです。正しく情報が伝わるデザインにするために、非常に重要なポイントですね。

齋藤：
そうですね。ボタンに優先度をつけて、仕分けすることは重要です。

以前、外資系企業の管理画面を作ったとき、トップの方が、「シームレス！ シームレス！ とにかくわかりやすく！」と何度もおっしゃっていました。そのときに一番わかりやすかったのが、情報の優先づけをしたうえで、ボタンを種類分けすることでした。

優先づけしていくうちに、必然的に重要な部分が目立つデザインになっていくんです。そうすると、ユーザーは「ここを押せば次に進めるんだ」と認識できたり、ボタンがグレーがけになっているなら「進めない、どこかおかしい」と認識したりできます。UIが、操作の指標となってくるのです。

ー優先度をつけるコツは何ですか？

齋藤：
何より、サービスを熟知することが重要ですね。

ーときには競合他社を参考にすることや、比較することも大切ですが、まずはサービスを調べ、それに合ったデザインを考えることが大切なのですね。

ポイント5. 余白を大切に

ー余白が大切というのはどういうことですか？

向田：
余白を使って、情報を整理していきます。

たとえば、管理画面をデザインするとき、記事タイトルとプレビューテキストがあったとして、それらは「記事」という1つの枠に属する情報になりますよね。なので、枠内での余白は詰めて、関連する情報は1つのまとまりで理解できるようにするんです。まとまりのなかで余白を多用してしまうと、関連性のないバラバラの情報に見えるので、情報整理したうえで、余白の距離感を考える必要があるんです。

反対に、関連性のない情報は余白の距離を開けて、別々の情報であることがわかるように配置するよう意識しています。余白の使い方について詳しく知りたい方は、以下の記事をご参考ください。

関連記事：『デザインは「余白」で決まる。情報を正しく伝えるための余白デザイン術』

ポイント6. パーツを多用しない

曽我部：
統一感を出すために、ほかの箇所ですでに同じようなコンポーネントを作っていないか、確認することが大切です。既存のパーツをよく確認し、使いまわせそうなパーツは使いましょう。

 ーパーツを多用しない理由は、何ですか？

向田：
「シンプルにする」というポイントと重なる部分がありますが、ユーザーの学習コスト削減が目的です。

たとえば、昔の自社サービスの管理画面で、保存ボタンが白い枠線で囲われているデザインがあったり、背景が紺色で目立つデザインがあったりなど、1つのボタンのデザインがいくつも存在することがありました。そうすると、ユーザーの混乱を招きます。なので、同じようなアクションをするボタンは、UIの見た目を極力似せることで、「前のページで見たことがある」と、ユーザーが直感的に使いやすいものにすることを意識しています。

またパーツの多用をやめることで、新しい機能が開発されたとき、無意識に「こういう使い方なんだろうな」と使い方をイメージできます。ユーザーは、いままでの経験から推測して使うことができるのです。パーツのバリエーションを増やすのではなく、過去に使用されてきたパーツを使いまわすことを意識してデザインすることが大切です。    

ーユーザーがいままでの経験から、使い方をすぐに理解できるデザインにしているのですね。

ポイント7. エンジニアとのコミュニケーションを大切にする

ーデザイナー側からエンジニアにオーダーするときに、何か気をつけていることはありますか？

向田：
とくに迷いやすい部分に限り、ただデザインを送るのではなく、仕様をテキストで書いていました。私は、以前エンジニアだったので、エンジニアの気持ちがよくわかるんです（笑）。

クリックしたときに、画面がどう遷移するかなどを、画面ごとに用意することもあります。また遷移先の画面だけでなく、実際に遷移した先のデザインも合わせて作っておくと、さらにイメージの相違が起こりにくくなりますね。テキストとビジュアルを両方用意して、ミーティングのときに口頭で伝えるようにしています。

齋藤：
私がいままでやってきた案件では、ほとんど開発を外注していたので、受注したページの作成しかしたことがないですね。向田さんの共有の仕方は、すごく丁寧だと思います。

ー場合によってコミュニケーションの取り方は違うのですね。現在フロントエンジニアとして活躍されている曽我部さんは、デザイナーから上がった指示書を見て、正直、わかりやすさに差を感じることはありますか？

曽我部：
確かに、ワイヤーデザインの時点で、動き方やUXの仕様部分があるとわかりやすいですね。実際に、実装しながら疑問点が生まれることはよくあります。でもそれを0にするのはかなり難しくて、ほとんど無理に近いと思っています。

ただ、デザインの時点でおおよその動き方が決まっていたり、考えてくれていたりすると、すでにできている部分への意見も伝えられますし、実装しやすいので、ありがたいですね。

ーお互いにイメージの相違が生まれないよう、都度コミュニケーションをとっていくことが、質の良いデザインを作るうえで大切なポイントなのですね。

まとめ

【管理画面のUIデザインで気をつけたい7のポイント】

•  自分の基準で考えない
• 作る前に考える・話し合う
• 直感的に操作しやすく、シンプルに
• 優先度をつける
• 余白を大切に
• パーツを多用しない
• エンジニアとのコミュニケーションを大切にする

本記事では、管理画面のUIデザインで気をつけたい6つのポイントを紹介しました。管理画面のUIデザインでは、ユーザーにとって使いやすいデザインであること、情報が正しく伝わるデザインであることが、共通して重要だということがよくわかりました。

また、より良いUIデザインを作成するためには、デザイナー個人だけでなく、エンジニアやお客様、ユーザーなど、たくさんの方と話し合いを重ねることで、相違を無くしていくことが重要なのですね。    
是非一緒に、6つのポイントを意識して、より良いUIデザインを目指しましょう。

管理画面のUIデザインで悩んでいる事業者様は、ぜひ株式会社GIGにお問合せください。今回の3名をはじめとした、管理画面設計のスペシャリストがご支援いたします。

鈴木 里菜（りなち）

GIGのメディア事業部でインターンとして働くライター/編集者。フリーランスの生活やWeb制作に役立つ記事を執筆中。なんでもかんでも苺味を好みます。