デザインガイドライン

基本事項

■WEBWORKの使用方法

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

・全ファイルは社内全スタッフで共有するため、作業終了後にサーバの指定場所に上げること。
（※自分のローカルPCだけにファイルを残さない）
・修正/更新作業のときは、まずはWEBWORKにあるファイルを落としてから作業を開始する。

　　【理由】
　　・特定のスタッフが不在・欠勤時でも、滞りなく業務が進められるようにする。
　　・同じページの修正作業を、例えば「一昨日はAさん、昨日はBさん、今日はAさんが行う」場合、最新のオリジナルファイルはWEBサーバ上にないと先祖返りを起こし、ミスの原因になる。
　　・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]要素
　・要素漏れはないか？を指示書を元に確認すること。
　・(追加修正の場合は)現在アップされているのと比較して、間違っている点や矛盾点がないか？
　　【コツ】タブブラウザで、「既存ページ」と「制作したJPG」を比較するのを推奨。

[2]文字
　・画像化した文字は「文字詰め」を行い、バランスを取っているか？参考サイト1 参考サイト2
　・文字の可読性は確保されているか？（大きさ、色、コントラスト等）
　・誤字脱字はないか？　※指示書側のミスの場合も報告すること。
　・日付や曜日に誤りはないか？【例】曜日は、カッコ(火)を「半角」にする。
　・英字と数字は半角英数で統一されているか？　※基本、英数文字は「半角」で統一。
　・テキストサイズは「10px」、「12px」、「14px」、「16px」の基本4サイズとします。
　ちなみに行間は「14px」、「16px」、「18px」、「20px」、「22px」を状況に応じて使い分ける。
　・タカシマヤ案件の場合、タカシマヤ用事用語と各種表示の統一に沿っているか？

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

[4]psdファイル
　・今後、修正が発生した場合、更新しやすいレイヤー構造になっているか？
　・エリアごとにフォルダ分けされているか？
　・ガイドにズレはないか？（ガイドは500％にして「シフト」押しながら引くこと）
　・コーディングしやすい形になっているか？
　※photoshopでの制作上の注意点は下記参照のこと。

[5]最終確認
　・エンドユーザーの立場、シチュエーションに立って、最後にページを3分間見る。

(4)作業終了報告

　・ソースファイル(psdファイル)は、WEBWORKの指定場所に上げる。それと同時に確認用JPGも上げること。
バナーやアーティクルの場合は、書き出したファイル（JPG、GIF）がそのままアップされるので、適切な書き出しを行うこと。GIFは256色インターレース書き出し。JPGは「画質:65～90」のプレグレッシブ形式にて書き出す。（但し、Flash内で使用するJPGはプログレッシブ書き出し不可！一部のFlash Playerで非対応なため。）
　・作業終了時は「制作物」をプリントアウトし、左上に本アップ日を赤ペンで記入の上、指示書と共に作業依頼者に手渡すこと。
　・出力の際は「画像化(レイヤー統合)」してからプリントアウトしましょう。画面と同じ見え方にするためです。※印刷のアクションの「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サイトの写真番号をメモするか、ブックマークしておくこと。

■素材辞典

置き場所は以下です。
\\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]各種ロゴデータ