「タカシマヤのデザインガイドライン」を編集中

タカシマヤのデザインメモです。

----
==テキスト・リンク==
●TEXT:#333333<br>
●LINK:#0000EE、下線なし<br>
●HOVER:#0000EE、下線あり<br>

----
==主要バナー==
●『TOP Flash』プロモバナー：566×172（枠は含まない）<br>
shopping/flashdata/banner/'''bnr_flash_070419_mothersday.jpg'''<br>
shopping/flashdata/banner/'''bnr_flash_070419_girls.jpg'''

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

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

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

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

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

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

●『各店』主要5店舗：142×50（1pxの枠含む。#c2c2c2）<br>
store/shopping/banner/'''onlineShop_banner_070419_01.gif'''

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

----
==アーティクル==
●各店情報<br>
背景：f0f0f0<br>
にする。

●ブランドアーティクル<br>
指示のあるものについては、テンプレートを使用。<br>
縦は（最低で）202px、伸びる分にはOKです。


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

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

----
==横幅サイズ指定==
'''横幅:750px'''<br>
●【メインエリア548px】21px【共通エリア・フリーエリア181px】<br>

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

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

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

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

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

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

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

----
==商品画像・イメージサイズ==
基本的に、商品画像には枠を含めない。

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

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

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

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

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

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

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