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

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


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


===WEBWORKの使用方法===


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


　　【理由】<br>
　　・特定のスタッフが不在・欠勤時でも、滞りなく業務が進められるようにする。<br>
　　・同じページの修正作業を、「一昨日はAさん、昨日はBさん、今日はAさんが行う」場合、最新のオリジナルファイルはWEBサーバ上にないと先祖返りを起こし、ミスの原因になる。


====(2)フォルダ分けについて====
・『クライアント別／案件別／種別/時間(公開日)』に分かれているので、該当する場所にファイルを置くこと。


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


====(4)修正作業開始時====
・デザインに関する修正作業が発生した場合は、必ず、WEBWORKSから最新のソースファイルを落として作業を行うこと。


　　【理由】<br>
　　理由は(1)と同じ。また、psdファイルの場合、コーディングスタッフがスライスしたデータに更新されている可能性も高いので、ここは特に注意すること。


====(5)日付管理====
===(3)種別のフォルダ構成===
・東京DSの制作物は、クライアント別、案件別に分かれ、その中でさらに「日付別」に管理されている。この日付は『本アップ日』を示す。(作業日ではありません！)


これは管理上、とても重要なポイントなので、作業の際は「いつアップの仕事をしているのか？」という点に留意しましょう。
種別のフォルダにもルールがあります。


====(6)最新ファイル====
<div class="example">
・最新のファイルは常にWEBWORK上に存在します。<br>
*'''source：デザインファイルを格納する。デザイナーはここを使う。'''
但し例外として、自分の作業中は自分のローカルにあるファイルが最新ファイルです。
*backup：バックアップファイルを格納する。
*temporary：一時的なバックアップファイルを格納する。デザイナーには関係なし。
*upload：アップする差分ファイルを格納する。担当ディレクターが本番にアップする。
*works：実作業ファイルを格納する。サイト上の全ファイルがある。ココが常に最新状態となる。
*document：サイト全体のガイドライン、仕様書、FTP設定などのドキュメントを格納する。
</div>


つまり、作業終了報告後は自分のローカルにあるファイルは最新ファイルではなくなります。再度、修正作業に入るときはWEBWORK上の指定位置にあるファイルを落としましょう。このルールを順守しないと大きなミスの原因になるので注意してください。
==作業の工程==
デザイン発注の際は「指示書」を付け、口頭説明することで正式な依頼とする。<br>
指示書は「現在、誰がバトンを持っているか?」という目印の役割も担う。




----
===(1)依頼===
===作業フロー===
指示書(全ての情報が落とし込んであるべきもの)と一緒に口頭で依頼する。それを持って正式な「発注」とする。
基本的に、指示書付きで直接、口頭説明した場合のみ発注となる。
特に指示書は『今、誰がボールを持っているのか？』を明確にし、意思の食い違いによるミスを減らす目的がある。
====(1)作業依頼====
指示書(全ての情報が落とし込んであるべきもの)と一緒に口頭で依頼するので、それを持って発注となる。


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


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


====(2)終了報告====
作業終了時は、制作物をプリントアウトし、指示書と共に作業依頼者に手渡すこと。<br>
その際、必ずソースファイル(psdファイル、JPG・GIFなどなど)を指定のWEBWORKサーバに上げる。


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


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


==デザイン提出==
■<b>要素</b>
作業終了時の報告時に注意したい点のまとめです。
*・要素漏れがないか。
*・現在アップされているページと比較して、矛盾点がないか。


===確認事項===
■<b>文字</b>
制作物は3つの視点から再確認すること。<br>
*・誤字脱字はないか。
・デザイナーとしての視点<br>
*・文章の意味は通じるか。もっと分かりやすくならないか。
・校正者の視点<br>
*・文字の可読性は確保されているか。
・(何も知らない)ユーザーからの視点<br>
*・画像化した文字は「文字詰め」を行っているか。
*・半角や全角のブレはないか。


====(1)要素====
■<b>PSDファイル</b>
・要素漏れがないか、全ての要素を満たしているか？
*・誰にでも更新しやすいレイヤーになっているか。
*・エリアごとにフォルダ分けされているか。
*・余計なレイヤーはないか。
*・ガイドにズレはないか。
</div>


====(2)誤字脱字====
===(4)作業終了→報告===
・誤字脱字などのチェック<br>
*■PSDファイルはWEBWORKの指定場所に上げる。それと同時に確認用JPGも上げること。
・タカシマヤ案件ならば、[[タカシマヤ用事用語と各種表示の統一]]に沿っているか？<br>
*■制作物をプリントアウトし、本アップ日を赤ペンで記入の上、指示書と共に作業依頼者に手渡す。
・日付、曜日に誤りはないか？<br>
*■出力の際は「画像化(レイヤー統合)」してからプリントアウトする。（画面と同じ見え方にするため）
・半角英数で統一されているか？<br>
*■デザイン上の問題点や懸念点があれば、その旨も報告すること。


