文化女子大学 造形学部キャリア支援ネット
こんにちは。ワケありで本日更新です。今日はしっかりと休んでいきましょう(笑。
サイトについて
形学部の学生の「専門・進路・人生の流れをサポート」することを目的に立ち上げられた、在校生・卒業生のためのサービスサイトです。
WEBデザインにおけるユーザインタフェース、情報設計はもちろん、図版などの情報グラフィックスやイメージ写真のクオリティも高いです。また、キーカラーを緑色、アクセントカラーをオレンジ色に設定し、一定のトーン&マナーを確保する事で、協調と信頼性を演出しています。
UIについて
- 文字可変機能を提供する
- 当サイトでは、文字サイズを変更できる機能が用意されている。IE7やOpera、firefox3などのモダンブラウザでは、画像込みで拡大縮小できるページズーム機能がデフォルトで搭載されているが、IE6などの文字可変機能に慣れているユーザは、馴染みがないため使いにくいと感じてしまうかもしれない。ブラウザの仕様を理解し、WEBサイトに必要な機能を考案し提供するのも我々WEB制作者の重要な任務だ。
- 二次元的階層化
- 複雑な情報を扱いやすくし、その情報の中にある関係を示すために、情報の内容を関係に応じてグループ分けする事を“階層化”といい、複雑な情報扱いやすくしたり、情報の関連性を示すのに適した形態を“二次元的階層化”という。例えば「造形学部のキャリア支援」では、造形学部キャリア支援に関する情報のグループ分けを行い、情報を並列に提示する“二次元階層化”を使用している。ローカルナビゲーションの項目を詳細に階層化する方法が主流になっているが、場合によっては“二次元的階層化”が適しているかもしれない。
- コンテンツの概要を提示する
- 当サイトでは、各カテゴリのインデックスでコンテンツの概要を提示している。「キャリア支援の扉」では「キャリア支援の扉とは？」という形で概要を提示している。サイト独自のコンテンツを展開させる場合“どんな情報なのか”を提示してあげる事でホスピタリティが向上する。
- 画像リンクをリンクとして認識させる
- 当サイトでは、ハイパーテキストリンクのほかに画像リンクを用意している。それ自体はさほど珍しい事ではないのだが、画像リンクをリンクとして認識させる方法に注目したい。画像にマウスオンすると、ハイパーテキストリンク同様、アクセントカラーであるオレンジ色の枠が表示され、直感的にリンクだと認識できる。「この状態で画像がリンクしているのは当たり前だろう」という制作者側のエゴがデザインに反映してしまい、然るべく対応がなされない自体が起こりえるため、ユーザー視点になって判断する能力は必要不可欠といえる。
- 複数の表示手段を提供する
- 「学生の作品」では、「画像一覧表示」と「テキスト一覧表示」という2つの表示手段を提供している。イメージ画像とテキスト情報を混同すると、デザインが制限されしまい、かえって見づらくなってしまう事が多い。表示手段を分けて提示する事で、情報にまとまりが生まれ、視認性が高まる。
デザインについて
- SN比が最大になるデザイン
- ディスプレイ上の、意味のある情報と無意味な情報の比を“SN比”といい、デザインではSN比ができるかぎり高いことが望ましい。当サイトの図版などの情報グラフィックスは、不必要な要素を削除し、必要な要素が簡潔に表現されているため、SN比が高く非常に分かりやすい。不必要なデータ項目、図形、直線、記号は全て、意味のある要素から関心を逸らすものになることを認識しなければならない。このような不用な要素は、削除してしまうべきである。デザインにおいてSN比が最大になるように努力すること。簡潔なデザインを心がけ、一貫して適用し、雑音を最小にすることが重要だ。
- 一貫性のあるトーン&マナー
- 配色、グラフィックス、写真イメージ、それらの要素が一貫したクオリティを保っており、全体的にバランスがとられている。透明感のあるデザインや、はみ出した画像イメージなどの表現も、角丸で統一されたデザインにマッチしており、ポップな印象を維持している。
以上になります。
