デザインガイドライン

基本事項

WEBWORKの使用方法

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

• ・全ファイルは社内全スタッフで共有するため、必ず作業終了後にサーバの指定場所に上げる。

（※自分のローカルPCだけにファイルを残さない）

• ・修正/更新作業のときは、まずはWEBWORKにあるファイルを落としてから作業を開始する。

【理由】

• ・特定のスタッフが不在でも、滞りなく業務が進められるようにする。
• ・同じページの修正作業を、例えば「一昨日はAさん→昨日はBさん→今日はAさんが行う」場合、最新オリジナルファイルがサーバ上にないと先祖返りを起こし、ミスの原因となる。
• ・psdファイルは、デザイナーとコーダーの双方が触るので、オリジナルファイルは「指示書」を持っている人のみが"更新＆上書き"できることを明確にする必要性がある。

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

• ・フォルダはクライアント別 ／ 案件別 ／ 種別【例：sourceとか】 / 時間(公開日) / タイトル
  に分かれているので、該当する場所にファイルを置く。

※ファイル管理は基本的には、時間軸（本アップ日）を基準である。

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

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

(4)追加修正作業、開始時

• ・デザインの追加修正が発生した場合は、WEBWORKSから最新のPSDファイルをローカル落とし、そのファイルで作業を行う。このルールは必ず遵守する。

【理由】
理由は「(1)ファイル共有の徹底」と同様。先祖返りミスは、会社全体の信用・責任問題に関わる。このルールは必ず遵守する。

(5)日付管理

• ・制作物の管理は、最初にクライアント別・案件別に分かれ、その中でさらに「日付別」に管理されている。
• ・日付は本アップを基準とする。(注意：作業日ではない)

【例】
10/10に本アップしたバナーを修正して、翌週10/17に再び本アップする場合、「071010」フォルダ内のpsdを落してから作業し、終了後に「071017」フォルダ内にファイル(psdとJPG)を置くこと。（フォルダが存在しない場合は勝手に作成してOK）東京KDSではこの運用が大前提として成り立っている。

(6)最新ファイルがどこにあるか？

• ・最新ファイルは、常にWEBWORK上に存在することをルールとする。※作業中のみ例外。
• ・作業途中で帰社する場合、途中でもそのpsdファイルをWEBWORKに上げる。万が一、翌日に欠勤した場合でも、スムーズに引き継ぎができるようにする。
• ・繰り返すが、再度の追加・修正作業を行うときはWEBWORKにある最新のソースファイルをローカルに落としてから作業を行うこと。

(7)フォルダ名、ファイル名の命名規則

• ・フォルダ・ファイル名は「タイトル」【<title>タグのこと】と同じ名称にする。
• ・命名のときに留意することは、他人や将来の自分がそのファイルを検索するとき、見つけやすいかどうか。簡単に確実にファイルが見つけられるようにする。

---

作業フロー

• ・発注の際は「指示書」を付け、口頭説明することで正式な依頼とする。
  
• ・指示書は「現在、誰がバトンを持っているか?」を示す目印の役割も担う。
• ・指示書を持っている人しか、作業してはいけないということ。

(1)デザイン作業依頼

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

【確認する項目】

• ・本アップ日
  
• ・締切/デザイン提出日(日時まで確認)
  
• ・ボリューム（ページ数、バナー数など）
  
• ・内容（目的、要素、優先順位、テイスト、色味、参考資料、技術、制約…）
• ・素材（文字、画像、ロゴ…）
  

※素材一式は当該のフォルダ内に入っています。

(2)デザイン作業中

デザインする。

(3)作業者の見直し、最終確認

デザイン作業が終了したら、客観的・多面的な視点で見直す。この時間もしっかりと取ること。

[1]要素

• ・要素漏れがないかの確認をする。
• ・現在アップされているページと比較して、間違っている点や矛盾点がないか？

[2]文字

• ・誤字脱字はないか。
• ・文字の可読性は確保されているか？（大きさ、色、コントラスト等）
• ・画像化した文字は「文字詰め」を行い、バランスを取っているか？
• ・数字に誤りはないか？
• ・半角や全角のブレはないか。
• ・ユーザーに意味が通じるか。もっとわかりやすくならないか。

• ・テキストサイズは「10px」、「12px」、「14px」、「16px」の基本4サイズとする。
• ・行間は「14px」、「16px」、「18px」、「20px」、「22px」を状況に応じて使い分ける。

[3]デザイン

• ・ユーザーの要求・要望に応えることができるか？
  
