Forum1586: お客様が迷わない！スッキリ簡潔なトップページのカスタマイズ例

Title: お客様が迷わない！スッキリ簡潔なトップページのカスタマイズ例

先日、ある IT サポート企業のお客様サポートサイトを TeamPage で構築するお手伝いをしました。

先方からのリクエストは、「TeamPage のトップページ（フロントページ）を含めた見た目をできるだけスッキリ簡潔にして、お客様が迷わないで操作できるようにしたい」というもの。そこで、(1) トップページに大きなアイコンやボタンを設置し、(2) タブやサイドバーなどを取っ払いました。

今回のブログでは、このスッキリなカスタマイズをどのように行ったのかを簡潔にご紹介します。

サポートサイトのイメージ

お客様の所属企業ごとに「スペース」と呼ばれる部屋を作り、部屋ごとに鍵をかけ、お客様にお渡しします。

この部屋には他の企業のお客様は入れません。（あるお客様の情報は他のお客様から見られない）
管理者やサポート側はすべての部屋に入れます。（社内ユーザーはすべてのお客様の動向を見渡せる）

お客様には自分の部屋しか開放されていません。一方、サポートスタッフ（社内ユーザー）にはすべての部屋が開放されていて、すべての部屋の中を高いところから見下ろして全体的な動向を見渡せます。

TeamPage は、「すべてのお客様へのサポート状況をリアルタイムで把握するに最適なツールだ」と評価され、採用していただきました。

カスタマイズ前

カスタマイズ前のトップページはこのような顔をしていました。

ボタンやリンクを埋め込んだ記事を更にトップページに埋め込み表示する。
その下に「最新の記事」や「顧客情報」などのセクションを並べる。

これで十分にスッキリ簡潔になったと思ったのですが、先方の反応は「もっとスッキリさせたい」というものでした。

「まずは会員ページに移動する」ということを理解できるようにして、その他の操作はさせない。
文字だけだと殺風景なので受付嬢のようなイラストを設置する。

TeamPage の画面にはいろいろなタブやボタンが設置され、同じ目的の操作をいろいろな方法でできるようになっています。しかし、「あちこちに道があると迷う。道は一つだけあれば良い。」とのことで、以下に述べるように、タブやボタンをできるだけ隠すようにしました。

カスタマイズ方法

不要な部分を隠す

まずは、不要なタブやボタンをできるだけ隠します。下図のアニメーションをご覧ください。黒い部分を隠します。

左上の「家」アイコン

トップページへ戻るための「家」アイコンは、トップページには不要ですよね。スタイルシート (CSS) を使って隠します。

.view-home #loc .loc-home {
  display: none;
}

画面に適用されるスタイルシートは、スキンの色設定画面や Download2143: Proteus カスタム JavaScript & CSS プラグインで設定できます。

「セットアップ」と「招待」メニュー

「セットアップ」メニューは、管理者権限があるユーザーアカウントでログインしたときだけ表示されます。お問い合わせをするお客様には管理者権限がありませんので、このメニューは表示されません。よって、カスタマイズ不要です。

「招待」メニューは、招待権限があるユーザーアカウントでログインしたときだけ表示されます。デフォルトでは、同権限はすべてのユーザーに許可されているので、それを外し、管理者だけに許可するように設定変更しました。

参照: DocJp1792: 招待機能

タブ

TeamPage では、タブを切り替えることで画面が切り替わり、目的の情報を見たり変更したりできます。

TeamPage に慣れていないお客様には不要かもしれませんが、TeamPage に慣れた人（管理者など）にとってタブは必需品。これが無いと TeamPage の細かな操作がやりにくくなります。

そこで、「お客様だったらタブを隠し、管理者だったらタブを表示する」という設定を行うことにしました。

この目的で作成したプラグインが、Download2227: HTML の body タグに特別なクラスを追加プラグインです。このプラグインは、ログインしたユーザーアカウントが特定のグループに所属しているかどうかを調べ、ページ HTML の <body> タグに特別な class= を追加します。

これを使って、「ログインしたユーザーが管理者グループに所属していたら、<body> に class="is-admin" を追加する」という設定を行いました。

そして、CSS を使って「<body> タグに is-admin クラスが設定されていたら、タブを隠す」ということを実現できました。

body.is-admin #sect-nav {
  display: none;
}

サイドバー

