読者です 読者をやめる 読者になる 読者になる

Minimal Green

はてなブログカスタマイズや、HTML、CSS、サイト制作などについて書いています。

楽天トラベルのカスタマイズページ 楽天のごちゃごちゃしたデザインは効果があるのか

楽天トラベルカスタマイズページ

楽天トラベルの宿施設ページは自由にHTMLで編集できるカスタマイズページというのがあります。
(楽天市場もそうですよね、多分。)
以前に澄風荘のサイト制作を依頼していた制作会社が作ったページなんですが、なんというかデザインが古臭くダサい(笑)んです。
ホームページ制作したのが10年以上前なんで仕方ないです。ちょこちょこ内容を更新したり、デザインを変えていたようですが、私はその頃タッチしていないのでわかりません。
以前の澄風荘ホームページ。
f:id:syofuso:20161208000526p:plain
これとほぼ同じデザインで楽天トラベルのカスタマイズページも作っていました。
以前の楽天トラベルカスタマイズページ
f:id:syofuso:20161208022407p:plain
なんというか・・・野暮ったいですよね?

特に支障はないので、(楽天トラベルユーザーはトップページをそんなに見ない)そのままにしていたんですが、先日プランを作っているときにふと思い立って、今のサイトに合わせて楽天TOPもリニューアルカスタマイズしました。
f:id:syofuso:20161208001422p:plain
hotel.travel.rakuten.co.jp

白背景でシンプルにスッキリさせたつもりです。まだ情報量が少なすぎるので、これから改良していく予定です。

楽天のごちゃごちゃしたデザインは効果的なのか

「楽天 デザイン」でGoogle検索すると「楽天 デザイン ひどい」という予測候補が出ます。
f:id:syofuso:20161208002840p:plain
楽天市場といえば日本のチラシ的なごちゃごちゃしたデザインで有名です(以前よりはスッキリしましたが)。
商品ページはしつこいくらいに画像を並べて、ず~~~っとスクロールしないと購入できなかったり。
f:id:syofuso:20161208005430p:plain
いらすとやさんのこのイラストのイメージです。

私は情報を詰め込みすぎたごちゃごちゃしたデザインは嫌いなのですが、ダサいデザインは効果があるため意図的にそうしているという話もあります。
togetter.com

ちなみに楽天トラベルの管理画面は市場の流れを組んでいるのかごちゃごちゃして使いにくいです。ユーザビリティは考えていない会社なのかな。
(リニューアルしましたが、現状使い物にならないので旧画面を使うしかない)

CTAと余白の関係

予約ボタンや購入ボタンなど商用サイトで目的に合った行動を換気するCTA(コールトゥアクション)ボタンは余白をとって配置したほうが良いとされています。
f:id:syofuso:20161208004611p:plain
情報が多すぎてユーザーの視線が散逸するより、余白をとって配置されると目に止まりやすいという意図です。
楽天市場のショップページも最近はおしゃれなデザインのショップも増えてきて、以前よりはスッキリと見やすい印象です。
ただまだまだごちゃごちゃしたショップページもあり、それでも売れているんだから、「ダサいデザイン」は需要があるのかなとも思います。
ぱっと目的の商品を選らんで購入するというより、ウィンドウショッピング的にじっくりチラシやカタログを読んで選ぶことを楽しむユーザーが多いのかもしれません。

旧澄風荘HPはごちゃごちゃして、画像に文字が多い割にCTAはわかりにくい配置でした。
以前のHPと比べて今のサイトデザインは余白を意識して、問い合わせがしやすいデザインを目指して作っています。
実際サイトリニューアル後、お問い合わせ、HP予約件数は何倍も増えています。

楽天トラベルの独自カスタマイズテンプレート

【追記】
楽天トラベル用のテンプレート作ってみました。
design.syofuso.com

楽天トラベルのサイトデザインは楽天市場と違ってスッキリしています。検索もしやすいですね。
施設のカスタマイズページを参考のためいろいろ拝見したのですが、ホームページのサイトデザインと合わせているところが多いですね。
楽天市場的な「アワード1位!」とか王冠や星を多用した宣伝文句を畳み掛けるデザインのカスタマイズページもよく見かけました。

こうしたごちゃごちゃしたページは読みにくいし、目的の知りたい情報を見つけにくいと私は考えているのですが、売る方としてはユーザーに
なるべく多くの情報を伝えたいと思っているためこうしたデザインになるのだと思います。
楽天市場と違って、楽天トラベルのカスタマイズページはそんなにユーザーは見ないと思うのですが、どうなんでしょう。
今度楽天トラベルの担当者に聞いてみたいです。

あと楽天トラベルカスタマイズページは外部リンクを貼れないのです。楽天内のプランページのリンクは貼れます。CSSは外部ファイルで読み込めます。ただJavaScriptファイルの読み込みは上手く行きませんでした。
インラインでscriptを書けば使えるのでしょうか?ちょっとカスタマイズを勉強します。
制約はありますが、いじると面白いので、お宿さん向けにカスタマイズページのテンプレート作ろうかな~と思ったり。(無料か安価で)
調べると1ページ当たり30000円~50000円位ですか。4ページで15万とか見ました。
高くもないけど、安くもないですね(笑)
シンプルながら、効果のあるページ作りを目指したいと思います。

【追記】楽天トラベルのカスタマイズページの仕様・制約

楽天トラベル管理画面施設サポートデスクに電話して聞いてみました。
2015年8月以降、JavaScriptファイルは使えなくなりました。現在使えている施設は以前に作成していたページで、そこも編集・更新すると使えなくなるとのこと。
インラインでscriptを書いても使えません。
セキュリティ上仕方のないことかもしれませんが、カスタマイズの商売にしている業者さんはやりにくくなったのではないでしょうか。
自由にHTML使えるのに、制約が多くカスタマイズしにくくなりましたね…。

せっかくタブを使えるようにコードを書いていたのに、カスタマイズページに貼り付けると、「javascriptは使えません」と弾かれてがっかり。
私のコードを書いた数時間を返してくれ~(泣)