「まち楽」を編集中

<div id="manual">
楽天 まち楽の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<br>

==psdの最終確認チェックリスト==
<div class="example">
===<em>地図</em>===
*●'''地図のズレ'''<br>
→通常、トラベル、オーバー画像を確認。ここは0.2px単位で直してください。<br>
*●'''マウスオーバの色変化の鮮明さ'''<br>
→見えないようなら、枠の【効果】の値を変える。通常46pxだが、12px～45pxに落としてもOK。値は見ながら調整すること。

===<em>アイコン</em>===
*●'''アイコンの位置'''<br>
→場所がシビア(城とか銅像とか)なものは、厳密な位置に置く。アバウトで良いものとの判断は各自で行う。<br>
*●'''アイコンの大きさ'''<br>
→基本、他と揃える。密集している場合や境界線が見えない場合は、少し小さくてもOK。

===<em>カテゴリ</em>===
*●'''カテゴリのラベリング'''<br>
→正しい文字が指定の位置に入っているか。<br>
*●'''カテゴリのアクティブ、オーバー画像'''<br>
→正しくは入っていればOK。

===<em>エリア(地域名)チップ</em>===
*●'''チップの位置'''<br>
→なるべく中央に、境界線と当たらないようにする。<br>
*●'''左上ボタンとの同期'''　※トラベルは無視。元々違うので。<br>
→表記が同じになっているかどうかを確認。<br>
===<em>吹き出し</em>===
*●'''地域をわかりやすく'''<br>
→なるべく、地域名のチップを指すようにする。<br>
*●'''バランスの良く配置'''<br>
→なるべくバランス良く、円状になるように配置。

===<em>psdファイル</em>===
*●'''レイヤーの作り方'''<br>
→Flashオーサリングの効率を上げるため、厳密に同じレイヤー階層構造にしてください。<br>
*●'''保存時の状態'''<br>
→保存するときは、全部閉じた上で、最下部の「base」を選択して保存すること。
</div>


==仕様のまとめ==

<div class="example">
===【Flash概要】===
*・サイズは全共通。サイズ：縦700x横670px。
*・Flashのバージョンは9以上</em>

===【地図】===
*・地図は1県あたり2パターン(内1つはトラベル用)
*・トラベル用の地図については、楽天トラベルのエリア分けを踏襲する。

===【イラストについて】===
*・イラストの数は各県7～8個を想定、max10個。総数は330個くらい。
*・描きおこし作業あり。資料となる写真を見て、既存の奈良テイストで作成すること。
*・Flash（swf）にはラスタ画像で配置します。効果【ドロップシャドー、光彩、ベベルとエンボス】処理あり。
*・イラスト周囲の文字は、通常は入れますが、一部ないものもあります。エクセルで背景が白いもの【スキーヤー、流氷、鹿】
*・イラストは、トラベル版も同じ位置・大きさです。なので、photoshop上では「フォルダコピー」で対応。

===【吹き出しについて】===
*・外部xmlにして、更新できる仕様。
*・吹き出しの数はエリアの数とする。（1エリア＝1吹き出し）
*・吹き出しの形状は、静的ページと同様の「縦長」にする。
*・吹き出しはON/OFFできる仕様にする
*・吹き出しの文字数は、16文字制限。Macで8文字2行表示ができればOK。
*・<em>トラベルの吹き出しは無くなりました。</em>

===【レイアウトデザイン】===
*・psdテンプレに基づいて作成。photoshopにて、地図、イラスト配置、商品吹き出し、地域名入力などの作業。
*・左メニューの「Special Contents」は無し。
*・色味は地域(関東とか東北とか)で、決まっています。カラースキーム参照。

===【右上のカテゴリについて】===
*・カテゴリは、グルメ→スイーツ→雑貨と、時間軸で表示が変わる仕様。
*・カテゴリのボタンクリックでストップする。
*・カテゴリは5つで固定。(例外として、個数が少ない場合もあり)
*・他カテゴリを強調したいため、デザインの変更あり。


===【右下のキャラクターエリアについて】===
*・エリアのサイズ→230x130px　※吹き出しを当てないこと！
*・クリックした際のアクションはなし。
*・吹き出しの画像テキストについての調整は発生する
*・イラストは入稿頂いたデータを元にリサイズを行う。

</div>

==カラースキーム==
カラーレギュレーションにて、各地方のカラーが決められている。
<table class="wikitable">
    <tr bgcolor="#E0E0E0">
        <th>地域</th><th>北海道</th><th>東北</th><th>関東</th><th>中部</th><th>近畿</th><th>中国<th>四国</th><th>九州</th>
    </tr>
    <tr>
        <th>カラー【メイン】</th><td>0D47B3</td><td>09828F</td><td>799E2A</td><td>00870A</td><td>811B78</td><td>CA2658</td><td>DF5F00</td><td>D40404</td>
    </tr>
    <tr bgcolor="#f2d5d5">
        <th>カラー【地域名の文字色と枠色】</th><td>0D47B3</td><td>09828F</td><td>819922【視認性考慮】</td><td>0a9414【色強を考慮】</td><td>811B78</td><td>CA2658</td><td>DF5F00</td><td>D40404</td>
    </tr>
    <tr>
        <th>カラー【サブ】</th><td>9eb5e1</td><td>9dcdd2</td><td>c9d8aa</td><td>99cf9d</td><td>cda4c9</td><td>eaa8bd</td><td>f2bf99</td><td>ee9b9b</td>
    </tr>
    <tr>
        <th>カラー【サブサブ】</th><td>cfdaf0</td><td>cee6e9</td><td>e4ecd4</td><td>cce7ce</td><td>e6d1e4</td><td>f4d4de</td><td>f9dfcc</td><td>f6cdcd</td>
    </tr>
</table>

※Flashの背景は「F3F3F3」

==レイアウト時の注意点==

*・「地名」のフォントは【新ゴM、10.5px】、但し、括弧は【8.5px】にすること。
*・文字左右のマージンは6～7pxくらい。
*・文字はなるべく1行で納めるようにする。
*・キャラクターエリアには、「ふきだし」を当てないこと。
*・「アイコン」は指定の位置におく。
*・文字は境界線に極力かからないように努力する。最終的にはわかりやすさ優先ですが。


==イラスト資料==

*<em>●まち楽：奈良</em><br>
http://event.rakuten.co.jp/area/nara/<br>
<br>
以下のページは参考までに。<br>
*●東京名所巡り 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
</div>