「デザインガイドライン」の版間の差分

提供:Wiki@KDS
ナビゲーションに移動 検索に移動
編集の要約なし
編集の要約なし
3行目: 3行目:


仕事上のファイルは、共有サーバにて管理しています。<br>
仕事上のファイルは、共有サーバにて管理しています。<br>
複数のスタッフが作業するため、スムーズにミスなく作業ができるようにルールを設けています。ここではそのルールを説明します。
複数のスタッフが作業するため、スムーズにミスなく作業ができるようにルールを設けています。




===(1)ファイル共有の徹底===
===(1)ファイル共有の徹底===
*・仕事上のファイルは他のスタッフと共有するため、必ず作業終了後に「指定場所」に上げること。
*■仕事上のファイルは他のスタッフと共有するため、必ず<b>作業終了後に指定場所に上げる</b>こと。
*・修正や更新の作業開始時には、まずWEBWORKから最新ファイルを落としてから作業すること。(先祖返りのミスを防ぐため!)
*■修正や更新の作業開始時には、<b>まずWEBWORKから最新ファイルを落としてから作業する</b>こと。<
*・最新ファイルは常にWEBWORKにあることをルールとする。※作業中のみ各自のローカルに最新ファイルがある。
→先祖返りのミスを起こさないようにするため。
*・作業途中で帰社する場合、途中でもそのpsdファイルを共有サーバに上げること。※欠勤した場合でも、スムーズに引き継げる状態にしておく。
*■作業途中で帰社する場合、途中でもそのpsdファイルを共有サーバに上げること。
*・オリジナルファイルは「指示書」を持っている人のみ更新できる。※psdファイルはデザイナーとコーダーの双方が触る。
→急に欠勤した場合でも、スムーズに引き継げる状態にしておく。




===(2)フォルダ分けについて===
===(2)フォルダ分け===
*・フォルダは'''クライアント別 / 案件別 / 種別【例:sourceとか】 / 時間(公開日) / タイトル'''<br>に分かれているので、該当する場所にファイルを置く。
*■フォルダは'''クライアント別/案件別/種別(sourceとか)/日付(本アップ日)/タイトル'''に分かれている。
※ファイル管理は時間軸(本アップ日)を基準とする。
*■「本アップ日(予定日)」ごとに新しいフォルダを用意する。




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




===(4)フォルダ名、ファイル名の命名規則===
==作業の工程==
*・フォルダ名やファイル名は「タイトルタグ」と同じ名称にする。
デザイン発注の際は「指示書」を付け、口頭説明することで正式な依頼とする。<br>
*・命名のときに留意することは、'''他人や将来の自分がそのファイルを検索するとき、見つけやすいかどうか'''。簡単に確実にファイルが見つけられるようにする。
指示書は「現在、誰がバトンを持っているか?」という目印の役割も担う。




==作業フロー==
===(1)依頼===
*・発注の際は「指示書」を付け、口頭説明することで正式な依頼とする。
指示書(全ての情報が落とし込んであるべきもの)と一緒に口頭で依頼する。それを持って正式な「発注」とする。
*・指示書は「現在、誰がバトンを持っているか?」を示す目印の役割も担う。
*・'''指示書を持っている人しか、作業してはいけない'''ということ。
<br>
 
===(1)デザイン作業依頼===
指示書(全ての情報が落とし込んであるべきもの)と一緒に口頭で依頼。それを持って正式な「発注」とする。


<div class="example">
<div class="example">
【確認する項目】<br>
【確認する項目】<br>
*・本アップ日<br>
*■本アップ日<br>
*・締切/デザイン提出日(日時まで確認)<br>
*■締切/デザイン提出日(日時まで確認)<br>
*・ボリューム(ページ数、バナー数など)<br>
*■ボリューム(ページ数、バナー数など)<br>
*・内容(目的、要素、優先順位、テイスト、色味、参考資料、技術、制約…)
*■内容(目的、要素、優先順位、テイスト、色味、参考資料、技術、制約…)
*・素材(文字、画像、ロゴ…)<br>
*■素材(文字、画像、ロゴ…)<br>
※素材一式は当該のフォルダ内に入っています。
※素材一式は当該のフォルダ内に入っています。
</div>
</div>