====(3)情報====
・情報構造を再確認し、エンドユーザーに伝わりやすくなっているか確認。<br>
・前後のページと整合性が取れているか？<br>




===プリントアウト===
==デザイン依頼について（ディレクター向き）==
基本的にデザイン制作終了時には、プリントアウトして依頼者に報告時に手渡します。<br>
その出力の際は「画像化」してからプリントアウトしましょう。


　【理由】
デザインの依頼をするときは、メールだけではなく、必ず口頭で伝える。<br>
　プリンタ側がフォントを持っているため、実際の画面と違うものが出てしまうため。解像度の概念が壊れ、綺麗すぎる文字が出てしまうため。
その際に持っている情報は全て、依頼指示書(デザイン依頼表＆指示書)に落とし込んで渡すこと。


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


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


==photoshop==
※物理的に依頼書を持っている人が、「今、作業のバトンを持っている」という考え方で動いています。
運用の効率化のため、デザインファイル制作もある程度のルールを設けています。<br>
誰がファイルを触っても、スムーズに仕事が回せるようなノウハウの構築が会社の財産になると考えているためです。




===最低限のルール===
==素材について==
●レイヤーはエリア単位で移動できるように「フォルダ」を区切ること。<br>
●フォルダの色分けは基本的にはしないこと。<br>
（但し、マウスオーバの場合はコーディング時に理解しやすいように当該フォルダを「赤」にするのはOK）<br>


===推奨事項===
デザイン上で素材が必要な場合は、所有している素材集を使う。<br>
●写真や文字以外は、ドロップシャドーを使用しない。<br>
使用の際には、請求額も変わってくるので、素材元がわかるようにすること。元画像をフォルダにコピーして置いてください。
　　→枠やパーツなどで使用すると意図しない"はみ出し"や流用する際に問題が起こりやすいため。<br>
<div class="example">
●
素材置き場：<b>WEBworks／000_共通データ／チームデザイン／素材</b>
</div>


===(1)素材辞典より===


===アクション===
素材辞典は使い勝手が良いので利用頻度が高い。<br>
[F1]選択レイヤー・コピー<br>
利用の際は請求に載せるので、ディレクターに伝わるようにすること。また、元のデータを案件フォルダに入れること。
[F1+S]GIF-256色 書き出し<br>
[F1+⌘]JPG-80 書き出し<br>
[F1+S⌘]JPG-100 書き出し<br>


[F2]RGB変換＋解像度72<br>
[F2+S]90度回転<br>
[F2+⌘]【text】ラスタライズ<br>
[F2+S⌘]新規ファイル画像化【印刷前】


[F3]選択範囲★白での塗り潰し<br>
===(2)amanaより===
[F3+S]【text】黒#000000<br>
[F3+⌘]【text】白#FFFFFF<br>
[F3+S⌘]【text】赤#FF0000<br>


[F4]選択範囲★描画色での塗り潰し<br>
・必ず事前に相談の上で購入する。<br>
[F4+S]【text】黒#333333<br>
・ライツマネージドは高料金＆使用期限契約のため、原則として不可。ロイヤリティフリーであれば可とする。<br>
[F4+⌘]シェイプレイヤー : 白に<br>
・素材元のチェックや購入をディレクターが行うので、使用の際には詳細ページをプリントアウトする。
[F4+S⌘]シェイプ レイヤー: 黒に<br>


[F5]レイヤー削除<br>
★アマナイメージズ・オリジナルロイヤリティフリーコンテンツ利用規約<br>
[F5+S]選択範囲・1px縮小↓<br>
http://amanaimages.com/help/qaa-0602.html
[F5+⌘]選択範囲・1px拡大↑<br>
[F5+S⌘]オブジェクト境界線2px (白)


[F6]選択レイヤーコピー<br>
[F6+S]GIF-256色 書き出し<br>
[F6+⌘]JPG-80 書き出し<br>
[F6+S⌘]JPG-100 書き出し


[F7]<br>
===(3)その他、所有する素材集リスト===
[F7+S]小カテタイトル作成<br>
[F7+⌘]カンパスサイズ<br>
[F7+S⌘]画像解像度


[F8]横300px変換<br>
これらの本は棚に置いてあります。著作権などを確認して使いましょう。
[F8+S]横48px変換(セレクションサイズ)<br>
[F8+⌘]横100px変換<br>
[F8+S⌘]横600px変換


[F9]オブジェクト90％縮小<br>
<div class="example">
[F9+S]オブジェクト50%縮小<br>
*・「素材辞典イメージブック」1～13まで
[F9+⌘]オブジェクト110%拡大<br>
*・「日本の文様」
[F9+S⌘]全ラスタライズ→自動印刷(紙合わせ)
*・「日本の伝統文様」
　
*・「和風レトロ地紋」
[F10]アンシャープマスク(20％,0.2px)<br>
*・「飾り罫・飾り曲線」
[F10+S]ドロップシャドー(12％)<br>
*・「日本の染型紙文様」
[F10+⌘]明度down<br>
*・「きらきら素材集」
[F10+S⌘]明度up
*・「FREE STYLE SCRAPS フレーム/ライン」
*・「FREE STYLE SCRAPS ピクトグラム」
*・「おしゃれパターン素材集　北欧・ファブリック」
*・「おしゃれパターン素材集　水玉・ストライプ」
*・「すぐに使えるカリグラフィと飾りケイ」
*・「パターンライブラリー」
</div>


