まち楽

楽天 まち楽の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

• ●ごりっぱ「全国行脚」

http://www.preart.co.jp/gorippa.1/ori/ori09.html