2014/05/10 (土) 　第34回 WordBench神戸勉強会 デザイン教えて君　で使用したスライドに加筆訂正したものです。

1. 2014/05/10
WordBench神戸
Cherry Pie Web 川井昌彦
DTPデザイナーに
Webデザインを頼むときのポイント

2. 2
自己紹介
●川井昌彦（かわいまさひこ）@sakuragi_kei
東京の制作会社で24年間勤めた後、
京都府舞鶴市に帰郷してフリーランスで活動中
実は、DTPのほうが経験が長いです
（このスライドも InDesign で作っています）
実は、MovableTypeのほうが経験が長いです
小桜インコ・シロハラインコ・黒い柴犬のパパ
Cherry Pie Web http://www.cherrypieweb.com

3. 3
設計
・ ワイヤーフレームは、Webを知っている人が作る
（デザインを制限しないように、エリアを指定する程度にしておいたほうがいいかも）
・ 各ページで流用するエリアを、明確にしておく
（「マスターページ」というとスキルの高い人はわかってくれる）
・ パーツ・装飾・効果は使いまわす
段落スタイル・文字スタイル・グラフィックスタイルを使う

4. 4
カラーモード
・ RGBにするのは、けっこうみんな知っているけど
でも、リンク画像がCMYKのままなことが多い
（元データがRGBでCMYK変換していることが多いので、元データを使ってもらう）
・ カラープロファイルを、sRGBにしておいてもらう

5. 5
ドキュメントサイズ・見え方
・ 何も言わないと、A4縦で作られてしまう
「横幅960px、縦なりゆき」などと、先に指定しておく
・ ファーストビューを意識させる
ディスプレイで100%表示して見えているものが、納品物である！
（DTPで経験のある人ほど、ディスプレイを信じない）
→ プレビューモード・高品質表示で確認

6. 6
レイヤー
・ 背景、コンテンツ等のレイアウト構造とレイヤー構造をリンクさせる
レイヤーが多いときは、レイヤーグループでまとめる
レイヤーに適切な名前を付けるようにする
・ マウスオーバーのデザインは、レイヤー表示オン／オフで、
簡単に切り替えられるようにしておく

7. 7
文字について
・ 画像にするところ／しないところを決めておく
場所ではなく、意味付けで分ける
例） キャッチコピー・大見出し・中見出し・吹き出し など
・ 画像にしないテキストは、下記の設定にする
フォント：メイリオ・MSゴシック・ヒラギノ角ゴなど
ぶらさがり・禁則処理：なし
文字揃え：左揃え
カーニング・トラッキング・文字詰め：なし
・ 画像にしないテキストは、レイヤーを分ける
（背景などを書き出しやすいように）

8. 8
アプリの設定について
アプリケーションの設定がきちんとしていれば、問題を未然に防げる
単位をピクセルにする、ピクセルプレビュー、ピクセルにスナップなど
・ IllustratorでWeb向け、ピクセルベースの作業を行う上での設定（完全版）
http://www.dtp-transit.jp/adobe/illustrator/post_1896.html
・ 初めてPhotoshopでWeb制作する前にやっておくといい設定8(CS6含む)
http://designcolor-web.com/2012/05/29/photoshop-first-
setting/

9. 9
DTPデザイナーのデータあるある
・ ドロップシャドウが、ボックスからはみ出している
・ 1pxにこだわっているのはパーツの内側だけで、
パーツ間のマージンは1pxずれている
（数値で見ることを徹底）
・ 行が増えたときなど、例外を考えていない
ブラウザによって文字が変わることを意識していない
※テキストにはすべて段落スタイルを適用させる
※段落スタイルで、書体を変えてレイアウト崩れが起きないか確認
・ 差し替えられる写真やテキストを斜めに配置している
（CSS3でできなくはないが・・・）
・ クリッピングしないで、白いボックスを重ねて隠す

10. 10
最後に
・ DTPデザイナーでも、スキルの高い人は一度言うとわかってくれるので、
諦めないで、一度説明をしてみましょう！
・ 文字が多めのページでは、Photoshop より Illustrator のほうが
Webデザインに適しています
（複数ページ作成が可能、文字の扱いが得意、SVG・・・）
Photoshop でパーツ作成
Illustrator でページデザイン の流れになっていくと思われます
（個人的には、Fireworks が一番いいと思いますが）

11. 11
ご清聴ありがとうございました。