デザインガイドライン

---

基本事項

WEBWORKの使用方法

(1)ファイル共有の徹底

・全てのファイルはスタッフ全員で共有するため、作業終了後にサーバの指定場所に上げること。
（※自分のローカルPCだけにファイルを残さない）

　　【理由】
　　・特定のスタッフが不在・欠勤時でも、滞りなく業務が進められるようにする。
　　・同じページの修正作業を、「一昨日はAさん、昨日はBさん、今日はAさんが行う」場合、最新のオリジナルファイルはWEBサーバ上にないと先祖返りを起こし、ミスの原因になる。

(2)フォルダ分けについて

・『クライアント別／案件別／種別/時間(公開日)』に分かれているので、該当する場所にファイルを置くこと。

(3)種別のフォルダ構成

[backup]：バックアップファイルを格納。
[source]：【デザイナー使用】(→ 画像、デザイン済ファイルなどのソースデータを格納。
[temporary]：一時的なバックアップファイルを格納。デザイナーには関係なし。
[upload]：アップ日毎にフォルダ(更新ファイルのみ)を区切って置いてあります。後で担当ディレクターが本番にUPします。
[works]：実作業ファイルを格納。サイト上の全ファイルがあり、ココが常に最新状態になっているはず。

(4)修正作業開始時

・デザインに関する修正作業が発生した場合は、必ず、WEBWORKSから最新のソースファイルを落として作業を行うこと。

　　【理由】
　　理由は(1)と同じ。また、psdファイルの場合、コーディングスタッフがスライスしたデータに更新されている可能性も高いので、ここは特に注意すること。

(5)日付管理

・東京DSの制作物は、クライアント別、案件別に分かれ、その中でさらに「日付別」に管理されている。この日付は『本アップ日』を示す。(作業日ではありません！)

これは管理上、とても重要なポイントなので、作業の際は「いつアップの仕事をしているのか？」という点に留意しましょう。

(6)最新ファイル

・最新のファイルは常にWEBWORK上に存在します。
但し例外として、自分の作業中は自分のローカルにあるファイルが最新ファイルです。

つまり、作業終了報告後は自分のローカルにあるファイルは最新ファイルではなくなります。再度、修正作業に入るときはWEBWORK上の指定位置にあるファイルを落としましょう。このルールを順守しないと大きなミスの原因になるので注意してください。

---

作業フロー

基本的に、指示書付きで直接、口頭説明した場合のみ発注となる。 特に指示書は『今、誰がボールを持っているのか？』を明確にし、意思の食い違いによるミスを減らす目的がある。

(1)作業依頼

指示書(全ての情報が落とし込んであるべきもの)と一緒に口頭で依頼するので、それを持って発注となる。

　　【確認】
　　・本アップ日
　　・デザイン締切(日時まで確認)
　　・ページ総数、バナー総数

(2)終了報告

作業終了時は、制作物をプリントアウトし、指示書と共に作業依頼者に手渡すこと。
その際、必ずソースファイル(psdファイル、JPG・GIFなどなど)を指定のWEBWORKサーバに上げる。

---

デザイン提出

作業終了時の報告時に注意したい点のまとめです。

確認事項

制作物は3つの視点から再確認すること。
・デザイナーとしての視点
・校正者の視点
・(何も知らない)ユーザーからの視点

(1)要素

・要素漏れがないか、全ての要素を満たしているか？

(2)誤字脱字

・誤字脱字などのチェック
・タカシマヤ案件ならば、タカシマヤ用事用語と各種表示の統一に沿っているか？
・日付、曜日に誤りはないか？
・半角英数で統一されているか？

(3)情報

・情報構造を再確認し、エンドユーザーに伝わりやすくなっているか確認。
・前後のページと整合性が取れているか？

プリントアウト

基本的にデザイン制作終了時には、プリントアウトして依頼者に報告時に手渡します。
その出力の際は「画像化」してからプリントアウトしましょう。

　【理由】 　プリンタ側がフォントを持っているため、実際の画面と違うものが出てしまうため。解像度の概念が壊れ、綺麗すぎる文字が出てしまうため。

---

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内に入れることもお忘れなく。

• 「(使用可能な)画像一覧サムネイル、ロゴ」
  掲載可能な画像(写真・ロゴなど)の一覧をプリントアウトしてください。掲載が必須の画像にはチェックを入れるなどして指示を出してください。

• 「メール」
  概要、パン屑＆タイトル名、細かなデザイン方向性の指示（色味がピンクとか、全体的に高級感を出してとか、角丸にしてとか、私、罫線嫌いなの…とかとか）はメールで送り、そのメールをプリントアウトしたものを依頼指示書に付けてください。

依頼の際の細かな注意点

• 持っている情報は、"一つ残らず全て"紙(依頼指示書たち)に落とし込んで渡すこと。
• 細かなデザイン方向性の指示（色味がピンクとか、全体的に高級感を出してとか、角丸にして、とかとか）はメールに書いてください。