• ・デザインは論理的に説明可能か？
  
• ・ユーザー視点で見て、問題はないか？
• ・ユーザビリティ上の問題はないか？
  
• ・情報の強弱、優先度は適切に表現されているか？
  
• ・写真のトリミング、大きさ、補正は適切か？
  
• ・配色は適切かつ効果的に使用しているか？
  
• ・サイト内の1ページとして、他ページとの整合性は取れているか？
  
• ・今後の運用が想定されたデザインになっているか？

[4]psdファイル

• ・今後、修正が発生した場合、更新しやすいレイヤーになっているか？
  
• ・エリアごとにフォルダ分けされているか？
  
• ・ガイドにズレはないか？（ガイドは500％にして「シフト」押しながら引くこと）
  
• ・コーディングしやすい形になっているか？
  

※photoshopでの制作上の注意点は下記参照のこと。

(4)作業終了報告

• ・PSDファイルは、WEBWORKの指定場所に上げる。それと同時に確認用JPGも上げること。
• ・作業終了時は「制作物」をプリントアウトし、左上に本アップ日を赤ペンで記入の上、指示書と共に作業依頼者に手渡すこと。
• ・出力の際は「画像化(レイヤー統合)」してからプリントアウトしましょう。画面と同じ見え方にするためです。※印刷のアクションの「F7」か「F7+SC」で。
• ・問題点や懸念点があったら報告すること。

photoshopについて

運用の効率化のため、psdファイル作成にもルールを設けています。誰がファイルを触っても、スムーズに作業できるように理解しやすいファイル、レイヤー構造にしましょう。

photoshop:必須のルール

（1）レイヤーはエリア単位で移動できるように、エリアごとに「フォルダ」を区切ること。

　→移動とコピーの効率化。特に追加修正のときの効率化を考慮してます。

（2）フォルダの色分けは、しないこと。

　→色をつけることで煩雑になりやすいため。（但し、マウスオーバーの場合はコーダーが理解しやすいように当該フォルダを　「赤」にするのを推奨）

（3）ガイドは500％に拡大した上でシフト押しながら引く。

　→吸着がズレないようにするため。

（4）テキストの場合、スペースで間隔を取らない。

　→移動や修正の際に調整するのに手間がかかるため。
　　　　【ダメな例】和菓子　　洋菓子
　　　　　　　　　　　　　　　↑ここはスーペースで間隔を取らない。やるならば別のレイヤーに分けること。

（5）テキストはテキストボックスを指定して流し込む。そのとき、禁則処理は「弱い禁則」に設定すること。

　→後で改行するほど文章量が増えても大丈夫なように。

（6）ファイル名の後ろには、「本アップ日」に入れる。

　→管理上の約束事。また、ファイル検索時に本アップ日を参照して探すため。【例】産地直送グルメ便TOP_070304.psd

photoshop:推奨事項

（1）マスクはレイヤーにではなく、フォルダにかけるのを推奨。特に写真の場合はこれは守ること。

　→更新の効率化。枠線がないときに画像サイズの把握がしやすい。

（2）透明化は極力しない。【例】背景レイヤーの「透明10％」など

　→コピーして繋ぎ合わせるときに、重ね合わせた部分の色が変わってしまう。

（3）統合が可能なものは統合する。

　→統合しても問題ない箇所、または、選択範囲で選択できるところは統合してもよい。レイヤーが増えることによる複雑化と重さの解消。

（4）レイヤーに対して、「ドロップシャドー」は極力利用しない。（例外：写真や文字）

　→枠やパーツなどで使用すると意図しない"はみ出し"やコピーする際に小さな問題が起こりやすいため。
　→ドロップシャドーは拡大/縮小に未対応なため。

（5）テキストの段落は「左寄せ」「弱い禁則」で。

　→文字の詰めに間隔が生まれる。HTMLの見え方と差異がでる。

（6）テキスト：段落タブにある、テキストボックスの「マージン指定」は使用しない。

　→便利な機能だが、次回Textフォームを作るときに値が残り、直す手間がかかる。
　→フォームエリアを明確に指定した方が混乱しない。レアケースを回避などなど。

（7）レイヤー・フォルダの「リンク」は最低限にとどめる。

　→リンクが多すぎると移動の際、関係ないところが動き、それを突き止めるのに手間がかかる。
　→CS2だとレイヤーの複数選択が可能なので、この問題は解消されるが…

（8）レイヤーに「ロック」はかけない。

