WEBデザインの基礎知識を解説！

１、そもそもデザインってなんだろう？

スティーブ・ジョブズ

Design is not just what it looks like and feels like. Design is how it works.

『デザインとは単にどのように見えるか、どのようにに感じるかということではない。どう機能するかだ』

印象や機能をもって実用的に使われる『デザイン』と自己表現をメインとする『アート』は別物です。

幅広い年齢層の人たちに使われるサイトを目指すのであれば、ターゲットへのゴールを明確にしブランドイメージが伝わる機能性を持ったWebデザインを心掛けましょう。

Design（デザイン）とArt （アート）の違いを理解する

Webデザイン＝印象×機能

印象とは見た目を魅力的に伝え、印象に残せるようにすること

・色の組み合わせ（配色）

・写真加工

・タイポグラフィ（書体）

・飾りパーツの装飾

機能性とは情報を整理し、わかりやすく伝えること

・情報に優先度をつける

・情報をグループ化する

・情報をわかりやすく配置する

・視線の流れのルールを知る（視線誘導）

＜視線誘導について＞

視線誘導は、ユーザーの視線の流れを意図的にコントロールするために用いられる方法の一つです。

一般的にはZ型が多いですが、WebサイトではF型も多様されていますので簡単にご紹介します！

Z型

「Z型」は、ユーザーの視線が左上、右上、左下、右下の順番に「Z」の文字を描くように動くとする考え方です。
このラインにそって情報を配置することで、理想とする効果へスムーズにユーザーを導くことができます。

F型

「F型」は、左上から始まる点では他のパターンと同じ考え方ですが、左上から右上に視線を移動させ、左に視線を戻し下に向かって視線を移してから、再度右方向に読み進めるを繰り返していき、アルファベットの「F」を描くような順番で視線が動くとする考え方です。

商品説明のテキストが中心であるサイトや、文字の多いニュースサイトの多くがF型レイアウトになっており、テキストが多いページやコンテンツを読ませたいサイトに向いています。

２、Webデザイナーの役割

Webデザイナーは、クライアントがイメージするゴールを反映させたストーリーを作り、情報設計やデザイン、動きに落とし込んでターゲットとなるユーザーに発信します！

実際にサイトを使用するユーザーの視点となって客観的に捉えて制作をしていくことがとても大事になります。

〜一連の流れ〜

⇓　WEBデザイナー　

以下の情報を元に情報を整理して魅力的に見せ、使いやすくする

３、紙デザインとWEBデザインの違い

WEBサイト上のデザインをするWEBデザインに対し、主に紙媒体をメインとした印刷物のデザインをするDTPデザイン

 WEBデザイン

WEBデザインというのはその名の通り、パソコンやスマートフォン、タブレットなどで表示されるホームページ、ランディングページなどの構成やレイアウト、細かなデザインを作り形にする事を言います。

DTPデザイン

DTPとはDesktop Publishingの略で、パソコンでデザインデータを作り、それを実際の紙媒体に印刷し形にする事を言います。

現在ではデザイナーがいてパソコンがあれば、DMやチラシ、ポスター、パンフレットなど紙でできた広告物を作れるようになりました。

色の違いについて

WEBデザインではRGBの3色で表現をします。（RGBとはRed(赤)、Green(緑)、Blue(青)の3色の略称）

DTPデザインではCMYKの4色で表現します。（CMYKとはCyan(青系)、Magenta(赤系)、Yellow(黄)、Key plate(黒)の略称）

＜まとめ＞

WEBデザインは常にトレンドを知っておく必要があります！トレンドはハードやブラウザの進化に影響して移り変わり、現在の技術でどんな表現ができるのかリサーチし続けることがとても大切です。

※デザイン本やデザインの参考サイトを活用しトレンドを把握しましょう。

このブログでは配色やタイポグラフィ、レイアウトについてなどのデザイン効果についてもまとめていきますので是非そちらも参考にしてみて下さい！！