今回は、先日、下記のような感じで南さんからの提案があり、、

南：大瀬さん、今回の勉強会参加されますよね？
大：参加しますよ。なんで？
南：もうネタとかって決まってますか？
もしまだだったら、これどうですかって
いうものがあるんですけどー、、。
大：え、まだ決めてないです。じゃ一回MTGしよ！

と言う流れで話を聞き、良いねそれやろう！と言うことになりました。
隙間時間に少しずつ作成したものになりますので、少しではありますが
ご紹介したいと思います。

サスケについてはこちらから詳しく読むことができます

サスケ画面 新UIについて

早速ですが、サスケ新UIデザインモック画面をご紹介したいと思います。

＜ざっくりと今回の要望 ※サスケLeadメイン＞
・UIデザインの刷新（サスケ全体）
・各サービスにダッシュボードを設けたい
・検索条件からグラフ作成・表示など
・左メニューをスッキリ整理し、アイコンを使用し分かりやすく
などなど…

※注意：この記事内のサスケ画面イメージ画像は、勉強会用に作成したものであり実在しません。

ログイン画面

はい。まずですね、ログイン画面となります。
サスケのロゴなんですが、ちょっと変更しています。ロゴマークの緑を明るく、ロゴタイプ文字の方もですね変えています。それっぽいGoogleフォントを使用してシンプルなイメージで作成しています。

ポータル画面

はい、そしてこちらが、サスケの最初の画面、ポータル画面のダッシュボードとなります。

サスケサービスサイトのお知らせや技術ブログ、個別相談があり、今回こちらからサスケのサービスをサスケworksのアプリ風に並べて（サスケworksはこんな感じなんです）、契約してるものと未契約のものを分かりやすくしております。
現在のメッセージボード機能については一旦外したデザインとなっております。
サイドメニューは下層ページがあるものは、マウスオーバーで吹き出し風に表示されるようにしています。

サスケLead ダッシュボード画面

こちらがリードのダッシュボードになります。リードソースのグラフや未対応リストなど表示されます。
左上のリードロゴ部分からは、各サービスページへ移動できるようにしております。
グローバルメニューの表示は少なくし、リードのリスト関係はすべてリード検索から表示するような想定で作成しております。

サスケLead リード検索画面

そしてこちらがリード検索画面となります。
この検索画面で全てのリード、リードソース、履歴グループから検索できるようなイメージで作りました。さらに保存済み検索条件はこちらで選択する形となっております。詳細検索を開いた際のデザインも作成したかったのですが、時間がなく断念しました。
リストはサスケWorksのように水平にスクロールできるようにしています。

と、本当はリードの詳細画面もデザインする予定でしたが、今回間に合いませんでした。…いつか必ず。

まとめ

管理画面のUIを考えるということで、デザインや操作等の一貫性を保ち、見ただけで分かるものにしなければならず、他の機能との整合性なども考慮してデザインする必要があり、思ったより制作が進まず大変でした。
サクッとできるものではないと分かりましたが、いい機会となり勉強になりました

▍もっと気になる方はこちら
▼採用資料