　→レイヤーの「ロック」は基本的にしない。※修正時、コピーしたり編集する際にロックを外す手間を考慮。

（9）ファイル名は基本的にhtmlの＜title＞タグと同じものを使用する。

　→ただし、タカシマヤと入っているタイトルについては省いてもOK。また、長いものも省いてOK
　【例】「タカシマヤ京都スタイル」→「京都スタイル_080304.psd」

（10）不要なレイヤーは削除。

　→複雑化を抑え、わかりやすくするため。ファイルの軽量化。「また使うかもしれないのに…」とレイヤー消すのが不安な方は、そもそものpsdを別にバックアップしてください。

アクション一覧

Photoshopのファンクションキーアクション一覧です。効率化を目指して常に改良してます。
Photoshopアクション一覧へ

自動バッチ・リサイズ処理・ブラシ・フィルタ・シェイプレイヤー・レイヤースタイル

効率化のためにこれらを使用することを推奨します。各設定は倉田まで。

デザイン依頼について

デザイン依頼をする際には、「メール」と「依頼指示書(デザイン依頼表＆指示書)」で指示を出すこと。
※メールのみだけではなく、必ず口頭でも伝える。

依頼指示書(デザイナーに渡す指示書の紙)
「デザイン依頼表」、「原稿」、「(使用可能な)画像一覧サムネイル、ロゴ」、「メールのプリントアウト」、「情報を補足する何か」で構成してください。知らない人にもスムーズにわかりやすく伝わる指示書だとミスも少なくなることでしょう。

• 「デザイン依頼表」
  所定のデザイン依頼表の紙に、「案件名(タイトル)」、「本アップ日」、「仮アップ日」、「ボリューム(静的中カテ3つ、アーティクル5つ、バナー３つとか)、「(あれば)デザイン提出日」、「ディレクター担当者名」を記述すること。本アップ日は赤字で記述。

• 「原稿」
  ワイヤーフレーム。必要な掲載要素(文字、画像)全て入れること。
  入りきらない場合や写真や細かな要素とかは別紙で用意し、ここに入るということを明記する。あと、そのデータ(テキストファイル)はLayout内に入れることもお忘れなく。

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

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

依頼の際の注意点

• 持っている情報は全て、紙(依頼指示書たち)に落とし込んで渡すこと。
• 細かなデザイン方向性の指示（色味指定がブルーとか、テイストは高級感を出してとか、角丸にしてとか、このサイトを参考にとか）もある場合は伝えてください。

素材について

ロイヤリティフリー素材（無料でも有料でも）を使用する場合は、必ず報告すること。

amanaより購入

・必ず、事前に相談の上で購入します。
・ライツマネージドは高料金＆使用期限契約のため、原則として不可。ロイヤリティフリーであれば可とします。
・使用の際は、amanaサイトの写真番号をメモするか、ブックマークしておくこと。

★アマナイメージズ・オリジナルロイヤリティフリーコンテンツ利用規約
http://amanaimages.com/help/qaa-0602.html
※WEBサイトやCD-ROMなどでの構成要素の一部としての使用、放送（ＴＶ番組内、ＣＭ内など）、放送用のビデオ、フィルムまたはビデオカセットなどを含むマルチメディアでの構成要素の一部としての使用。ただし、使用したコンテンツはダウンロードまたはコピー用ではない事が明確であるようにデザインすること。

素材辞典

置き場所は以下です。
\\Tkocore2\WEBworks\001_タカシマヤ\001_takashimaya.co.jp\source\co.jp\チームデザイン\[素材]フリー素材★CD-ROM

請求にプラスで載せるので、「【素材】素材辞典」というフォルダを当該案件フォルダに作成すること。

所有する素材集リスト

・「素材辞典イメージブック」1～9まで
・「日本の文様」
・「日本の伝統文様」
・「和風レトロ地紋」
・「飾り罫・飾り曲線」
・「日本の染型紙文様」
・「きらきら素材集」
・「FREE STYLE SCRAPS フレーム/ライン」
・「FREE STYLE SCRAPS ピクトグラム」
・「おしゃれパターン素材集　北欧・ファブリック」
・「おしゃれパターン素材集　水玉・ストライプ」
・「すぐに使えるカリグラフィと飾りケイ」
・「パターンライブラリー」

ロゴ

今まで使用したロゴデータは以下の場所にあります。いろいろとご参考に。
\\Tkocore2\WEBworks\001_タカシマヤ\001_takashimaya.co.jp\source\co.jp\タカシマヤ重要素材\[logo]各種ロゴデータ