Re:WEB

サイトの方向性や内容が決まれば、レイアウトを制作すると良いでしょう

簡単にモノトーンで作ってしまえば、ある程度イメージもし易くなってきます。

レイアウトの段階で、どの部分に目を引かすか、どんなボタン配置にするかなどを考えて設計する、その際ある程度実寸のピクセル数で作る事をおすすめします。
イメージもわき易く、あとあとデザインに入る段階でも割と楽にできる為。

まずページ数によってボタンの配置を考えます。
５P程度の物であればヘッダー下へ横に一列ボタンを配置するのが基本と考えましょう。
１００Pなどのボリュームのあるサイトに関してはメニューの配置が難しくなってきます。

その内容によってはグローバルナビ（ヘッダー下のメニュー）レフトナビ、が基本としてあり、グローバルナビの項目毎に、レフトメニューを変更し、レフトメニューの項目毎に、更に細かいナビが出てくる事も。

またパンくずナビなどで現在どのページを見てるか等を参照する必要があります。

HOME ＞ 会社紹介 ＞ 会社概要 ＞ ２００８年度決算報告書

↑良く見かけるこの様な物をパンくずナビと言う。

ボリュームの大きなサイトになれば、レイアウトには非常に気をつけたい所、

またこのワイヤーフレームをクライアントに確認してもらい、GOを出てからデザインに入った方がやりやすくなるでしょう。
またその際、どの様な意図でこのレイアウトにしたか、またボタンをクリックするとどの様になるかなどの説明を注釈で入れておくと分りやすく、伝わり易いので、入れておきましょう。

サイトマップにて必要な情報をまとめたら
次はサイトの内容をまとめます。

サイトの狙いであったり、方向性を決める必要が出てくる。
大きなブランディング能力を持っていてさらに広告費をかけれる様なサイトであれば、フルFlashサイトでも問題なく、SEOも気にせず、ブランド名や、会社名などでPPC広告を打っていれば自然と検索されやすくもなる。

また、ターゲットを新規で増やしたいなどの場合は特定のキーワードを選定してSEO対策を施す事も必要となってきます。

そう言った場合はドメインを取得する際から関わってくるので、色々と注意が必要となってきます。

例を挙げて話を進めると、サイトの狙いは、一部上場している様な会社のコーポレートサイトを制作するのであれば、コーポレートサイトとわかってもらう必要がある、またその会社が何か商品を扱う様なサイトで会社名と同じ名前でオンラインショップなども公開しているのであれば、制作の際に、そちらのオンラインショップに誘導したがる企業の方も多いかと思いますが、ここは切り分けて考えた方が良いでしょう。

コーポレートサイトなのに、なぜかオンラインショップへのバナーなどが目立つ形で、数箇所にある場合など、この企業は何をしたいのだとユーザーが困惑する事もあります。

こう言ったサイトであれば、IR情報の掲出であったり会社概要・理念・事業内容・採用情報などの項目を前面に出す必要があり、場合によれば経営理念が伝わりやすいデザインにする方がいいでしょう。

VIやCIなどの固まっている企業であれば、その企業カラーを上手く使い一目みて、会社がわかるぐらいにしても良いと思います。

その際建築資材などをメインに取り扱う様な企業であれば、建築資材や建築材料などと言うキーワードで検索されたいなどの希望もあるかと思います、こう言ったSEO対策を施すことで企業にとっても新規顧客を獲得に繋がりますし、サイトの内容が見やすくまとまっていれば企業サイトととしての信頼度も高くなります。

なので方向性をしっかり決めた上で、サイトカラーやレイアウトなどの制作を進めるのが得策に思います。

制作の終わった段階で、SEO的にはもっとデザインを変更するべきだなどで、後々変更する事を考えますと、要領が悪くなってきます。

最終のエンドユーザーの気持ちになりサイトの方向性を考えていけば、そのように内容を決めるかが見えてくるかと思います。

