タカシマヤのデザインガイドライン

提供：Wiki@KDS
2008年12月17日 (水) 12:39時点における192.168.200.252 (トーク)による版
ナビゲーションに移動 検索に移動

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

テキスト・リンク

●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を目安とする。
※文字サイズ等は他バナーと大体同じになるように制作すること。

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


ランキング画像

定例更新時にランキングの更新が頻繁にあります。
デザイナーは画像のみを用意して、当該する本アップ日のフォルダにJPG画像を置くこと。

コスメBPランキング（5位まで）

●サイズ…60x60【枠含む★c2c2c2】
●ファイル名(例)…photo_51818.jpg

いちおしスウィーツ（3位まで）

●サイズ…85x65【枠なし】
●ファイル名(例)…img_ranking01.jpg、img_ranking02.jpg

ギフト（5位まで）

●サイズ…60x60【枠なし】
●ファイル名(例)…img_product_234825.jpg

オンラインバール（各1位のみ）

●サイズ…48x48【枠なし】
●ファイル名(例)…item_ranking_wine_36928.jpg

出産祝の贈りもの（5位まで）

●サイズ…61x61【枠なし】
●ファイル名(例)…img_rank01.jpg、img_rank02.jpg

ロゴ

●「マル高(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

「https://wiki.kohga.tokyo/index.php?title=タカシマヤのデザインガイドライン&oldid=3316」から取得