デザインガイドライン

提供：Wiki@KDS
2008年3月13日 (木) 11:30時点における192.168.200.252 (トーク)による版
ナビゲーションに移動 検索に移動

基本事項

■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）

これはファイル管理上、大切なポイントです。作業の際は「いつ本アップ分の仕事をしているのか？」という点を明確にしておきましょう。

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

・最新ファイルは常にWEBWORK上に存在することをルールとします。（作業中のみ例外。）
・デザイン作業途中で帰社する場合は、途中でもそのpsdファイルをWEBWORKに上げてください。万が一、翌日に欠勤した場合などでも、スムーズに仕事の引き継ぎができることが望ましいです。
・繰り返し書きますが、再度の追加・修正作業を行うときはWEBWORKにある最新のソースファイルをローカルに落としてから作業を行いましょう。

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

・フォルダ名もファイル名も基本は「タイトル」【つまり、<title>タグのこと】と同じ名称にする。
これはファイル検索・発見の正確性と効率性を上げるためです。つまり、未来の自分が見つけやすいファイル名にしようということ。

■作業フロー

発注の際は「指示書」を付けて、口頭説明することで正式な依頼とします。 （指示書は「現在、誰がボールを持っているか？」を示す目印の役割も担います）

(1)デザイン作業依頼

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

　【確認項目】
　・本アップ日
　・デザイン締切(日時まで確認)
　・ボリューム（ページ総数、バナー数）
　・内容（目的、要素、優先順位、テイスト、色味） 　・素材（文字、画像）

(2)デザイン作業中

→■「みんながんばれ」
　□「じゅもんをせつやく」
　□「ガンガンいこうぜ」
　□「いのちをだいじに」
　□「いろいろやろうぜ」
　□「じゅもんをつかうな」


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

デザイン作業が終了しても、もう一度、客観的な視点で見直してみましょう。

[1]要素
　・要素漏れはないか？
　・(追加修正などの場合は)現在アップされているのと比較して、間違っている点や矛盾点がないか？
　【コツ】タブブラウザで、「現在アップ中のページ」と「今回制作したJPG」を比較すると問題を発見しやすい。

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

[3]デザイン
　・ユーザビリティ上の問題はないか？
　・情報の強弱、優先度は適切に表現されているか？
　・写真のトリミング、大きさ、補正は適切か？
　・配色は論理的に考えて、適切かつ効果的に使用しているか？
　・サイト内の1ページとして、他ページとの整合性は取れているか？

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


(4)作業終了報告

　・ソースファイル(psdファイル)は、WEBWORKの指定場所に上げる。それと同時に確認用JPGも上げること。
　・作業終了時は「制作物」をプリントアウトし、指示書と共に作業依頼者に手渡すこと。
　出力の際は「画像化(レイヤー統合)」してからプリントアウトしましょう。
　・問題点や懸念点があったら、必ず報告すること。

photoshopについて

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

■photoshop:最低限のルール

●レイヤーはエリア単位で移動できるように、エリアごとに「フォルダ」を区切ること。
　→移動とコピーの効率化。特に追加修正時の効率化を考慮してます。
●フォルダの色分けは基本的にはしないこと。
　→色をつけることで煩雑になりやすいため。
　（但し、マウスオーバーの場合はコーダーが理解しやすいように当該フォルダを　「赤」にするのを推奨）
●ガイドは500％に拡大した上でシフト押しながら引く。
　→吸着が1pxズレる。後フローのコーディングのため。
●テキストの場合、スペースで間隔を取らない。
　→そうして！
　【ダメな例】和菓子　　洋菓子
　　　　　　　　　　　　↑このスーペースはとらない。
●ファイル名の後ろには、「本アップ日」に入れる。【例】産地直送グルメ便TOP_070304.psd
　→管理上の約束事。また、ファイル検索時に本アップ日を参照して探すため。

■photoshop:推奨事項

