独学でウェブデザインを勉強しているあなた！ちょっと待ってください！
webデザインを制作するときの基礎、ちゃんと知っていますか？
やみくもにデザインを制作しても、現場で通用しない制作の仕方では、後々働いたとき非常に苦労してしまいます！
そんなことになる前に、しっかり基本をおさえておけば、いざ現場に出た時に役立ちますので、おさらいしていきましょう！
目次
webデザイン制作の基本
カラーモードはRGB
web、インターネットを閲覧するためのディスプレイなどのカラーモードはRGBです。
印刷物で使われるCMYKではありませんので注意しましょう！
念のためRGBとCMYKをおさらいしておきます。
RGBとは
RGBとは、R＝レッド、G＝グリーン、B＝ブルーの略です。
この3つの原色を混ぜて多様な色を再現する加法混合・加法混色です。
加法混合・加法混色は、色を混ぜれば混ぜるほど明るい色（白）になります。
CMYKとは
CMYKは、C＝シアン、M＝マゼンタ、Y＝イエロー、K＝キープレート（黒）のことを指します。
RGBと違い、混ぜれば混ぜるほど暗い色になり、減法混合・減法混色と言います。
色の再現の幅に違いがありますので、後からRGBへ変換する、などはやめましょう。
photoshopでのカラーモード設定方法
photoshopでカラーモードをRGBに設定する方法は2通りあります。
1.新規アートボードの作成時にカラーモードを「RGBカラー」に設定する。
2.「イメージ」→「モード」→「RGBカラー」で設定する。
フォントサイズは14px以上に設定
webサイトのフォントサイズは基本的に14px以上にしましょう。
例外として、13pxもデザインによっては良いのですが、それ以上小さいフォントサイズになると文字が読みづらくなってしまいます。
基本的に本文のフォントサイズは14pxから16pxの間でデザインしましょう。
この本文のフォントサイズの振り幅に関しては、
お年寄り向けのwebサイトだったら、本文のフォントサイズは見やすいように大きめの16pxに設定し、
若者向けなら14pxでデザインする、などのように使い分けてください。
例えば、若者向けのwebサイトで、スマホを見るのに慣れている人がターゲットであるから。とか、
部分的に13pxのフォントにするのであれば、本文よりは重要でない情報に使用する。などです。
フォントは極力webで再現できるものを使用する
web・インターネット上でフォントを文字情報として認識させるには、フォントの種類に限りがあります。
すべてのフォントファミリーをweb上で表示することは出来ません。
そんなときよく使われているwebフォントは非常に便利です。
webフォントはご存知でしょうか。webフォントは、web上で再現できるフォントファミリーです。
webフォントについて詳しく記載している、こちらの記事もご覧ください↓
文字を画像として配置することが悪いことではありません。
しかし、全ての文字を画像として読み込んでしまうと、画像の容量が重くなり、webサイトを読み込む速度が遅くなって表示されるのに時間がかかってしまいます。
表示される速度が3秒以上かかると、人間はそのwebサイトから離脱する確率が高いことが研究でも分かっているので、webにおいて表示速度は重要です。
みなさんもサイトが表示されなくて離脱した経験があるかと思います。
また、文字を画像にしてしまうとweb上で「文字情報である」という認識がされなくなってしまいます。
目の見えない人がwebサイトを閲覧するときは、文字を音声として読み上げるソフトを使用するのですが、そのときに文字が画像として配置されているとどうなるでしょうか。
文字情報としてでなく、「画像」として文字が読まれますよね。
そもそも画像が見れない状況になったとき、何も表示されない問題も生じます。
だから、フォントファミリーはweb上で表示できるものを使用しましょう！
フォントの種類は1〜4つに絞る
フォントの種類を多用すると、デザインにまとまりがなくなってしまいます。
出来るだけ使うフォントは絞りましょう。
様々なwebサイトを見てもわかると思いますが、基本的に使用されているフォントの種類は1〜3、多くて4つです。
参考サイトも載せておくので、見てみてください。
フォントの種類を絞ることで、デザインにもまとまりが出ます！
色は1〜4つに絞る
フォントだけでなく、使用する色も1〜4つに絞りましょう。
4つのカラーを決めるとするならばベースカラー、サブカラー、メインカラー、アクセントカラーです。
ベースカラー、メインカラー、アクセントカラーの3つを決めるwebデザインが多い傾向にあります。
ベースカラーは70%、メインカラーは25%、アクセントカラーは5%の割合にすると美しい配色になります。
配色決定に便利なwebサイト
配色を決めるのに便利なサイトがあります。
自動で合うカラーを検出してくれたり、イメージにあった配色が用意されています。
デザイナーによく使われているサイトを2つ紹介します。
Adobe Color
こちらはAdobeが提供しているカラーホイールです。
任意で色を設定することも出来ますし、類似色やトライアドなどで設定すると自動でそれにあったカラーを生成してくれます。
Colorhunt（カラーハント）
カラーハントは、たくさんの配色があらかじめ用意されているサイトです。
イメージから配色を検索することも出来ます。非常に配色が美しいものばかりなので、そのままデザインに使っても良いですし、少しアレンジするなどして活用してもいいですね。
ボタンの大きさは縦36px、横64px以上
webサイトにおいて、ボタンは非常に重要なパーツです。
ボタンというのは、「ログイン」や「購入」などが該当します。
みなさんの身近な例で、amazonや楽天市場で使用されているボタンを見てみましょう。
どちらのサイトでも縦幅は36px以上に設定してあります。
また、横幅いっぱいにボタンが設置されているため、非常に押しやすいですよね。
そもそも、なぜ縦幅36px以上で横幅64px以上なのか。
これについては、googleのMaterial designで決められています。
参考URL：https://material.io/components/buttons#specs
ただ、実際ボタンを設計するときは、縦44pxが標準サイズになっています。
これは、様々な企業がボタンの押しやすさを追求した結果です。
ユーザー体験のテストを繰り返しおこなった結果とも言えます。
最初に見せたamazonや楽天市場で設置されているボタンを思い出してください。
縦44px〜45pxで設定されていますよね。
ECサイト（オンラインショップサイト）においての一番の達成目標は「購入してもらうこと」です。
購入してもらえないと利益が出ませんからね。
そんな中で「購入する」ボタンが重要だというのは言うまでもありません。
それが押しづらかったり、見づらかったり、分かりづらかったりしたらどうでしょうか。
ボタンの設計が悪いだけで、サイトから離脱したり、購入しようという気持ちが失せてしまう問題が発生してしまいます。
webデザインを作成するときは、ボタンのサイズに気をつけましょう！
画像の画質・形式・容量
webサイトで画像が使われてないサイトってほとんどありませんよね。
ただ、画像を扱うときに注意すべきことがあります。
それが画像の画質・形式・容量です。
画質の良い画像を使う
まず、画像の画質についてです。
パソコンやスマートフォンなど、近年非常に画質が良い媒体が多いです。
そんな中で、画質が悪い画像をwebサイトに表示させるのは、良くありません。
なぜかというと、画質が悪いだけで、見栄えが悪いから。
例えば、飲食業のwebサイトだったら、料理の写真って美味しさや雰囲気を伝えるためには非常に重要な要素ですよね。
その写真が、画質が悪かったら、いくら本当の料理が美味しくてもその良さが最大限に伝わりません。
そして、画質が悪い画像を使うと、webデザイン・webサイトの質が下がるのも言うまでもありませんよね。
webサイトの見栄えは、その会社のイメージに置き換えられます。
「更新していないのかな」とか「信頼できない」などユーザーを不安な気持ちにさせる原因の一つにもなります。
だから、画質が良い画像を使ってwebデザインを制作するよう心がけましょう。
画像の形式・容量に気をつける
画像形式で良く使われるのは、大まかに分けて4つあります。
- jpg
- png
- svg
- gif
画像を適切な形式で保存しましょう。
そうすることで、画像の容量、およびwebサイトの表示速度にも影響してきます。
それぞれの形式についておさらいしておきましょう。
jpgとは
メリット
人間の肉眼で見えない情報をカットしているため、ファイルサイズが小さくでき、かつ写真が綺麗に表現できる。
また、フルカラー1670万色まで扱うことができるた、グラデーションなどの表現も可能。
デメリット
透明な部分を透過したまま保存することができない。
非可逆圧縮のため、上書き保存をするたびに画質が落ちていく。
pngとは
メリット
透過した部分を表現できる。
jpgのように画像劣化の心配がなく、加工を施しても綺麗な画質を保つことができる。
デメリット
jpgファイルなどに比べてファイルサイズがやや大きい。
svgとは
メリット
ソースコードで表現できる。データ容量が小さい。透過した部分を表現できる。
ベクターデータ形式のため、拡大・縮小しても画質が損なわれない。
ロゴやアイコンなどシンプルな形状に適している。
デメリット
複雑な表現・写真などは表現が難しく、逆にデータ量が膨大になるため不向き。
ベクターデータとは「画像を、点の座標とそれを結ぶ線（ベクター、ベクトル）などの数値データをもとにして演算によって再現する方式」であり、このデータ形式で作られた画像は「拡大・縮小しても画質が損なわれない」といった特徴を持っています。
なので、このベクターデータで作られた画像でwebを作ることができれば、スマホやタブレットや高解像度ＰＣと言ったRETINAディスプレイを採用している画像でもキレイな画質で表示することができるのです。
また、前述したとおりベクターデータという「数値データをもとにして演算された画像」なのでCSSやJavaScriptのアニメーションととても相性が良く、動きやぼかしなどのエフェクトを加える事も可能で、web上のアニメーション表現に幅広い選択肢をあたえてくれます。
参考：今こそ取り組むSVGとは｜｜株式会社オプティマイザー
gifとは
メリット
データ容量が小さい。
色数が少ないロゴやイラストに適している。
透明な部分を透過したまま表現することができる。
デメリット
256色しか表現できないため、写真など、多くの色が使われている画像は表現することが難しい。
結局どの形式で保存すればいいか迷った時は、
- jpgは通常の画像に使用する。
- pngは透明を表現したい写真や画像に使用する。
- アイコンなど単純なイラストにはsvgもしくはpng、gifを使用する。
上記の形式で画像を保存してください。最初は大まかに使い分けましょう！
webデザインを制作する上で、SVG形式を活用するのは重要なポイントになります。
svg形式は上記でも記載した通り、ソースコードとしてHTMLに挿入することができ、CSSで操ることが出来るので非常に便利です。
今回はwebデザインの基礎ということで、SVGをソースコードとして表示させる方法は割愛しますが、そういったものがあることは覚えておきましょう！
レスポンシブ対応
レスポンシブ ウェブデザイン: ユーザーのデバイスの種類（パソコン、タブレット、モバイル、非視覚的ブラウザ）に関係なく、同じ URL で同じ HTML コードを配信しつつ、画面サイズに応じてレンダリング方法を変更します。
参考：Google モバイル設定を選択する
webデザイン制作はパソコン版だけデザインすれば良いわけではありません。
スマートフォンが普及した影響で、webサイトを閲覧するとき、ほとんどの人がスマートフォンから閲覧しています。
そのため、最低でもパソコン版とスマートフォン版（現場ではPC版・SP版と言ったりします）のデザインを作成する必要があります。
それだけでなく、ウィンドウ幅の可変に対応できるデザインを制作しないと、コーディングした際に非常に手間がかかったり、結局再現できないデザインだった、なんてことになりかねません。
ユーザーは様々なデバイスで、様々なウィンドウの幅で、ウェブサイトを閲覧しています。
例えPC版を横1400pxでデザインしたとしても、ユーザーによって見るサイズが変わることを念頭においてウェブデザインを制作しましょう。
スマートフォン版（SP版）のデザインは2倍の大きさで作成する
機種やバーションにもよりますが、webデザイン制作で基準としているSP版の横幅は375pxです。
理由としては、今現在このサイズが一番普及しているからです。
しかし、SP版デザインを作成するときの注意点として、photoshopで横幅375pxのアートボードを作成することはありません。
通常、この2倍の大きさの横幅750pxでSP版をデザインします。
理由として、Retina対応が挙げられます。
Retinaディスプレイ（レティナディスプレイ、レティーナディスプレイ、英: Retina Display）は、アップル製品のうち、100〜160ppi程度であった従来のディスプレイ解像度の、およそ倍の解像度、高画素密度のディスプレイを指す名称である。「Retina」（レティナ）は英語で「網膜」という意味で、画素が細かく人間の目で識別できる限界を超えている[1]、ということから命名された。
参考：Wikipedia｜Retinaディスプレイ
ディスプレイで表示される画像などは小さな点が集まって表示されておりこの最小単位をドットといいますが、この物理的な最小単位であるドットに対して色情報をもった最小単位をピクセルといいます。
参考：Retinaディスプレイって何？普通のディスプレイとどこが違うの？
簡単に説明すると、「1ドット＝1×1」で表現していたものを「1ドット=2×2」で表現し、より画像を綺麗に表現できるようになったのがRetinaディスプレイです。
この影響で、デザインも2倍のサイズで制作しないと、写真の画質が劣化して見えてしまう問題が発生します。
この記事の上部の方でも説明しましたが、画質が悪いとサイトの質にも影響します。
つまり、コーディングの段階で、画像を書き出すときに2倍のサイズで制作しておかないと後々手間がかかるために、横幅375pxではなく横幅750pxでデザインするのです。
他にも注意点として、2倍でデザイン制作するということは、文字や行間、ボタンの大きさなども全て2倍にしてデザインしなくてはなりません。
例えば、本文の文字サイズは通常14px程度ですので、SP版だと28pxでデザインします。
PC版のデザインの大きさを基準として、全ての要素を2倍で制作すると手っ取り早いです。
※要素のサイズは2で割りきれる数字を指定してください。そうしないとコーディングする際に困ることになります。
レイヤーの構成を整えて納品する
photoshopなどにはレイヤーという仕組みがありますよね。
自分だけでwebデザインして、コーディングするなら、レイヤーがまとまっていなくても、何かどうなっているか把握できます。
しかし、業務の中ではwebデザイナーがデザインをフロントエンドの方に渡す場合が多く、デザインする人とコーディングする人は別になります。
その際に、レイヤーがまとまっていなかったらどうでしょうか。
どの要素がどこにあるか、非常に分かりづらいのは言うまでもありません。
ヘッダー、フッダー、セクション（コンテンツ）ごとにフォルダを作成し、レイヤーを分かりやすくするのは、最低限のマナーです。
例として下記画像を参考にレイヤーをまとめましょう。
このとき、文字化けの可能性を考え、極力命名はローマ字表記にしましょう。
まとめ
ここまで、webデザイン制作の基礎をご紹介してきました。
独学で勉強していると、自分で情報を得ないといけないので、知らないことがたくさん生まれてしまいますよね。
そもそも知らないから調べることも出来ない、なんてことも私も経験しました。
そういった方に少しでも役立つ情報があったら幸いです。
基礎をしっかりおさえて、現場に出た時にも活躍できるwebデザイナーを目指しましょう！
