「デザインガイドライン」の版間の差分
ナビゲーションに移動
検索に移動
編集の要約なし |
編集の要約なし |
||
| (4人の利用者による、間の48版が非表示) | |||
| 1行目: | 1行目: | ||
<div id="manual"> | |||
==共有サーバ WEBWORKについて== | |||
仕事上のファイルは、共有サーバにて管理しています。<br> | |||
複数のスタッフが作業するため、スムーズにミスなく作業ができるようにルールを設けています。 | |||
===(1)ファイル共有の徹底=== | |||
*■ファイルは他のスタッフと共有するため、作業終了後に指定場所に上げる。 | |||
*■修正や更新の作業開始時には、<b>まずWEBWORKから最新ファイルを落としてから作業する</b>こと。 | |||
→先祖返りのミスを起こさないようにするため。 | |||
*■作業途中で帰社する場合、<b>途中でもそのpsdファイルを共有サーバに上げる</b>こと。 | |||
→急に欠勤した場合でも、スムーズに引き継げる状態にしておく。 | |||
===(2)フォルダ分け=== | |||
*■フォルダは'''クライアント別／案件別／種別(sourceとか)／日付(本アップ日)／タイトル'''に分かれている。 | |||
''' | *■「本アップ日(予定日)」ごとに新しいフォルダを用意する。 | ||
===(3)種別のフォルダ構成=== | |||
種別のフォルダにもルールがあります。 | |||
= | <div class="example"> | ||
*'''source：デザインファイルを格納する。デザイナーはここを使う。''' | |||
*backup：バックアップファイルを格納する。 | |||
*temporary：一時的なバックアップファイルを格納する。デザイナーには関係なし。 | |||
*upload：アップする差分ファイルを格納する。担当ディレクターが本番にアップする。 | |||
*works：実作業ファイルを格納する。サイト上の全ファイルがある。ココが常に最新状態となる。 | |||
*document：サイト全体のガイドライン、仕様書、FTP設定などのドキュメントを格納する。 | |||
</div> | |||
==作業の工程== | |||
デザイン発注の際は「指示書」を付け、口頭説明することで正式な依頼とする。<br> | |||
指示書は「現在、誰がバトンを持っているか?」という目印の役割も担う。 | |||
===(1)依頼=== | |||
指示書(全ての情報が落とし込んであるべきもの)と一緒に口頭で依頼する。それを持って正式な「発注」とする。 | |||
指示書(全ての情報が落とし込んであるべきもの) | |||
<div class="example"> | |||
【確認する項目】<br> | |||
*■本アップ日<br> | |||
*■締切/デザイン提出日(日時まで確認)<br> | |||
*■ボリューム（ページ数、バナー数など）<br> | |||
*■内容（目的、要素、優先順位、テイスト、色味、参考資料、技術、制約…） | |||
*■素材（文字、画像、ロゴ…）<br> | |||
※素材一式は当該のフォルダ内に入っています。 | |||
</div> | |||
===(2)デザイン作業中=== | |||
デザイナーは考えるのが仕事です。頭を使ってデザインしましょう。<br> | |||
※[[photoshopについて]]のガイドラインはこちらを参考にしてください。 | |||
===(3)作業者の見直し=== | |||
デザインが終了したら、客観的・多面的な視点で見直す。この時間もしっかりと取ること。 | |||
<div class="example"> | |||
■<b>デザイン全般</b> | |||
*・そのデザインはユーザーの要求に応えることができるか。わかりやすいか。 | |||
*・情報の強弱、優先度は適切か。 | |||
*・ユーザビリティ上の問題はないか。 | |||
*・他ページとの整合性は取れているか。 | |||
*・コーディングや運用を想定したデザインになっているか。 | |||
■<b>要素</b> | |||
*・要素漏れがないか。 | |||
*・現在アップされているページと比較して、矛盾点がないか。 | |||
■<b>文字</b> | |||
*・誤字脱字はないか。 | |||
*・文章の意味は通じるか。もっと分かりやすくならないか。 | |||
*・文字の可読性は確保されているか。 | |||
*・画像化した文字は「文字詰め」を行っているか。 | |||
*・半角や全角のブレはないか。 | |||
■<b>PSDファイル</b> | |||
*・誰にでも更新しやすいレイヤーになっているか。 | |||
*・エリアごとにフォルダ分けされているか。 | |||
*・余計なレイヤーはないか。 | |||
*・ガイドにズレはないか。 | |||
</div> | |||
===(4)作業終了→報告=== | |||
*■PSDファイルはWEBWORKの指定場所に上げる。それと同時に確認用JPGも上げること。 | |||
*■制作物をプリントアウトし、本アップ日を赤ペンで記入の上、指示書と共に作業依頼者に手渡す。 | |||
*■出力の際は「画像化(レイヤー統合)」してからプリントアウトする。（画面と同じ見え方にするため） | |||
*■デザイン上の問題点や懸念点があれば、その旨も報告すること。 | |||
=== | ==デザイン依頼について（ディレクター向き）== | ||
デザインの依頼をするときは、メールだけではなく、必ず口頭で伝える。<br> | |||
その際に持っている情報は全て、依頼指示書(デザイン依頼表＆指示書)に落とし込んで渡すこと。 | |||
<div class="example"> | |||
*■'''「デザイン依頼表」'''<br> | |||
決められたデザイン依頼表に「案件名」、「本アップ日」、「仮アップ日(デザイン提出日)」、「ボリューム」、「担当者名」を記述すること。 | |||
*■'''依頼指示書'''(デザイナーに渡す指示書の紙)<br> | |||
「原稿(ワイヤーフレーム)」、「使用する画像」、「依頼概要(補足説明)」などで構成してください。口頭だけでの指示ではなく、要望や注意点などは全て紙に落と込むこと。 | |||
</div> | |||
※物理的に依頼書を持っている人が、「今、作業のバトンを持っている」という考え方で動いています。 | |||
=== | ==素材について== | ||
デザイン上で素材が必要な場合は、所有している素材集を使う。<br> | |||
使用の際には、請求額も変わってくるので、素材元がわかるようにすること。元画像をフォルダにコピーして置いてください。 | |||
<div class="example"> | |||
素材置き場：<b>WEBworks／000_共通データ／チームデザイン／素材</b> | |||
</div> | |||
===(1)素材辞典より=== | |||
素材辞典は使い勝手が良いので利用頻度が高い。<br> | |||
利用の際は請求に載せるので、ディレクターに伝わるようにすること。また、元のデータを案件フォルダに入れること。 | |||
===(2)amanaより=== | |||
・必ず事前に相談の上で購入する。<br> | |||
・ライツマネージドは高料金＆使用期限契約のため、原則として不可。ロイヤリティフリーであれば可とする。<br> | |||
・素材元のチェックや購入をディレクターが行うので、使用の際には詳細ページをプリントアウトする。 | |||
★アマナイメージズ・オリジナルロイヤリティフリーコンテンツ利用規約<br> | |||
http://amanaimages.com/help/qaa-0602.html | |||
===(3)その他、所有する素材集リスト=== | |||
これらの本は棚に置いてあります。著作権などを確認して使いましょう。 | |||
<div class="example"> | |||
*・「素材辞典イメージブック」1～13まで | |||
*・「日本の文様」 | |||
*・「日本の伝統文様」 | |||
*・「和風レトロ地紋」 | |||
*・「飾り罫・飾り曲線」 | |||
*・「日本の染型紙文様」 | |||
*・「きらきら素材集」 | |||
*・「FREE STYLE SCRAPS フレーム/ライン」 | |||
*・「FREE STYLE SCRAPS ピクトグラム」 | |||
*・「おしゃれパターン素材集 北欧・ファブリック」 | |||
*・「おしゃれパターン素材集 水玉・ストライプ」 | |||
*・「すぐに使えるカリグラフィと飾りケイ」 | |||
*・「パターンライブラリー」 | |||
</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 ピクトグラム」
- ・「おしゃれパターン素材集 北欧・ファブリック」
- ・「おしゃれパターン素材集 水玉・ストライプ」
- ・「すぐに使えるカリグラフィと飾りケイ」
- ・「パターンライブラリー」