「まち楽」の版間の差分

← 古い編集

2010年4月28日 (水) 16:39時点における最新版

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

@@ 1行目: / 1行目: @@
 <div id="manual">
+楽天 まち楽のFlash制作の案件です。2009年6月に行われました。コンテンツの改修を2010年5月に行う予定です。
 ==まち楽URL==
-●まち楽　ニッポンを元気にしようプロジェクト<br>
+*●まち楽　ニッポンを元気にしようプロジェクト：http://event.rakuten.co.jp/area/
-http://event.rakuten.co.jp/area/
+*●楽天トラベル(県別トップ)：http://travel.rakuten.co.jp/group/tiku/japan.html
+*●観光楽地図：http://www.mapfan.com/kankou/index.html<br>
-●<em>まち楽：奈良【flash参考】</em><br>
+==psdの最終確認チェックリスト==
-http://event.rakuten.co.jp/area/nara/
+<div class="example">
+===<em>地図</em>===
+*●'''地図のズレ'''<br>
+→通常、トラベル、オーバー画像を確認。ここは0.2px単位で直してください。<br>
+*●'''マウスオーバの色変化の鮮明さ'''<br>
+→見えないようなら、枠の【効果】の値を変える。通常46pxだが、12px～45pxに落としてもOK。値は見ながら調整すること。
-●まち楽：静岡【950px幅】<br>
+===<em>アイコン</em>===
-http://event.rakuten.co.jp/area/shizuoka/
+*●'''アイコンの位置'''<br>
+→場所がシビア(城とか銅像とか)なものは、厳密な位置に置く。アバウトで良いものとの判断は各自で行う。<br>
+*●'''アイコンの大きさ'''<br>
+→基本、他と揃える。密集している場合や境界線が見えない場合は、少し小さくてもOK。
+===<em>カテゴリ</em>===
+*●'''カテゴリのラベリング'''<br>
+→正しい文字が指定の位置に入っているか。<br>
+*●'''カテゴリのアクティブ、オーバー画像'''<br>
+→正しくは入っていればOK。
-●まち楽：東京<br>
+===<em>エリア(地域名)チップ</em>===
-http://event.rakuten.co.jp/area/tokyo/ 【楽天トラベル】http://travel.rakuten.co.jp/group/tiku/prefecture/Tokyo.html
+*●'''チップの位置'''<br>
+→なるべく中央に、境界線と当たらないようにする。<br>
+*●'''左上ボタンとの同期'''　※トラベルは無視。元々違うので。<br>
+→表記が同じになっているかどうかを確認。<br>
+===<em>吹き出し</em>===
+*●'''地域をわかりやすく'''<br>
+→なるべく、地域名のチップを指すようにする。<br>
+*●'''バランスの良く配置'''<br>
+→なるべくバランス良く、円状になるように配置。
-●まち楽：長野<br>
+===<em>psdファイル</em>===
-http://event.rakuten.co.jp/area/nagano/ 【楽天トラベル】http://travel.rakuten.co.jp/group/tiku/prefecture/Nagano.html
+*●'''レイヤーの作り方'''<br>
+→Flashオーサリングの効率を上げるため、厳密に同じレイヤー階層構造にしてください。<br>
+*●'''保存時の状態'''<br>
+→保存するときは、全部閉じた上で、最下部の「base」を選択して保存すること。
+</div>
-★まち楽：横浜【city】<br>
-http://event.rakuten.co.jp/area/city/yokohama/
-★まち楽：神戸【city】<br>
+==仕様のまとめ==
-http://event.rakuten.co.jp/area/city/kobe/
-<br>
-==作業内容==
-ページ程度のFlash部分の作成を行います。奈良ページのFlashが基準。要素は以下の通り。
 <div class="example">
-==='''地図イメージ'''===
+===【Flash概要】===
-*・データ入稿あり。<em>【5/29入稿予定】</em>
+*・サイズは全共通。サイズ：縦700x横670px。
-*・エリア毎のマウスオーバーがあるため、パスをつける作業あり。←エリア分けは「トラベルだけ」になるか、なくなるかもしれません。
+*・Flashのバージョンは9以上</em>
-*・エリアは既存と同じ予定。一部、イラギュラーがある可能性も。
-==='''名所イラスト'''===
+===【地図】===
+*・地図は1県あたり2パターン(内1つはトラベル用)
+*・トラベル用の地図については、楽天トラベルのエリア分けを踏襲する。
+===【イラストについて】===
+*・イラストの数は各県7～8個を想定、max10個。総数は330個くらい。
 *・描きおこし作業あり。資料となる写真を見て、既存の奈良テイストで作成すること。