サイドバーの折りたたみ/展開プラグインには「デフォルトでサイドバーを表示するか（展開するか）隠すか（折りたたむか）」の設定があります。これを「デフォルトで折りたたむ」に変更すれば OK です。

「最新の投稿」と「顧客情報」セクション

[サーバーセットアップ] > [フロントページ] の設定でセクションを無効にしました。

参照: DocJp1260: フロントページセクション

通知バッジを目立たせる

自分の投稿へ誰かがコメントしたり、自分が参加するスケジュールが登録されたり、自分が担当するタスクが変更されたりすると、自分宛ての通知が届きます。通知の数は、画面右上の「通知」欄にバッジとして表示されます。

…が、標準のバッジの色は、背景のバーと同系色。目立たないんですよね。

そこで、これを赤くして目立たせることにしました。

これもスタイルシート (CSS) を使いました。

.menu-notifications .notifications-count {
    background-color: crimson;
}

トップページのビジュアル設定

先方の Web デザイナーさんと相談し、次のようなメニュー画面のイメージ図を描いてもらいました。どうやって TeamPage のトップページに組み込みましょうか。

まず、すべてを HTML と CSS で作って記事に埋め込んで表示する方法を試しました。

しかし、すぐに問題があることがわかりました。上図の緑色の固定的なメニューはこれで OK なのですが、下図の青いボタンが押されたときの移動先（会員ページ）がお客様によって異なるのです。「株式会社ABC」のお客様は「ABC」部屋に、「株式会社XYZ」のお客様は「XYZ」部屋へ案内する必要があります。

つまり、ログインしたユーザーの所属企業ごとに「会員ページ」（部屋）があり、どの部屋へ案内するかをその都度判断しなければならないわけです。

記事への埋め込み式では固定的なメニューしか作れませんので、結局、ダッシュボード全体を書き換えるプラグインを作成し、ログインするユーザーの所属グループを調べて「会員ページ」を判断する仕組みを作りました。

カスタマイズ後

これで下図のスッキリ簡潔トップページが出来上がりました。(^^)

お披露目会では「シンプルでわかりやすいね！これならお客様も迷わないでしょう。」と先方にも好評でした。

まとめ

TeamPage の標準のトップページには、「最新記事」などのセクションを新聞紙面のように配置させることも、メニュー用の記事をポスターのように大きく配置させることもできます。

また、ログイン後に表示されるページを「みんなの共有ページ」から「マイページ」へと変更することもできます。

JavaScript、CSS、そして TeamPage の SDL プログラミング言語を使えば更に細かなカスタマイズが可能になります。

先方の担当者さんも「ここまで色々とできるなんて、本当にすごい可能性を秘めていますね。奥津さんに『こんなこと、できませんか？』と何度も尋ねましたが、『できません』という回答は一度もありませんでしたね！」と喜んでいらっしゃいます。TeamPage のファンが増えて嬉しく思います。

TeamPage のカスタマイズにご興味のある方は、お気軽に弊社までお問い合わせください。

お客様が迷わない！スッキリ簡潔なトップページのカスタマイズ例 - トラクションソフトウェア
先日、ある IT サポート企業のお客様サポートサイトを TeamPage で構築するお手伝いをしました。先方からのリクエストは、「TeamPage のトップページ（フロントページ）を含めた見た目をできるだけスッキリ簡潔にして、お客様が迷わないで操作できるようにしたい」というもの。そこで、(1) トップページに大きなアイコンやボタンを設置し、(2) タブやサイドバーなどを取っ払いました。
tractionsoftware….

2018/11/27 Update: 「通知バッジを目立たせる」方法（バッジを赤くする方法）を追記しました。

Attachments:

image.png
image.png
shared_rooms.png
image_before1.png
image_comparison.gif
green_menu.png
blue_button.png
neat_top_page.png
notifications1.png
notifications2.png
setup_and_invite.png
tabs.png

参照している (5)

Download2227: HTML の body タグに特別なクラスを追加プラグイン Download2143: Proteus カスタム JavaScript & CSS プラグイン DocJp1792: 招待機能 FAQ1764: Proteus スキンのカスタマイズ DocJp1260: フロントページセクション

Article: Forum1586 (permalink)
Categories: :FAQ:カスタマイズ
Date: 2018/11/26; 14時42分40秒 JST

Author Name: 奥津岳
Author ID: takashi