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

提供:Wiki@KDS
ナビゲーションに移動 検索に移動
編集の要約なし
編集の要約なし
 
(同じ利用者による、間の19版が非表示)
1行目: 1行目:
<div id="manual">
<div id="manual">
==基本事項==
==共有サーバ WEBWORKについて==


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


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


  【理由】<br>
===(1)ファイル共有の徹底===
  ・特定のスタッフが不在・欠勤時でも、滞りなく業務が進められるようにする。<br>
*■ファイルは他のスタッフと共有するため、作業終了後に指定場所に上げる。
  ・同じページの修正作業を、例えば「一昨日はAさん、昨日はBさん、今日はAさんが行う」場合、最新のオリジナルファイルはWEBサーバ上にないと先祖返りを起こし、ミスの原因になる。<br>
*■修正や更新の作業開始時には、<b>まずWEBWORKから最新ファイルを落としてから作業する</b>こと。
  ・psdファイルは、デザイナーとコーダーの双方が触るので、オリジナルファイルは「指示書」を持っている人のみが"更新&上書き"できることを明確にする必要性がある。
→先祖返りのミスを起こさないようにするため。
*■作業途中で帰社する場合、<b>途中でもそのpsdファイルを共有サーバに上げる</b>こと。
→急に欠勤した場合でも、スムーズに引き継げる状態にしておく。


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


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


====(4)追加修正作業、開始時====
===(2)フォルダ分け===
・デザインの追加修正作業が発生した場合は、WEBWORKSから最新のソースファイル(psd)を落とし、そのファイルで作業を行うこと。このルールは必ず守ってください。
*■フォルダは'''クライアント別/案件別/種別(sourceとか)/日付(本アップ日)/タイトル'''に分かれている。
*■「本アップ日(予定日)」ごとに新しいフォルダを用意する。


  【理由】<br>
  理由は「(1)ファイル共有の徹底」と同じです。先祖返りのミスは会社全体の信用・責任問題に関わるケースもあります。なので、このルールは必ず遵守してください。


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


  【例】<br>
===(3)種別のフォルダ構成===
  10/10に本アップしたバナーを修正して、翌週10/17に再び本アップする場合、「071010」フォルダ内のpsdを落してから作業し、終了後に「071017」フォルダ内にファイル(psdとJPG)を置くこと。(フォルダが存在しない場合は勝手に作成してOK)


これはファイル管理上、重要なポイントです。東京KDSではこの運用が大前提として成り立っています。また、作業の際は「いつ本アップ分の仕事をしているのか?」という点を明確にしておきましょう。
種別のフォルダにもルールがあります。


====(6)最新ファイルがどこにあるか?====
<div class="example">
・最新ファイルは常にWEBWORK上に存在することをルールとします。※作業中のみ例外。<br>
*'''source:デザインファイルを格納する。デザイナーはここを使う。'''
・デザイン作業の途中で帰社する場合は、途中でもそのpsdファイルをWEBWORKに上げてください。万が一、翌日に欠勤した場合でも、スムーズに引き継ぎができることが望ましいです。<br>
*backup:バックアップファイルを格納する。
・繰り返しますが、再度の追加・修正作業を行うときはWEBWORKにある最新のソースファイルをローカルに落としてから作業を行いましょう。
*temporary:一時的なバックアップファイルを格納する。デザイナーには関係なし。
*upload:アップする差分ファイルを格納する。担当ディレクターが本番にアップする。
*works:実作業ファイルを格納する。サイト上の全ファイルがある。ココが常に最新状態となる。
*document:サイト全体のガイドライン、仕様書、FTP設定などのドキュメントを格納する。
</div>


