コーダーからホームページのカンプを制作する デザイナーさんへのお願い

By: Yandle

ホームページの制作は、大きなサイト/サービスになるほど、
比例して、たくさんの人の力が必要になります。

デザインだけでも、ＨＴＭＬだけでも、
人気のあるホームページは作ることができません。
関わる人すべてが、それぞれの出来ることを確認しながら
開発という工程を進めていく必要があります。

私はコーダー兼、PHPやRubyなどのサーバサイドのスクリプトや、
JavaScript、jQueryを主に使ってシステム開発をこなすウェブプログラマです。

サイトを作っていく時に共同で作業するデザイナーさんは、
紙の媒体を主力において活躍されている人が多いです。

その際、ウェブと紙とで作品の作り方が違うことを説明することが
ありますが、今後も毎回同じことを繰り返すのも手間なので、
こういう覚書を作ってみました。
ご意見のある方、ぜひコメントをお寄せください。

まず、デザイナーとコーダーの役割は、
大きく分けると以下のようになると思います。

デザイナーの役割
・サイトの運営方針に沿ったデザインの制作
・サイトのテンプレートの制作
（タイトル、ヘッダー、フッター。サイト全体の世界観の統一）
・ユーザビリティ、可読性を考慮したインターフェースの構築

コーダーの役割
・デザイナーが制作したデザインを活かしたまま、
検索エンジン向けにホームページの構造部分と最適化し、
デザイン部分を別ファイル（スタイルシート）にまとめて切り離す
・制作後に検索エンジン向けのサイトマップを作成する
※他にもプログラム的な業務を行うこともあります。

以下はコーダーの視点から、デザイナーさんに
おさえてもらいたい要点をまとめたものです。

1.ページの幅は950pxが基本

Yahoo!Japanやauをはじめ、
有名サイトのページの幅のトレンドは、
950px ～ 1,020px 前後となっています。

外枠や影を付ける場合は、その太さも考慮して、
幅を決めてください。

参考サイト
サイトデザインの横幅の基準はこれだ！お役立ち記事まとめ＆事例9選で何ピクセルかもう迷わない

2.読ませる文章はプレーンテキスト

ホームページでは、タイトルやバナーをのぞいた、
いわゆる、ユーザーに「読ませる」文章は、
画像ではなく、テキストデータにします。

デザインする時は、画像とテキストデータを
見分けられるよう、装飾なしのプレーンテキストを
使用してください。

※プレーンテキストの出力は、Illustratorでは
できないようです。一般的に、ウェブデザインは
Photoshopか、業界スタンダードの「FireWorks」
を使用します。
Photoshpでは、プレーンテキストをデザインに
組み込むことができます。
下記サイトを参考にして下さい。

・参考サイト
「IllustratorからPhotoshopヘファイルの書き出し」
http://dis.ne.jp/blog/topics/2900.html

画像ではなく、プレーンテキストを用いる理由は、
「見る人がブラウザのメニューを使ってサイズを調整できる」
「検索エンジンは、画像を無視し、テキストを読む」
「コピペで使いまわせるので、ツイッターやFacebook等で
情報が広められやすい」といった利点があげられます。

コーディングという作業を行えば、
画像にも文字情報を与えることが可能になりますが、
ページの見出し、メニュー、コンテンツの本文は、
なるべくプレーンテキストでデザインすることを
基本にして下さい。特に見出しは、検索エンジンが最も
重要視する要素なのでプレーンテキストが推奨されます。

・参考サイト
「見出し要素をシンプルなHTMLで美しくスタイルするテクニックのまとめ」
http://tinyurl.com/6om5999

ページの世界観を構築するため、メニューや見出しに
凝ることは大切ですが、ユーザビリティ、サイトの
売上向上といった要素も考慮してデザインできるよう、
自分なりのルールを作ってみてください。

3.コーダーに渡す画像データ形式はPNG

2012年ごろまで、ウェブ業界標準の画像作成ソフトは
「FireWorks」でした。
これは、Adobeファミリーのソフトであるため、
DTPで使われるaiファイルやeps、psdも読み込めます。

ただ、カンプや、大きなイメージ画像の場合は、
ページを軽量化するため、パーツごとに細かく分割して
書き出します。

この時、Fireworksのスタンダードな保存形式である
「PNG」だとスライスと呼ばれる書き出しの作業を効率よく行え、
時間を短縮することができます。管理も大変簡便です。
要素が多いカンプほど、書き出しに時間がかかるので、
コーダーにデータを渡す時はPNGでお願いします。

現在、FireWorksは開発が終了したため、
「Sketch」といった新しいウェブ用の画像編集ソフトが出てきています。
どのソフトであっても、印刷系の大きなファイルではなく、
最適な形式を確認し、渡すようにお願いします。

4.カラーはRGBモード

DTPは印刷のためCMYKモードでデザインを行いますが、
ウェブはモニタ上で表示するため、RGBモードを使用しています。

