「よーし、俺様のサイトをオープンしちゃうぞ！」と作ってはみたものの、どこからみてもシロートまるだし。「あれ？こんなはずじゃ……」とお悩みのみなさんに、手軽にできる「脱・シロートテクニック」を大公開。
デザインも内容もテクニックも、めざせバージョンアップ！ |
 |
 |
白熊 吾郎
GORO SHIROKUMA
Web
& 映像業界で生きる（モーション）グラフィックス屋。マスコミインハウスからフリーに。
|
|
|
|
|
|
|
|
さて今週から、みなさんおまちかねデザインの話ですが、簡単そうに見えても落とし穴がいっぱい。完成したあとで後悔する前に、大事なポイントをおさえて分かりやすいサイトを目指しましょう。
すでにサイトを作ったもののお悩みの人は、どこが欠けていたのかじっくりチェックしてください。 |
|
| 043.
サイトデザイン４項目を決定せよ！ |
デザインというと、すぐ「色はこれにして、ロゴはこんな感じで、フォントをあれにして……」とビジュアルばかりを重視しがちなみなさん、それがダメサイトの原因。
視覚だけに訴えていればよかった従来メディアとはちがって、Webサイトはインタラクティブ、操作してもらってナンボです。ビジュアルだけでなく、その構造や操作性もデザインできて、はじめてまともなWebサイトが作れるというわけ。言い換えると「デザイナーでありプログラマーでありディレクターである」のが正しい姿（最近は業務用途では分業が多いですけどね。ま、ここでは個人サイトの話ってことで）。
なので、「さっそく俺様のサイトをデザインするぜ！」というときには、次の４つを順番に考えるのがベストなのです。
１）コンテンツ・デザイン……サイトに載せる「目玉商品」をどうみせるか？
２）ディレクトリ・デザイン……ページやフォルダ、リンクの構造をどうするか？
３）インターフェイス・デザイン……ボタンやリンクのデザインをどうするか？
４）ページ・デザイン……インターフェイス以外のグラフィックをどうするか？ |
|
デザインに凝るのも結構だけど……どこをクリック？ |
|
|
| 044.
デザインは紙に書け！ |
ちょっと余談ですが、デザインするのにいきなりマウス握ってませんか？
ラフなアイデアがまとまるまでの間は、悪いことは言いません。紙にメモした方がいいです。理由は３つ。
ひとつは「人間は忘れる動物」だから。どんなにがんばってもPCを操作するより鉛筆を走らせた方が速く図形を描けます。良いアイデアほど逃げ足が早いですからね。
ふたつ目は「残したまま直せる」こと。アイデアを練って練って修正をしてもその課程が残せますから、あとでいろいろな選択肢を考えられます。それに試行錯誤しやすいと言うことは、アイデアを次々に浮かばせられるということ。もちろん「デザイン」中は消しゴム使っちゃダメですよ。
最後は「消えにくい」こと。紙はなかなか消滅しづらいですが、デジタルデータは誤操作やトラブル、衝撃などであっけなく失われます。アイデアの課程はあなたの大事な財産。もう一度「発想」するのは大変でしょ？ |
|
|
| 045.
【コンテンツ・デザイン】"商品"の見せ方を工夫せよ！ |
まずはじめに考えなければいけないのが、あなたのサイトのメインコンテンツの見せ方。といっても、プランニング（→030〜036参照）で目玉商品をより楽しく見せる演出を考えていれば、それをより具体的にデザインするだけなのでそんなに難しくありません。ポイントは「分類」「順番」「方式」などを決めること。
もし目玉商品が「写真」ならば、どのように分類して、どのような順番（あるいはランダム）で、どの方式で〔サムネール（→012参照）をつけるのか、矢印ボタンで１ページごとに見せるのか、など〕……といったところ。情報の整理整頓ですな。
といっても１ページにはあまりたくさんの情報が載せられませんから（縦にずら〜っと長いページはうんざりです）、どうしてもページごとに区切る必要があります。そうなると分類やページ区切りのルール、リンクの関係なども考えなくてはなりません。さぁごちゃごちゃしてきました。では次のポイントへ。 |
|
|
| 046.
【ディレクトリ・デザイン】未来を見据えて設計せよ！ |
目玉商品の整理整頓を考えるとき、同時に「フォルダやファイルの位置関係」と「リンクをどこに張るか」という問題が出てきます。そこで次のポイントは「ディレクトリ・デザイン」。
ディレクトリとはフォルダと同じ概念。たくさんのページとそれらをまとめた入れ物の位置関係を整理整頓しましょう。
コンテンツ・デザイン（→045参照）で目玉商品の見せ方が決まったら、必要なページ数を書き出します。次にそれらを内容ごとにフォルダへ分類（→017、038参照）して、ひとつひとつのコーナーにします。フォルダの名前を決め、コーナーのトップページも加えるのも忘れずに（→018参照）。
このときに計算しておきたいのが、コーナーが増えたときのこと。更新して（→029参照）いけばいくほど、情報量は増えるもの。あとで再分類して作り直すのはとても面倒なので、情報が増えそう（あるいは増やしたい）なら、どこに追加するかを想定しておきましょう（これは次回の「インターフェイス・デザイン」で役立ちます）。
構造が決まれば、あとは基本的なリンクルートを決定（→039〜042参照）。サイトトップページ←→各コーナートップページ間のリンク、各コーナー内でコーナートップページと各ページ間のリンクがあればとりあえずOK。細かいところは後でいくらでも追加できますからね。 |
|
|
ここまで先回りして考えておけば、この先のグラフィックデザインもとてもスムーズです。
次回はインターフェイスづくりのツボを紹介します。 |
|
|