●マスクはレイヤーにではなく、フォルダにかけるのを推奨。特に写真の場合は守ること。
　→更新の効率化。枠がない場合にスタイスした画像サイズが明白なのが嬉しい
●透明化は極力しない。【例】背景レイヤーの「透明10％」など
　→コピーして繋ぎ合わせるときに、重ね合わせた部分の色が変わってしまう。
●統合が可能なものは統合する。
　→選択範囲で選択できるところは統合してもよい。レイヤーが増えることによる複雑化と重さの解消。
　【わかりづらい例】
　■
　----------------------------------------
　などの見出しの場合、「■」レイヤーと「-----」レイヤーは統合しても問題なし。
●レイヤーに対して、「ドロップシャドー」は極力利用しない。（例外：写真や文字）
　→枠やパーツなどで使用すると意図しない"はみ出し"やコピーする際に小さな問題が起こりやすいため。
　→ドロップシャドーは拡大/縮小に未対応なため。
●テキストの段落は「左寄せ」「弱い禁則」で。
　→小さな問題だが、文字の詰めに間隔が生まれる。HTMLの見え方と差異がでる。
●テキスト：段落タブにある、テキストボックスの「マージン指定」は使用しない。
　→便利な機能だが、次回Textフォームを作るときに値が残り、直す手間がかかる。
　→フォームエリアを明確に指定した方が混乱しない。レアケースを回避などなど。
●レイヤー・フォルダの「リンク」は最低限にとどめる。
　→リンクが多すぎると移動の際、関係ないところが動き、それを突き止めるのに手間がかかる。
　→CS2だとレイヤーの複数選択が可能なので、この問題は解消されるが…
●レイヤー、「ロック」はかけない。
　→レイヤーの「ロック」はしない。編集する際の外す手間を考慮。ただし、必要な場合もあるが、超レアケースなので基本的に使用不可が望ましいと考えます。
●ファイル名は基本的にhtmlの＜title＞タグと同じものを使用する。
　ただし、タカシマヤと入っているタイトルについては省いてもOK。また、長いものも省いてOK
　【例】「タカシマヤ京都スタイル」→「京都スタイル_080304.psd」


■アクション一覧

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

[F1]選択レイヤー・コピー
[F1+S]GIF-256色 書き出し
[F1+⌘]JPG-80 書き出し
[F1+S⌘]JPG-100 書き出し

[F2]RGB変換＋解像度72dpi
[F2+S]透明部分をトリミング
[F2+⌘]
[F2+S⌘]新規ファイル画像化【印刷前】

[F3]選択範囲★白での塗り潰し
[F3+S]【text】黒#000000
[F3+⌘]【text】白#FFFFFF
[F3+S⌘]【text】赤#FF0000

[F4]選択範囲★描画色での塗り潰し
[F4+S]【text】黒#333333
[F4+⌘]【text】青#0000E
[F4+S⌘]

[F5]レイヤー削除
[F5+S]＜選択範囲＞1px縮小↓
[F5+⌘]＜選択範囲＞1px拡大↑
[F5+S⌘]＜選択範囲＞反転→塗潰し

[F6]選択レイヤーコピー
[F6+S]GIF-256色 書き出し
[F6+⌘]JPG-80 書き出し
[F6+S⌘]JPG-100 書き出し

[F7]画像化して印刷68％出力(1200pxまでOK) [F7+S]小カテタイトル作成
[F7+⌘]レイヤー(部分的に)抽出
[F7+S⌘]画像化して印刷(紙に合わせる)出力

[F8]横300px変換
[F8+S]横48px変換(セレクションサイズ)
[F8+⌘]横100px変換
[F8+S⌘]横600px変換

[F9]オブジェクト90％縮小
[F9+S]オブジェクト50%縮小
[F9+⌘]
[F9+S⌘]

[F10]アンシャープマスク(20％,0.2px)
[F10+S]ドロップシャドー(12％)
[F10+⌘]＜文字＞2pxの境界線(白)
[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で自動処理のバッチを利用して、簡単にリサイズできます。
アクション設定は倉田まで。

デザイン依頼について

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

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


  • 「デザイン依頼表」
    所定のデザイン依頼表の紙に、「案件名(タイトル)」、「本アップ日」、「仮アップ日」、「ボリューム(静的中カテ3つ、アーティクル5つ、バナー３つとか)、「(あれば)デザイン提出日」、「ディレクター担当者名」を記述すること。本アップ日は赤字で記述。
  • 「原稿」
    ワイヤーフレーム。必要な掲載要素(文字、画像)全て入れること。
    入りきらない場合や写真や細かな要素とかは別紙で用意し、ここに入るということを明記する。あと、そのデータ(テキストファイル)はLayout内に入れることもお忘れなく。
  • 「(使用可能な)画像一覧サムネイル、ロゴ」
    掲載可能な画像(写真・ロゴなど)の一覧をプリントアウトしてください。掲載が必須の画像にはチェックを入れるなどして指示を出してください。
  • 「メール」
    概要、パン屑＆タイトル名、細かなデザイン方向性の指示（色味がピンクとか、全体的に高級感を出してとか、角丸にしてとか、私、罫線嫌いなの…とかとか）はメールで送り、そのメールをプリントアウトしたものを依頼指示書に付けてください。

■依頼の際の細かな注意点

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

素材について

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

■amanaより購入

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

■素材辞典

\\Tkocore2\WEBworks\001_タカシマヤ\001_takashimaya.co.jp\source\co.jp\Portfolio\[素材]フリー素材★CD-ROM 請求にプラスで載せるので、「【素材】素材辞典」というフォルダを当該案件フォルダに作成すること。

■所有する素材集リスト

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

■ロゴ

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

「https://wiki.kohga.tokyo/index.php?title=デザインガイドライン&oldid=2531」から取得