勉強する点

この課題はマーケティング重視のサイトをいかに工夫して作れるか、というマーケティング重視のサイト課題です。デザインのリニューアルだけでは十分な効果アップとはいえませんので、どういうコンテンツが望ましいか、どういう見せ方で売上げアップに繋がる営業サイトになるのか考える力が必要です。一度チャレンジして、マーケティング系サイトの構築を経験してみよう！実践が一番の勉強方法です。

• USOマーケティング

まずはフォントをそろえよう

デザインの根底とも言えるフォント。実はプロのデザイナーはフォントを買い揃えています。パソコンに初めから入っているフォントだけでは、匠なデザインは難しいのが現状です。

どんなフォントがいい？

このフォント好みはデザイナーによっても異なります。マックでないと使えないフォントもありますので、中にはマックを好んで使用しているデザイナーさんもいるぐらいフォントにはこだわる方が多くいます。いくつか使ってみて気にいったものを選ぶといいでしょう。そのうち、フォントをみるだけでこれは何のフォントか分かるようになるスゴイデザイナーさんもいます！

デバイスフォント

パソコンによって表示できないフォントがある！

パソコンによってインストールされていないフォントは、指定どおりのフォントで表示されません。その為、デバイスフォント（画像ではなくユーザーのパソコンから出力される文字）のフォント指定をする際には、必ず一般的に認知されているフォントを使用しましょう。自分のパソコンの中にあるものが、ユーザーのパソコンにもあるとは限りません。

勉強する点

この課題はいかにデザインセンスを活かすことができるかがポイントです。単に美しいだけではなく、ブランド力をつける為にはどうすればいいのか、それを考えながらイメージ戦略を立てていく必要があります。この課題については音声対応は必要ありませんし、SEOの考慮も必要ないと仮定した課題です。あくまでもデザインセンスを磨く為の材料にしよう！

• ビューティウッソン美容院

カーニングで文字間隔を微調整

フォントによって文字間隔がバラバラであるフォントがあります。プロポーショナルフォント（文字間隔をデフォルトで調整してあるフォント）であっても、漢字、ひらがな、カタカナ、英語を同時に記載すると文字間隔の調整が必要なフォントが多々あります。そういう場合は、必ずカーニングで文字間隔を調整しよう。調整後（1）では、カタカナの部分の文字間隔を調整しました。調整後（2）では、英字部分のフォントの種類を変更しました。英字は英字専用フォントを使用して調整することも多々あります。

アンチエイリアス

WEBデザインだからこそ注意が必要なアンチエイリアス

特にWEBデザインの場合、フォントのアンチエイリアスの調整も大切です。小さなフォントになると、アンチエイリアスがぼやけて鮮明にならない場合があります。そういう場合は、ちょっとしたカーニングの調整で鮮明になることがあります。

12pxなら18px以上の行間に

フォントのデザインでは、文字の行間調整も大事です。大抵12pxのフォントを使用すれば18px以上の行間設定が美しく見える秘訣です。下記はフォント12pxで行間を調整した場合の例です。

自動調整のままの場合

行間18pxの場合

行間24pxの場合

目の導線を考えたレイアウト

レイアウト設計の基本、それは目の導線。ユーザーをどうナビゲーションし目的を達成させることができるか、目の導線をシュミレーションしながら設計します。情報は簡潔に分かりやすく、意味無くテキストを動かす必要はまったくありません。特にFLASHで構築する際、どうしてもビジュアルにこだわりたいがために、使いにくくなっているサイトを良く見かけます。設計をしっかり行いましょう。

レイアウト設計の詳細

メニュー設計の基本その1 ～組織化～

メニュー設計の基本、それは組織化とラベリング設計。メニュー配置の際、7個以上にしないように。7個以上ある際にはカテゴリー分けして配置するのが基本中の基本です。（この設計は、組織化という設計に入ります。）

メニュー設計の基本その2 ～ラベリング～

折り返し改行してしまうメニューは禁物。簡潔に分かりやすいメニュー名に。（このメニュー名設計は、ラベリングという設計に入ります。）ただしバナー等のメニューの場合は、これに該当しません。ひきつけるキャッチコピーで魅了しましょう。

