Webデザイナーに必要なデザインスキル

Webデザイナーとして仕事をするにはまずデザインについての知識が最低限必要になります。
そして、デザインツールを使いこなすスキルや最低限のWebの知識も求められます。
Webの知識があればそれだけデザインの幅も広がっていきますし、ディレクターやクライアント様との打ち合わせもスムーズになります。

デザインについての知識

フォント（書体）

まずはフォント（書体）です。

フォントには大きく分けてサンセリフとセリフがあります。

まずはサンセリフ体を見ていきましょう。

日本語ではゴシック体がほとんど同じような形の書体になります。
サンセリフは太く迫力のある表現に向いているので、見出し等の認識性が必要な場合によく使われています。

では、次にセリフ体を見ていきましょう。

こちらは日本語で、明朝体がほとんど同じような書体になります。
セリフは曲線や太い細いのメリハリがあるので、形の美しさやシャープさを重視させたい場合によく使われています。

フォントを選ぶときは、このような書体の特徴を踏まえた上でデザインに合わせていくと良いでしょう。

次に、フォントの種類は多くしすぎないことも重要です。
フォントの種類が多すぎると統一感が無くばらばらな印象を与えてしまいかねないからです。

基本的には１～２種類くらいにしておきましょう。

レイアウト（配置）

デザインの中では、レイアウトも非常に重要な要素です。
同じ内容でもレイアウトが変わるだけで印象がガラッと変わるものです。

レイアウトの基本は揃えることです。

揃えることで見ている人の目線をスムーズに誘導でき混乱させることがなくなります。
そして、全体のバランスが整い非常に見やすい印象を与えてくれます。

そして、もう一つ重要な要素として余白の使い方があります。

余白の使い方で全体のバランスや見易さが変わってきます。
余白を上手く使えば伝えたい事や見せたい箇所を強調させる効果も得ることができるので、なんとなくではなく余白についてもよく考えましょう。

カラー（配色）

次にカラーについてです。

カラーは全体のイメージに関わるとても重要な要素です、カラー選びひとつで相手に与える印象は良くも悪くもガラッと変わります。

まずは色の種類をベースカラー・メインカラー・アクセントカラーの３つくらいに絞って選定することをおすすめします。

そして、それぞれの配色比率ですが、ベースカラーなら全体の70%程度。
メインカラーで20%～25%程度、アクセントカラーで5%程度を目安に使いましょう。

カラーの選定の際、色のトーンも意識しましょう。
同じ色でもパステルカラーのような柔らかい色もあればビビットカラーのように強い色もあるので、自分のイメージに合わせたトーンのカラーを選びましょう。

レスポンシブWEBデザイン

レスポンシブWEBデザインとは、1つのHTMLをCSSのブレイクポイントを使って制御し、ユーザーが閲覧しているデバイスの画面サイズに応じてWebページのレイアウトやデザインを変更・最適化して表示させる技術です。
モバイルファーストのこの時代においてレスポンシブWEBデザインは必須スキルと言えるでしょう。

デザインツールを使いこなすスキル

Webデザイナーには、上記にあるデザインに関する基礎知識だけでなく、実際にイラストや画像の編集・加工等の作業をしていく事になるのでデザインツールを使いこなすスキルが必要になります。

Photoshopとは？

PhotoshopとはAdobe社によって提供されている画像編集ソフトです。

Photoshopでは写真の加工や合成、グラフィック作成など色々なことができます。
因みにPhotoshopは点の集合体でできた「ビットマップ」データを扱います。

画像を美しく鮮明に加工できますし、レイヤーを使用して作成できるので手直しが必要になっても修正が必要なレイヤーだけを編集し素早く手直しが可能です。

また、画像を複数に分割できる「スライス」機能を使用して、好きな範囲でデザインを切り出し画像ファイルとして保存、Webデザインのデザインカンプ（モックアップ）から必要なパーツを切り出すこともできます。

Illustratorとは？

IllustratorもAdobe社によって提供されているグラフィックデザインツールです。

Illustratorは「ベクター」データを扱います。
Photoshopの「ビットマップ」データとは違い、画像を拡大・縮小しても画質が劣化しないのが大きな特徴です。

ロゴの作成や図形、イラストなどの制作に向いています。
一般的に紙媒体の制作物に向いているので、Photoshopとの違いをよく理解して使い分けるようにしましょう。

例えば、画像を加工したり切り抜きしたりする時はPhotoshop、レイアウトはIllustratorで行うといった感じです。

XDとは？

XDとは、 Adobe社によって提供されているモバイルサイトやアプリのUIデザイン、プロトタイプの制作を行うUXデザインツールです。

XDでは、ブラウザを介してデザインを確認共有できることや、簡単なアニメーションも実装できる為、クライアントにデザインを提案する際に、よりWebサイトの完成をイメージしてもらいやすいというメリットがあります。

もともとWEBデザインといえばPhotoshopやIllustrator等が主流でしたが、現在ではXDが主流になっています。
PhotoshopやIllustratorよりも操作が簡単で、便利な機能もたくさんあるのでぜひXDを使ってみてください。