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

提供:Wiki@KDS
2009年2月4日 (水) 12:28時点における192.168.200.252 (トーク)による版
(差分) ← 古い版 | 最新版 (差分) | 新しい版 → (差分)
ナビゲーションに移動 検索に移動

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

テキスト・リンク

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


ランキング画像

定例更新時にランキングの更新が頻繁にあります。
デザイナーは画像のみを用意して([img]○○○)、当該する本アップ日のフォルダに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