デザインメモ

4.19リニューアルについてのデザインメモです。

---

主要バナー

●『TOP Flash』プロモバナー：566×172（枠は含まない）
shopping/flashdata/banner/bnr_flash_070419_mothersday.jpg
shopping/flashdata/banner/bnr_flash_070419_girls.jpg

●『TOP Flash』右メニュー(4個)：181×36
shopping/flashdata/banner/title/ttl_070419_mothersday.jpg
shopping/flashdata/banner/title/ttl_070419_mothersday_on.jpg

●『右側共通エリア』バナー：161×55（1pxの枠含む。#c2c2c2）
shopping/top/img/banner/img_banner_070419_shinjuku.gif
shopping/top/img/banner/img_banner_070419_lucky.gif

●『大カテ』プロモバナー：548×177（1pxの枠含む。#c2c2c2）
shopping/[大カテ]/img/top/main_bnr_l070419_sweets.jpg
shopping/[大カテ]/img/top/main_bnr_l070419_titan.jpg

●『大カテ』プロモバナー(左)：272×177（1pxの枠含む。#c2c2c2）
shopping/[大カテ]/img/top/main_bnr_m070419_swarovski.jpg

●『大カテ』プロモバナー(小)：272×87（1pxの枠含む。#c2c2c2）
shopping/[大カテ]/img/top/main_bnr_s070419_maternity.jpg

●『大カテ』プロモバナー(小小)：272×55（1pxの枠含む。#c2c2c2）
shopping/[大カテ]/img/top/main_bnr_ss070419_sega.jpg

●『タカシマヤ特集ページ』バナー：200×75（1pxの枠含む。#c2c2c2）
shopping/special/img/bnr_right_070419_lucky.jpg

●『各店』おすすめバナー：120×42（1pxの枠含む。#999999）
store/banner/e_070426_01.jpg

●『各店』主要5店舗：142×50（1pxの枠含む。色自由）
store/shopping/banner/onlineShop_banner_070419_01.gif

■『7大カテ』ピックアップ画像：58×58
shopping/[大カテ]/img/top/item_pickup_227471.jpg

---

特集テンプレート

特集テンプレートの右側(横181px)には「カテゴリーメニュー」が入ることが予想される。で、ここは運用を考慮してテキストリンクにしたいです。

【母の日の場合】
●見出し：高さ23pxのbg(色自由ですがベタの白抜き文字)、14pxの白テキストBold。
　縦マージン：10px
●中カテ名：text:12px、Bold、#0000EE
　縦マージン：5px
-罫線-：縦1px、横161px、#c2c2c2
　縦マージン：5px
←(インデント8px)→●・小カテ名[複数]：text:12px/18px、#0000EE
　縦マージン：15px

●中カテ･･･以下ループ。
　縦マージン：10px　で、背景bg終了。
縦マージン：15px

---

テキスト・リンク

●TEXT:#333333
●LINK:#0000EE、下線なし（未確定）
●HOVER:#0000EE、下線あり

---

横幅サイズ指定

横幅:750px
●【メインエリア548px】21px【共通エリア・フリーエリア181px】

メインエリア:548px
●2列の場合、【268px】12px【268px】
●3列の場合、【176px】10px【176px】10px【176px】
とする。

---

タイトル

見出しのタイトルは「レベル1」、「レベル2」の2パターンを作成。

●「レベル1」は画像扱いで、新ゴRの14px#333333、548×24px。
shopping/first_category/img/ttl_item_pickup.gif

上とのマージン基本20px(出だしの1個目など場合によっては15px)、下とのマージン10px

●「(レベル1内の)レベル2」はテキスト扱いで、12px、#333333、BOLD。
―――――――――――――――
　ここの縦マージンは20px
―――――――――――――――

●「レベル2(単独)」はテキスト扱いで、12px、#333333、BOLD。
―――――――――――――――
|　　ここの縦マージンは20px　　　 |
―――――――――――――――

---

パン屑

ショッピングの第2階層である「大カテ」名から記述。
テキスト表示で12px、#333333を想定。当該ページはBOLD表示。

---

商品画像・イメージサイズ

基本的に、商品画像には枠を含めない。

●特集：100×100px
●アイテムピックアップ：58×58px
●～～～に合うおすすめ商品：48×48px

---

商品スペック記述

