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

← 古い編集

2009年2月4日 (水) 12:28時点における最新版

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

テキスト・リンク

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

テキストサイズは「12px(サイズ) / 16px or 18px(行間)」を基本とする。

フォントサイズリスト
・10px / 14px
・12px / 16px or 18px 　←★これが標準サイズ
・14px / 18px
・16px / 20px or 22px

検索エリアの背景色

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

アーティクル

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

店舗情報

店舗連動情報が「下部アーティクル」に入ることがあります。

●背景:#f0f0f0のbgをひき、マージンは10px。
●枠：#e0e0e0の1px。
●テキスト例
【店舗情報】
タカシマヤ東京店でも「第●回山形展」を開催いたします。ぜひご来場ください。
会期：2008年5月○日(木) →5月○日(火) 午前10時→午後8時（※最終日は午後6時で閉会）
会場：東京店 8階催会場

※この際、「上部アーティクル」の右下にアンカーリンクが入ります。

ブランドアーティクル

●「ブランドアーティクル」はテンプレート有。
●縦の最小は202px。（あとはテキスト次第で伸びる）
●【ブランド】でLayout検索すると出てきます。
●参考にするなら…　(070821)タオル美術館、(080401)EMAKIエマキ

タカシマヤ京都スタイル

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

主要バナー

TOP Flashバナー

【サイズ】566 x 172 px
【枠】なし！（Flash側にあるため）
【ファイル名】（例）bnr_flash_080419_mothersday.jpg

※左マージン（文字の頭）は14～15pxを目安とする。
※4枠のうち、上の3枠に入るバナーは、「右エリア(161x55)」、「主要5店舗(142x50)」、「各店おすすめベスト5(120x42)」も作成する。
★JPGを書き出すときは「プレグレッシブ形式」にしないこと！古いFlash Playerが非対応なため。

プロモ(大)バナー

