デザインガイドライン
基本事項
WEBWORKの使用方法
(1)ファイル共有の徹底
・全てのファイルはスタッフ全員で共有するため、作業終了後にサーバの指定場所に上げること。
（※自分のローカルPCだけにファイルを残さない）
【理由】
・特定のスタッフが不在・欠勤時でも、滞りなく業務が進められるようにする。
・同じページの修正作業を、「一昨日はAさん、昨日はBさん、今日はAさんが行う」場合、最新のオリジナルファイルはWEBサーバ上にないと先祖返りを起こし、ミスの原因になる。
(2)フォルダ分けについて
・『クライアント別／案件別／種別/時間(公開日)』に分かれているので、該当する場所にファイルを置くこと。
(3)種別のフォルダ構成
[backup]：バックアップファイルを格納。
[source]：【デザイナー使用】(→ 画像、デザイン済ファイルなどのソースデータを格納。
[temporary]：一時的なバックアップファイルを格納。デザイナーには関係なし。
[upload]：アップ日毎にフォルダ(更新ファイルのみ)を区切って置いてあります。後で担当ディレクターが本番にUPします。
[works]：実作業ファイルを格納。サイト上の全ファイルがあり、ココが常に最新状態になっているはず。
(4)修正作業開始時
・デザインに関する修正作業が発生した場合は、必ず、WEBWORKSから最新のソースファイルを落として作業を行うこと。
【理由】
理由は(1)ファイル共有の徹底と同じ。また、psdファイルの場合はコーディングスタッフがスライスしたpsdを更新している場合もあるので、必ず守ること。
(5)日付管理
・東京DSの制作物は、クライアント別、案件別に分かれ、その中でさらに「日付別」に管理されている。この日付は『本アップ日』を示す。(作業日ではありません！)
これは管理上、重要なポイントなので、作業の際は「いつ本アップ分の仕事をしているのか？」という点に留意しておきましょう。
(6)最新ファイル
・最新ファイルは常にWEBWORK上に存在することをルールとします。（作業中だけは例外。）
再度の修正作業を行うときはWEBWORKにあるファイルを落としてから作業を行いましょう。このルールを順守しないと先祖返りや修正ミス等の要因になるので注意してください。
作業フロー
発注の際は、指示書付きで、口頭説明することで正式な依頼とします。 （指示書は「今、誰がボールを持っているか」を示すための目印でもある）
(1)作業依頼
指示書(全ての情報が落とし込んであるべきもの)と一緒に口頭で依頼するので、それを持って発注となる。
【確認】
・本アップ日
・デザイン締切(日時まで確認)
・ボリューム（ページ総数、バナー数）
(2)終了報告
作業終了時は、制作物をプリントアウトし、指示書と共に作業依頼者に手渡すこと。
その際、必ずソースファイル(psdファイル、JPG・GIFなどなど)を指定のWEBWORKサーバに上げる。
デザイン提出
作業終了時の報告時に注意したい点のまとめです。
確認事項
制作物はさまざまな視点から再確認すること。
・デザイナーとしての視点
・クライアントの視点
・校正者の視点
・エンドユーザーからの視点
(1)要素
・原稿からの要素漏れがないか？
(2)文字
・誤字脱字はないか？
・日付、曜日に誤りはないか？
・半角英数で統一されているか？
・タカシマヤ案件ならば、タカシマヤ用事用語と各種表示の統一に沿っているか？
・テキスト扱い・画像扱いは適切か？
(3)情報
・情報構造を再確認し、ユーザーにわかりやすく、伝わりやすくなっているか確認。
・サイト全体の中の1ページとして捉えた場合に、整合性は取れているか？
・情報の強弱は適切か？
(4)配置
プリントアウト
基本的にデザイン制作終了時には、プリントアウトして依頼者に報告時に手渡します。
その出力の際は「画像化」してからプリントアウトしましょう。
【理由】 ・プリンタ側がフォントを持っているので実際の画面と違うものが出てしまう。 ・解像度の概念が壊れ、綺麗すぎる文字が出てしまう。
photoshop
運用の効率化のため、デザインファイル制作もある程度のルールを設けています。
誰がファイルを触っても、スムーズに仕事が回せるようなノウハウの構築が会社の財産になると考えているため。
最低限のルール
●レイヤーはエリア単位で移動できるように「フォルダ」を区切ること。
●フォルダの色分けは基本的にはしないこと。
（但し、マウスオーバの場合はコーディング時に理解しやすいように当該フォルダを「赤」にするのはOK）
推奨事項
●写真や文字以外は、ドロップシャドーを使用しない。
→枠やパーツなどで使用すると意図しない"はみ出し"や流用する際に問題が起こりやすいため。
アクション
[F1]選択レイヤー・コピー
[F1+S]GIF-256色 書き出し
[F1+⌘]JPG-80 書き出し
[F1+S⌘]JPG-100 書き出し
[F2]RGB変換＋解像度72
[F2+S]90度回転
[F2+⌘]【text】ラスタライズ
[F2+S⌘]新規ファイル画像化【印刷前】
[F3]選択範囲★白での塗り潰し
[F3+S]【text】黒#000000
[F3+⌘]【text】白#FFFFFF
[F3+S⌘]【text】赤#FF0000
[F4]選択範囲★描画色での塗り潰し
[F4+S]【text】黒#333333
[F4+⌘]シェイプレイヤー : 白に
[F4+S⌘]シェイプ レイヤー: 黒に
[F5]レイヤー削除
[F5+S]選択範囲・1px縮小↓
[F5+⌘]選択範囲・1px拡大↑
[F5+S⌘]オブジェクト境界線2px (白)
[F6]選択レイヤーコピー
[F6+S]GIF-256色 書き出し
[F6+⌘]JPG-80 書き出し
[F6+S⌘]JPG-100 書き出し
[F7]
[F7+S]小カテタイトル作成
[F7+⌘]カンパスサイズ
[F7+S⌘]画像解像度
[F8]横300px変換
[F8+S]横48px変換(セレクションサイズ)
[F8+⌘]横100px変換
[F8+S⌘]横600px変換
[F9]オブジェクト90％縮小
[F9+S]オブジェクト50%縮小
[F9+⌘]オブジェクト110%拡大
[F9+S⌘]全ラスタライズ→自動印刷(紙合わせ)
[F10]アンシャープマスク(20％,0.2px)
[F10+S]ドロップシャドー(12％)
[F10+⌘]明度down
[F10+S⌘]明度up
[F11]【text】新ゴM(アンチあり)
[F11+S]【text】osaka(アンチなし)
[F11+⌘]
[F11+S⌘]
[F12]下移動5px↓
[F12+S]上移動5px↑
[F12+⌘]右移動5px→
[F12+S⌘]左移動5px←
[F13]レイヤー削除
[F13+S]オブジェクト横・中央揃え(→←)
[F13+⌘]オブジェクト縦・下揃え(↓)
[F13+S⌘]オブジェクト縦・中央揃え( )
[F14]-----------
[F14+S]【調整レイヤー】レベル補正
[F14+⌘]【調整レイヤー】トーンカーブ
[F14+S⌘]【調整レイヤー】彩度+8
[F15]-----------
[F15+S]オブジェクト・彩度変更 ←10
[F15+⌘]オブジェクト・彩度変更 10→
[F15+S⌘]オブジェクト・彩度変更 90→
自動バッチ・リサイズ処理
photoshopで自動処理のバッチを利用して、簡単にリサイズできます。
アクション設定は倉田まで。
制作頻度の高いバナー
●Flashバナー：566×172（枠は含まない）
bnr_flash_070419_mothersday.jpg
●Flash右メニュー(4個)：181×36
ttl_070419_mothersday.jpg
ttl_070419_mothersday_on.jpg
●右側共通エリアバナー：161×55（1pxの枠含む。#c2c2c2）
bnr_right_070419_mothersday.gif
●大カテ プロモバナー(左)：548×177（1pxの枠含む。#c2c2c2）
shopping/[大カテ]/img/top/main_bnr_l070419_sweets.jpg
●大カテ プロモバナー(左)：272×177（1pxの枠含む。#c2c2c2）
shopping/[大カテ]/img/top/main_bnr_m070419_swarovski.jpg
●大カテ プロモバナー(小)：272×87（1pxの枠含む。#c2c2c2）
shopping/[大カテ]/img/top/main_bnr_s070419_maternity.jpg
●大カテ プロモバナー(小小)：272×55（1pxの枠含む。#c2c2c2）
shopping/[大カテ]/img/top/main_bnr_ss070419_sega.jpg
●特集バナー：200×74（1pxの枠含む。#c2c2c2）
デザイン依頼
デザイン依頼をする際には、「メール」と「依頼指示書(デザイン依頼表＆指示書)」で指示を出すこと。
※メールのみだけではなく、必ず口頭でも伝える。
■依頼指示書(デザイナーに渡す指示書の紙たち)
「デザイン依頼表」、「原稿」、「(使用可能な)画像一覧サムネイル、ロゴ」、「メールのプリントアウト」、「情報を補足する何か」で構成してください。
知らない人にもスムーズにわかりやすく伝わる指示書だと効率も上がり、ミスも少なくなることでしょう。
- 「デザイン依頼表」
所定のデザイン依頼表の紙に、「案件名(タイトル)」、「本アップ日」、「仮アップ日」、「ボリューム(静的中カテ3つ、アーティクル5つ、バナー３つとか)、「(あれば)デザイン提出日」、「ディレクター担当者名」を記述すること。本アップ日は赤字で記述。
- 「原稿」
ワイヤーフレーム。必要な掲載要素(文字、画像)全て入れること。
入りきらない場合や写真や細かな要素とかは別紙で用意し、ここに入るということを明記する。あと、そのデータ(テキストファイル)はLayout内に入れることもお忘れなく。
- 「(使用可能な)画像一覧サムネイル、ロゴ」
掲載可能な画像(写真・ロゴなど)の一覧をプリントアウトしてください。掲載が必須の画像にはチェックを入れるなどして指示を出してください。
- 「メール」
概要、パン屑＆タイトル名、細かなデザイン方向性の指示（色味がピンクとか、全体的に高級感を出してとか、角丸にしてとか、私、罫線嫌いなの…とかとか）はメールで送り、そのメールをプリントアウトしたものを依頼指示書に付けてください。
依頼の際の細かな注意点
- 持っている情報は、"一つ残らず全て"紙(依頼指示書たち)に落とし込んで渡すこと。
- 細かなデザイン方向性の指示（色味がピンクとか、全体的に高級感を出してとか、角丸にして、とかとか）はメールに書いてください。
素材一覧
大阪スタジオ撮影
大阪のスタジオで撮影したファイル。
\\Tkocore2\WEBworks\001_タカシマヤ\001_takashimaya.co.jp\source\co.jp\Portfolio\[撮影]大阪スタジオイメージ撮影
素材辞典
ロゴ
\\Tkocore2\WEBworks\001_タカシマヤ\001_takashimaya.co.jp\source\co.jp\Portfolio\[logo]各種ロゴデータ
Portfolio
デザイン制作
ロゴ
印刷データなど特定タイトルに「ロゴ」がある場合、シェイプレイヤーにできるものはしておく。
※劣化防止のため。