・キーカラーの選定
・内容文章の設計
・問い合わせに促す、クロージングに繋げるなど

上記の様な内容をしっかり決め、続いてレイアウトを考え、ワイヤーフレームを制作し、クライアントに十分に説明し確認をとる事で、作業の負担は軽減されます。

サイトの制作を始めるにあたり、まず一番最初に始めるのは、サイトマップの作成。

この画像の様な簡易な一般的なサイトマップでは、そこまで大変な内容にはならないため簡単に制作できます。

基本的なコーポレートサイトなどであれば、簡易ですが、大規模な上々した様な会社のコーポレートサイトではIR情報の掲載〜採用情報（リクルート）用に特設サイトまで設けるなどページ数だけで100Pを超える事も少なくないです。

なのでサイトマップには、事細かくページ分けが必要になってきます。
TOPページにはニュース枠 ニュース枠は管理画面から更新できる物や、費用の無いサイトでは直接更新してもらうなど。

また問い合わせ部分に対してもメーラーを立ち上げるのでは無く、問い合わせのフォーム画面へ遷移する等、SSLを使ったセキュリティを採用するのであればSSL用のディレクトリをサーバー内に設置しないといけないなど、若干の手間がかかってくるため、特別なページとクライアントに理解してもらう為にも他のページとの色分けが必要になってきます。

作る場合においてもサイトのTOPページに、どの部分が一番重要になってくるか、メニュー構成はどうするか　と言う場合にサイトマップがあればサイトの構成は作り易くなってくる為、サイトマップの作成は必須になってきます。

またサイト制作の見積もりを出す段階でも、サイトマップで内容を説明しながら見積もりの説明も出来ます。

最初の段階でサイトマップをきっちり作っておかないと後々、ややこしい事に繋がる事も少なくありません。

サイトのデザインについてレイアウトが決まれば次は配色。

そこで最も基本的な事で間違ってはいけないと思われる事があり、それは印刷物とは違い、モニタ越しに一般ユーザーが見る事。

モニターで見ると言う事は目が疲れると言う事を顧慮して配色には注意を払って制作していかなければならない。

RGB（R＝レッド G＝グリーン B＝ブルー）＝光の三原色とも言う
そのRGBによってモニタから色を出力しているので、色が重なると明るくなる。R１００％G１００％で明るいイエローとなる。
また、RGB全てが１００％だと真っ白になる。

１６進数で言うとこの＃FFFFFFになる。

その真っ白（#FFFFFF）を背景に真っ黒（#000000）のテキストを配置すると、コントラストが強くなる為、目に負担となります。

目に負担となると言う事は一般ユーザーにとってもストレスとなるため、重要な内容であっても読んでもらう事ができなくなる場合があります。

自分がせっかく作ったサイトなのに読んでもらえないと言うのはキツイ物があるので、配色には気をつけましょう。
黒に近いグレー（#333333）などのテキストにするなど見易さを考えて制作し、また目立つからと言って赤や黄色を乱雑に使うのも場合によっては目に負担がかかるので控える事が大切。

今日はちょっと眠たいので短めに書いてみます。

ビジュアル型のレイアウト

良くオシャレなサイトやかっこいいサイト、イケテルサイトと上げられるのがこの分野。

基本的に構造部分がほとんど画像、もしくはFLASH、フルフラッシュで構成される。

その為正直アクセシビリティやユーザビリティに優れているとは言い難いサイトも多い。アクセシビリティとはWEBの場合

Webを利用するすべての人が、年齢や身体的制約、利用環境等に関係なく、Webで提供されている情報に問題なくアクセスし、コンテンツや機能を利用できること"ということがです。

ユーザビリティとは
「使いやすさ」のこと。様々な機能になるべく簡単な操作でアクセスできることや、使っていてストレスや戸惑いを感じないことなどが、優れたユーザビリティにつながる。