[F11]【text】新ゴM(アンチあり)<br>
</div>
[F11+S]【text】osaka(アンチなし)<br>
[F11+⌘]<br>
[F11+S⌘]
 
[F12]下移動5px↓<br>
[F12+S]上移動5px↑<br>
[F12+⌘]右移動5px→<br>
[F12+S⌘]左移動5px←
 
[F13]レイヤー削除<br>
[F13+S]オブジェクト横・中央揃え(→←)<br>
[F13+⌘]オブジェクト縦・下揃え(↓)<br>
[F13+S⌘]オブジェクト縦・中央揃え(　)
 
[F14]-----------　
[F14+S]【調整レイヤー】レベル補正<br>
[F14+⌘]【調整レイヤー】トーンカーブ <br>
[F14+S⌘]【調整レイヤー】彩度+8<br>
 
[F15]-----------　
[F15+S]オブジェクト・彩度変更 ←10<br>
[F15+⌘]オブジェクト・彩度変更 10→<br>
[F15+S⌘]オブジェクト・彩度変更 90→<br>
 
===自動バッチ・リサイズ処理===
photoshopで自動処理のバッチを利用して、簡単にリサイズできます。<br>
アクション設定は倉田まで。
 
----
 
==制作頻度の高いバナー==
●Flashバナー：566×172（枠は含まない）<br>
bnr_flash_070419_mothersday.jpg
 
●Flash右メニュー(4個)：181×36
ttl_070419_mothersday.jpg<br>
ttl_070419_mothersday_on.jpg
 
●右側共通エリアバナー：161×55（1pxの枠含む。#c2c2c2）<br>
'''bnr_right_070419_mothersday.gif'''
 
●大カテ プロモバナー(左)：548×177（1pxの枠含む。#c2c2c2）<br>
shopping/[大カテ]/img/top/'''main_bnr_l070419_sweets.jpg'''
 
●大カテ プロモバナー(左)：272×177（1pxの枠含む。#c2c2c2）<br>
shopping/[大カテ]/img/top/'''main_bnr_m070419_swarovski.jpg'''
 
●大カテ プロモバナー(小)：272×87（1pxの枠含む。#c2c2c2）<br>
shopping/[大カテ]/img/top/'''main_bnr_s070419_maternity.jpg'''
 
●大カテ プロモバナー(小小)：272×55（1pxの枠含む。#c2c2c2）<br>
shopping/[大カテ]/img/top/'''main_bnr_ss070419_sega.jpg'''
 
●特集バナー：200×74（1pxの枠含む。#c2c2c2）
 
 
----
 
==デザイン依頼==
 
デザイン依頼する際には、「メール」と「依頼指示書(デザイン依頼表＆指示書)」で指示を出すこと。<br>※メールのみだけではなく、必ず口頭でも伝える。
 
*依頼指示書(デザイナーに渡す指示書の紙)<br>「デザイン依頼表」、「原稿」、「(使用可能な)画像一覧サムネイル、ロゴ」、「メールのプリントアウト」、「情報を補足する何かあれば歓迎」で構成してください。知らない人にもスムーズにわかりやすく伝わる指示書だと効率も上がり、ミスも少なくなることでしょう。
 
 
*「デザイン依頼表」<br>所定のデザイン依頼表の紙に、「案件名(タイトル)」、「アップ日」、「仮アップ日」、「ボリューム(静的中カテ3つ、アーティクル5つ、バナー３つとか)、「(あれば)デザイン提出日」、「ディレクター担当者名」を記述すること。本アップ日は赤字で記述。
 
*「原稿」には、必要な要素(文字、画像)を全て入れること。入りきらない場合は別紙で用意する。そのデータ(テキストファイル)はLayout内に入れてください。
 
*「メール」には、大まかな概要や細かなデザイン方向性の指示（色味がピンクとか、全体的に高級感を出してとか、角丸にして、とかとか）
 
===依頼の際の細かな注意点===
*持っている情報は、"一つ残らず全て"紙(依頼指示書たち)に落とし込んで渡すこと。
*細かなデザイン方向性の指示（色味がピンクとか、全体的に高級感を出してとか、角丸にして、とかとか）はメールに書いてください。

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 ピクトグラム」
  • ・「おしゃれパターン素材集　北欧・ファブリック」
  • ・「おしゃれパターン素材集　水玉・ストライプ」
  • ・「すぐに使えるカリグラフィと飾りケイ」
  • ・「パターンライブラリー」
「https://wiki.kohga.tokyo/index.php?title=デザインガイドライン&oldid=7364」から取得