===(2)デザイン作業中===
===(2)デザイン作業中===
とにかくデザインする。
デザイナーは考えるのが仕事です。頭を使ってデザインしましょう。




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


<div class="example">
<div class="example">
====[1]要素====
■<b>デザイン全般</b>
*・要素漏れがないかの確認をする。
*・そのデザインはユーザーの要求に応えることができるか。わかりやすいか。
*・現在アップされているページと比較して、間違っている点や矛盾点がないか?
*・情報の強弱、優先度は適切か。
*・ユーザビリティ上の問題はないか。
*・他ページとの整合性は取れているか。
*・コーディングや運用を想定したデザインになっているか。


====[2]文字====
■<b>要素</b>
*・要素漏れがないか。
*・現在アップされているページと比較して、矛盾点がないか。
 
■<b>文字</b>
*・誤字脱字はないか。
*・誤字脱字はないか。
*・文字の可読性は確保されているか?(大きさ、色、コントラスト等)
*・文章の意味は通じるか。もっと分かりやすくならないか。
*・画像化した文字は「文字詰め」を行い、バランスを取っているか?
*・文字の可読性は確保されているか。
*・数字に誤りはないか?
*・画像化した文字は「文字詰め」を行っているか。
*・半角や全角のブレはないか。
*・半角や全角のブレはないか。
*・ユーザーに意味が通じるか。もっとわかりやすくならないか。
====[3]デザイン====
*・ユーザーの要求・要望に応えることができるか?<br>
*・デザインは論理的に説明可能か?<br>
*・ユーザー視点で見て、問題はないか?
*・ユーザビリティ上の問題はないか?<br>
*・情報の強弱、優先度は適切に表現されているか?<br>
*・写真のトリミング、大きさ、補正は適切か?<br>
*・配色は適切かつ効果的に使用しているか?<br>
*・サイト内の1ページとして、他ページとの整合性は取れているか?<br>
*・今後の運用が想定されたデザインになっているか?
====[4]psdファイル====
*・今後、修正が発生した場合、更新しやすいレイヤーになっているか?<br>
*・エリアごとにフォルダ分けされているか?<br>
*・ガイドにズレはないか?(ガイドは500%にして「シフト」押しながら引くこと)<br>
*・コーディングしやすい形になっているか?<br>
※photoshopでの制作上の注意点は下記参照のこと。
</div>
===(4)作業終了報告===
*・PSDファイルは、WEBWORKの指定場所に上げる。それと同時に確認用JPGも上げること。
*・作業終了時は「制作物」をプリントアウトし、左上に本アップ日を赤ペンで記入の上、指示書と共に作業依頼者に手渡すこと。
*・出力の際は「画像化(レイヤー統合)」してからプリントアウトしましょう。画面と同じ見え方にするため。
*・問題点や懸念点があったら報告すること。
<br><br>
==photoshopについて==
運用の効率化のため、psdファイル作成にもルールを設けています。誰がファイルを触っても、スムーズに作業できるように理解しやすいファイル、レイヤー構造にしましょう。
<br><br>
===(1)photoshop:必須のルール===
<div class="example">
(1)レイヤーは'''エリア単位で移動'''できるように、エリアごとに「フォルダ」を区切ること。
</div>
 →移動とコピーの効率化。特に追加修正のときの効率化を考慮してます。<br>
<div class="example">
(2)フォルダの色分けは、しないこと。<br>
</div>
 →色をつけることで煩雑になりやすいため。(但し、マウスオーバーの場合はコーダーが理解しやすいように当該フォルダを 「赤」にするのを推奨)<br>
