サスケ画面のUIを考えてみた
2023-12-04 勉強会
今回は、先日、下記のような感じで南さんからの提案があり、、
南 大瀬さん、今回の勉強会参加されますよね？
大 参加しますよ。なんで？
南 もうネタとかって決まってますか？
もしまだだったら、これどうですかって
いうものがあるんですけどー、、。
大 え、まだ決めてないです。じゃ一回MTGしよ！
と言う流れで話を聞き、良いねそれやろう！と言うことに相成りました。
隙間時間に少しずつ作成したものになりますので、少しではありますが
ご紹介したいと思います。
南 大瀬さん、今回の勉強会参加されますよね？
大 参加しますよ。なんで？
南 もうネタとかって決まってますか？
もしまだだったら、これどうですかって
いうものがあるんですけどー、、。
大 え、まだ決めてないです。じゃ一回MTGしよ！
と言う流れで話を聞き、良いねそれやろう！と言うことに相成りました。
隙間時間に少しずつ作成したものになりますので、少しではありますが
ご紹介したいと思います。
サスケ画面 新UIについて
早速ですが、サスケ新UIデザインモック画面をご紹介したいと思います。
＜ざっくりと今回の要望 ※サスケLeadメイン＞
・UIデザインの刷新（サスケ全体）
・各サービスにダッシュボードを設けたい
・検索条件からグラフ作成・表示など
・左メニューをスッキリ整理し、アイコンを使用し分かりやすく
などなど…
※注意：この記事内のサスケ画面イメージ画像は、勉強会用に作成したものであり実在しません。
＜ざっくりと今回の要望 ※サスケLeadメイン＞
・UIデザインの刷新（サスケ全体）
・各サービスにダッシュボードを設けたい
・検索条件からグラフ作成・表示など
・左メニューをスッキリ整理し、アイコンを使用し分かりやすく
などなど…
※注意：この記事内のサスケ画面イメージ画像は、勉強会用に作成したものであり実在しません。
ログイン画面
はい。まずですね、ログイン画面となります。
サスケのロゴなんですが、ちょっと変更しています。ロゴマークの緑を明るく、ロゴタイプ文字の方もですね変えています。それっぽいGoogleフォントを使用してシンプルなイメージで作成しています。
サスケのロゴなんですが、ちょっと変更しています。ロゴマークの緑を明るく、ロゴタイプ文字の方もですね変えています。それっぽいGoogleフォントを使用してシンプルなイメージで作成しています。
ポータル画面
はい、そしてこちらが、サスケの最初の画面、ポータル画面のダッシュボードとなります。
サスケサービスサイトのお知らせや技術ブログ、個別相談があり、今回こちらからサスケのサービスをサスケworksのアプリ風に並べて（サスケworksはこんな感じなんです）、契約してるものと未契約のものを分かりやすくしております。
現在のメッセージボード機能については一旦外したデザインとなっております。
サイドメニューは下層ページがあるものは、マウスオーバーで吹き出し風に表示されるようにしています。
サスケサービスサイトのお知らせや技術ブログ、個別相談があり、今回こちらからサスケのサービスをサスケworksのアプリ風に並べて（サスケworksはこんな感じなんです）、契約してるものと未契約のものを分かりやすくしております。
現在のメッセージボード機能については一旦外したデザインとなっております。
サイドメニューは下層ページがあるものは、マウスオーバーで吹き出し風に表示されるようにしています。
サスケLead ダッシュボード画面
こちらがリードのダッシュボードになります。リードソースのグラフや未対応リストなど表示されます。
左上のリードロゴ部分からは、各サービスページへ移動できるようにしております。
グローバルメニューの表示は少なくし、リードのリスト関係はすべてリード検索から表示するような想定で作成しております。
左上のリードロゴ部分からは、各サービスページへ移動できるようにしております。
グローバルメニューの表示は少なくし、リードのリスト関係はすべてリード検索から表示するような想定で作成しております。
サスケLead リード検索画面
そしてこちらがリード検索画面となります。
この検索画面で全てのリード、リードソース、履歴グループから検索できるようなイメージで作りました。さらに保存済み検索条件はこちらで選択する形となっております。詳細検索を開いた際のデザインも作成したかったのですが、時間がなく断念しました。
リストはサスケWorksのように水平にスクロールできるようにしています。
と、本当はリードの詳細画面もデザインする予定でしたが、今回間に合いませんでした。…いつか必ず。
この検索画面で全てのリード、リードソース、履歴グループから検索できるようなイメージで作りました。さらに保存済み検索条件はこちらで選択する形となっております。詳細検索を開いた際のデザインも作成したかったのですが、時間がなく断念しました。
リストはサスケWorksのように水平にスクロールできるようにしています。
と、本当はリードの詳細画面もデザインする予定でしたが、今回間に合いませんでした。…いつか必ず。
まとめ
管理画面のUIを考えるということで、デザインや操作等の一貫性を保ち、見ただけで分かるものにしなければならず、他の機能との整合性なども考慮してデザインする必要があり、思ったより制作が進まず大変でした。
サクッとできるものではないと分かりましたが、いい機会となり勉強になりました。
サクッとできるものではないと分かりましたが、いい機会となり勉強になりました。