「ブランド名」と「商品名」をテキストリンク#0000EEにする。

●ブランド名は[○○○○]とし、10px/14px。半角の[]を使用で全て統一。
●商品名は12px/16px
●金額にはリンクを貼らない。金額部分は#333333のテキスト。場合によってはBold。

---

テキストリンクルール

●特集、中カテへのテキストリンク：BOLDの青リンク、下線なし。
●小カテへのテキストリンク：青リンク、下線なし。
（これに関しては例外ありありなのであまり気にしない）

---

アイテムカテゴリー表記

●ギフト
・名称表記を2列にする。
・最大行数を5項目にする。
（ギフトのみ中カテゴリーごとにイメージを入れるため、5行程度にまとめないと天地サイズが長大になるため）

●ファッション
・名称表記を2列にする。
（メンズ・レディスの区分をはっきりさせたいためです）

●その他（フード・スウィーツ、リビング、コスメ・美容、ベビー・キッズ・マタニティ、スポーツ・ホビー・ステーショナリー）
・名称表記を３列にして名称ごとに改行。
・15行を最大にして15を超える場合は中カテゴリー商品一覧へのリンクを最終行に入れる。
・段組の場合はZの順で。
・中カテゴリー名の先頭には「・」を付けない。
・アイテムカテゴリーとブランドの先頭には「・」を付ける。

---

特集

特集は以下のカテゴリーが存在する。

　　■タカシマヤ特集【大カテ(最上位カテゴリー)】

　　■フード・スウィーツ特集一覧【中カテ/静的】
　　■リビング特集一覧【中カテ/静的】
　　■ファッション特集一覧【中カテ/静的】
　　■コスメ・美容特集一覧【中カテ/静的】
　　■ベビー・キッズ特集一覧【中カテ/静的】
　　■スポーツ・ホビー・ステーショナリー特集一覧【中カテ/静的】

商品がまたがるもの、例えば「ヨコハマグッズ」には食料品もあれば、リビングもあるが、そのようなタイトルの場合、

【○】タカシマヤ特集 ＞ ヨコハマグッズ
【×】リビング ＞ ヨコハマグッズ
【×】リビング ＞ リビング特集一覧 ＞ ヨコハマグッズ
【×】フード・スウィーツ ＞ ヨコハマグッズ
【×】フード・スウィーツ ＞ フード・スウィーツ特集一覧 ＞ ヨコハマグッズ

と「タカシマヤ特集」の最上位カテゴリー(大カテ)に所属すると予想される。

---

Flashプロモーションバナー(ショッピングTOP内)

Flashサイズは「750×177」px。バナーとメニューに関しては外部JPGファイルを使用する。
※外部JPG画像を書き出すときは、プログレシップ形式で書き出さないこと！

　　【外部JPG】
　　●バナーJPG：566 × 172px
　　以下の5つはマウスオーバーあり。
　　　●右メニュー[1]JPG：181 × 36px
　　　●右メニュー[2]JPG：同サイズ
　　　●右メニュー[3]JPG：同サイズ
　　　●右メニュー[4]JPG：同サイズ
　　　●右メニュー[5]JPG（タカシマヤ特集へ）JPG：181 × 27px

・スタート表示時は一番上のタイトル（例：ホワイトデー）が表示される。
・ユーザーアクションなしで時間経過（5秒程度）すると、バナーが下のタイトル（例:新入学フェア）に自動的に差し替わる。[1]→[2]→[3]→[4]→[1]
・右側のボタンを"マウスオーバー"するとそれぞれのバナーに差し替わる。(ただし[5]は差し替わらない)
・必ずユーザーのクリックで当該ページへジャンプ。
・バナーをクリックしても、右側のメニューをクリックしても当該ページへジャンプする。
・右メニューは5つともマウスオーバーあり。
・上4つはマウスオーバーと同時にバナーが差し替わる。
・一番下（タカシマヤ特集へ）の部分はバナー表示しない。(バナーを用意する必要なし)
バナーの差し替えは上から下に落ちてくるイメージ。0.1秒～0.2秒くらい。

---

共通エリア(右側エリア)

●共通エリアに入るバナーの横幅は「161×55」pxを基本とする。
横幅は変更不可。縦はなりゆきでご自由に。

●背景bg：#EBEBEB、92％