これからWebデザインの勉強をしようと考えている方にとって、Webデザインは覚えることや知っておくべきことがたくさんあります。その中でも今回は、特に知っていないと完全アウトな超基本ルールを複数回に分けて書いてみようと思います！

「デザインする」ことは同じですが、グラフィックとWebでは作る概念が全く違うので、そのあたりのことを段階的に執筆することで、Webデザインへの理解を深めていただこうと考えています！

本記事は約10分で読めますので、最後までお付き合いいただければ幸いです。

そもそもWebデザインとは？陥りやすい間違いとは？ 

Webデザインとは

1.デジタル機器で表示されるもののデザインやレイアウトを設計すること
2.ユーザーの行動心理を考え、適切な動線や行動喚起を促すデザインを設計すること（UI）
3.HTML・CSS・JSなどのフロントエンドまでを担うことも主流になりつつある

見た目の良さに加えて「公開した後の使われ方」を想定するのがWebデザインです。
「作ること」をゴールにしていると、絶対と言っていいほど良いWebサイトにはなりませんので、このことは常に意識しておいてほしいと思います。

グラフィックデザインとの大きな違い（レスポンシブの考え）

Webサイトやランディングページは、パソコンやスマホなどで表示されるため、様々な端末の画面幅に合わせたレイアウトを考えなければいけません。
これを考えることがグラフィックデザインと決定的に違うところであり、格段に難易度が上がる部分です。
（レスポンシブウェブデザイン）

Webデザインをするなら知ってて当たり前のレスポンシブですが、それ以前に知っておかなければいけない基礎知識が多くあるので、今回はレスポンシブは深堀せず、まずは基礎知識からお話しします。
※レスポンシブの仕組みやボックスレイアウト等のデザイン手法については改めてご紹介します。

初心者Webデザイナーが陥りやすいコーダー泣かせなデータの作り方

基本ルールを説明する前に、よくある困ったデータの作り方を紹介します。
これらはWebデザイン初心者が陥りやすい残念な例です。

• カラーモードがCMYK
• 単位がmm、サイズが適当（目視感覚・サイズがバラバラ・サイズに端数になっているetc…）
• 乗算やスクリーンなどのアピアランス効果を使う
• PCとSPでデザインが違う（レスポンシブになっていない）
• コンテンツ幅が不均衡
• Illustratorに依存した特殊フォントを使う・画像文字を多用する
• 字詰め・長体・平体を使用
• ルール性のない改行位置

↓↓↓では、これらを踏まえて具体的にお話ししていきます。↓↓↓

 

超基本1：色指定は必ずRGBに設定すること。

Webデザインはどんな時も必ずRGBの色指定を。

『CMYK：×』『RGB：〇』

ポスターやチラシ等の広告媒体の制作を行う現場でグラフィックデザインに携わっていると、当たり前のようにIllustratorの色指定がCMYKに設定されています。ですが、そのような中で、Web用バナーやランディングページなど、RGBデータでの納品も合わせて制作する機会が増えています。

Webをメインにしているデザイナーであれば当たり前のことですが、「RGBは絶対ダメ」と教えられてきたグラフィックデザイナーにとっては違和感があるかもしれませんね。

ですが、制作するときに「印刷されるもの」と「モニターに映し出されるもの」との切り分けをしっかりと把握さえできれば難しいことではありませんので、Webデザインの超基本ルールとして必ず覚えておいてください！

なぜCMYKはダメなのか？

極論、CYMKで制作していてもWebサイトやランディングページは制作できます！が、問題はデータをRGBに変換することで起きる「色の変化」です。

CMYKをRGBに変換すると、通常のRGBに比べ、くすんだ色になり、サイト全体の仕上がりにも大きく影響します。デザインを構成する中でも色の持つ重要性は極めて大きく、非常に大切な部分ですのでRGBで制作することへの意識は常に持っておいほしいですね。

Illustratorの環境設定やドキュメント制作時の設定方法は下記のセクションで説明しています。

 

超基本2：単位は必ずPixel（ピクセル）に設定すること。

Webの最小単位は「1px（ピクセル）」

グラフィックデザインを制作するときの単位はmm（ミリメートル）が標準ですが、Webデザインの単位はPixel（ピクセル）です。
デジタル機器の表示面における最小単位が1ピクセルなので、ピクセル以外を使うことはありません。

さすがにWebデザインをミリメートルで制作されることはありませんが、グラフィックデザインと違う点なので頭の中に入れておいてください。

Pixel（ピクセル）は必ず整数になるよう座標と寸法を調整

前述したように最小単位が1pxなので、それ以下の数値（小数点）は存在しません。
ですが、IllustratorではWebデザイン用の設定をしておかないと小数点のあるオブジェクトが作れてしまうので、デザインを作成する前にIllustratorの環境設定をしっかりとしておくことが大切です。