運用面の配慮

WEBデザインの特徴として、今後の運用面も配慮して設計する必要があります。横並びにメニューを配置してしまうと、今後メニュー追加の際に大変な手間をかけることになります。大カテゴリメニューは横並びに中カテゴリーメニュー以下は縦に配列するよう心がけるのが無難です。

あくまでも設計段階

これはWEBサイト構築を行う上で、WEBデザイナーにしかできない重要な設計部分。レイアウト設計書に基づいて、メインページのみドローソフトで構築。1P分仕上がったら、ディレクターに提出し、お客様のご意見をフィードバックし修正調整を繰り返して、デザイン設計を完成させます。いきなりコーディングする必要はありません。あくまでも設計段階です。

そのデザインの理由を答えられるように

お客様に、これはどうしてこんなデザインにしたの？と聞かれても答えられないということは、根底の設計ができていなかったという事。色、形、写真と、ちゃんと意味をもってデザインは作らねばなりません。

ビジュアル設計の詳細

色の設計

シンボルカラーをヒアリングし、その色で統一して作るのが一般的ですが、ショップ系の場合は、商材をより一層魅力的に魅せるカラーが望ましい場合があります。カラーは必ず統一すること。青を使ったらその青を使用すること。どうしても他のパターンの青が欲しい場合は、その青の「色相」は固定し、「明度」もしくは「彩度」を変更して使用するのがポイントです。

形状の設計

丸みを帯びたものは優しく、四角いものは真面目なイメージ。ギザギザの円形は大声のイメージで目立たせたい際のアクセントに。ちょっとした形状1つでイメージが大きく変わります。サイトのコンセプトにあわせて設計する必要があります。

配列・空間の設計

「統一美」は重要なデザインの要素。等間隔で配置されたものほど美しく、統一色系で作られたものほど美しいデザインになります。また、オブジェクト同士の空間が通常より広ければ、ブランド力が出やすいデザインに。逆に空間が狭い場合、お買い得系のイメージに近くなりやすい傾向にあります。目的に合わせた配置を心がけよう。

フォントの設計

フォントも色や空間と同じく、統一美の対象です。いろんなフォントの種類をいろんな箇所に使いすぎて統一感をなくしてしまうと、デザインも崩れがち。また、フォントを平坦に使用するのではなく、文字ごとに大きさや配置を変える事で、アクセントのあるフォントデザインができます。

素材の選定

写真素材の選定の際にも、ちゃんとサイトの効果を考えて意味をもって選びましょう。単にキレイだったから、というのはNGです。

組織化

組織化とは簡単に言うと、「分類と関連付け」の作業を意味します。膨大に膨れた情報を、分類し見出しをつけ、関連できるもはリンクする。ユーザーに分かりやすく、スムーズに伝えやすくするために行うもので、WEBデザインを行う前の、根底の基礎の部分です。難しく考える必要はありません。人間大抵、いつも無意識に行っている事です。

ラベリング設計

ラベリングというのは、例えばカテゴリーやメニューなどの名称設計を指します。第一印象ですぐソレと分かるラベリングが、WEBザインの大きなポイントになります。

組織化の基本

分類化・カテゴリー化

過剰な情報量は、ユーザーを混乱させてしまいます。人間が一度に認識できる情報の量は限られています。分類して並び替え、カテゴリー付けで程よく整理整頓してあげましょう。WEBサイトの場合、メニューは7個以上、文章も7行以上あると把握しにくくなる傾向があります。

見出しとキャッチコピー

情報には見出しと、それを惹きたてるキャッチコピー、そしてその内容の3点セットで程よく組織化できます。魅力あるキャッチコピーを含められるかどうかで、そのWEBデザインの魅力も大きく変わります。

情報の関連化

関連性の高い情報同士、リンクをつけるのもポイントの1つ。SEOのために、その際のテキストリンクが有効になる場合もあります。しかし逆にナビゲーション（お客様の誘導）を混乱させることにもなるので要注意。

カテゴリー分けの際に

