まち楽
楽天 まち楽のFlash制作の案件です。2009年6月に行われました。コンテンツの改修を2010年5月に行う予定です。
まち楽URL
- ●まち楽 ニッポンを元気にしようプロジェクト：http://event.rakuten.co.jp/area/
- ●楽天トラベル(県別トップ)：http://travel.rakuten.co.jp/group/tiku/japan.html
- ●観光楽地図：http://www.mapfan.com/kankou/index.html
psdの最終確認チェックリスト
【地図】
- ●地図のズレ
→通常、トラベル、オーバー画像を確認。ここは0.2px単位で直してください。
- ●マウスオーバの色変化の鮮明さ
→見えないようなら、枠の【効果】の値を変える。通常46pxだが、12px～45pxに落としてもOK。値は見ながら調整すること。
【アイコン】
- ●アイコンの位置
→場所がシビア(城とか銅像とか)なものは、厳密な位置に置く。アバウトで良いものとの判断は各自で行う。
- ●アイコンの大きさ
→基本、他と揃える。密集している場合や境界線が見えない場合は、少し小さくてもOK。
【カテゴリ】(右上ボタン)
- ●カテゴリのラベリング
→正しい文字が指定の位置に入っているか。
- ●カテゴリのアクティブ、オーバー画像
→正しくは入っていればOK。
【エリア(地域名)チップ】
- ●チップの位置
→なるべく中央に、境界線と当たらないようにする。
- ●左上ボタンとの同期 ※トラベルは無視。元々違うので。
→表記が同じになっているかどうかを確認。
【吹き出し】
- ●地域をわかりやすく
→なるべく、地域名のチップを指すようにする。
- ●バランスの良く配置
→なるべくバランス良く、円状になるように配置。
【psdファイル】
- ●レイヤーの作り方
→Flashオーサリングの効率を上げるため、厳密に同じレイヤー階層構造にしてください。
- ●保存時の状態
→保存するときは、全部閉じた上で、最下部の「base」を選択して保存すること。
仕様のまとめ
【Flash概要】
- ・サイズは全共通。サイズ：縦700x横670px。
- ・Flashのバージョンは9以上
【地図】
- ・地図は1県あたり2パターン(内1つはトラベル用)
- ・トラベル用の地図については、楽天トラベルのエリア分けを踏襲する。
【イラストについて】
- ・イラストの数は各県7～8個を想定、max10個。総数は330個くらい。
- ・描きおこし作業あり。資料となる写真を見て、既存の奈良テイストで作成すること。
- ・Flash（swf）にはラスタ画像で配置します。効果【ドロップシャドー、光彩、ベベルとエンボス】処理あり。
- ・イラスト周囲の文字は、通常は入れますが、一部ないものもあります。エクセルで背景が白いもの【スキーヤー、流氷、鹿】
- ・イラストは、トラベル版も同じ位置・大きさです。なので、photoshop上では「フォルダコピー」で対応。
【吹き出しについて】
- ・外部xmlにして、更新できる仕様。
- ・吹き出しの数はエリアの数とする。（1エリア＝1吹き出し）
- ・吹き出しの形状は、静的ページと同様の「縦長」にする。
- ・吹き出しはON/OFFできる仕様にする
- ・吹き出しの文字数は、16文字制限。Macで8文字2行表示ができればOK。
- ・トラベルの吹き出しは無くなりました。
【レイアウトデザイン】
- ・psdテンプレに基づいて作成。photoshopにて、地図、イラスト配置、商品吹き出し、地域名入力などの作業。
- ・左メニューの「Special Contents」は無し。
- ・色味は地域(関東とか東北とか)で、決まっています。カラースキーム参照。
【右上のカテゴリについて】
- ・カテゴリは、グルメ→スイーツ→雑貨と、時間軸で表示が変わる仕様。
- ・カテゴリのボタンクリックでストップする。
- ・カテゴリは5つで固定。(例外として、個数が少ない場合もあり)
- ・他カテゴリを強調したいため、デザインの変更あり。
【右下のキャラクターエリアについて】
- ・エリアのサイズ→230x130px ※吹き出しを当てないこと！
- ・クリックした際のアクションはなし。
- ・吹き出しの画像テキストについての調整は発生する
- ・イラストは入稿頂いたデータを元にリサイズを行う。
カラースキーム
カラーレギュレーションにて、各地方のカラーが決められている。
| 地域 | 北海道 | 東北 | 関東 | 中部 | 近畿 | 中国 | 四国 | 九州 |
|---|---|---|---|---|---|---|---|---|
| カラー【メイン】 | 0D47B3 | 09828F | 799E2A | 00870A | 811B78 | CA2658 | DF5F00 | D40404 |
| カラー【地域名の文字色と枠色】 | 0D47B3 | 09828F | 819922【視認性考慮】 | 0a9414【色強を考慮】 | 811B78 | CA2658 | DF5F00 | D40404 |
| カラー【サブ】 | 9eb5e1 | 9dcdd2 | c9d8aa | 99cf9d | cda4c9 | eaa8bd | f2bf99 | ee9b9b |
| カラー【サブサブ】 | cfdaf0 | cee6e9 | e4ecd4 | cce7ce | e6d1e4 | f4d4de | f9dfcc | f6cdcd |
※Flashの背景は「F3F3F3」
レイアウト時の注意点
- ・「地名」のフォントは【新ゴM、10.5px】、但し、括弧は【8.5px】にすること。
- ・文字左右のマージンは6～7pxくらい。
- ・文字はなるべく1行で納めるようにする。
- ・キャラクターエリアには、「ふきだし」を当てないこと。
- ・「アイコン」は指定の位置におく。
- ・文字は境界線に極力かからないように努力する。最終的にはわかりやすさ優先ですが。
イラスト資料
- ●まち楽：奈良
http://event.rakuten.co.jp/area/nara/
以下のページは参考までに。
- ●東京名所巡り Welcome to TOKYO
http://special.enjoytokyo.jp/TK/TK070518ana.html
- ●JAL国内ツアー - 家族の夏休み大作戦！ - 北海道コース一覧
http://www.jal.co.jp/domtour/kazoku/course/area/
- ●JAL国内ツアー - 家族の夏休み大作戦！ - 沖縄コース一覧
http://www.jal.co.jp/domtour/kazoku/course/area/okinawa.html
- ●JAL国内ツアー - 家族の夏休み大作戦！ - 九州コース一覧
http://www.jal.co.jp/domtour/kazoku/course/area/kyusyu.html
- ●ごりっぱ「全国行脚」