数年前くらいから、印刷会社やDTP系のフリーランスの方がこぞってWeb制作に参入しはじめるようになり、かくいう自分もそのうちの一人なわけですが、今でも徐々に制作の幅を広げ、印刷、Web制作どちらもするという人が増えているように思えるのが実感としてあります。

その逆も然り。Web制作専門の方が印刷物作成の方も仕事を取っているケースも多く見られます。

が、印刷とWebは制作手法の初期段階は結構似ているように見えるものでして、特に素人目からすればどちらも同じことをしているようにも見えがちなのですが、実際のところは結構違いがあり、その差に戸惑うことも多いものです。

と、いうわけで、今回は「DTP専門からWeb専門に転向した」私が、「これからWeb制作にも携わりたいDTP専門の方」向けの「Webデザイン制作の注意点」をメモ的に残しておきたいと思います。

また機会があれば「DTP専門からWeb専門に転向した」私が、「Web専門なのにDTPをすることになってしまったの際の注意点」とか書けたらいいなぁとか。

制作ファイルはRGBで

基本中の基本から。

DTP出身の方は特に初期はデザインを組む際にIllustratorを使うことが多いと思われますが、よくあるのが「制作データがCMYKのまま」ということです。

CMYKでもモニタ上で見る分にはRGBで再現されるので、表示エラーが出ると言ったことはありませんが、CMYKデータをRGBの数字で再現する際、どうしても色がくすんでしまいます。

そのため、想定よりも全体的に地味になりがちな場合が多く、それを指摘されるケースも少なくありませんので、IllustratorでWebデザインを構築する場合は必ず「RGBモード」で作るようにしたいところです。

最新版のIllustratorであれば、最初から新規ファイルの設定で「Web」というものがありますので、そちらを選択しておけば、わざわざカラーモードを変える必要はありません。

スウォッチを使わずに自分で色を作る場合は、カラースライダーの部分がCMYKになっていることが多いので、ここはRGBにしておきましょう。

画像はRGBで解像度は72

印刷物だと写真などの画像は解像度300〜350に設定することが多いですが、高解像度であってもモニタでは再現できないので、72にしておきましょう。

よくあるのが、印刷物のデータをそのままWeb用データに持っていくため、Webデザイン用のIllustratorデータに解像度350のCMYK画像を拡大縮小して貼り付けてしまうケースです。

これをすると、ファイルサイズが肥大化してしまうことや、最終的に画像解像度をあとから修正し直すことになりかねないので、あらかじめ調整しておく方が後が楽です。

解像度も大事ですが、画像サイズも合わせておきましょう。Webだと、拡大縮小表示させると画像が荒れる場合があります。

画像マスクは切らず、面倒でもPhotoshopなどの編集ソフトでサイズを揃えておく

制作途中なら特に問題ないのですが、Webデザインとして完成し、HTML、CSSコーディングを始める前には画像をちゃんとWeb用サイズに調整しておきたいところです。

特に多いのが、Illustrator上でクリッピングマスクを使ってトリミングしているケースです。

カンプの見た目上は特に問題ないのですが、後から画像を切り出して保存しようとした際、トリミング外の部分まで保存されてしまい、結局後からPhotoshopなどで不要部分を切り直すと言う手間が発生してしまうので、あらかじめ画像サイズはWebで表示させるサイズに合わせておく方が便利です。

どうしてもクリッピングマスクでトリミングする必要がある場合はスライス機能を使うようにしましょう。

Illustratorの単位、小数点

印刷物の場合は問題ありませんが、Webの場合、基本的に使われる単位は「ピクセル（px）」です。

Illustratorを使い慣れていると、pt計算やmm計算、級数計算でオブジェクトの大きさや文字の大きさを指定することが多いですが、Webの場合はpxに統一しておかないと、後々面倒なことになります。
確かにptなどでもそれに合わせて表示はされますが、今のWebのスタンダードな単位はpxですので、それに倣っておくべきでしょう。

また、Webで最初に覚えておいた方がいい単位は「px」「em」「%」です。他にもいくつかありますが、まずはこの3つを理解しておきましょう。

次に「小数点」ですが、illustratorはベクターデータを基本としているため、サイズに小数点が出るのは当たり前くらいの感覚ですが、Webの場合だと、この小数点は基本的にカウントできません。
一部例外はありますが、基本的には小数点はナシで考えましょう。