その２つをある程度切り離して考え、個性やコンセプトに沿って突き進んで制作する必要があります。

いかにコンテンツをかっこよくブランディングするかがビジュアル型のレイアウトで要求されます。

特にアパレル関係であったりサロン系のサイトではこの様なデザインを好まれる事が多い。

また一般的な企業ではあまり使用されないが、大手の企業であったり、SEOの事など気にしなくても十分上位表示される企業などの場合は、まれにこう言った内容で特設サイトなどを制作する場合があります。

とくに検索エンジンからの誘導が必要の無い場合は良いかもしれません。

個人的にはこう言ったサイトを制作する時がデザインの見せ所でもあるのでは無いのでしょうか。

一般的なレイアウトで制作して行く場合は使いやすさや更新のし易さなどを考え簡素に作り勝ちで、さらに時間をいかに少なく見れる状態にするかを優先する事があるので、自由なレイアウトでいざデザインをするとなると、一般的なサイトばかり制作していると、ビジュアル型のデザインに入りにくくもなりますので、デザイナーであるならば、たまには自分で練習しておくのも良いかもしれないです、またFlashなどではボタンなどにインタラクティブなアクションをつけるのにも、どんな形で動かそうかと迷う事も少なくありません。


この様な案件の場合はFlash化する前にデザインのカンプをクライアントに見てもらい、ココへマウスカーソルがきたら、この様な動きにしようと考えています。と言う意識ははっきり伝え、問題がなさそうであれば、内容を固めFlashへオーサリングすると言った内容がサイト制作において、効率よく修正を減らせる方法かと思います。

上部メニュー左メニューを使ったレイアウト

２種類のメニューを使ったレイアウトは最もよく見かけるサイトと思われる。
一般的に大規模なサイトではこの逆L字型のレイアウトがよく使われます。



上部にはページの大分類のメニュー（グローバルメニュー）を配置し、
その大分類の中を小分けにしたナビゲーション（ローカルメニュー）を左側に配置した形になります。

大きく分けられたページから更に細かく分けられ使いやすい形になっています。
なので内容の多いページでも目的の場所まですぐにたどり着けると言うメリットがあります。

DWでのコーディングの際には、グローバルメニューをテンプレート化しローカルメニューをライブラリ化するとコーディングはやりやすいでしょう、そして更新する際も手間が省けて良いでしょう。

上部メニュー型のレイアウト

ページ数の少ないWEBページに、よく見かけるWEBサイトの形と言える。
ページ上部と言うのはページ内で最も目立つ場所なのでナビゲーションを明確に理解してもらうには適した場所と言える。
また、メニュー（ナビゲーション）は、ページを移動すると言う役割とともに、どこのページに居てるかを示す役割も補うことも多い。



ただしWEBページでは縦スクロールは一般的だが、横スクロールすると使いにくくなってしまう。

その為、ページ上部にメニューを配置するにはページ数が限られてしまいます。多くて６つ程度のページ構成、もしくは大分類が６つ程度ページが好ましい。

ユーザーの使いやすさ、またわかりやすさを考えてページを作っていくのがWEBデザイナーの役割です。
トップページから1〜3クリックまでで、目的のページ居たどり着けるのが理想と言うのを踏まえてページレイアウトを考えてみましょう。

レフトメニューレイアウト

WEBページの大きさを決めたら次はレイアウトについて考えます。
レイアウトのパターンと言うのはある程度定番の物から考えるのも良いでしょう。（見たユーザーがサイトを使いやすい為）

今回は最も定番なレイアウトとしてレフトメニューレイアウトを説明します。

まずこのレイアウトは左側にナビゲーションが存在しており、
右側にコンテンツの内容が入った物。


このレイアウトで制作する場合は、メニューが縦に並べれる為、
ページ数の多いサイトや、ページの階層があまり深くまで無いWEBサイトに適しています。

