投稿者: はじめに
webデザインをやったことがない初心者、これから始める方、既にデザイナーの方などに向け、webデザインとは何かからコツやphotoshopやillustratorの実践的なテクニックまで解説していきます。
何のためのデザインかを考える
例えば、お店の集客を増やしたいという希望があるとします。
では、まず今はなぜお客さんが少ないのか、どうすればお客さんが増えるのかということを考えるのがデザインにおいて一番重要な部分です。
問題は何なのかを把握し、予算に応じてデザインするのがデザイナーの仕事です。
分かりやすく伝える
例えば、店の説明をされるのに説明書や分厚い本を渡され、これを読めばお店のサービス内容が分かると言われたらいかがでしょう。
大体の人が見る気を無くすと思います。
お店のサービスや内容を分かりやすくまとめて視覚化するのがデザインです。
用途に応じたデザインにする
webサイトといえばヘッダーやコンテンツがあって、最後はフッターというように何となくデザインするのはよくありません。
デザインには目的にそった理由が重要です。
ターゲットは若い女性なのか、中高年の男性なのかで見せたい情報、見せ方も違ってきます。
中高年の男性に向けて、ピンクで花柄がテーマのサイトを見せても一般的には不適切だと思います。
用途や目的に応じた見た目が必要になります。
webデザインの流れ
受注
↓
打ち合わせ
↓
スケジュール
↓
デザイン
↓
確認・修正
↓
納品
会社のスタイルにもよりますが、一般的なwebデザインの流れです。
通常お客さんの間にはディレクターが立ち、ディレクターから指示をもらいデザインというのが多いです。
フリーランサーや人によってはディレクターとデザイン両方やるという人もいます。
webデザインで気をつけること
デザインが終わった後はそれをサイトに表示させるため、コーディングしていく必要があります。
コーディングとは、webに表示させるためhtmlやcssを追加していく作業です。
コーディング上難しいデザインがあるということを考慮しなくてはいけません。
例えばフォントサイズはchromeでは10pxまでが下限として設定されているので、それ以下でデザインをしていてもブラウザ上では表現できません。
どうしても小さい文字を表示したい時は、画像にしてそのままサイトに表示させるやり方もあります。
ただ、テキストに比べると画像はぼやけ視認性が落ちるため、デザインしなおす方がオススメです。
こういったこともあるので、デザイナーはディレクターやコーダーと確認しあう必要があります。
レスポンシブデザイン
また、近年主流になってきている、ブラウザサイズに合わせてサイトが可変するレスポンシブデザインというサイト設計があります。
レスポンシブで作られたサイトの場合、ブラウザのウィンドウサイズに合わせてサイトを可変していくため、文字やカラムの折り返しをしていきます。
レスポンシブデザインの場合、一般的にウィンドウサイズを小さくするにつれ、右側のカラムから一段階下に表示されるので、左側に重要な情報を載せるなどデザイン面でも気をつける必要があります。
第1回まとめ 全体を見る力
webサイトデザインでは、部分的なボタンデザインなども大事ですが、全体的な設計や見やすさ分かりやすさを見極める力が必要です。
サイトを見たお客さんがどう思うか、見た後問い合わせや買いたいと思ってくれるか動線に誘導できるかを最重要視しましょう。
次回2回目は9月27日更新予定です。
