「よーし、俺様のサイトをオープンしちゃうぞ！」と作ってはみたものの、どこからみてもシロートまるだし。「あれ？こんなはずじゃ……」とお悩みのみなさんに、手軽にできる「脱・シロートテクニック」を大公開。
デザインも内容もテクニックも、めざせバージョンアップ！ |
 |
 |
白熊 吾郎
GORO SHIROKUMA
Web
& 映像業界で生きる（モーション）グラフィックス屋。マスコミインハウスからフリーに。
|
|
|
|
|
|
|
|
今週から、サンプルサイトの工程を追いながら、ポイントを解説していきます。
「自分のサイトだったら……」「仕事で依頼されたあの企画なら……」と、自分の制作シーンに重ねてみるとよりリアルに感じられるでしょう。
今までの解説ポイントも振り返りつつ、実践スタートです！ |
|
| □ サンプルサイトのプランニング（→032参照） |
サンプルサイトとはいえ、まずはプランを立てないとデザインできません。まずは４ポイントをこんな風に設定。
『タレント：白熊吾郎
オフィシャルサイト・プラン 』
// なぜ：「白熊吾郎」ファンの拡大
情報提供（問い合わせ対応の事務所サイドの負担を減らすため）
応援を継続してもらうためのファンサービス
//
何を：「白熊吾郎」という"商品"とその関連情報
特に写真入り近況報告とオリジナルグッズの紹介
//
誰に：A）白熊吾郎ファン
B）白熊吾郎に興味のある動物好きな10〜30歳代女性
//
どのように：毎週更新 白熊吾郎の画像を多用。
写真入り近況報告やきめ細かいスケジュールの提供などファンサービス
壁紙や印刷用データなどのダウンロードサービスを充実させ、白熊をより身近に感じられるよう工夫。 |
えー、自分で書いてて恥ずかしいのですが（笑）サンプルと言うことで。
白熊吾郎をタレントに見立てて、そのオフィシャルサイトにしてみます。タレントという商品を、いかに知らしめてファンを増やすか？ またすでにファンになっている方へのサービスと、より深い忠誠心（？）の育成をねらい、ついでにグッズを売りさばいて小銭を稼ごうじゃないか、という欲張りなプランです……あ、どこのタレントサイトも同じようなもんか。
とはいえ「商品」の魅力をアピールすることは、モノを売ったり紹介したりする企画には共通のエッセンスがありますし、「オレ様自己満足系サイト」でもアピール力の参考になりますし、ね。
|
|
|
| □ サンプルサイトのコンテンツ・デザイン（→045参照） |
まずは誰向けにどんなコーナーを作るか、そして見せ方や演出のポイントを考えます。
なおここでは
A）白熊吾郎ファン
B）白熊吾郎に興味のある動物好きな10〜30歳代女性
とします。
１）プロフィール……B向け：基礎情報から興味を持ってもらう
白熊吾郎のプロフィールと、過去の仕事紹介をコンパクトに収めて、斜め読みでも白熊のことが把握できるよう工夫
２）スケジュール……A向け：活動の最新情報を提供、視聴・購買行動につなげる
見やすく、かつ更新しやすくするため、１ヶ月のスケジュールを１ページに収める。過去のスケジュールもバックナンバーとして保存できるよう、各月ごとにページを変えて移動できるようにする
３）写真入り近況報告……A向け：サービス、より親近感を持ってもらう
毎週更新するために、仕事現場の写真とレポート文章を１件１ページに収めるスタイルに統一。バックナンバーはタイトルと日付で一覧をつくりこのコーナートップページからすぐにジャンプできるようにする。
４）オリジナルグッズ紹介……A/B向け：購買行動につなげる
コンサート会場や通販で売りさばいているグッズを紹介限定品や販売終了品も紹介することで、購買力を煽るまた新規開発商品の速報を随時掲載し、予約数の向上を狙う
５）ダウンロードサービス……A向け：サービス、B向け：知名/認知度向上
ファンにはサービスとして、本人のポートレートをメインとしたデータを提供まだファンになっていない層に対しては、名前と顔の一致を狙い名前ロゴタイプとポートレートを組み合わせた、白熊のイメージを重視したデータを配信
６）ファンクラブ紹介……A向け：サービス、B向け：興味からファンへの転換促進
ファンクラブ未加入ファンへの加入促進まだファンになっていない層に対して、クラブの充実した特典を紹介することで興味、関心を深めてもらう
７）トップページ
毎週更新のため、新着情報を見やすい位置に配置。またオリジナルグッズの販売促進のため、商品を１〜２点配置して訴求
以上の６コーナーを想定。将来的にはコーナーを１〜２個増やしたい、ということで、インターフェイスデザインには、拡張する余裕を考えておきます。
|
|
|
| □ サンプルサイトのディレクトリ・デザイン（→046参照） |
ファイルとフォルダの位置関係、およびリンクの関係を設計します。
サンプルサイトのディレクトリは大きく６コーナーに分類しましたが、その中はあまり細分化せず、極力シンプルな構造にします。
しかしオリジナルグッズ紹介のコーナーだけは、ジャンル別に商品を見せる関係上、サブディレクトリが必要になりました。またスケジュールと写真入り近況報告、ダウンロードサービスの各コーナーは、データが蓄積してくるにつれて整理する必要があることから、先に将来のディレクトリを考えておきます。データを入れ替えず徐々に増えていくタイプのサイトは、先を見据えた設計が大事ですよ。
リンクについては、各コーナー間はトップページ同士を結び、サブディレクトリがあるコーナーは、基本的にそのサブコーナー内とサブコーナー同士のリンクを想定しています。 |
|
|
| □ サンプルサイトのインターフェイス・デザイン（→049参照） |
ボタンやリンクのデザインですが、コンテンツ・デザインで決めたように、６コーナー＋トップページの７コーナーに加えて、将来的に１〜２個増やせるような余裕を持たせます。今回のインターフェイスは、左側に縦方向で並び、サブコーナーをページの上部に配置することにします。また各ページにはフッターを配置します。
ページ自体はブラウザウインドウの左詰めにし、想定画面サイズは800×600ピクセル以上のマシンで閲覧することにして最大幅は720ピクセルとします。 |
|
|
以上のプランを踏まえて、実際のページデザインを考えます。
まだプランとしては掘り下げ切れていない部分がありますが、そこは実際のデータを配置して微調整します。プランはもちろん大事ですが、変更や改良、微調整はしばしばおこるもの。多少の変更を随時取り入れて、よりよいものに仕上げていきます。 |
|
|