<div class="example">
(3)ガイドは'''500%'''に拡大した上で'''シフト押しながら引く'''。<br>
</div>
→吸着がズレないようにするため。<br>
<div class="example">
(4)テキストの場合、スペースで間隔を取らない。<br>
</div>
→移動や修正の際に調整するのに手間がかかるため。<br>
【ダメな例】和菓子  洋菓子<br>
               ↑ここはスーペースで間隔を取らない。やるならば別のレイヤーに分けること。<br>
<div class="example">
(5)テキストはテキストボックスを指定して流し込む。そのとき、禁則処理は「'''弱い禁則'''」に設定すること。<br>
</div>
→後で改行するほど文章量が増えても大丈夫なように。
<div class="example">
(6)ファイル名の後ろには、「本アップ日」に入れる。<br>
</div>
→管理上の約束事。また、ファイル検索時に本アップ日を参照して探すため。【例】産地直送グルメ便TOP_070304.psd


===(2)photoshop:推奨事項===
<b>PSDファイル</b>
<div class="example">
*・誰にでも更新しやすいレイヤーになっているか。
(1)マスクはレイヤーにではなく、フォルダにかけるのを推奨。特に写真の場合はこれは守ること。<br>
*・エリアごとにフォルダ分けされているか。
</div>
*・余計なレイヤーはないか。
 →更新の効率化。枠線がないときに画像サイズの把握がしやすい。<br>
*・ガイドにズレはないか。
<div class="example">
(2)透明化は極力しない。【例】背景レイヤーの「透明10%」など<br>
</div>
 →コピーして繋ぎ合わせるときに、重ね合わせた部分の色が変わってしまう。<br>
<div class="example">
(3)統合が可能なものは統合する。<br>
</div>
 →統合しても問題ない箇所、または、選択範囲で選択できるところは統合してもよい。レイヤーが増えることによる複雑化と重さの解消。<br>
<div class="example">
(4)レイヤーに対して、「ドロップシャドー」は極力利用しない。(例外:写真や文字)<br>
</div>
 →枠やパーツなどで使用すると意図しない"はみ出し"やコピーする際に小さな問題が起こりやすいため。<br>
 →ドロップシャドーは拡大/縮小に未対応なため。<br>
<div class="example">
(5)テキストの段落は「左寄せ」「弱い禁則」で。<br>
</div>
 →文字の詰めに間隔が生まれる。HTMLの見え方と差異がでる。<br>
<div class="example">
(6)テキスト:段落タブにある、テキストボックスの「マージン指定」は使用しない。<br>
</div>
 →便利な機能だが、次回Textフォームを作るときに値が残り、直す手間がかかる。<br>
 →フォームエリアを明確に指定した方が混乱しない。レアケースを回避などなど。<br>
<div class="example">
(7)レイヤー・フォルダの「リンク」は最低限にとどめる。<br>
</div>
 →リンクが多すぎると移動の際、関係ないところが動き、それを突き止めるのに手間がかかる。<br>
 →CS2だとレイヤーの複数選択が可能なので、この問題は解消されるが…<br>
<div class="example">
(8)レイヤーに「ロック」はかけない。<br>
</div>
</div>
 →レイヤーの「ロック」は基本的にしない。※修正時、コピーしたり編集する際にロックを外す手間を考慮。
<div class="example">
(9)ファイル名は基本的にhtmlの<title>タグと同じものを使用する。<br>
</div>
 →ただし、タカシマヤと入っているタイトルについては省いてもOK。また、長いものも省いてOK<br>
 【例】「タカシマヤ京都スタイル」→「京都スタイル_080304.psd」<br>
<div class="example">
(10)不要なレイヤーは削除。<br>
</div>
 →複雑化を抑え、わかりやすくするため。ファイルの軽量化。「また使うかもしれないのに…」とレイヤー消すのが不安な方は、そもそものpsdを別にバックアップしてください。
===(3)アクション一覧===


