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

提供:Wiki@KDS
ナビゲーションに移動 検索に移動
編集の要約なし
編集の要約なし
 
(同じ利用者による、間の11版が非表示)
7行目: 7行目:


===(1)ファイル共有の徹底===
===(1)ファイル共有の徹底===
*■仕事上のファイルは他のスタッフと共有するため、必ず<b>作業終了後に指定場所に上げる</b>こと。
*■ファイルは他のスタッフと共有するため、作業終了後に指定場所に上げる。
*■修正や更新の作業開始時には、<b>まずWEBWORKから最新ファイルを落としてから作業する</b>こと。<
*■修正や更新の作業開始時には、<b>まずWEBWORKから最新ファイルを落としてから作業する</b>こと。
→先祖返りのミスを起こさないようにするため。
→先祖返りのミスを起こさないようにするため。
*■作業途中で帰社する場合、途中でもそのpsdファイルを共有サーバに上げること。
*■作業途中で帰社する場合、<b>途中でもそのpsdファイルを共有サーバに上げる</b>こと。
→急に欠勤した場合でも、スムーズに引き継げる状態にしておく。
→急に欠勤した場合でも、スムーズに引き継げる状態にしておく。




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




===(3)種別のフォルダ構成===
===(3)種別のフォルダ構成===
種別のフォルダにもルールがあります。
<div class="example">
*'''source:デザインファイルを格納する。デザイナーはここを使う。'''
*'''source:デザインファイルを格納する。デザイナーはここを使う。'''
*backup:バックアップファイルを格納する。
*backup:バックアップファイルを格納する。
25行目: 31行目:
*upload:アップする差分ファイルを格納する。担当ディレクターが本番にアップする。
*upload:アップする差分ファイルを格納する。担当ディレクターが本番にアップする。
*works:実作業ファイルを格納する。サイト上の全ファイルがある。ココが常に最新状態となる。  
*works:実作業ファイルを格納する。サイト上の全ファイルがある。ココが常に最新状態となる。  
 
*document:サイト全体のガイドライン、仕様書、FTP設定などのドキュメントを格納する。
</div>


==作業の工程==
==作業の工程==
46行目: 53行目:


===(2)デザイン作業中===
===(2)デザイン作業中===
デザイナーは考えるのが仕事です。頭を使ってデザインしましょう。
デザイナーは考えるのが仕事です。頭を使ってデザインしましょう。<br>
※[[photoshopについて]]のガイドラインはこちらを参考にしてください。




78行目: 86行目:
</div>
</div>


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






==デザイン依頼について(ディレクター向き)==


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


==デザイン依頼について==
<div class="example">
*■'''「デザイン依頼表」'''<br>
決められたデザイン依頼表に「案件名」、「本アップ日」、「仮アップ日(デザイン提出日)」、「ボリューム」、「担当者名」を記述すること。
 
*■'''依頼指示書'''(デザイナーに渡す指示書の紙)<br>
「原稿(ワイヤーフレーム)」、「使用する画像」、「依頼概要(補足説明)」などで構成してください。口頭だけでの指示ではなく、要望や注意点などは全て紙に落と込むこと。
</div>
 
※物理的に依頼書を持っている人が、「今、作業のバトンを持っている」という考え方で動いています。


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


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


デザイン上で素材が必要な場合は、所有している素材集を使う。<br>
使用の際には、請求額も変わってくるので、素材元がわかるようにすること。元画像をフォルダにコピーして置いてください。
<div class="example">
<div class="example">
*'''「デザイン依頼表」'''<br>所定のデザイン依頼表の紙に、「案件名(タイトル)」、「本アップ日」、「仮アップ日」、「ボリューム(静的中カテ3つ、アーティクル5つ、バナー3つとか)、「(あれば)デザイン提出日」、「ディレクター担当者名」を記述すること。本アップ日は赤字で記述。
素材置き場:<b>WEBworks/000_共通データ/チームデザイン/素材</b>
</div>


*'''「原稿」'''<br>ワイヤーフレーム。必要な掲載要素(文字、画像)全て入れること。<br>入りきらない場合や写真や細かな要素とかは別紙で用意し、ここに入るということを明記する。あと、そのデータ(テキストファイル)はLayout内に入れることもお忘れなく。
===(1)素材辞典より===


*'''「(使用可能な)画像一覧サムネイル、ロゴ」'''<br>掲載可能な画像(写真・ロゴなど)の一覧をプリントアウトしてください。掲載が必須の画像にはチェックを入れるなどして指示を出してください。
素材辞典は使い勝手が良いので利用頻度が高い。<br>
利用の際は請求に載せるので、ディレクターに伝わるようにすること。また、元のデータを案件フォルダに入れること。


*'''「メール」'''<br>概要、パン屑&タイトル名、細かなデザイン方向性の指示(色味がピンクとか、全体的に高級感を出してとか、角丸にしてとか、私、罫線嫌いなの…とかとか)はメールで送り、そのメールをプリントアウトしたものを依頼指示書に付けてください。
</div>


===(1)依頼の際の注意点===
===(2)amanaより===


*持っている情報は全て、紙(依頼指示書たち)に落とし込んで渡すこと。
・必ず事前に相談の上で購入する。<br>
*細かなデザイン方向性の指示(色味指定がブルーとか、テイストは高級感を出してとか、角丸にしてとか、このサイトを参考にとか)もある場合は伝えること。
・ライツマネージドは高料金&使用期限契約のため、原則として不可。ロイヤリティフリーであれば可とする。<br>
・素材元のチェックや購入をディレクターが行うので、使用の際には詳細ページをプリントアウトする。


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


==素材について==


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


===(1)素材辞典より===
これらの本は棚に置いてあります。著作権などを確認して使いましょう。


素材辞典は使い勝手が良いので、利用頻度が高い。素材は以下に置いてある。
\\Tkocore2\WEBworks\001_タカシマヤ\001_takashimaya.co.jp\source\co.jp\チームデザイン\[素材]フリー素材★CD-ROM<br>
<br>
利用する際は請求に載せるので、ディレクターに伝わるようにすること。また、元のデータを案件フォルダに入れること。
===(2)所有する素材集リスト===
これらの本は棚に置いてある。
<div class="example">
<div class="example">
*・「素材辞典イメージブック」1~13まで
*・「素材辞典イメージブック」1~13まで
141行目: 154行目:
</div>
</div>


===(2)amanaより===
・必ず、事前に相談の上で購入する。<br>
・ライツマネージドは高料金&使用期限契約のため、原則として不可。ロイヤリティフリーであれば可とする。<br>
・使用の際は、amanaサイトの写真番号をメモするか、ブックマークしておく。
★アマナイメージズ・オリジナルロイヤリティフリーコンテンツ利用規約<br>
http://amanaimages.com/help/qaa-0602.html<br>
※WEBサイトやCD-ROMなどでの構成要素の一部としての使用、放送、放送用のビデオ、フィルムまたはビデオカセットなどを含むマルチメディアでの構成要素の一部としての使用。ただし、使用したコンテンツはダウンロードまたはコピー用ではない事が明確であるようにデザインすること。
</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 ピクトグラム」
  • ・「おしゃれパターン素材集 北欧・ファブリック」
  • ・「おしゃれパターン素材集 水玉・ストライプ」
  • ・「すぐに使えるカリグラフィと飾りケイ」
  • ・「パターンライブラリー」