グラデーションを使った時に、特に違いが顕著に
表れます（CMYKよりRGBは色数が多いため）。

制作の際には、色数のモードに注意してください。

・参考サイト
「WEBクリエイターはCMYKに要注意！」
http://yourcolor.seesaa.net/article/109894957.html

5.フォントはラスタライズするか、フォントデータを添付

DTP業界でもおなじみだと思いますが、インストール
されていないフォントの入っているデータを受け取った場合、
いわゆる「代替フォント」に置き換わってしまいます。
データを送付する前にラスタライズで画像にしてしまうか、
フォントデータも一緒に添付するようにしてください。

6.技術的に可能か、疑問に思ったらまずはコーダーに相談

ウェブのデザインの基本は、基本的には「表組み」、
「ブロック単位」で構成するもの、と考えてください。
苦手なのは、「要素の重ね合わせ」です（不可能ではありませんが）。

ウェブでは、インターネット･エクスプローラをはじめ、
FireFox、Safari、Chromeとさまざまなブラウザがあり、
それぞれ、微妙に表示方法が異なっていて、
規格が統一されていません。

たいていのデザインは、ウェブページにできますが、
複雑になるほど、作業工程が増えていき、時間と費用がかかります。
疑問に感じることがあれば、作業の前にコーダーに相談して下さい。

最近の流行は「モバイルファースト」で、
スマホやタブレットでも、PCでも同じデザインで作ることができる、
「レスポンシブ・ウェブデザイン」というものです。
代表的なのは、「Bootstrap」と呼ばれるフレームワークで構成されたものです。
公式サイトにアクセスして、ブラウザの大きさを変えてみてください。
幅の大きさに応じて、レイアウトが変更されると思います。

レスポンシブ・デザインでは、幅がスマホの大きさになった時、
ロゴやフォントの大きさを変えたり、表示しない/あるいは表示する項目を作ったりすることができます。
どんなことが可能か、コーダーとよく打ち合わせることで、
最適なデザインが組めることと思います。

以上です。

資料：ブラウザについて

Firefox、Safari、Chromeは自動的に最新バージョンに
更新される仕組みなので、それぞれの最新バージョンに合わせての
コーディングが必要になります。

インターネット･エクスプローラ（IE）は、複数のバージョンが
存在し、それぞれ、独自のバグを抱えているため、
長い間コーダーの悩みの種となっていました。
2012年のはじめから、マイクロソフトがIEの自動アップデートを
実施していることから、バージョン8と9のみに対応させる
風潮になり、最終的にマイクロソフトがサポートするのは、
現在ではバージョン11のみとなりました。

※IE6については2010年あたりから、Yahooをはじめ、Google、YouTube、Facebookも
サポート外と明言していました。…が、それでも6と7を使う人はなかなか減らず、
コーダーにとっては苦難の歴史でした。
※参考サイト
「IE6の“葬儀”行われる　Microsoftから献花も」
http://www.itmedia.co.jp/news/articles/1003/08/news030.html

※2011年まで、IEはバージョン6、7、8、9を使用するユーザーが
多数存在していました。
6と7が、バグの巣窟で、ＨＴＭＬの規格通りにコーディングが
できないことが大変多く、セキュリティも問題視されていました。
2012年より、WindowsXPとVistaはIEをバージョン8に、
Windows7はバージョン9に自動的にアップデートされることに
なりました。
※参考サイト
「Internet Explorer の自動アップグレード、日本でも始まる」
http://news.mynavi.jp/news/2012/03/30/159/index.html

ユーザーが自動アップデートを拒むこともできるため、
100%の切り替えが行われたと断言することはできませんが、
実際、2012年に入ってから、IE6と7のユーザはめっきり減ってきています。

・参考サイト
「アメリカも IE6 シェア 1% サークルに仲間入り」
http://hyper-text.org/archives/2012/01/ie6_below_1percent_usa.shtml

2012年に入ってからは、バージョン6と7に対応させる場合、
10%以上の料金を追加するという会社も出てきました。
（「株式会社まぼろし　IE6, 7対応費用に関しまして」
http://maboroshi.biz/news/article004.html）

2012年中には、Windows8（IE10）も登場し、
6と7についてはサポート外に踏み切ってもいい時期に入りました。
システム系のサービスを構築する際には、推奨環境を明記します。

現在では、WindowsXPのサポートが切れたことにより、
IE10もサポート外になり、コーダーにやっと夜明けが訪れました。
長くなりましたが、現在のマイクロソフトの主要ブラウザは、
IEのバージョン11と、Edgeのみとなったのです。

ウェブのデザインでは、制作後、しばらく時間をおいたり、
別のPCで見た時に、デザインが崩れていることが見つかり、
よく問題になります。たいていは、ブラウザの違いからくるものです。
新しいブラウザが登場したり、古いブラウザでのみ確認していると
デザインが崩れるケースが多いので注意が必要です。