2014年4月13日（日）、東札幌・ICC Cross×Gardenで開催したCSS Nite in SAPPORO, Vol.13「Web制作と運営のキホンを学ぶ」のフォローアップとして、待島 亘（Gear8／実行委員）による2時間目「Webサイトの素材準備」の資料を公開します。
スライド／音声
動画
※ デスクトップやタブレットでは、右下の「Vimeo」から、大きなサイズで見られます
フォローアップメッセージ
株式会社Gear8の待島亘です。 みなさん日曜日はお疲れ様でした！
今回は、CSS Nite in SAPPOROに初めて参加された方が全体の約6割と、これまでの回よりも割合が多くなっていました。それぞれにお悩みはあるのだなーと感じつつ、Webサイト制作や運用に携わるみなさんのお力になれたらとても嬉しく思います。
さて、今回の私のセッションでは「Webサイトの素材準備」というテーマでお話ししました。私自身もWebディレクターとしてサイト制作に携わっており、時には素材がうまく集まらないこともあります。
なかなかどうして、スケジュール的に余裕がない場合に限って、うまく素材が集められないことがあるものですよね……。
セッションでは素材依頼のポイントとして下記の3つを挙げましたが、
- 内容を明確に
- 担当者を決める
- 期日を決める
もうひとつ付け加えるとしたら、その素材を「使う目的を伝える」ということをします。
Webサイトは決して素材のつぎはぎをすればよいものではなく、サイトを訪れるユーザー（お客様のお客様）を意識した動線設計、コンテンツづくりが大切です。
すなわち、「●●の素材がこのページに入ることで▲▲という魅力が伝わって、ユーザーの購買意欲を高めることになる」ということをご担当の方と共有することが肝要です。
素材を集めること自体を目的化してしまうのではなく、その先にいるお客様を意識して進めていくということを、どうぞお忘れなく。
以下、アンケートにていただいた質問に回答します。
Q：既存媒体からWebに落としこむ時のコツを聞きたいです
チラシやパンフレットなどの印刷媒体を利用する場合には、 まず下記に気をつけると良いでしょう。
1. CMYKからRGBへのカラーモード（形式）の変換
Webと印刷物で色を表現する方法が異なるのは少しお話ししましたが、印刷用データ（CMYK）からWeb用データ（RGB）に書き出すと、色味が濁ったり暗くなることがあります。
たとえばロゴには印刷用に色が指定されていることがありますが、Web用には指定が無い場合も多いので、実際の見え方によって色の調整をクライアントと行っておくと、後から「全体的になんか暗いからぜんぶなおしてｗ」ということを避けることができます。
また、Webブラウザによっては、CMYKで保存された画像が表示されないこともあるので、すべての画像をRGB形式にして保存しなおすことをおすすめします。
2. 単位をピクセルに、端数が出ないように
印刷媒体はmm（ミリメートル）を単位に制作されていますが、Webではpx（ピクセル）の単位が使われます。
IllustratorなどのデータをそのままWebサイトへ持ってくると、サイズが100.5pxなどと、きっちり整数にならないことがあります。そうなると、PCなどのディスプレイで見たときに、ロゴや画像の輪郭がにじんでしまいます。
「なんだか、Webにしたらぼんやりしてしまった」というときは、ほぼこれが原因です。なので、Web用に使うときは単位設定をきっちり行い、整数値にすることを心がけましょう。
ちょうどIllustratorでのWebデザインについてよくまとまった記事があったので、共有します。 IllustratorでWebデザインをはじめよう！ 第1回Adobe Pinch In / 使い方