なぜ、このレイアウトが定番かと言いますと、サイトを訪れたユーザーは、まず左側から順にサイトを見ていくため、一度にサイトの内容がメニューについているタイトルによってわかりやすいと言うメリット。
そしてメニューを縦に配列する事によりページをいくらでも増やせるなどの後の拡張性も考えられます。
更に左側にメニューを配置することにより、テキストのメインのサイトであっても、横書きのWEBサイトとしてはコンテンツ領域の横幅をメニューによって小さくできる為、テキストが横長になり、読みにくいと言うユーザーのテキストストレスの改善にも繋がります。

しかしこのレイアウトでデメリットとしましては一般的である、斬新な物をもとられた場合、こちらのレイアウトであれば普通だと思われる事も少ないは無い。
また、メニュー数が少ないと貧弱に見える事もあり、メニューが多すぎても見る気がしなくなってしまう。

ただしデメリットと言うのはあくまで一例であって、一般的なサイトであれば、このレイアウトがベストなのかと思います。

あくまでサイトを訪れるユーザーの視点になってサイトの構築を考える事が大切に思われます。

まずサイトのデザインやレイアウトを考える前に
サイトサイズを考えないといけない。

ただ、WEBページは無限にスクロールが出来るため、決まったサイズは無いと言う事を前提に考えます。

WEBページのサイズを考えるにはまずディスプレイサイズを認識しておくひつようがあり、現在よく使われているディスプレイのサイズは１４インチ〜１５インチ　１７インチあたりも主流なのでは無いでしょうか。

そこから想定すると1024×798ピクセルあたりがメジャーどころになるかと思います。

WEBページの場合縦スクロールをするのが一般的なので横幅が重要になってきます。

スクロールバーが表示される事を想定して横幅いっぱいで980px以内には収めないと横スクロールが出てしまい見づらくなり閲覧するユーザーのストレスにもないります。

古いパソコンでも快適に見れるようにするのであれば（800×600のモニタ）横幅760ピクセル以内に収めないといけない。

ここで１つ考えるのは760ピクセル以内に収めるか980ピクセルに収めるか。
画面いっぱいを使った方がもちろんインパクトも与えれますし、1024のユーザーから見ても見やすい作りかと思います、画像文字や文字のサイズも多少大きくしても見やすいですので。

ただし企業サイトなどで、見るユーザーを考えて古いパソコンを使ってる方が見る確率が高い場合などは極力760ピクセル以内に収めたいです。

そう言った内容意外でここは若者をターゲットにいかにかっこよく商品をプロモーションするかが重要だと言うサイトであればフルスクリーンフルフラッシュサイトなども有効な方法かと思います。

まずサイトのサイズから考えて制作していくと進め易いでしょう。

まず、このblogではWEBのデザインにおいての基礎になる部分を、たまーに紹介していこうと思います。

例えば
・WEBデザイン関係の職種を目指している方
・WEBデザインを専攻している学生の方
・WEB制作会社の営業さん
が見てもわかるぐらい簡単な内容しか書きませんが、
一番古い記事からから読んでください。

WEBデザインの関係の職種を目指してる方なら
レイアウトの大事な流れがわかったり、デザインの考え方がわかったり、仕事としてやっていくのに意外に細かいんだなって事がわかったりするかもしれません。

WEBデザインを専攻している学生なら
デザインする上で必要な知識や、アワードで見かける様なサイトでは無く一般的なWEBのデザイン方法〜Flashの必要性、不必要性がわかったり
仕事の流れやスケジュール管理の方法が、わかったりするかもしれません。

WEB制作会社の営業さんなら
お客さんと話してて、知っていれば困らなくて済む様な事や、仕事の流れを理解して制作チームに嫌われたり、制作スケジュールを組み立て易くなり先方さんに怒られる事も無くなるかもしれません。

そんな感じの内容を記事として書いていこうと思いますので、よろしくお願いします。