====(7)フォルダ名、ファイル名の命名規則====
==作業の工程==
・フォルダ名もファイル名も基本は「タイトル」【<title>タグのこと】と同じ名称にします。<br>これはファイル検索の正確性と効率性を上げるためです。未来の自分たちが検索して、すぐに見つけやすいファイル名にしようということ。
デザイン発注の際は「指示書」を付け、口頭説明することで正式な依頼とする。<br>
指示書は「現在、誰がバトンを持っているか?」という目印の役割も担う。


----
===■作業フロー===


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


====(1)デザイン作業依頼====
<div class="example">
指示書(全ての情報が落とし込んであるべきもの)と一緒に口頭で依頼。それを持って正式な「発注」となる。
【確認する項目】<br>
*■本アップ日<br>
*■締切/デザイン提出日(日時まで確認)<br>
*■ボリューム(ページ数、バナー数など)<br>
*■内容(目的、要素、優先順位、テイスト、色味、参考資料、技術、制約…)
*■素材(文字、画像、ロゴ…)<br>
※素材一式は当該のフォルダ内に入っています。
</div>


 【確認項目】<br>
===(2)デザイン作業中===
 ・本アップ日<br>
デザイナーは考えるのが仕事です。頭を使ってデザインしましょう。<br>
 ・締切/提出日(日時まで確認)<br>
※[[photoshopについて]]のガイドラインはこちらを参考にしてください。
 ・ボリューム(ページ数、バナー数など)<br>
 ・内容(目的、要素、優先順位、テイスト、色味、テクニカル面…)
 ・素材(文字、画像、ロゴ…)<br>
  ※素材一式は当該のフォルダ内に入っています。


====(2)デザイン作業中====
がんばれ。<br>


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


====(3)作業者の見直し、最終確認====
<div class="example">
デザイン作業が終了したら、客観的・多面的な視点で見直してみましょう。
■<b>デザイン全般</b>
*・そのデザインはユーザーの要求に応えることができるか。わかりやすいか。
*・情報の強弱、優先度は適切か。
*・ユーザビリティ上の問題はないか。
*・他ページとの整合性は取れているか。
*・コーディングや運用を想定したデザインになっているか。


[1]要素<br>
<b>要素</b>
 ・要素漏れはないか?を指示書を元に確認すること。<br>
*・要素漏れがないか。
 ・(追加修正の場合は)現在アップされているのと比較して、間違っている点や矛盾点がないか?<br>
*・現在アップされているページと比較して、矛盾点がないか。
  【コツ】タブブラウザで、「既存ページ」と「制作したJPG」を比較するのを推奨。


