「まち楽」の版間の差分

← 古い編集

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>
 ==仕様のまとめ==
@@ 29行目: / 50行目: @@
 <div class="example">
 ===【Flash概要】===
-*・サイズは全共通→<em>例外ありに変更</em>。吹き出しが最大個数の北海道と同様の縦サイズに引き伸ばす。<em>北海道は670pxを想定。</em>
+*・サイズは全共通。サイズ：縦700x横670px。
-*・Flashのバージョンは9以上。→<em>l-id埋め込み。Action Script 3でも可能か？</em>
+*・Flashのバージョンは9以上</em>
 ===【地図】===
 *・地図は1県あたり2パターン(内1つはトラベル用)
 *・トラベル用の地図については、楽天トラベルのエリア分けを踏襲する。
-*・トラベル用の地図はエリア名の簡略化や<em>アイコン個数の制限</em>を行い、地図がみやすいようにする。
-*・一部、エリア分けや地域名にイラギュラー対応があります。→指示入稿あり
 ===【イラストについて】===
-*・イラストの数は各県7～8個を想定、max10個。総数は350個くらい？
+*・イラストの数は各県7～8個を想定、max10個。総数は330個くらい。
 *・描きおこし作業あり。資料となる写真を見て、既存の奈良テイストで作成すること。
-*・Flash（swf）にはラスタ画像で配置します。
+*・Flash（swf）にはラスタ画像で配置します。効果【ドロップシャドー、光彩、ベベルとエンボス】処理あり。
-*・必ずしも正面から見たイラストでなくてもOK。
+*・イラスト周囲の文字は、通常は入れますが、一部ないものもあります。エクセルで背景が白いもの【スキーヤー、流氷、鹿】
+*・イラストは、トラベル版も同じ位置・大きさです。なので、photoshop上では「フォルダコピー」で対応。
 ===【吹き出しについて】===
@@ 49行目: / 69行目: @@
 *・吹き出しの形状は、静的ページと同様の「縦長」にする。
 *・吹き出しはON/OFFできる仕様にする
-*・<em>吹き出しの文字数問題。Macで横8文字を想定？</em>→<em>IMJで6/5(金)に確定予定。</em>
+*・吹き出しの文字数は、16文字制限。Macで8文字2行表示ができればOK。
-*・トラベルの吹き出しは3つ固定。
+*・<em>トラベルの吹き出しは無くなりました。</em>
 ===【レイアウトデザイン】===
 *・psdテンプレに基づいて作成。photoshopにて、地図、イラスト配置、商品吹き出し、地域名入力などの作業。
-*・50ページx5切り替え
 *・左メニューの「Special Contents」は無し。
-*・色味は地域(関東とか東北とか）で、決まっています。カラースキーム参照。
+*・色味は地域(関東とか東北とか)で、決まっています。カラースキーム参照。
 ===【右上のカテゴリについて】===
-*・<em>カテゴリは、グルメ→スイーツ→雑貨と、時間軸で表示が変わる仕様。</em>
+*・カテゴリは、グルメ→スイーツ→雑貨と、時間軸で表示が変わる仕様。
-*・時間軸オフの仕様は、IMJで6/5(金)に確定予定。
+*・カテゴリのボタンクリックでストップする。
-*・カテゴリは5つで固定(ただし例外として、個数が少ない場合も多少はある)
+*・カテゴリは5つで固定。(例外として、個数が少ない場合もあり)
-*・他カテゴリを強調したいため、デザインの変更あり。→確定しました。
+*・他カテゴリを強調したいため、デザインの変更あり。
 ===【右下のキャラクターエリアについて】===
-*・<em>エリアのサイズはKDSで決める。</em>
+*・エリアのサイズ→230x130px　※吹き出しを当てないこと！
 *・クリックした際のアクションはなし。
-*・リンクは更新あり。→外部化する予定。
 *・吹き出しの画像テキストについての調整は発生する
-*・入稿スケジュールは6月末作業に間に合わない可能性があるため、スケジュールについては要相談
+*・イラストは入稿頂いたデータを元にリサイズを行う。
-*・イラストは入稿頂いたデータを元にリサイズを行う。(デザインはなし)
-===【東京エリアについて】===
-*・東京の構成については、別途確認中ですが、基本は、奈良のFlashをベースに手を加える方法にて調整予定。
 </div>
-==スケジュール==
-<table class="wikitable">
-    <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>
-    </tr>
-    <tr>
-        <td><em>5/31</em></td><td>6/1<br>・地図入稿<br>・サンプルpsd、fla入稿</td><td>6/2</td><td>6/3<br>・イラスト指示入稿。50％？<br>・商品関係の指定入稿の一部</td><td>6/4</td><td>6/5<br>・<em>【KDS→IMJ】テンプレートデザイン作成</em><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>
-    </tr>
-    <tr>
-        <td><em>6/14</em></td><td>6/15<br><em>・イラストとレイアウト作業終了</em></td><td>6/16</td><td>6/17</td><td>6/18</td><td>6/19<td>6/20</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>
-    </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>
-    </tr>
-</table>
 ==カラースキーム==
-カラーレギュレーションにて、各地方のカラーが決められています。
+カラーレギュレーションにて、各地方のカラーが決められている。
 <table class="wikitable">
      <tr bgcolor="#E0E0E0">
@@ 109行目: / 100行目: @@
      <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>
@@ 117行目: / 111行目: @@
      </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>

「まち楽」の版間の差分

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

目次

まち楽URL

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

地図

アイコン

カテゴリ

エリア(地域名)チップ

吹き出し

psdファイル

仕様のまとめ

【Flash概要】

【地図】

【イラストについて】

【吹き出しについて】

【レイアウトデザイン】

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

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

カラースキーム

レイアウト時の注意点

イラスト資料

案内メニュー

「まち楽」の版間の差分

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

まち楽URL

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

地図

アイコン

カテゴリ

エリア(地域名)チップ

吹き出し

psdファイル

仕様のまとめ

【Flash概要】

【地図】

【イラストについて】

【吹き出しについて】

【レイアウトデザイン】

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

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

カラースキーム

レイアウト時の注意点

イラスト資料

案内メニュー

検索