WEBデザイナーとWEBコーダー間で起こる制作トラブル、あなたも経験はありませんか？
WEB業界にいる方なら多少なりともそういった経験はあるのではないかと思います。
今回はわたしの経験からお互い知っておいて欲しい情報（リテラシー）をデザイナーとコーダー、相互の視点からご紹介致します！

第一弾　フォント（書体）について

WEBで使うフォントについて意識されていますか？
正直フォントを制する者がWEBを制す！といっても過言ではないほど、WEBデザインにおいてフォントの使い方やあしらいはとても大切です。
ただしパンフレットやポスターの、いわゆる「紙」のデザインとは違い、WEBではどんなフォントを使用してもいいとは限りません！
SEOの観点からもテキストを画像にするのは絶対にNGです！！

デザイナーにとっては、ここは目立たせたいからこのフォントを使用して・・・、ここはちょっと意味合いを変えてこのフォントに…と
Avinir、DIN、Helvetica、Bodoni…
あちこちに違うWEBフォントが使用されているデザインをコーダーがみたら確実に絶句モノです！

では、デザイナーはどのようなフォントを使用しデザインをするべきなのか？？　ちょっとご説明致します。

特殊なフォントの場合、WEBで使用できるかを確認する！

大前提として、さきほどの例のようにWEBサイトに何個も何個もいろんなフォントが存在するのは（仮にテキストを画像で置かず、WEBフォントを読み込んでいる場合）

• ページ読み込み速度の低下
• ページ読み込み速度の低下によるSEOの評価低下
• デザイン的統一感のなさ

などデメリットが多く存在しますのでオススメ致しません。
正しくフォントを使用し、他サイトと差を出したユニークなデザインを作る、これがよいデザイン設計であると思います。
まずはデザイナーの方はどのフォントなら使用できてどのフォントは使用できないのか？を知るべきかと思います。その場合周りにコーダーがいれば相談ができると思いますがそうもいかない場合は、実際にコーダーが使用するフォントサービスを見てみるとよいのではないでしょうか？

無料のWEBフォントサービス

• Googleフォント（無料）
• FONT PLUS（有料）
• TypeSquare（一部無料）

これらは実際にコーダーがWEBにこのサービスを取り込み、フォントを表示させるようにしているので、このサービスで使えるフォントはWEBページでも表示ができるということになります！これをみておくと、デザインを渡した際に、このサービスのこのフォントを使用してください。と的確な指示を言えるのでコーダーの手間も省ける＋思い通りの結果が出力される＋フォントなので綺麗！
といった利点があります。使えるフォントとそうでないフォントを意識してデザインをすると１段上のWEBデザイナーとして周りからも認識されるでしょう！

標準フォントは？

標準フォントとはOSに依存するもので、なにもフォントの指定せずWEBを表示させた際に表示されるフォントです。デフォルトフォントとも言われますね。それらのフォントの名前を意識したことはありますか？
WindowsならMS系のフォント(MSゴシックやMS明朝、MS UI Gothicなど)、MacOSであれば（ヒラギノ角ゴProW3やW6）といわれるフォントが表示されています。
ちなみにiPhoneのフォントもこのヒラギノ角ゴを使用しているんです！
標準で表示されるフォントでも見た目や大きさ、文字間などさまざまな差異があり、デザイナーが意図的にこのフォント！とできないのが標準フォントとなります。
ですので、OSに依存してしまうフォントではあるので、コーダーが「ここは標準フォント」と認識できるデザインを組んであげられればよいので、Photoshopなどでデザインをするのであればヒラギノ角ゴ(W3かW6)を使用すれば大丈夫です。場合によっては両方のOSに入っている游ゴシックなども有効でしょう（游ゴシックはWindows8くらいから標準でインストールされています）

フォントサイズについて

フォントサイズ？どのサイズでもいいでしょ？って思ったデザイナーの方。いやいや違うんですよ。WEBにも紙のように何PT以上ないと文字が潰れてしまう〜みたいな現象が起きてしまうので、ブラウザ（ChoromeやSafariなど）ではこのサイズ以下は読めないから表示しません！っていうのがあります。それが10pxです！！わたしはしばしばこの10pxしばりを打ち破った8pxとかのデザインに出会うことがありますが、これを再現するためには10px以下で指定してもブラウザが10pxで描画してくるのでそこを無理やりtransformというCSSで比率ごと2割小さくして表示する・・・なんてことをしたりします・・・・。でもこの指定はどのブラウザでも同じように見えなくて、、みたいな悲劇がしばしば起こるんです。なのでデザイナーの方はフォントは10px以下でデザインしない！！！を肝に命じてください。だって10px以下は表示できないんだから。最大サイズについてはとくに指定はありません。最近は大きいフォントを文字ドンするのが流行ってますしね。

Photoshopの文字指定

紙をよくやってる人はカーニング（文字間調整）など文字のスタイルでよくやってますよね。その感覚でWEBを作るとコーダーは死んでしまいます。。
どうしてダメなのか、WEBはそんな器用なものではないからなのです。文字サイズ、色、行間（厳密には違う）、文字間を調整できるんですが単一の単語とかに、みたいなのができないんです。たとえばひらがなの「っ」の前後とかって文字間のバランス的に詰めたいところではありますが漢字と漢字の間は逆に離したい、みたいな調整ってできないんです。ですのでデザインする際はそういったことに気をつけるとお互いに意図したものを作れるのではないでしょうか。ちなみに文字間調整はMacであればcommand+Aでそのテキストを全体選択し、option(alt)+右左矢印で調整できます。
さて、冒頭に画像を貼らせていただいた「THIS IS TEXT」という文字ですが、違いがわかるでしょうか？？これは一見同じテキストなんですが、Photoshopの文字スタイルにTTと書いてあるスタイル（＝全文字大文字表示）がかかっているかいないか、の違いです。これをコーダーがコピーアンドペーストするとWEBのマークアップソフトではどう表示されるでしょうか？？　小文字で入力されていて一見大文字に見えていた「THIS IS TEXT」が「this is text」に表示されましたね！！素晴らしいコーダーはコピペ完璧主義です。１文字でも手打ち入力するなと叩きこまれ、文字間違いなんてしたくないからです。ところがどうでしょう。再現するためには小文字になっているところを大文字に変える必要がでてきます。コーダーはコピペしているので安心しきって次の作業に移ってしまいました。そのままthis is textは小文字のまま公開されてしまいました・・・。あとでそれに気づいたADがコーダーを怒っています。コーダーのせい・・？いやデザイナーの責任です。文字のスタイルにはこのような地雷を埋め込む結果になるのでサイズ、行間、文字間色のみいじりましょう。長体などを用いる場合はコーダーと相談した方が良さげだと思います。くれぐれも地雷をPSDに埋めないようにしてあげてください。