-*・Flash（swf）にはラスタ画像で配置。
+*・Flash（swf）にはラスタ画像で配置します。効果【ドロップシャドー、光彩、ベベルとエンボス】処理あり。
-*・イラスト総数は50x8＝400個くらい
+*・イラスト周囲の文字は、通常は入れますが、一部ないものもあります。エクセルで背景が白いもの【スキーヤー、流氷、鹿】
-*・指示入稿は6/3(水)の予定。全てではなく、何割かは後日。
+*・イラストは、トラベル版も同じ位置・大きさです。なので、photoshop上では「フォルダコピー」で対応。
-*・必ずしも正面から見たイラストでなくてもOK。
-==='''商品紹介(吹き出し)'''===
+===【吹き出しについて】===
-*・外部xmlの仕様。
+*・外部xmlにして、更新できる仕様。
-*・指定商品を配置します。配置する個数は指示あり。50x4x4＝800？<em>【6/10(水)指示入稿予定】</em>
+*・吹き出しの数はエリアの数とする。（1エリア＝1吹き出し）
-*・「1エリア＝1商品紹介」ではない！個数も4個だったり、8個だったり流動的。それを仕組み上にどう落とすか検討中です。
+*・吹き出しの形状は、静的ページと同様の「縦長」にする。
-*・商品は運用上で更新予定。
+*・吹き出しはON/OFFできる仕様にする
+*・吹き出しの文字数は、16文字制限。Macで8文字2行表示ができればOK。
+*・<em>トラベルの吹き出しは無くなりました。</em>
-==='''レイアウトデザイン'''===
+===【レイアウトデザイン】===
-*・psdテンプレの入稿あり。
+*・psdテンプレに基づいて作成。photoshopにて、地図、イラスト配置、商品吹き出し、地域名入力などの作業。
-*・photoshopにて、地図、商品吹き出し、イラスト配置の作業。
+*・左メニューの「Special Contents」は無し。
-*・50ページx5切り替え
+*・色味は地域(関東とか東北とか)で、決まっています。カラースキーム参照。
-*・フォントは新ゴの予定です。
-*・カテゴリ切り替えのインターフェイスは、インタラクションが直感的にわかりにくいとのことで、デザイン変更を模索中。
-*・左メニューの「Special Contents」は無くなりました。
-*・色味は地域(関東とか東北とか）で、決まっています。
-*・【宿泊(トラベル)画面】地図内の地域名は曖昧なので、指示をもらいます。
+===【右上のカテゴリについて】===
+*・カテゴリは、グルメ→スイーツ→雑貨と、時間軸で表示が変わる仕様。
+*・カテゴリのボタンクリックでストップする。
+*・カテゴリは5つで固定。(例外として、個数が少ない場合もあり)
+*・他カテゴリを強調したいため、デザインの変更あり。
+===【右下のキャラクターエリアについて】===
+*・エリアのサイズ→230x130px　※吹き出しを当てないこと！
+*・クリックした際のアクションはなし。
+*・吹き出しの画像テキストについての調整は発生する
+*・イラストは入稿頂いたデータを元にリサイズを行う。
-==='''Flashオーサリング'''===
-*・Flashのverは9。
-*・縦横サイズは全て共通。
-*・1.5週～2週でcyber作業。
 </div>
-==スケジュール==
+==カラースキーム==
+カラーレギュレーションにて、各地方のカラーが決められている。
 <table class="wikitable">
-     <tr>
+     <tr bgcolor="#E0E0E0">
-         <th><em>日曜日　SUN</em></th><th>月曜日　MON</th><th>火曜日　TUE</th><th>水曜日　WED</th><th>木曜日　THU</th><th>金曜日　FRI</th><th>土曜日　SAT</th>
+         <th>地域</th><th>北海道</th><th>東北</th><th>関東</th><th>中部</th><th>近畿</th><th>中国<th>四国</th><th>九州</th>
-    </tr>
-    <tr>
-        <td><em>5/24</em></td><td>5/25</td><td>5/26</td><td>5/27</td><td>5/28</td><td>5/29<br>・地図入稿<br>・サンプルpsd、swf入稿<td>5/30</td>
-    </tr>
-    <tr>
-        <td><em>5/31</em></td><td>6/1</td><td>6/2</td><td>6/3<br>・イラスト指示入稿。50％？<br>・商品関係の指定入稿の一部</td><td>6/4</td><td>6/5<td>6/6</td>
      </tr>
      <tr>
-         <td><em>6/7</em></td><td>6/8</td><td>6/9</td><td>6/10<br>・商品関係の指定入稿</td><td>6/11</td><td>6/12<td>6/13</td>
+         <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>
+     <tr bgcolor="#f2d5d5">
-         <td><em>6/14</em></td><td>6/15</td><td>6/16</td><td>6/17</td><td>6/18</td><td>6/19<td>6/20</td>
+         <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>
-         <td><em>6/21</em></td><td>6/22</td><td>6/23</td><td>6/24</td><td>6/25<br>・楽天確認</td><td>6/26<br>・楽天確認<td>6/27</td>
+         <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>
-         <td><em>6/28</em></td><td>6/29</td><td>6/30<br>・全FIX</td><td>7/1</td><td>7/2</td><td>7/3<td>7/4</td>
+         <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行で納めるようにする。
+*・キャラクターエリアには、「ふきだし」を当てないこと。
+*・「アイコン」は指定の位置におく。
+*・文字は境界線に極力かからないように努力する。最終的にはわかりやすさ優先ですが。
 ==イラスト資料==
@@ 95行目: / 132行目: @@
 *●東京名所巡り 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>

「まち楽」の版間の差分

2010年4月28日 (水) 16:39時点における最新版

目次

まち楽URL

psdの最終確認チェックリスト

地図

アイコン

カテゴリ

エリア(地域名)チップ

吹き出し

psdファイル

仕様のまとめ

【Flash概要】

【地図】

【イラストについて】

【吹き出しについて】

【レイアウトデザイン】

【右上のカテゴリについて】

【右下のキャラクターエリアについて】

カラースキーム

レイアウト時の注意点

イラスト資料

案内メニュー

「まち楽」の版間の差分

2010年4月28日 (水) 16:39時点における最新版

まち楽URL

psdの最終確認チェックリスト

地図

アイコン

カテゴリ

エリア(地域名)チップ

吹き出し

psdファイル

仕様のまとめ

【Flash概要】

【地図】

【イラストについて】

【吹き出しについて】

【レイアウトデザイン】

【右上のカテゴリについて】

【右下のキャラクターエリアについて】

カラースキーム

レイアウト時の注意点

イラスト資料

案内メニュー

検索