祭屋オフィシャルサイト制作②
2010年3月15日 月曜日
前回、大まかな導線設計の部分をやったわけなんですが、今回はサイトレイアウトとコンテンツと機能についてお話します。私にとってデザインはあくまでサイト制作の一部という捉え方なので、デザインだけでどうこう言うって事はありません。祭屋さんのサイトもそうですが、ギリギリまで粘っても使う時間を決めているので、その範囲内で出来る事をやるからです。ではまずコンテンツの話から。
祭屋さんとの事前打ち合わせで、私の方から必要なコンテンツはこんな所でどう？みたいな話をさせてもらって、祭屋さんからもご要望を聞かせてもらって、あのコンテンツメニューになりました。祭屋さんの要望はフォトログがやりたいとの事で、コンテンツは以下の内容になりました。
■コンテンツ
▼サイトトップ
いわゆる玄関サイトなので目線は左から右へ、Ajax系を使ったトップ画像切替（フェードアウトインで切り替えるとスペースの節約）、更新情報とフォトログサムネイル、検索窓の配置とAWAK!動画の配置、サイト限定コンテンツのSpiralも配置する。
▼ニュース
サイトに関する更新情報、サブコンテンツとして全エントリーからシャッフルして自動的にピックアップする機能。
▼バイオグラフィ
アーティストバイオグラフィ、サブコンテンツは全カテゴリーから１～２エントリーを新着順にピックアップする機能。
▼ディスコグラフィ
参加CDを一覧カテゴライズ→詳細エントリーへ遷移、カテゴライズはサムネイル・タイトル・抜粋文表示、サブコンテンツに月別分類プルダウンとジャケットをシャッフルして自動的にピックアップ、詳細エントリーはエントリー内容と記事の前後・新着１０件一覧・関連エントリーを自動的にピックアップする機能と、エントリーIDで条件分岐してブログパーツを配置。
▼ニコニコ動画
カテゴライズ・エントリーはディスコグラフィと同じ。ただニコニコ動画サムネイルはニコニコ動画APIを使って表示方法を変える。更新時は動画へのリンクだけで自動的にAPIを叩いてサムネイル情報を取得して表示、アカウントがない人へは外部サービスサイトへ誘導する。
▼サウンドソース
カテゴライズ・エントリーはディスコグラフィと同じ。詳細エントリーで試聴ができる様にフラッシュで再生できるプレイヤーを実装する。再生可能ファイルはMP3とFLV動画。ファイルリンクを書くだけで自動的に表示。
▼ライブイベント
カテゴライズ・エントリーはディスグラフィと同じ。
▼フォトログ
カテゴライズ・エントリーはディスコグラフィと同じ。フォトログのサムネイルをトップページに表示させて、トップの更新履歴からは除外。
▼コンタクト
メールフォーム設置、サブコンテンツはディスコグラフィと同じ物を表示。
▼検索
全エントリーから単語でのエントリー検索、サムネイル・タイトル・抜粋文表示、サブコンテンツには各サムネイルを自動ピックアップしてシャッフル表示。
大まかなコンテンツ仕様はこんなところです。次にコンテンツを表示するのに必要なレイアウトを設計します。
レイアウト設計図がこれです。全体表示幅を960pxにしたのは、960pxグリッドシステムをベースとして私は３の倍数でレイアウトを組み、３カラムで枠幅を３で割った対比が奇数・奇数・偶数になるようにしています。それとサイト公開前にグーグル解析でこっそりデータを取っていて、ユーザーの画面解像度を調べていました。１・２位の解像度はほとんどノートPCなのでブラウザを最大化すればすっぽり収まります。
こうやってサイトを閲覧するユーザーの事を考えて設計する事をユーザビリティと言うんですが、我々の業界で言うファーストビュー（一番最初に表示する領域）も含めてトップページのコンテンツも配置します。
どうでしょう、２位の解像度で表示しても収まりますね。実際はブラウザの上メニュー分目張りするので、縦表示領域は約700pxと言った所でしょう。それでもフォトログサムネイルは表示出来るので多くのユーザーの目に止まると思います。
レイアウト設計はここまでの事を考えてやっています。何気なく適当にレイアウトふったりしてるわけじゃなくて、これくらいのロジックがあったりします。こういうのは言わなきゃ分からないし、気付いた人は、あっ！グリッドシステムだ！となるのです。ですがこれが後のサイトを使う上でのユーザビリティを向上させ、PVを上げる事に繋がるのです。
そして次回はユーザビリティと機能設計について更新します。やっとサイトの外面とWordpressの結びつきが解説できるよ！
