2014/05/10

WordBench神戸

Cherry Pie Web 川井昌彦

DTPデザイナーに Webデザインを頼むときのポイント

2

自己紹介●川井昌彦（かわいまさひこ） @sakuragi_kei

　東京の制作会社で24年間勤めた後、

　京都府舞鶴市に帰郷してフリーランスで活動中

　実は、DTPのほうが経験が長いです

　　（このスライドも InDesign で作っています）

　実は、MovableTypeのほうが経験が長いです

　小桜インコ・シロハラインコ・黒い柴犬のパパ

　Cherry Pie Web http://www.cherrypieweb.com

3

設計・ ワイヤーフレームは、Webを知っている人が作る （デザインを制限しないように、エリアを指定する程度にしておいたほうがいいかも）

・ 各ページで流用するエリアを、明確にしておく （「マスターページ」というとスキルの高い人はわかってくれる）

・ パーツ・装飾・効果は使いまわす

段落スタイル・文字スタイル・グラフィックスタイルを使う

4

カラーモード・ RGBにするのは、けっこうみんな知っているけど

でも、リンク画像がCMYKのままなことが多い （元データがRGBでCMYK変換していることが多いので、元データを使ってもらう）

・ カラープロファイルを、sRGBにしておいてもらう

5

ドキュメントサイズ・見え方・ 何も言わないと、A4縦で作られてしまう

「横幅960px、縦なりゆき」などと、先に指定しておく

・ ファーストビューを意識させる

ディスプレイで100%表示して見えているものが、納品物である！

（DTPで経験のある人ほど、ディスプレイを信じない）

→ プレビューモード・高品質表示で確認

6

レイヤー・ 背景、コンテンツ等のレイアウト構造とレイヤー構造をリンクさせる

レイヤーが多いときは、レイヤーグループでまとめる

レイヤーに適切な名前を付けるようにする

・ マウスオーバーのデザインは、レイヤー表示オン／オフで、

簡単に切り替えられるようにしておく

7

文字について・ 画像にするところ／しないところを決めておく

場所ではなく、意味付けで分ける 例）　キャッチコピー・大見出し・中見出し・吹き出し　など

・ 画像にしないテキストは、下記の設定にする フォント：メイリオ・MSゴシック・ヒラギノ角ゴなど ぶらさがり・禁則処理：なし 文字揃え：左揃え カーニング・トラッキング・文字詰め：なし

・ 画像にしないテキストは、レイヤーを分ける

（背景などを書き出しやすいように）

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

DTPデザイナーのデータあるある・ ドロップシャドウが、ボックスからはみ出している

・ 1pxにこだわっているのはパーツの内側だけで、

パーツ間のマージンは1pxずれている

（数値で見ることを徹底）

・ 行が増えたときなど、例外を考えていない

ブラウザによって文字が変わることを意識していない

※テキストにはすべて段落スタイルを適用させる

※段落スタイルで、書体を変えてレイアウト崩れが起きないか確認

・ 差し替えられる写真やテキストを斜めに配置している （CSS3でできなくはないが・・・）

・ クリッピングしないで、白いボックスを重ねて隠す

10

最後に・ DTPデザイナーでも、スキルの高い人は一度言うとわかってくれるので、

諦めないで、一度説明をしてみましょう！

・ 文字が多めのページでは、Photoshop より Illustrator のほうが

Webデザインに適しています

（複数ページ作成が可能、文字の扱いが得意、SVG・・・）

Photoshop でパーツ作成

Illustrator でページデザイン　の流れになっていくと思われます

（個人的には、Fireworks が一番いいと思いますが）

11

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