Illustrator上の各オブジェクト情報を確認しながら、小数点なしの整数で作るようにしましょう。
ちなみに、小数点が出ている場合はどうなるかと言うと、小数点は全て繰上げになり、オブジェクトサイズが1px増加します。さらに、その部分は増加部分がボケる場合があります。

デバイスフォントに写植用書体を使わない

「デバイスフォント」というのは、パソコンやモバイル機器、スマートフォンの中にあらかじめ入っている基本書体のことです。

DTPだと様々な日本語フォントがあり、特にモリサワが有名ですが、こちらの書体はWebの通常フォントでは使えません（モリサワパスポートがあれば、条件付きで使えますが、自社サイトならともかく、納品では使わない方がいいでしょう）。

ここは中ゴシックBBBで、見出しは新ゴで　と指定したくなる気持ちも沸きがちですが、Webで使えるフォントはお客様のパソコンに依存するため、Windowsであればメイリオや游ゴシック、游明朝、Macであればヒラギノ標準書体で作るようにしましょう。

どうしても使いたい場合は見出し文字を画像化する必要がありますが、それはそれで注意点がありますので、そちらに関しては後述します。

最近ではWebフォントとして、Googleなどが手軽に使える様々なWeb用に使える書体を用意していますが、欧文がほとんどであること、やはり日本語がかなり限られていますので、使う場合はどのような書体があるか、あらかじめ吟味しておくことが、デザインと実際のWebデータとの差をなくすために重要となります。

フォントサイズは最小8〜10pxまで

特に写真などのキャプションに使われるたり、注意書きで小さな文字を使うこともよくありますが、一般的なWebブラウザの場合、小さく指定しても、8〜10pxよりフォントサイズが小さくならないことがあります。

フォントサイズ16px指定
フォントサイズ12px指定
フォントサイズ10px指定
フォントサイズ8px指定←この辺りからブラウザによって変わります。
フォントサイズ6px指定
フォントサイズ4px指定

ブラウザによって最小フォントサイズが違う場合がありますが、なんにせよ、文字サイズが小さいのは識別しづらいので、可能なら小さな文字でも12px程度。最小でも10pxにしておきましょう。

ジャスティファイはできるだけ使わない

通常の流し込み文章などであれば再現は難しくありませんが、特定の条件下のみ、一気に調整の難易度が上がってしまうものがあるので注意が必要です。

特に多いのが、表組みされた見出し部分をジャスティファイしているものです。
やろうと思えば今のWeb環境ではできなくもないですが、まだ完璧とは言い切れない、揃えるための条件を合わせなければならない、Webブラウザによっては再現されないものもあります。

また、工数が多くなりがちで、この部分のためだけに時間を取られるわけにもいかないことが結構あるため、見た目のこと考えると揃えたい気持ちも重々承知ですが、無理に揃えるような指定はしない方がいいかもしれません。
（これDTP出身のデザイナーの方に本当に多いんですよ…）

「Webで再現できるか」を意識する

DTPのデザインは割とフリーダムで、様々なオブジェクトを自由に配置できるため、Web側から見ると、かなり自由なデザインができあがる場合が多いです。

それ自体は悪いことではなく、近年のWebデザインはトレンドが固まっており、それを踏襲したデザインが量産されているため、よくよく見てみると、結構似たような構成をしている場合が多いです。

それらとはまた違うデザインを提案できる発想力というのは今でもDTPの方が得手だと思っているところですが、問題として、自由すぎてWebでは再現できない場合もあるということは注意しておいた方がいいでしょう。

いや、無理やり頑張れば大体のことは再現できなくもないのですが、かなりのコーディング知識が求められますので、自身でWeb上で再現できそうにない手法は避けておく方が無難かもしれません。

特に、Webに精通していないという場合であれば

• 文字や正方形の画像を斜めに配置する（Webでは画像は原則として四角でしか再現できないため、斜めにした部分の空白箇所も画像内に含まれます）
• 原則文字詰はできない（「letter-spacing」を使って文章全体を詰める、空けるなどは簡単にできますが、写植のように1文字単位での文字詰はかなり面倒です。）
• チェックボックスやセレクトボックスのデザインはブラウザによって見た目の再現が難しいので、できるだけ基本状態のままにする（頑張ればデザイン通りにはできますが、結構知識が求められます）

