デザインガイドライン

提供：Wiki@KDS
2007年11月19日 (月) 16:39時点における192.168.200.226 (トーク)による版
ナビゲーションに移動 検索に移動

基本事項

■WEBWORKの使用方法

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

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

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

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

・『クライアント別／案件別／種別/時間(公開日)』に分かれているので、該当する場所にファイルを置くこと。
　※ファイル管理は基本的には、時間軸（本アップ日）を基準に考えます。

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

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

(4)修正作業開始時

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

　　【理由】
　　理由は(1)ファイル共有の徹底と同じ。先祖返りのミスは多くの人に迷惑はかけるので、このルールは必ず遵守すること。

(5)日付管理

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

　　【例】
　　10/10に本アップしたバナーを、翌週10/17に修正して再び本アップする場合、「071017」のフォルダ内にバナーを置くこと。（フォルダが存在しない場合は勝手に作成してOK）

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

(6)最新ファイル

・最新ファイルは常にWEBWORK上に存在することをルールとします。（作業中のみ例外。）

再度の修正作業を行うときはWEBWORKにあるファイルを落としてから作業を行いましょう。このルールを順守しないと先祖返りや修正ミス等の要因になるので注意してください。


■作業フロー

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

(1)作業依頼

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

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

(2)終了報告

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


デザイン提出について

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

■確認事項

制作物はさまざまな視点から再確認すること。
・デザイナーとしての視点
・クライアントの視点 ・校正者の視点
・ユーザー視点

(1)要素

・要素漏れがないか？ ・（修正などでは）現在上がっているものと比較して、おかしな点はないか？

(2)文字

・誤字脱字はないか？
・日付、曜日に誤りはないか？
・半角英数で統一されているか？　※基本、英数文字は半角で統一します！
・タカシマヤ案件ならば、タカシマヤ用事用語と各種表示の統一に沿っているか？ ・テキスト扱い・画像扱いは適切か？

(3)情報

・情報構造を再確認し、ユーザーにわかりやすく伝わりやすくなっているか確認。
・サイト全体の中の1ページとして捉えた場合に、整合性は取れているか？ ・各要素の強弱は適切か？

(4)PSDファイル

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


■プリントアウト

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

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


photoshopについて

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

■最低限のルール

●レイヤーはエリア単位で移動できるように、エリアごとに「フォルダ」を区切ること。 →移動とコピーの効率化。
●フォルダの色分けは基本的にはしないこと。
（但し、マウスオーバの場合はコーディング時に理解しやすいように当該フォルダを「赤」にするのはOK）
●ガイドは500％に拡大した上でシフト押しながら引く。
→吸着が1pxズレる。コーディングのため。
●連続するテキストリンクの場合、スペースで間隔を取らない。
→そうして！

■推奨事項

●マスクはレイヤーにではなく、フォルダにかけるのを推奨。特に写真の場合は守ること。 →更新効率化。 ●透明化は極力しない。 →つなぎ合わせるときに不具合。 ●統合できるものは統合する。 →選択範囲で選択できるところは統合してもよい。重さ解消。 ●写真や文字以外は、ドロップシャドーを使用しない。
→枠やパーツなどで使用すると意図しない"はみ出し"や流用する際に問題が起こりやすいため。
●テキストの段落は「左寄せ」で。
→文字の詰めに間隔が生まれる。 ●テキスト。段落タブにあるマージン指定は使用しない。 →便利な機能だが、次回テキストフォームを作るときに値が残る。 →コーディングのため。 ■レイヤー・フォルダのリンクは最低限にとどめる。 →リンクが多すぎると移動の際、関係ないところが動き、それを突き止めるのに手間がかかる。 →CS2だとレイヤーの複数選択が可能なので、この問題は解消されるが… ■レイヤー、ロックはかけない。 →コピーして編集する場合の外す手間を考慮。ただし、必要な場合もあるので状況次第。


■アクション一覧

[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で自動処理のバッチを利用して、簡単にリサイズできます。
アクション設定は倉田まで。

デザイン依頼について

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

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


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

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

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

素材について

■素材辞典

素材として、素材辞典やamanaから使用する場合は、チーフに報告すること。
→管理と、見積り・請求に金額乗せる可能性があるため。

■大阪スタジオ撮影

大阪のスタジオで撮影したファイル。
\\Tkocore2\WEBworks\001_タカシマヤ\001_takashimaya.co.jp\source\co.jp\Portfolio\[撮影]大阪スタジオイメージ撮影

■ロゴ

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

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