第3回 ソーシャルサイトのWebデザイン

基本のマイページをほかのサイトにて研究する

　第1回（http://www.thinkit.co.jp/article/111/1/）では、iKnow!を開発するために使うツールとプロセスについていくつか紹介しました。第2回（http://www.thinkit.co.jp/article/111/2/）では、ユニークなビジュアルアイデンティティーを作成するために、限られたデザイン変数と戦略的な選択をするために何をするのかについて紹介しました。第3回では、ソーシャルWebサイトで一般的ないくつかの慣例、iKnow!のマイページを作成する上でのデザイン決定事項、そして、より快適にWebサイトをリッチにするためのオープンソースのプレゼンテーションレイヤーテクノロジーの導入例を紹介します。

　iKnow!サイトの中で、デザインをするのが最も難しいページの1つがマイページです。マイページは、ユーザーアカウントを作成した後や、ログイン後に最初に見るページです。全く独自でソリューションを考えるのではなく、ほかのソーシャルサイトを参考にしながら、マイページに適用していきました。基本的なSNS機能をFacebookやMixiのようなサイトから学び、MySpaceやFacebookを見る中で、混乱する可能性があることに気がつきました。筆者たちの場合は、学習を管理して進ちょくを表記することが優先であることも理解していました。

　また、気になるソーシャルサイトリストはこちらからをダウンロード（http://www.thinkit.co.jp/images/article/111/3/11131.zip）できますので、参照ください（11131.zip/9.10 KB）

バランスが効いたマイページデザイン

　ほとんどのデザインは、多数の必須要素と環境による制約の間で、良いバランスを見つけるための試みのプロセスです。iKnow!のマイページセクションのメインページをデザインする時の最大の挑戦は、限られたスペースの中で相当量の情報を表示することでした。要素の正しいバランスは、重要性と意義をもとに要素の表示優先順位を作る過程で見つけることができます。学習コンテンツ、学習進度と、より従来的なメッセージング、友達の管理やサイトアクティビティといった機能の間で正しいバランスを見つけることが必要でした。

　サイトのセカンダリー・ナビゲーション・ストラクチャーは、タブを水平に実装することです。このナビゲーション要素は、マイページのメニューを際立つ位置の中に置くことに役立ちました。これは、メニューアイテムはいつも全体が見える中で利用できることを意味します。さらに、もう1つの利点は、新しいお知らせや、メッセージ、フレンドリクエスト、フレンドのアクティビティなど、関係ある概略をメインページに引き出し、さらなる詳細はWebサイトのより深いところに押し込むことで、マイページの機能を整理するのに役立つことです。

　3・4ヶ月間で行われたイテレーションの中で、マイページのレイアウトの変更がありました。全体のフレームワーク（タブによるセカンダリーナビゲーションや、3コラムテンプレート）は定着したので、アクティビティ動向や対話形式のメッセージング、一言ボックス、パーソナルステータスエリア、最近のコメントやブックマークを含むそのほかの基本的な機能セットの構築に取りかかることができました。毎回新しい要素が導入されると、ページが新しい要素に対応できるようには調整されました。