「タカシマヤのデザインガイドライン」を編集中

<div id="manual">
タカシマヤのデザインメモです。<br>

==テキスト・リンク==
<div class="example">
●TEXT:#333333<br>
●LINK:#0000EE、下線なし<br>
●HOVER:#0000EE、下線あり<br>
</div>

テキストサイズは「12px(サイズ) / 16px or 18px(行間)」を基本とする。<br>
<div class="example">
'''フォントサイズリスト'''<br>
・10px / 14px<br>
・12px / 16px or 18px 　←★これが標準サイズ<br>
・14px / 18px<br>
・16px / 20px or 22px<br>
</div>

==検索エリアの背景色==
<div class="example">
●基本的に「#e3e3e3」です。<br>
●ページによっては変わるケースもあり。
</div>

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

===店舗情報===
店舗連動情報が「下部アーティクル」に入ることがあります。
<div class="example">
●背景:#f0f0f0のbgをひき、マージンは10px。<br>
●枠：#e0e0e0の1px。<br>
●テキスト例<br>
【店舗情報】<br>
タカシマヤ東京店でも「第●回 山形展」を開催いたします。ぜひご来場ください。<br>
会期：2008年5月○日(木) →5月○日(火) 午前10時→午後8時 （※最終日は午後6時で閉会）<br>
会場：東京店 8階催会場<br>

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

===ブランドアーティクル===
●「ブランドアーティクル」はテンプレート有。<br>
●縦の最小は202px。（あとはテキスト次第で伸びる）<br>
●【ブランド】でLayout検索すると出てきます。<br>
●参考にするなら…　(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>


==ランキング画像==
定例更新時にランキングの更新が頻繁にあります。<br>
デザイナーは画像のみを用意して（[img]○○○）、当該する本アップ日のフォルダにJPG画像を置くこと。
<div class="example">
===コスメBPランキング（5位まで）===
・サイズ…60x60【枠含む★c2c2c2】<br>
・ファイル名(例)…photo_51818.jpg

===いちおしスウィーツ（3位まで）===
・サイズ…85x65【枠なし】<br>
・ファイル名(例)…img_ranking01.jpg、img_ranking02.jpg

===ギフト（5位まで）===
・サイズ…60x60【枠なし】<br>
・ファイル名(例)…img_product_234825.jpg

===オンラインバール（各1位のみ）===
・サイズ…48x48【枠なし】<br>
・ファイル名(例)…item_ranking_wine_36928.jpg

===出産祝の贈りもの（5位まで）===
・サイズ…61x61【枠なし】<br>
・ファイル名(例)…img_rank01.jpg、img_rank02.jpg
</div>

==ロゴ==
<div class="example">
●「マル高(takashimaya)」ロゴ…【RGB色】#FF0000。<br>
●「TAKASHIMAYA ONLINE SHOPPING」ロゴ…【RGB色】#CA0000。
</div>
※これらのロゴはKDSで制作したものではありません。

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

==商品画像・イメージサイズ==
基本的に、商品画像には枠を含めない。
<div class="example">
'''画像サイズ'''<br>
●特集：100×100px<br>
●アイテムピックアップ：58×58px<br>
●関連リンク：48×48px
</div>

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

==各店静的【宣伝部】==
===基本カラースキーム===
<div class="example">
【テキスト】#333333<br>
【リンク】#2791cb
</div>

===バナー情報===
<div class="example">
'''各店舗TOPのバナー'''<br>
【サイズ】250x121px<br>
【枠】外枠1px：#d6d6d6、内枠1px：#FFFFFF<br>
【ファイル名】topicsimg_081007_[タイトル].jpg
</div>

===静的ページの注意文エリア===
<div class="example">
背景:#F0F0F0、枠:#E0E0E0
</div>

==紙データからの変換==
===注意点===
<div class="example">
●「Illustrator」から「photoshop」に移す際は、パスは「シェイプレイヤー」にする。<br>
●色については、使用したGRB値を明確にすること。バナーを作成するときは、その値にする。
</div>

===色味の基準値===
<div class="example">
●M：100、C：100の場合 → #e60011
</div>
</div>