「タカシマヤのデザインガイドライン」の版間の差分

← 古い編集新しい編集 →

2008年4月9日 (水) 12:28時点における版

タカシマヤのデザインメモです。
動的の仮アップは以下URL参照。
http://test-takashimaya3.z-xcv.com/product/00002508.html

テキスト・リンク

●TEXT:#333333
●LINK:#0000EE、下線なし
●HOVER:#0000EE、下線あり

検索エリアの背景色

●基本的に「#e3e3e3」である。 ●ページによっては変わるケースもあり。

主要バナー

●『TOP Flash』プロモバナー：566×172（枠は含まない）
shopping/flashdata/banner/bnr_flash_070419_mothersday.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

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

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

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

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

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

アーティクル

アーティクルとは動的ページ（サムネイルページ）特定エリアに入る要素です。
デザイン（グラフィック）処理をしたバナーと勘違いする人が多いですがそれは違います。あくまで由良さんが命名した単なるディレクトリ名「article」です。

店舗情報

●背景:#f0f0f0【B:94％】のbgをひき、マージンは10px。

タカシマヤ京都スタイル

●京都スタイルのアーティクルは、166pxが最低ライン。テキスト文字数が増えれば、あとは成り行きに任せて。

ブランドアーティクル

●「ブランドアーティクル」はテンプレート有。 ●縦の最小は202px。（あとはテキスト次第で伸びる） ●【ブランド】でLayout検索すると出てきます。 ●【参考】(070612)ウーゴカッチャトーリ、(070821)タオル美術館

横幅サイズ指定

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

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

パン屑

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

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

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

●特集：100×100px
●アイテムピックアップ：58×58px
●関連リンク：48×48px

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

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

総合TOP

・2007年08月31日(金)：「ピンクの薔薇」右「赤い薔薇」に変更。
・2008年03月01日(土)：「赤い薔薇」→「ピンクの薔薇」に変更。

@@ 8行目: / 8行目: @@
 ●LINK:#0000EE、下線なし<br>
 ●HOVER:#0000EE、下線あり<br>
+----
+==検索エリアの背景色==
+●基本的に「#e3e3e3」である。
+●ページによっては変わるケースもあり。
 ----
@@ 13行目: / 18行目: @@
 ●『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>
@@ 21行目: / 25行目: @@
 ●『右側共通エリア』バナー：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>
@@ 37行目: / 40行目: @@
 ●『各店』主要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>
-===アーティクル：タカシマヤ京都スタイル===
+デザイン（グラフィック）処理をしたバナーと勘違いする人が多いですがそれは違います。あくまで由良さんが命名した単なるディレクトリ名「article」です。
-/9/4に新規で本アップ。
-・アーティクルは、166pxが最低ライン。<br>
-以下、178px、196px、214px、232pxとする。
-----
-===アーティクル：店舗情報===
-背景:#f0f0f0【B:94％】のbgをひき、マージンは10px。
-----
-===アーティクル：ブランドアーティクル===
-・「ブランドアーティクル」はテンプレートがあり。
-・縦の最小は202px。あとはテキスト次第で伸びるはず
-・【ブランド】でLayout検索すると出てきます。
-(070612)ウーゴ カッチャトーリ、(070821)タオル美術館
+===店舗情報===
+●背景:#f0f0f0【B:94％】のbgをひき、マージンは10px。
-----
+===タカシマヤ京都スタイル===
-==特集テンプレート==
+●京都スタイルのアーティクルは、'''166px'''が最低ライン。テキスト文字数が増えれば、あとは成り行きに任せて。
-特集テンプレートの右側(横181px)には「カテゴリーメニュー」が入ることが予想される。で、ここは運用を考慮してテキストリンクにしたいです。<br>
-【母の日の場合】<br>
+===ブランドアーティクル===
-●見出し：高さ23pxのbg(色自由ですがベタの白抜き文字)、14pxの白テキストBold。<br>
+●「ブランドアーティクル」はテンプレート有。
-　縦マージン：10px<br>
+●縦の最小は202px。（あとはテキスト次第で伸びる）
-●中カテ名：text:12px、Bold、#0000EE<br>
+●【ブランド】でLayout検索すると出てきます。
-　縦マージン：5px<br>
+●【参考】(070612)ウーゴ カッチャトーリ、(070821)タオル美術館
--罫線-：縦1px、横161px、#c2c2c2<br>
-　縦マージン：5px<br>
-←(インデント8px)→●・小カテ名[複数]：text:12px/18px、#0000EE<br>
-　縦マージン：15px<br>
-<br>
-●中カテ･･･以下ループ。<br>
-　縦マージン：10px　で、背景bg終了。<br>
-縦マージン：15px<br>
 ----
@@ 89行目: / 67行目: @@
 ●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>
-―――――――――――――――
 ----
@@ 120行目: / 79行目: @@
 ●特集：100×100px<br>
 ●アイテムピックアップ：58×58px<br>
-●○○○に合うおすすめ商品：48×48px
+●関連リンク：48×48px
 ●商品スペック記述<br>
@@ 128行目: / 87行目: @@
 ・商品名は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>
-----
-==右メニュー==
-.19には機能として追加しなかったが、結局、つける方向になっています。
-(070730)産地直送ギフト便、(070731)帰省みやげ特集、(070814)敬老の日、(070821)秋コスメ、(070821)お水コレクション、(070828)ご当地の味土産、(070901)ボージョレ、
 ----
 ==総合TOP==
-・2007年8月31日(金)にピンクの薔薇から赤い薔薇に変更。<br>
+・2007年08月31日(金)：「ピンクの薔薇」右「赤い薔薇」に変更。<br>
-・オリジナルのpsdは「070904」とする。
+・2008年03月01日(土)：「赤い薔薇」→「ピンクの薔薇」に変更。