Illustratorでの環境設定は後ほど説明するとして、まずは、なぜピクセルを整数にしなければいけないのかを説明します。

■整数にする理由1：画像に謎の白線がついてしまうのはこれが原因

デザイナーからアップされたデータ（Illustrator）から画像を書き出すと上下左右のどこかに白線が発生する。なんてことが非常に多くあります。涙
背景が白色なら判別できませんが、上の写真のように色がついている背景であれば目立ってしまい、ページそのものの品質は劇的に下がってしまいます。

これは、画像を切り抜くときのクリッピングマスクのサイズが整数になっていないことが原因です。

…自分のサイトがこんな画像になっていると悲惨ですね。。私ならクレーム入れてしまいそうです。苦笑

クリッピングマスクをするしないに関係なく、デザインデータ上の画像サイズが整数になっていないと、このような無様な画像になってしまいますので、Webデザインを行う際には特に注意しておく必要があります。

---

■整数にする理由2：オブジェクトの輪郭がボケるのもこれが原因

ほとんどのオブジェクトがソース内で指定するので、ピクセルに端数が出ることはありませんが、画像として書き出す必要があるオブジェクトに関しては、上記の様に輪郭がボケてしまうことが多くあります。
これは、座標位置、もしくはオブジェクトサイズのどちらか、もしくはその両方に小数点以下の端数が含まれているからです。

・【1】オブジェクトの座標位置・サイズとも整数→輪郭がボケない
・【2】オブジェクトの座標位置は整数・サイズは端数→輪郭がボケる
・【3】オブジェクトの座標位置が端数・サイズは整数→輪郭がボケる

些細なことのように感じますが、仕上がりの品質は全く異なりますので、必ず守るべき項目です。

オブジェクトの線も同様に下記の様になります。

・（写真左）「線幅」が整数で、且つ「線の位置」が内側か外側の場合：きれいな線
・（写真中）「線幅」は整数だが「線の位置」が中心になっている場合：ボケた線
・（写真右）「線幅」が小数点以下の端数の場合、「線の位置」が内側でも外側でも：ボケた線

ただ、ここで注意が必要なのは、「線の位置」が中心でも「線幅」が偶数の場合はきれいな線になるということです。

「線の位置」が中心ということは、線幅の半分がその中心を基準として左右対称（上下対称）に描かれるため、1pxの線であれば、中心を基準に左右（上下）に0.5pxの線が描かれます。
これだと小数点以下の端数になるので線はボケてしまいます。

線幅が4pxの場合だと、中心を基準に左右（上下）に2pxずつの線が描かれるので、整数となり線がきれいになります。

少し難しい話ですが、グラフィックデザインでは線幅を気にするくらいかなと思いますが、Webデザインで品質を維持するためには、細かなピクセルにこだわって制作していく必要があります。

超基本3：WebデザインをするときのIllustratorの環境設定方法

作業画面内の環境を整える（Illustrator CCの場合）

1.ドキュメントのカラーモード：RGBカラー
2.スウォッチ：スウォッチライブラリのWebを使用
3.ピクセルにスナップ：オン
4.ピクセルプレビュー：オン（オンの状態で画面拡大率を100%にすると実寸表示）
5.ワークスペース管理：Web用を作成しておくと便利
6.ピクセルにスナップ：オン（3.と同様）
7.アートボードオプション：媒体サイズを整数で指定

新規作成時の設定方法

8.ドキュメントカテゴリ：Web用
9.単位：ピクセル
10.詳細オプション：上から、RGBカラー／スクリーン（72dpi）／指定なし

Illustrator CC 2017以降、印刷やWeb等のカテゴリを選べるようになっていますので、ここを選択すれば問題なく設定されます。

環境設定画面内の設定方法

11.［一般］＞キー入力：1px
12.［単位］＞一般・線・文字：ピクセル
13.［ガイド・グリッド］：グリッド 10px・分割数10

 

作業画面内・新規作成時・環境設定それぞれの設定方法を記載しました。
設定箇所が多くあるように感じたかもしれませんが、上記設定をしていれば、よほどのことがない限りはWebデザインに適した環境になっています。
その他の設定は、お好みやこだわりに合わせて選んでもらえれば大丈夫です。

まとめ・さいごに

今回は「Webデザインの超基本ルール1｜Webデザインを行うなら最低限これは知っておくべき」の「色指定」「単位」「環境設定」についてのお話しでした。

タイトル通り基本的なことばかりでしたが、
そのなかでも「ピクセルの扱い方」は知っておかないと、いろんな方面から差し戻しのクレームがでる可能性がありますので、とくに重要でしたね。

Webデザインの超基本ルール2以降では、

• フォントに関する超基本ルール
• サイズの概念を理解する
• レスポンシブデザインの仕組みを理解したデザイン構成を考える
• 動線をしっかりと考えたデザイン構成にする

を順次執筆していこうと思いますので、参考にしていただければと思います！