「デザインメモ」の版間の差分

提供:Wiki@KDS
ナビゲーションに移動 検索に移動
編集の要約なし
編集の要約なし
10行目: 10行目:


●大カテ プロモバナー(左):548×177(1pxの枠含む。#c2c2c2)<br>
●大カテ プロモバナー(左):548×177(1pxの枠含む。#c2c2c2)<br>
shopping/[大カテ]/img/top/main_bnr_l070419_sweets.jpg
shopping/[大カテ]/img/top/'''main_bnr_l070419_sweets.jpg'''


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


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


●大カテ プロモバナー(小小):272×55(1pxの枠含む。#c2c2c2)<br>
●大カテ プロモバナー(小小):272×55(1pxの枠含む。#c2c2c2)<br>
shopping/[大カテ]/img/top/main_bnr_ss070419_sega.jpg
shopping/[大カテ]/img/top/'''main_bnr_ss070419_sega.jpg'''


----
----

2007年4月13日 (金) 20:51時点における版

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



主要バナー

●Flashバナー:566×172(枠は含まない)
●Flash右メニュー(4個):181×36

●右側共通エリアバナー:161×55

●大カテ プロモバナー(左):548×177(1pxの枠含む。#c2c2c2)
shopping/[大カテ]/img/top/main_bnr_l070419_sweets.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


テキスト・リンク

●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。
上とのマージン基本20px(出だしの1個目など場合によっては15px)、下とのマージン10px

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

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


パン屑

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


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

基本的に、商品画像には枠を含めない。★2007/4/5変更! ●特集:100×100px
●アイテムピックアップ:58×58px
●~~~に合うおすすめ商品:48×48px


商品スペック記述

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

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


テキストリンクルール

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


アイテムカテゴリー表記

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

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

●その他(フード・スウィーツ、リビング、コスメ・美容、ベビー・キッズ・マタニティ、スポーツ・ホビー・ステーショナリー)
・名称表記を3列にして名称ごとに改行。
・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を基本とする。横幅は変更不可。縦はなりゆきでご自由に。