|
|
| (同じ利用者による、間の14版が非表示) |
| 1行目: |
1行目: |
| <div id="manual"> | | <div id="manual"> |
| ==WEBWORKの使用方法== | | ==共有サーバ WEBWORKについて== |
| | |
| | 仕事上のファイルは、共有サーバにて管理しています。<br> |
| | 複数のスタッフが作業するため、スムーズにミスなく作業ができるようにルールを設けています。 |
| | |
|
| |
|
| ===(1)ファイル共有の徹底=== | | ===(1)ファイル共有の徹底=== |
| *・全ファイルは社内全スタッフで共有するため、必ず作業終了後にサーバの指定場所に上げる。 | | *■ファイルは他のスタッフと共有するため、作業終了後に指定場所に上げる。 |
| (※自分のローカルPCだけにファイルを残さない)
| | *■修正や更新の作業開始時には、<b>まずWEBWORKから最新ファイルを落としてから作業する</b>こと。 |
| *・修正/更新作業のときは、まずはWEBWORKにあるファイルを落としてから作業を開始する。 | | →先祖返りのミスを起こさないようにするため。 |
| <div class="example"> | | *■作業途中で帰社する場合、<b>途中でもそのpsdファイルを共有サーバに上げる</b>こと。 |
| 【理由】<br>
| | →急に欠勤した場合でも、スムーズに引き継げる状態にしておく。 |
| *・特定のスタッフが不在でも、滞りなく業務が進められるようにする。
| | |
| *・同じページの修正作業を、例えば「一昨日はAさん→昨日はBさん→今日はAさんが行う」場合、最新オリジナルファイルがサーバ上にないと先祖返りを起こし、ミスの原因となる。 | | |
| *・psdファイルは、デザイナーとコーダーの双方が触るので、オリジナルファイルは「指示書」を持っている人のみが"更新&上書き"できることを明確にする必要性がある。
| |
| </div> | |
|
| |
|
| ===(2)フォルダ分けについて=== | | ===(2)フォルダ分け=== |
| *・フォルダは'''クライアント別 / 案件別 / 種別【例:sourceとか】 / 時間(公開日) / タイトル'''<br>に分かれているので、該当する場所にファイルを置く。 | | *■フォルダは'''クライアント別/案件別/種別(sourceとか)/日付(本アップ日)/タイトル'''に分かれている。 |
| ※ファイル管理は基本的には、時間軸(本アップ日)を基準である。
| | *■「本アップ日(予定日)」ごとに新しいフォルダを用意する。 |
|
| |
|
| ===(3)種別のフォルダ構成===
| |
| *[backup]:バックアップファイルを格納。
| |
| *'''[source]:→ 画像、デザイン済ファイルなどのソースデータを格納。'''
| |
| *[temporary]:一時的なバックアップファイルを格納。デザイナーには関係なし。
| |
| *[upload]:アップ日毎にフォルダ(更新ファイルのみ)を区切って置いてある。後で担当ディレクターが本番にUPする。
| |
| *[works]:実作業ファイルを格納。サイト上の全ファイルがあり、ココが常に最新状態(作業ベース)になっている。
| |
|
| |
|
| ===(4)追加修正作業、開始時===
| |
| *・デザインの追加修正が発生した場合は、'''WEBWORKSから最新のPSDファイルをローカル落とし、そのファイルで作業を行う。'''このルールは必ず遵守する。
| |
|
| |
|
| <div class="example">
| | ===(3)種別のフォルダ構成=== |
| 【理由】<br>
| |
| 理由は「(1)ファイル共有の徹底」と同様。先祖返りミスは、会社全体の信用・責任問題に関わる。このルールは必ず遵守する。
| |
| </div>
| |
|
| |
|
| ===(5)日付管理===
| | 種別のフォルダにもルールがあります。 |
| *・制作物の管理は、最初にクライアント別・案件別に分かれ、その中でさらに「日付別」に管理されている。
| |
| *・'''日付は本アップを基準とする。'''(注意:作業日ではない)
| |
|
| |
|
| <div class="example"> | | <div class="example"> |
| 【例】<br>
| | *'''source:デザインファイルを格納する。デザイナーはここを使う。''' |
| 10/10に本アップしたバナーを修正して、翌週10/17に再び本アップする場合、「071010」フォルダ内のpsdを落してから作業し、終了後に「071017」フォルダ内にファイル(psdとJPG)を置くこと。(フォルダが存在しない場合は勝手に作成してOK)東京KDSではこの運用が大前提として成り立っている。
| | *backup:バックアップファイルを格納する。 |
| | *temporary:一時的なバックアップファイルを格納する。デザイナーには関係なし。 |
| | *upload:アップする差分ファイルを格納する。担当ディレクターが本番にアップする。 |
| | *works:実作業ファイルを格納する。サイト上の全ファイルがある。ココが常に最新状態となる。 |
| | *document:サイト全体のガイドライン、仕様書、FTP設定などのドキュメントを格納する。 |
| </div> | | </div> |
|
| |
|
| ===(6)最新ファイルがどこにあるか?=== | | ==作業の工程== |
| *・最新ファイルは、'''常にWEBWORK上に存在する'''ことをルールとする。※作業中のみ例外。
| | デザイン発注の際は「指示書」を付け、口頭説明することで正式な依頼とする。<br> |
| *・作業途中で帰社する場合、途中でもそのpsdファイルをWEBWORKに上げる。万が一、翌日に欠勤した場合でも、スムーズに引き継ぎができるようにする。
| | 指示書は「現在、誰がバトンを持っているか?」という目印の役割も担う。 |
| *・繰り返すが、再度の追加・修正作業を行うときはWEBWORKにある最新のソースファイルをローカルに落としてから作業を行うこと。
| |
| | |
| ===(7)フォルダ名、ファイル名の命名規則===
| |
| *・フォルダ・ファイル名は「タイトル」【<title>タグのこと】と同じ名称にする。
| |
| *・命名のときに留意することは、'''他人や将来の自分がそのファイルを検索するとき、見つけやすいかどうか'''。簡単に確実にファイルが見つけられるようにする。
| |
|
| |
|
| ==作業フロー==
| |
| *・発注の際は「指示書」を付け、口頭説明することで正式な依頼とする。
| |
| *・指示書は「現在、誰がバトンを持っているか?」を示す目印の役割も担う。
| |
| *・'''指示書を持っている人しか、作業してはいけない'''ということ。
| |
| <br>
| |
|
| |
|
| ===(1)デザイン作業依頼=== | | ===(1)依頼=== |
| 指示書(全ての情報が落とし込んであるべきもの)と一緒に口頭で依頼。それを持って正式な「発注」とする。 | | 指示書(全ての情報が落とし込んであるべきもの)と一緒に口頭で依頼する。それを持って正式な「発注」とする。 |
|
| |
|
| <div class="example"> | | <div class="example"> |
| 【確認する項目】<br> | | 【確認する項目】<br> |
| *・本アップ日<br> | | *■本アップ日<br> |
| *・締切/デザイン提出日(日時まで確認)<br> | | *■締切/デザイン提出日(日時まで確認)<br> |
| *・ボリューム(ページ数、バナー数など)<br> | | *■ボリューム(ページ数、バナー数など)<br> |
| *・内容(目的、要素、優先順位、テイスト、色味、参考資料、技術、制約…) | | *■内容(目的、要素、優先順位、テイスト、色味、参考資料、技術、制約…) |
| *・素材(文字、画像、ロゴ…)<br> | | *■素材(文字、画像、ロゴ…)<br> |
| ※素材一式は当該のフォルダ内に入っています。 | | ※素材一式は当該のフォルダ内に入っています。 |
| </div> | | </div> |
|
| |
|
| ===(2)デザイン作業中=== | | ===(2)デザイン作業中=== |
| とにかくデザインする。
| | デザイナーは考えるのが仕事です。頭を使ってデザインしましょう。<br> |
| | ※[[photoshopについて]]のガイドラインはこちらを参考にしてください。 |
|
| |
|
|
| |
|
| ===(3)作業者の見直し、最終確認=== | | ===(3)作業者の見直し=== |
| デザイン作業が終了したら、客観的・多面的な視点で見直す。この時間もしっかりと取ること。
| | デザインが終了したら、客観的・多面的な視点で見直す。この時間もしっかりと取ること。 |
|
| |
|
| <div class="example"> | | <div class="example"> |
| ====[1]要素====
| | ■<b>デザイン全般</b> |
| *・要素漏れがないかの確認をする。 | | *・そのデザインはユーザーの要求に応えることができるか。わかりやすいか。 |
| *・現在アップされているページと比較して、間違っている点や矛盾点がないか? | | *・情報の強弱、優先度は適切か。 |
| | *・ユーザビリティ上の問題はないか。 |
| | *・他ページとの整合性は取れているか。 |
| | *・コーディングや運用を想定したデザインになっているか。 |
|
| |
|
| ====[2]文字====
| | ■<b>要素</b> |
| | *・要素漏れがないか。 |
| | *・現在アップされているページと比較して、矛盾点がないか。 |
| | |
| | ■<b>文字</b> |
| *・誤字脱字はないか。 | | *・誤字脱字はないか。 |
| *・文字の可読性は確保されているか?(大きさ、色、コントラスト等) | | *・文章の意味は通じるか。もっと分かりやすくならないか。 |
| *・画像化した文字は「文字詰め」を行い、バランスを取っているか? | | *・文字の可読性は確保されているか。 |
| *・数字に誤りはないか? | | *・画像化した文字は「文字詰め」を行っているか。 |
| *・半角や全角のブレはないか。 | | *・半角や全角のブレはないか。 |
| *・ユーザーに意味が通じるか。もっとわかりやすくならないか。
| |
|
| |
|
| ====[3]デザイン====
| | ■<b>PSDファイル</b> |
| *・ユーザーの要求・要望に応えることができるか?<br>
| | *・誰にでも更新しやすいレイヤーになっているか。 |
| *・デザインは論理的に説明可能か?<br>
| | *・エリアごとにフォルダ分けされているか。 |
| *・ユーザー視点で見て、問題はないか?
| | *・余計なレイヤーはないか。 |
| *・ユーザビリティ上の問題はないか?<br>
| | *・ガイドにズレはないか。 |
| *・情報の強弱、優先度は適切に表現されているか?<br>
| |
| *・写真のトリミング、大きさ、補正は適切か?<br> | |
| *・配色は適切かつ効果的に使用しているか?<br> | |
| *・サイト内の1ページとして、他ページとの整合性は取れているか?<br> | |
| *・今後の運用が想定されたデザインになっているか? | |
| | |
| ====[4]psdファイル====
| |
| *・今後、修正が発生した場合、更新しやすいレイヤーになっているか?<br>
| |
| *・エリアごとにフォルダ分けされているか?<br>
| |
| *・ガイドにズレはないか?(ガイドは500%にして「シフト」押しながら引くこと)<br>
| |
| *・コーディングしやすい形になっているか?<br>
| |
| ※photoshopでの制作上の注意点は下記参照のこと。
| |
| </div> | | </div> |
|
| |
|
| ===(4)作業終了報告=== | | ===(4)作業終了→報告=== |
| *・PSDファイルは、WEBWORKの指定場所に上げる。それと同時に確認用JPGも上げること。 | | *■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">
| | デザインの依頼をするときは、メールだけではなく、必ず口頭で伝える。<br> |
| (5)テキストはテキストボックスを指定して流し込む。そのとき、禁則処理は「'''弱い禁則'''」に設定すること。<br>
| | その際に持っている情報は全て、依頼指示書(デザイン依頼表&指示書)に落とし込んで渡すこと。 |
| </div>
| |
| →後で改行するほど文章量が増えても大丈夫なように。
| |
|
| |
|
| <div class="example"> | | <div class="example"> |
| (6)ファイル名の後ろには、「本アップ日」に入れる。<br>
| | *■'''「デザイン依頼表」'''<br> |
| </div>
| | 決められたデザイン依頼表に「案件名」、「本アップ日」、「仮アップ日(デザイン提出日)」、「ボリューム」、「担当者名」を記述すること。 |
| →管理上の約束事。また、ファイル検索時に本アップ日を参照して探すため。【例】産地直送グルメ便TOP_070304.psd
| |
|
| |
|
| ===(2)photoshop:推奨事項===
| | *■'''依頼指示書'''(デザイナーに渡す指示書の紙)<br> |
| <div class="example">
| | 「原稿(ワイヤーフレーム)」、「使用する画像」、「依頼概要(補足説明)」などで構成してください。口頭だけでの指示ではなく、要望や注意点などは全て紙に落と込むこと。 |
| (1)マスクはレイヤーにではなく、フォルダにかけるのを推奨。特に写真の場合はこれは守ること。<br>
| |
| </div>
| |
| →更新の効率化。枠線がないときに画像サイズの把握がしやすい。<br>
| |
| <div class="example">
| |
| (2)透明化は極力しない。【例】背景レイヤーの「透明10%」など<br>
| |
| </div> | | </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 class="example">
| |
| (9)ファイル名は基本的にhtmlの<title>タグと同じものを使用する。<br>
| |
| </div>
| |
| →ただし、タカシマヤと入っているタイトルについては省いてもOK。また、長いものも省いてOK<br>
| |
| 【例】「タカシマヤ京都スタイル」→「京都スタイル_080304.psd」<br>
| |
| <div class="example">
| |
| (10)不要なレイヤーは削除。<br>
| |
| </div>
| |
| →複雑化を抑え、わかりやすくするため。ファイルの軽量化。「また使うかもしれないのに…」とレイヤー消すのが不安な方は、そもそものpsdを別にバックアップしてください。
| |
|
| |
|
| | ※物理的に依頼書を持っている人が、「今、作業のバトンを持っている」という考え方で動いています。 |
|
| |
|
| ===(3)アクション一覧===
| |
|
| |
|
| Photoshopのファンクションキーアクション一覧です。効率化を目指して常に改良してます。<br>
| | ==素材について== |
| [[Photoshopアクション一覧]]へ
| |
| | |
| | |
| ===(4)自動バッチ・リサイズ処理・ブラシ・フィルタ・シェイプレイヤー・レイヤースタイル=== | |
| | |
| 効率化のためにこれらを使用することを推奨します。各設定は倉田まで。
| |
| | |
| | |
| ==デザイン依頼について==
| |
| | |
| デザイン依頼をする際には、「メール」と「依頼指示書(デザイン依頼表&指示書)」で指示を出すこと。<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)依頼の際の注意点=== | | ===(1)素材辞典より=== |
| | |
| *持っている情報は全て、紙(依頼指示書たち)に落とし込んで渡すこと。
| |
| *細かなデザイン方向性の指示(色味指定がブルーとか、テイストは高級感を出してとか、角丸にしてとか、このサイトを参考にとか)もある場合は伝えること。
| |
|
| |
|
| | 素材辞典は使い勝手が良いので利用頻度が高い。<br> |
| | 利用の際は請求に載せるので、ディレクターに伝わるようにすること。また、元のデータを案件フォルダに入れること。 |
|
| |
|
| ==素材について==
| |
|
| |
|
| ロイヤリティフリー素材(無料でも有料でも)を使用する場合は、必ず報告すること。
| | ===(2)amanaより=== |
|
| |
|
| ===(1)amanaより購入===
| | ・必ず事前に相談の上で購入する。<br> |
| | |
| ・必ず、事前に相談の上で購入する。<br>
| |
| ・ライツマネージドは高料金&使用期限契約のため、原則として不可。ロイヤリティフリーであれば可とする。<br> | | ・ライツマネージドは高料金&使用期限契約のため、原則として不可。ロイヤリティフリーであれば可とする。<br> |
| ・使用の際は、amanaサイトの写真番号をメモするか、ブックマークしておく。
| | ・素材元のチェックや購入をディレクターが行うので、使用の際には詳細ページをプリントアウトする。 |
|
| |
|
| ★アマナイメージズ・オリジナルロイヤリティフリーコンテンツ利用規約<br> | | ★アマナイメージズ・オリジナルロイヤリティフリーコンテンツ利用規約<br> |
| http://amanaimages.com/help/qaa-0602.html<br> | | http://amanaimages.com/help/qaa-0602.html |
| ※WEBサイトやCD-ROMなどでの構成要素の一部としての使用、放送、放送用のビデオ、フィルムまたはビデオカセットなどを含むマルチメディアでの構成要素の一部としての使用。ただし、使用したコンテンツはダウンロードまたはコピー用ではない事が明確であるようにデザインすること。
| |
|
| |
|
| ===(2)素材辞典===
| |
|
| |
|
| 素材辞典は下記に置いてある。<br>
| | ===(3)その他、所有する素材集リスト=== |
| \\Tkocore2\WEBworks\001_タカシマヤ\001_takashimaya.co.jp\source\co.jp\チームデザイン\[素材]フリー素材★CD-ROM<br>
| | |
| <br>
| | これらの本は棚に置いてあります。著作権などを確認して使いましょう。 |
| 利用する際は請求に載せるので、ディレクターに伝わるようにすること。
| |
|
| |
|
| ===(3)所有する素材集リスト===
| |
| これらの本は棚に置いてある。
| |
| <div class="example"> | | <div class="example"> |
| *・「素材辞典イメージブック」1~13まで | | *・「素材辞典イメージブック」1~13まで |
| 269行目: |
154行目: |
| </div> | | </div> |
|
| |
|
| ===(4)ロゴ===
| |
|
| |
| 今まで使用したロゴデータは以下の場所にある。<br>
| |
| \\Tkocore2\WEBworks\001_タカシマヤ\001_takashimaya.co.jp\source\co.jp\タカシマヤ重要素材\[logo]各種ロゴデータ
| |
| </div> | | </div> |
共有サーバ 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 ピクトグラム」
- ・「おしゃれパターン素材集 北欧・ファブリック」
- ・「おしゃれパターン素材集 水玉・ストライプ」
- ・「すぐに使えるカリグラフィと飾りケイ」
- ・「パターンライブラリー」