Photoshopのファンクションキーアクション一覧です。効率化を目指して常に改良してます。<br>
===(4)作業終了===
[[Photoshopアクション一覧]]へ
*■PSDファイルはWEBWORKの指定場所に上げる。それと同時に確認用JPGも上げること。
*■制作物をプリントアウトし、本アップ日を赤ペンで記入の上、指示書と共に作業依頼者に手渡す。
*■出力の際は「画像化(レイヤー統合)」してからプリントアウトする。(画面と同じ見え方にするため)
*■デザイン上の問題点や懸念点があったら報告すること。




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


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





2011年7月14日 (木) 14:45時点における版

共有サーバ WEBWORKについて

仕事上のファイルは、共有サーバにて管理しています。
複数のスタッフが作業するため、スムーズにミスなく作業ができるようにルールを設けています。


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

  • ■仕事上のファイルは他のスタッフと共有するため、必ず作業終了後に指定場所に上げること。
  • ■修正や更新の作業開始時には、まずWEBWORKから最新ファイルを落としてから作業すること。<

→先祖返りのミスを起こさないようにするため。

  • ■作業途中で帰社する場合、途中でもそのpsdファイルを共有サーバに上げること。

→急に欠勤した場合でも、スムーズに引き継げる状態にしておく。


(2)フォルダ分け

  • ■フォルダはクライアント別/案件別/種別(sourceとか)/日付(本アップ日)/タイトルに分かれている。
  • ■「本アップ日(予定日)」ごとに新しいフォルダを用意する。


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

  • source:デザインファイルを格納する。デザイナーはここを使う。
  • backup:バックアップファイルを格納する。
  • temporary:一時的なバックアップファイルを格納する。デザイナーには関係なし。
  • upload:アップする差分ファイルを格納する。担当ディレクターが本番にアップする。
  • works:実作業ファイルを格納する。サイト上の全ファイルがある。ココが常に最新状態となる。


作業の工程

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


(1)依頼

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

【確認する項目】

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

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

(2)デザイン作業中

デザイナーは考えるのが仕事です。頭を使ってデザインしましょう。


(3)作業者の見直し

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

デザイン全般

  • ・そのデザインはユーザーの要求に応えることができるか。わかりやすいか。
  • ・情報の強弱、優先度は適切か。
  • ・ユーザビリティ上の問題はないか。
  • ・他ページとの整合性は取れているか。
  • ・コーディングや運用を想定したデザインになっているか。

要素

  • ・要素漏れがないか。
  • ・現在アップされているページと比較して、矛盾点がないか。

文字

  • ・誤字脱字はないか。
  • ・文章の意味は通じるか。もっと分かりやすくならないか。
  • ・文字の可読性は確保されているか。
  • ・画像化した文字は「文字詰め」を行っているか。
  • ・半角や全角のブレはないか。

PSDファイル

  • ・誰にでも更新しやすいレイヤーになっているか。
  • ・エリアごとにフォルダ分けされているか。
  • ・余計なレイヤーはないか。
  • ・ガイドにズレはないか。

(4)作業終了

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



デザイン依頼について

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

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

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

(1)依頼の際の注意点

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


素材について

  • ・素材が必要な場合は、著作権に注意してください。
  • ・使用した素材の元画像をフォルダに入れてください。
  • ・ロイヤリティフリー素材(無料でも有料でも)を使用する場合は、必ず報告すること。

(1)素材辞典より

素材辞典は使い勝手が良いので、利用頻度が高い。素材は以下に置いてある。 \\Tkocore2\WEBworks\001_タカシマヤ\001_takashimaya.co.jp\source\co.jp\チームデザイン\[素材]フリー素材★CD-ROM

利用する際は請求に載せるので、ディレクターに伝わるようにすること。また、元のデータを案件フォルダに入れること。

(2)所有する素材集リスト

これらの本は棚に置いてある。

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

(2)amanaより

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

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