色をカテゴリーごとに変えることによって、直感的に分かりやすくできます。色は単にきれいに飾るだけのものではありません、情報の分類にも使いましょう。ただし、カテゴリーごとの色のチョイスは、まったく別の印象をもつカラーを選ぶこと。同じような色相のものを選ぶのはNG。またこの際、彩度や明度は固定しておき、色相だけを変えると統一感ある美しい色のデザインができます。

基礎色は3色以下に

色にも統一感があると、美しく仕上がります。いろんな色を使いすぎず、基本色は3色以下に留めるほうが美しく整います。たとえば「赤」「青」「白」の3色で統一している場合、赤は赤でも、別の赤を使用したい場合もあります。そういう場合は「色相」は変更せず「彩度」「明度」で調整した色をピックアップするのがコツ。

色の効果

あくまでも売り上げ効果を上げる色を

あえて言わずとも皆さん本能で知っている、色が生み出す効果。赤のような暖色系は食欲を引き出し、青のような寒色系はクールなビジネス的イメージを演出します。また人種や年齢によっても好みの色が異なるケースもあります。美しさだけで色を選ぶのではなく、目的を達成する為の色を選定しましょう。また、たとえばonとoffを色分けで区別させるような色の設計をする場合には注意。色覚に問題のある方への配慮が必要です。

色のデザインとフォント

印刷物の場合、小さいフォントでも同じ色でくっきり出力されますが、WEBデザインの場合、紙媒体に比べ出力状況が悪い為、小さなフォントで文字画像を作る際には別途、色や太さにおける配慮が必要です。たとえば下記のフォントは「#E47878」で書かれています。大きいほうは特に問題ないのですが、小さいほうは、かすれてボンヤリ。とても読みにくくなっています。

色を少し濃くするだけで、だいぶ見やすくなりました。また、色の変化だけでなく、フォントを太くしても見やすくなります。普通にボールドをかけると場合によってはフォントが崩れてしまうこともありますので、はじめから3段階の太さがそろっているフォントを使用することをお薦めします。

マックとウインドウズでは見え方が違う

マックとウインドウズでは色々と見え方が異なります。たとえばマックの場合、ウインドウズのガンマ値が2.2に比べ、1.8しかありません（ウインドウズより明るくみえてしまう）。その為、WEBデザイナーは、自分のパソコンのガンマ値をマックとウインドウズの中間である2.0に設定しておき、双方無難な色を選択できるように環境設定しておくのも対策の1つです。

色のデザインと彩度

WEBデザインにおける色は、パソコンからの発光で色が作られています。その為、光の状況によって目が痛くなってしまう色が多数存在します。また、コントラストが十分なければ文字も読みにくくなりますので要注意です。（コントラストというのは、色の濃さの差を指します）

等間隔が美しいデザインの秘訣

1ピクセルのずれも許さない、それがWEBデザイナー。等間隔で美しく整えるという事は、デザインの基礎の基礎。実はプロのデザイナーは、1ピクセルでも左右の幅が違うところを見かけたら「あれ？なんか違和感が…」とすぐ気づく人が多いものです。さあ、下記の例でも違和感を感じませんか？

程よい空間を演出

下記はよくあるレイアウトの例ですが、明らかに上方の方がレイアウトが崩れています。十分な空間を取らず、詰め詰めっと配置してしまわないようにしましょう。あくまでもユーザーに心地よく情報を見てもらえるよう、程よい空間を演出しましょう。

ビジュアル設計時にコンセプトを決める事

ビジュアルデザイン設計の際、きちんとコンセプトを設定すると、意義あるデザインに仕上がります。例えば、下記のwebデザイナーの日記のデザインコンセプトは「私だけの部屋と日記」。くつろげる部屋で日記でも書いてリラックスしよう、というコンセプトに基づいて作られています。コンセプト設定すると、使用する写真やデザインの構想がまとまりやすく、比較的早く仕上がります。

]]> http://www.it-work.jp/web-designer/contents/design_basic/design_s/post_4/ http://www.it-work.jp/web-designer/contents/design_basic/design_s/post_4/ WEBデザインの基礎知識（2） Mon, 12 Feb 2007 02:17:33 +0900