あたりは、HTMLやCSSでの再現方法がわからないのであれば、素直に基本配置を心がけておく方がいいでしょう。

これからの時代的に、スマートフォンでの見た目も考えておく

パソコン用、スマートフォン用で完全にデザインを切り分けて作るのも一つの方法ですが、ここ最近では「レスポンシブ」として、パソコン版のHTMLをそのまま使ってスマートフォン用に最適化することの方が多いです。
そのため、パソコンでは綺麗に見えても、スマートフォンではモニタサイズの制限から、「横並びのものは縦並びに落としていく」という手法が多く、また、画像もモニタサイズに合わせて小さくなります。

特に多いのが、見出し文字にこだわるため、見出しは画像を使うケースが多いものですが、スマートフォンでは横幅が狭いため、10文字の見出し文字画像と5文字の見出し文字画像とではサイズが変わってしまう可能性があります。

もしくは、見出しはデバイスフォントだが、できれば1行で収めたいという場合も、見出し文字数が大きすぎると文字落ちが発生します。

さらに、スマートフォンには「縦向き」と「横向き」があります。最近ではスマホのモニタサイズが拡大傾向にあるので、横向きにした場合はパソコン版の表示でも問題ないことも多くなってきていますが、細かなデザインが入っている場合やタブレットでの見た目もこだわったり、様々なモニタサイズで違いを見せたい場合は、それだけデザインの精密度も難解になってきますので、パソコン版だけなんとかなればいい　というデザインも考えものです。



可能なら、アートアートボードのサイズを320pxにして、スマホでも問題なく再現できるかどうかを確認してみるといいでしょう。


パソコンでの見た目だと横並び。


スマートフォンだと縦並び。

デザインルールを決めておく

ありがちなのが、「ページごとに全然違うデザイン」だったりするのですが、Webの場合、共通パーツは使いまわすことが多いですし、基本的に同一テンプレートに原稿を流し込むのが主流となりつつあります。

トップページは最も個性が出るところですので、そちらはともかく、他ページAはこのデザインで。他ページBは全然違うデザインにしておくというのは非常に工数がかかることや、WordPressなどのようなCMSの場合であっても、かなり大変です。

手抜きをするというのではなく、意識的にページ物の印刷物にように、コンセプトに合わせたデザインテンプレートを考え、そのルールに合わせて統一感を出すデザインの方がWeb向きと考えるべきでしょう。

もちろんルール内であればページごとにデザインを変えるのは問題ありません。問題なのは全体のルールがなく、それぞれで全然違うパーツを用意し続けなければならないことです。

特にWebの場合「後から文言の修正・ページ追加」ができるメディアですので、以後も管理しやすくすることを考えると、フォーマットは整えておくべきでしょう。

Webデザインは制約が結構多い

DTPの場合、WYSIWYG環境なので、Illustratorの見た目をほぼ忠実に再現して出力してくれますが、Webの場合、デザインに対してコーディングを行い、ブラウザに出力する際に、ブラウザごとの制約や機能の違いなどから、必ずしも全てにおいて同じ見た目を再現できるとは限りません。

また、Webは印刷物と違い「どう見せるか」よりも「どう動かすか」の方に重点が置かれる傾向にありますので、見た目が良くてもどこをクリックすればいいかわからない、大事な情報がどこにあるかわからないといったようなデザインは避け、シンプルでもわかりやすいデザインを心がけることが大切です。

印刷物であれば、出力する紙や媒体によっての差があるように、Webの場合はパソコン、スマートフォンだけでなく、Internet Explorer、Edge、GoogleChrome、firefox、safariなどのブラウザでも同様の見え方、動作ができるように調整しなければならず、DTP慣れしているとものすごくめんどくささを感じがちなところも多いかと思います。

最後に、ほとんどがIllustratorネタになってしまいましたが、要するにDTPではできた自由配置がWebではそうはいかないよってことで、Web制作における制約的なものがある程度理解できれば、デザインもしやすくなるのではないかなぁと思う次第です。

というわけで、特に地方ではまだまだ印刷会社がWeb制作も担当しているケースが多く、Web専門の会社というのは少ないと思われますので、これからWebにも携わりたいというDTP出身の方がいましたら、何かの参考になれば幸いです。