[Force.comでWeb制作]カスタマーポータルを超デザイン
カスタマーポータルはSalesforce.com内に登録している取引先に対して、カスタマーポータルという窓口サイトを作ってそこにログインしてもらう機能です。カスタマーポータルにログインしてもらうことにより、取引先は決められた範囲内でSalesforce.comの情報を直接参照/編集することができます。例えば、取引先が自分で自分のプロフィールを編集したり、契約情報や商品情報を登録したり発注したりすることができます。
カスタマーポータルは自社の顧客に対してのサポート窓口や契約窓口になることもあり、会社にとっての顔にもなります。その場合に、デザインがあまりに貧弱だとブランドイメージを損なったり、リテラシーの低い取引先に対して操作性の面でユーザビリティを確保できないということも生じてきます。
カスタマーポータルのデフォルトのデザインはこのようなものです。
Salesforce.comの通常ログインした見た目とほとんど同じですね。
カスタマーポータルに標準でついている機能を使うことで、ある程度のデザインを編集することはできます。
設定→カスタマイズ→カスタマーポータル→設定→ポータルのフォントと色の変更
から編集できます。
しかし、これだけのデザインだと物足りないので、もっとどうにかできないかと検証してみました。
色々試したところ、ヘッダーとして設定できるHTMLファイル内にCSSを記述することでSalesforce.comのデフォルトのCSSを上書きして、デザインを力技で変更することができました。
こんなヘッダーHTMLを書いて
[html]
<link rel="stylesheet" type="text/css" href="http://uhuru.co.jp/test.css" />
<div id="header">
<a href="http://uhuru.co.jp/"><img src="http://uhuru.co.jp/common/img/logo_uhuru.gif" alt="uhuru" title="uhuru" /></a>
<h1>これはヘッダーh1です。</h1>
</div><!– /header –>
[/html]
header_test.htmlとして保存。
その後、Salesforce.comのドキュメントのこのファイルをアップロードして、カスタマーポータルの設定画面からヘッダーファイルとして保存。
これでみてみると、こんなデザインにできました。
ここまでできることがわかれば、もうあとは普通のWeb制作の要領で大概のことはできそうです。
個々のページに関しては、Visualforceページ化することでデザインはどうにでもなります。工数さえ気にしなければ凝ったデザインはいくらでもできそうですね。