【サイズ】272 x 177 px
【枠】外枠は1pxの[#c2c2c2]。
【ファイル名】（例）main_bnr_m070419_swarovski.jpg

※左マージン（文字の頭）は9～10pxを目安とする。
※文字サイズ等は他バナーと大体同じになるように制作すること。
※プロモ(小)バナーも制作する。

プロモ(小)バナー

【サイズ】272 x 87 px
【枠】外枠は1pxの[#c2c2c2]。
【ファイル名】（例）main_bnr_m080506_kimuraya.jpg

※左マージン（文字の頭）は9～10pxを目安とする。
※文字サイズ等は他バナーと大体同じになるように制作すること。

ロゴ

●「マル高(takashimaya)」ロゴ…【RGB色】#FF0000。
●「TAKASHIMAYA ONLINE SHOPPING」ロゴ…【RGB色】#CA0000。

※これらのロゴはKDSで制作したものではありません。

パン屑

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

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

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

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

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

各店静的【宣伝部】

基本カラースキーム

【テキスト】#333333
【リンク】#2791cb

バナー情報

各店舗TOPのバナー
【サイズ】250x121px
【枠】外枠1px：#d6d6d6、内枠1px：#FFFFFF
【ファイル名】topicsimg_081007_[タイトル].jpg

静的ページの注意文エリア

背景:#F0F0F0、枠:#E0E0E0

紙データからの変換

注意点

●「Illustrator」から「photoshop」に移す際は、パスは「シェイプレイヤー」にする。
●色については、使用したGRB値を明確にすること。バナーを作成するときは、その値にする。

色味の基準値

●M：100、C：100の場合 → #e60011

@@ 1行目: / 1行目: @@
+<div id="manual">
 タカシマヤのデザインメモです。<br>
-動的の仮アップは以下URL参照。<br>
-http://test-takashimaya3.z-xcv.com/product/00002508.html
-----
 ==テキスト・リンク==
+<div class="example">
 ●TEXT:#333333<br>
 ●LINK:#0000EE、下線なし<br>
 ●HOVER:#0000EE、下線あり<br>
+</div>
-●テキストサイズは「12px(サイズ) / 16px or 18px(行間)」を基本とする。<br>
+テキストサイズは「12px(サイズ) / 16px or 18px(行間)」を基本とする。<br>
-【サイズリスト】<br>
+<div class="example">
+'''フォントサイズリスト'''<br>
 ・10px / 14px<br>
-・12px / 16px or 18px 　←これが標準サイズ<br>
+・12px / 16px or 18px 　←★これが標準サイズ<br>
 ・14px / 18px<br>
 ・16px / 20px or 22px<br>
+</div>
-----
 ==検索エリアの背景色==
-●基本的に「#e3e3e3」である。<br>
+<div class="example">
+●基本的に「#e3e3e3」です。<br>
 ●ページによっては変わるケースもあり。
+</div>
-----
 ==アーティクル==
-アーティクルとは動的ページ（サムネイルページ）特定エリアに入る要素です。<br>
+アーティクルとは動的ページ（サムネイルページ）の特定エリアに入る要素です。<br>
-デザイン（グラフィック）処理をしたバナーと勘違いする人が多いですがそれは違います。あくまで由良さんが命名した単なるディレクトリ名「article」です。
+グラフィックデザインされたバナーと勘違いする人が多いですがそれは誤りです。「article」とは由良さんが命名した単なるディレクトリ名に過ぎません。
 ===店舗情報===
+店舗連動情報が「下部アーティクル」に入ることがあります。
+<div class="example">
 ●背景:#f0f0f0のbgをひき、マージンは10px。<br>
 ●枠：#e0e0e0の1px。<br>
@@ 35行目: / 39行目: @@
 会場：東京店 8階催会場<br>
+※この際、「上部アーティクル」の右下にアンカーリンクが入ります。<br>
+</div>
 ===ブランドアーティクル===
@@ 41行目: / 46行目: @@
 ●縦の最小は202px。（あとはテキスト次第で伸びる）<br>
 ●【ブランド】でLayout検索すると出てきます。<br>
-●【参考】(070612)ウーゴ カッチャトーリ、(070821)タオル美術館
+●参考にするなら…　(070821)タオル美術館、(080401)EMAKIエマキ
 ===タカシマヤ京都スタイル===
 ●京都スタイルのアーティクルは、'''166px'''が最低ライン。テキスト文字数が増えれば、あとは成り行きに任せて。
-----
+==主要バナー==
+===TOP Flashバナー===
+<div class="example">
+【サイズ】566 x 172 px<br>
+【枠】'''なし！'''（Flash側にあるため）<br>
+【ファイル名】（例）bnr_flash_080419_mothersday.jpg'''
+</div>
+※左マージン（文字の頭）は14～15pxを目安とする。<br>
+※4枠のうち、上の3枠に入るバナーは、「右エリア(161x55)」、「主要5店舗(142x50)」、「各店おすすめベスト5(120x42)」も作成する。<br>
+★JPGを書き出すときは「プレグレッシブ形式」にしないこと！ 古いFlash Playerが非対応なため。
+===プロモ(大)バナー===
+<div class="example">
+【サイズ】272 x 177 px<br>
+【枠】外枠は1pxの[#c2c2c2]。<br>
+【ファイル名】（例）main_bnr_m070419_swarovski.jpg
+</div>
+※左マージン（文字の頭）は9～10pxを目安とする。<br>
+※文字サイズ等は他バナーと大体同じになるように制作すること。<br>
+※プロモ(小)バナーも制作する。
+===プロモ(小)バナー===
+<div class="example">
+【サイズ】272 x 87 px<br>
+【枠】外枠は1pxの[#c2c2c2]。<br>
+【ファイル名】（例）main_bnr_m080506_kimuraya.jpg
+</div>
+※左マージン（文字の頭）は9～10pxを目安とする。<br>
+※文字サイズ等は他バナーと大体同じになるように制作すること。<br>
 ==ランキング画像==
-定例更新時にランキングの更新が頻繁にあります。デザイナーは画像のみを用意して、当該する本アップ日のフォルダにJPG画像を置くこと。
+定例更新時にランキングの更新が頻繁にあります。<br>
+デザイナーは画像のみを用意して（[img]○○○）、当該する本アップ日のフォルダにJPG画像を置くこと。
+<div class="example">
 ===コスメBPランキング（5位まで）===
-●サイズ…60x60【枠含む★c2c2c2】<br>
+・サイズ…60x60【枠含む★c2c2c2】<br>
-●ファイル名(例)…photo_51818.jpg
+・ファイル名(例)…photo_51818.jpg
 ===いちおしスウィーツ（3位まで）===
-●サイズ…85x65【枠なし】<br>
+・サイズ…85x65【枠なし】<br>
-●ファイル名(例)…img_ranking01.jpg、img_ranking02.jpg
+・ファイル名(例)…img_ranking01.jpg、img_ranking02.jpg
 ===ギフト（5位まで）===
-●サイズ…60x60【枠なし】<br>
+・サイズ…60x60【枠なし】<br>
-●ファイル名(例)…img_product_234825.jpg
+・ファイル名(例)…img_product_234825.jpg
 ===オンラインバール（各1位のみ）===
-●サイズ…48x48【枠なし】<br>
+・サイズ…48x48【枠なし】<br>
-●ファイル名(例)…item_ranking_wine_36928.jpg
+・ファイル名(例)…item_ranking_wine_36928.jpg
 ===出産祝の贈りもの（5位まで）===
-●サイズ…61x61【枠なし】<br>
+・サイズ…61x61【枠なし】<br>
-●ファイル名(例)…img_rank01.jpg、img_rank02.jpg
+・ファイル名(例)…img_rank01.jpg、img_rank02.jpg
+</div>
-----
 ==ロゴ==
+<div class="example">
 ●「マル高(takashimaya)」ロゴ…【RGB色】#FF0000。<br>
-●「TAKASHIMAYA ONLINE SHOPPING」ロゴ…【RGB色】#CA0000。このロゴは光画では制作したものではありません。
+●「TAKASHIMAYA ONLINE SHOPPING」ロゴ…【RGB色】#CA0000。
+</div>
-----
+※これらのロゴはKDSで制作したものではありません。
-==横幅サイズ指定==
-'''横幅:750px'''<br>
-●【メインエリア548px】21px【共通エリア・フリーエリア181px】<br>
-'''メインエリア:548px'''<br>
-●2列の場合、【268px】12px【268px】<br>
-●3列の場合、【176px】10px【176px】10px【176px】<br>
-とする。
-----
 ==パン屑==
-ショッピングの第2階層である「大カテ」名から記述。<br>
+<div class="example">
-テキスト表示で12px、#333333を想定。当該ページはBOLD表示。
+・ショッピングの第2階層である「大カテ」名から記述。<br>
+・テキスト表示で12px、#333333を想定。当該ページはBOLD表示。
+</div>
-----
 ==商品画像・イメージサイズ==
 基本的に、商品画像には枠を含めない。
+<div class="example">
+'''画像サイズ'''<br>
 ●特集：100×100px<br>
 ●アイテムピックアップ：58×58px<br>
 ●関連リンク：48×48px
+</div>
-●商品スペック記述<br>
+<div class="example">
-「ブランド名」と「商品名」をテキストリンク#0000EEにする。
+'''商品スペックについて'''<br>
+「ブランド名」と「商品名」をテキストリンク【#0000EE】にする。
 ・ブランド名は[○○○○]とし、10px/14px。半角の[]を使用で全て統一。<br>
 ・商品名は12px/16px<br>
 ・金額にはリンクを貼らない。金額部分は#333333のテキスト。場合によってはBold。
+</div>
-----
+==各店静的【宣伝部】==
-==総合TOP==
+===基本カラースキーム===
-・2007年08月31日(金)：「ピンクの薔薇」右「赤い薔薇」に変更。<br>
+<div class="example">
-・2008年03月01日(土)：「赤い薔薇」→「ピンクの薔薇」に変更。
+【テキスト】#333333<br>
+【リンク】#2791cb
-----
+</div>
-==主要バナー==
-●『TOP Flash』プロモバナー：566×172（枠は含まない）<br>
-shopping/flashdata/banner/'''bnr_flash_070419_mothersday.jpg'''<br>
-●『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>
-●『大カテ』プロモバナー(左)：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'''
+<div class="example">
+'''各店舗TOPのバナー'''<br>
+【サイズ】250x121px<br>
+【枠】外枠1px：#d6d6d6、内枠1px：#FFFFFF<br>
+【ファイル名】topicsimg_081007_[タイトル].jpg
+</div>
-●『タカシマヤ特集ページ』バナー：200×75（1pxの枠含む。#c2c2c2）<br>
+===静的ページの注意文エリア===
-shopping/special/img/'''bnr_right_070419_lucky.jpg'''
+<div class="example">
+背景:#F0F0F0、枠:#E0E0E0
+</div>
-●『各店』おすすめバナー：120×42（1pxの枠含む。#c2c2c2）<br>
+==紙データからの変換==
-store/banner/'''e_070426_01.jpg'''
+===注意点===
+<div class="example">
+●「Illustrator」から「photoshop」に移す際は、パスは「シェイプレイヤー」にする。<br>
+●色については、使用したGRB値を明確にすること。バナーを作成するときは、その値にする。
+</div>
-●『各店』主要5店舗：142×50（1pxの枠含む。#c2c2c2）<br>
+===色味の基準値===
-store/shopping/banner/'''onlineShop_banner_070419_01.gif'''
+<div class="example">
+●M：100、C：100の場合 → #e60011
+</div>
+</div>