[2]文字<br>
■<b>文字</b>
 ・画像化した文字は「文字詰め」を行い、バランスを取っているか?[http://technique.eweb-design.com/0401_kn.html 参考サイト1] [http://www.petitboys.com/design/mt/archives/000245.html 参考サイト2]<br>
*・誤字脱字はないか。
 ・文字の可読性は確保されているか?(大きさ、色、コントラスト等)<br>
*・文章の意味は通じるか。もっと分かりやすくならないか。
 ・誤字脱字はないか? ※指示書側のミスの場合も報告すること。<br>
*・文字の可読性は確保されているか。
 ・日付や曜日に誤りはないか? 【例】曜日は、カッコ(火)を「半角」にする。<br>
*・画像化した文字は「文字詰め」を行っているか。
 ・英字と数字は半角英数で統一されているか? ※基本、英数文字は「半角」で統一。<br>
*・半角や全角のブレはないか。
 ・テキストサイズは「10px」、「12px」、「14px」、「16px」の基本4サイズとします。<br>
 ちなみに行間は「14px」、「16px」、「18px」、「20px」、「22px」を状況に応じて使い分ける。<br>
 ・タカシマヤ案件の場合、タカシマヤ用事用語と各種表示の統一に沿っているか?


[3]デザイン<br>
<b>PSDファイル</b>
 ・デザインの意味付け、論理的に説明可能か?<br>
*・誰にでも更新しやすいレイヤーになっているか。
 ・ユーザビリティ上の問題はないか?<br>
*・エリアごとにフォルダ分けされているか。
 ・情報の強弱、優先度は適切に表現されているか?<br>
*・余計なレイヤーはないか。
 ・写真のトリミング、大きさ、補正は適切か?<br>
*・ガイドにズレはないか。
 ・配色は適切かつ効果的に使用しているか?<br>
</div>
 ・サイト内の1ページとして、他ページとの整合性は取れているか?<br>
 ・ユーザーの要求・要望に応えることができているか?<br>
 ・今後の運用上、またはコーディング上、問題ないか?
 
[4]psdファイル<br>
 ・今後、修正が発生した場合、更新しやすいレイヤー構造になっているか?<br>
 ・エリアごとにフォルダ分けされているか?<br>
 ・ガイドにズレはないか?(ガイドは500%にして「シフト」押しながら引くこと)<br>
 ・コーディングしやすい形になっているか?<br>
 ※photoshopでの制作上の注意点は下記参照のこと。
 
[5]最終確認<br>
 ・エンドユーザーの立場、シチュエーションに立って、最後にページを3分間見る。
 
 
====(4)作業終了報告====
 ・ソースファイル(psdファイル)は、WEBWORKの指定場所に上げる。それと同時に確認用JPGも上げること。<br>バナーやアーティクルの場合は、書き出したファイル(JPG、GIF)がそのままアップされるので、適切な書き出しを行うこと。GIFは256色インターレース書き出し。JPGは「画質:65~90」のプレグレッシブ形式にて書き出す。(但し、Flash内で使用するJPGはプログレッシブ書き出し不可! 一部のFlash Playerで非対応なため。)
<br>
 ・作業終了時は「制作物」をプリントアウトし、左上に本アップ日を赤ペンで記入の上、指示書と共に作業依頼者に手渡すこと。<br>
 ・出力の際は「画像化(レイヤー統合)」してからプリントアウトしましょう。画面と同じ見え方にするためです。※印刷のアクションの「F7」か「F7+SC」で。<br>
 ・問題点や懸念点があったら、必ず報告すること。


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


==photoshopについて==


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


===■photoshop:必須のルール===
==デザイン依頼について(ディレクター向き)==


●レイヤーは'''エリア単位で移動'''できるように、エリアごとに「フォルダ」を区切ること。<br>
デザインの依頼をするときは、メールだけではなく、必ず口頭で伝える。<br>
 →移動とコピーの効率化。特に追加修正のときの効率化を考慮してます。
その際に持っている情報は全て、依頼指示書(デザイン依頼表&指示書)に落とし込んで渡すこと。
<br>
●フォルダの色分けは基本的にはしないこと。<br>
 →色をつけることで煩雑になりやすいため。<br>
 (但し、マウスオーバーの場合はコーダーが理解しやすいように当該フォルダを 「赤」にするのを推奨)<br>
●ガイドは'''500%'''に拡大した上で'''シフト押しながら引く'''。<br>
 →吸着がズレないようにするため。<br>
●テキストの場合、スペースで間隔を取らない。<br>
 →移動や修正の際に調整するのに手間がかかるため。<br>
    【ダメな例】和菓子  洋菓子<br>
               ↑ここはスーペースで間隔を取らない。やるならば別のレイヤーに分けること。<br>
●テキストはテキストエリアを指定して流し込む。そのとき、禁則処理は「'''弱い禁則'''」に設定すること。<br>
●ファイル名の後ろには、「本アップ日」に入れる。<br>
【例】産地直送グルメ便TOP_070304.psd<br>
 →管理上の約束事。また、ファイル検索時に本アップ日を参照して探すため。
 
===■photoshop:推奨事項===
 
●マスクはレイヤーにではなく、フォルダにかけるのを推奨。特に写真の場合はこれは守ること。<br>
 →更新の効率化。枠線がないときに画像サイズの把握がしやすい。<br>
●透明化は極力しない。【例】背景レイヤーの「透明10%」など<br>
 →コピーして繋ぎ合わせるときに、重ね合わせた部分の色が変わってしまう。<br>
●統合が可能なものは統合する。<br>
 →統合しても問題ない箇所、または、選択範囲で選択できるところは統合してもよい。レイヤーが増えることによる複雑化と重さの解消。<br>
●レイヤーに対して、「ドロップシャドー」は極力利用しない。(例外:写真や文字)<br>
 →枠やパーツなどで使用すると意図しない"はみ出し"やコピーする際に小さな問題が起こりやすいため。<br>
 →ドロップシャドーは拡大/縮小に未対応なため。<br>
●テキストの段落は「左寄せ」「弱い禁則」で。<br>
 →文字の詰めに間隔が生まれる。HTMLの見え方と差異がでる。<br>
●テキスト:段落タブにある、テキストボックスの「マージン指定」は使用しない。<br>
 →便利な機能だが、次回Textフォームを作るときに値が残り、直す手間がかかる。<br>
 →フォームエリアを明確に指定した方が混乱しない。レアケースを回避などなど。<br>
●レイヤー・フォルダの「リンク」は最低限にとどめる。<br>
 →リンクが多すぎると移動の際、関係ないところが動き、それを突き止めるのに手間がかかる。<br>
 →CS2だとレイヤーの複数選択が可能なので、この問題は解消されるが…<br>
●レイヤー、「ロック」はかけない。<br>
 →レイヤーの「ロック」は基本的にしない。※修正時、コピーしたり編集する際にロックを外す手間を考慮。<br>ただし、超レアケースでロックを推奨する場合もあります。<br>
●ファイル名は基本的にhtmlの<title>タグと同じものを使用する。<br>
 ただし、タカシマヤと入っているタイトルについては省いてもOK。また、長いものも省いてOK<br>
 【例】「タカシマヤ京都スタイル」→「京都スタイル_080304.psd」<br>
●不要なレイヤーは削除。<br>
 →複雑化を抑え、わかりやすくするため。ファイルの軽量化。「また使うかもしれないのに…」とレイヤー消すのが不安な方は、そもそものpsdを別にバックアップしてください。
 
 
===■アクション一覧===
 
Photoshopのファンクションキーアクション一覧です。効率化を目指して常に改良。
[[Photoshopアクション一覧]]へ


<div class="example">
<div class="example">
[F2]RGB変換+解像度72dpi<br>
*■'''「デザイン依頼表」'''<br>
[F2+S]<br>
決められたデザイン依頼表に「案件名」、「本アップ日」、「仮アップ日(デザイン提出日)」、「ボリューム」、「担当者名」を記述すること。
[F2+C]<br>
[F2+SC]新規ファイル→画像化【印刷前】<br>
 
[F3]選択範囲★白での塗り潰し<br>
[F3+S]【text】黒#000000<br>
[F3+C]【text】白#FFFFFF<br>
[F3+SC]【text】赤#FF0000<br>
 
[F4]選択範囲★描画色での塗り潰し<br>
[F4+S]【text】黒#333333<br>
[F4+C]【text】青#0000EE<br>
[F4+SC]<br>
 
[F5]レイヤー削除<br>
[F5+S]<選択範囲>1px縮小↓<br>
[F5+C]<選択範囲>1px拡大↑<br>
[F5+SC]レイヤー or フォルダを(部分的に)抽出<br>
 
[F6]レイヤーコピー<br>
[F6+S]GIF-256色 書き出し<br>
[F6+C]JPG-80 書き出し<br>
[F6+SC]JPG-100 書き出し<br>


[F7]印刷68%出力(1200pxまでOK)
*■'''依頼指示書'''(デザイナーに渡す指示書の紙)<br>
[F7+C]<br>
「原稿(ワイヤーフレーム)」、「使用する画像」、「依頼概要(補足説明)」などで構成してください。口頭だけでの指示ではなく、要望や注意点などは全て紙に落と込むこと。
[F7+⌘]<br>
[F7+S⌘]印刷(紙に合わせる)出力<br>
 
[F8]横300px変換<br>
[F8+S]横48px変換(セレクションサイズ)<br>
[F8+⌘]横100px変換<br>
[F8+S⌘]横600px変換<br>
 
[F9]オブジェクト90%縮小<br>
[F9+S]オブジェクト50%縮小<br>
[F9+⌘]<文字>2pxの境界線()<br>
[F9+S⌘]<br>
 
[F10]アンシャープマスク(20%,0.2px)<br>
[F10+S]ドロップシャドー(12%)<br>
[F10+⌘]彩度up(彩度+6)<br>
[F10+S⌘]明度up(明度+5)<br>
 
[F11]アンチなし テキスト<br>
[F11+S]新ゴM<br>
[F11+⌘]リュウミンB<br>
[F11+S⌘]<br>
 
[F12]下移動5px↓<br>
[F12+S]上移動5px↑<br>
[F12+⌘]右移動5px→<br>
[F12+S⌘]左移動5px←<br>
</div>
</div>


===■自動バッチ・リサイズ処理・ブラシ・フィルタ・シェイプレイヤー・レイヤースタイル===
※物理的に依頼書を持っている人が、「今、作業のバトンを持っている」という考え方で動いています。


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


==素材について==


==デザイン依頼について==
デザイン上で素材が必要な場合は、所有している素材集を使う。<br>
 
使用の際には、請求額も変わってくるので、素材元がわかるようにすること。元画像をフォルダにコピーして置いてください。
デザイン依頼をする際には、「メール」と「依頼指示書(デザイン依頼表&指示書)」で指示を出すこと。<br>※メールのみだけではなく、必ず口頭でも伝える。
 
■'''依頼指示書'''(デザイナーに渡す指示書の紙)<br>「デザイン依頼表」、「原稿」、「(使用可能な)画像一覧サムネイル、ロゴ」、「メールのプリントアウト」、「情報を補足する何か」で構成してください。知らない人にもスムーズにわかりやすく伝わる指示書だとミスも少なくなることでしょう。
 
<div class="example">
<div class="example">
*'''「デザイン依頼表」'''<br>所定のデザイン依頼表の紙に、「案件名(タイトル)」、「本アップ日」、「仮アップ日」、「ボリューム(静的中カテ3つ、アーティクル5つ、バナー3つとか)、「(あれば)デザイン提出日」、「ディレクター担当者名」を記述すること。本アップ日は赤字で記述。
素材置き場:<b>WEBworks/000_共通データ/チームデザイン/素材</b>
 
*'''「原稿」'''<br>ワイヤーフレーム。必要な掲載要素(文字、画像)全て入れること。<br>入りきらない場合や写真や細かな要素とかは別紙で用意し、ここに入るということを明記する。あと、そのデータ(テキストファイル)はLayout内に入れることもお忘れなく。
 
*'''「(使用可能な)画像一覧サムネイル、ロゴ」'''<br>掲載可能な画像(写真・ロゴなど)の一覧をプリントアウトしてください。掲載が必須の画像にはチェックを入れるなどして指示を出してください。
 
*'''「メール」'''<br>概要、パン屑&タイトル名、細かなデザイン方向性の指示(色味がピンクとか、全体的に高級感を出してとか、角丸にしてとか、私、罫線嫌いなの…とかとか)はメールで送り、そのメールをプリントアウトしたものを依頼指示書に付けてください。
</div>
</div>


===■依頼の際の細かな注意点===
===(1)素材辞典より===


*持っている情報は、"一つ残らず全て"紙(依頼指示書たち)に落とし込んで渡すこと。
素材辞典は使い勝手が良いので利用頻度が高い。<br>
*細かなデザイン方向性の指示(色味がピンクとか、テイストは高級感を出してとか、角丸にしてとか、このサイトを参考にとか)もある場合は伝えてください。
利用の際は請求に載せるので、ディレクターに伝わるようにすること。また、元のデータを案件フォルダに入れること。




==素材について==
===(2)amanaより===


ロイヤリティフリー素材(無料でも有料でも)を使用する場合は、必ず報告すること。
・必ず事前に相談の上で購入する。<br>
・ライツマネージドは高料金&使用期限契約のため、原則として不可。ロイヤリティフリーであれば可とする。<br>
・素材元のチェックや購入をディレクターが行うので、使用の際には詳細ページをプリントアウトする。


===■amanaより購入===
★アマナイメージズ・オリジナルロイヤリティフリーコンテンツ利用規約<br>
http://amanaimages.com/help/qaa-0602.html


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


===■素材辞典===
===(3)その他、所有する素材集リスト===


\\Tkocore2\WEBworks\001_タカシマヤ\001_takashimaya.co.jp\source\co.jp\チームデザイン\[素材]フリー素材★CD-ROM
これらの本は棚に置いてあります。著作権などを確認して使いましょう。
請求にプラスで載せるので、「【素材】素材辞典」というフォルダを当該案件フォルダに作成すること。


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


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

2012年4月26日 (木) 12:32時点における最新版

共有サーバ WEBWORKについて[編集]

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


(1)ファイル共有の徹底[編集]

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

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

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

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


(2)フォルダ分け[編集]

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


(3)種別のフォルダ構成[編集]

種別のフォルダにもルールがあります。

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

作業の工程[編集]

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


(1)依頼[編集]

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

【確認する項目】

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

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

(2)デザイン作業中[編集]

デザイナーは考えるのが仕事です。頭を使ってデザインしましょう。
photoshopについてのガイドラインはこちらを参考にしてください。


(3)作業者の見直し[編集]

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

デザイン全般

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

要素

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

文字

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

PSDファイル

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

(4)作業終了→報告[編集]

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


デザイン依頼について(ディレクター向き)[編集]

デザインの依頼をするときは、メールだけではなく、必ず口頭で伝える。
その際に持っている情報は全て、依頼指示書(デザイン依頼表&指示書)に落とし込んで渡すこと。

  • 「デザイン依頼表」

決められたデザイン依頼表に「案件名」、「本アップ日」、「仮アップ日(デザイン提出日)」、「ボリューム」、「担当者名」を記述すること。

  • 依頼指示書(デザイナーに渡す指示書の紙)

「原稿(ワイヤーフレーム)」、「使用する画像」、「依頼概要(補足説明)」などで構成してください。口頭だけでの指示ではなく、要望や注意点などは全て紙に落と込むこと。

※物理的に依頼書を持っている人が、「今、作業のバトンを持っている」という考え方で動いています。


素材について[編集]

デザイン上で素材が必要な場合は、所有している素材集を使う。
使用の際には、請求額も変わってくるので、素材元がわかるようにすること。元画像をフォルダにコピーして置いてください。

素材置き場:WEBworks/000_共通データ/チームデザイン/素材

(1)素材辞典より[編集]

素材辞典は使い勝手が良いので利用頻度が高い。
利用の際は請求に載せるので、ディレクターに伝わるようにすること。また、元のデータを案件フォルダに入れること。


(2)amanaより[編集]

・必ず事前に相談の上で購入する。
・ライツマネージドは高料金&使用期限契約のため、原則として不可。ロイヤリティフリーであれば可とする。
・素材元のチェックや購入をディレクターが行うので、使用の際には詳細ページをプリントアウトする。

★アマナイメージズ・オリジナルロイヤリティフリーコンテンツ利用規約
http://amanaimages.com/help/qaa-0602.html


(3)その他、所有する素材集リスト[編集]

これらの本は棚に置いてあります。著作権などを確認して使いましょう。

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