カレッジ・スポーツ・ページング・サービス

創造的設計の概要

 

バージョン 1.0

 

改訂履歴

日付

バージョン

説明

作成者

1999 年 10 月 6 日 1.0 初版 Context Integration
目次

創造的設計の概要

はじめに ページの先頭へ

目的

この文書では、カレッジ・スポーツ・ページング・システムのユーザー・インターフェース (UI) の設計で使用する標準について説明します。

範囲

この文書には、Web サイトで使用するすべての UI 要素が含まれます。

定義、頭字語、略語

用語集」を参照してください。

参考資料

  1. CSPS 開発構想書 1.0

概要 ページの先頭へ

スポーツ・ページング・サービスの Web サイトのビジュアル要素は、WebNewsOnLine の現在の Web の存在感に調和します。このサイトでは、ページング・サービスに要求される個別化とカスタマイズが 追加されます。一般に、このサイトでは、WebNewsOnLine の現在のサイトのルック・アンド・フィールを維持します。このサービスの要求により追加されているのは、 ログイン画面、ユーザー・プロファイルの編集、カスタマイズされたリンク・リスト、過去のページの履歴保守です。

サイトの機能のビジュアル・ サポート (雰囲気) ページの先頭へ

このサイトの雰囲気は、現在のニュース・サイトのトップ記事に習います。ページング・サービスの焦点はスポーツ・ニュースとスコアであり、 そのため、その形式はオンライン・ニュースの Web サイトを模範にします。派手なビジュアル設計よりコンテンツが優先です。全体的に保守的な外観は、 白い背景、黒い serif 文字のテキスト、ニュース記事と写真の載ったコラム、ユーザー・プロファイル情報のテーブル、 ページング履歴のリンク・リストより構成されます。

配色の決定 ページの先頭へ

Web サイトにより伝えられるメッセージには色を付けます。専門的かつ保守的なサイトでは、 寒色と中間色を使用します。明色や暖色はアクセントとして使用します。ページング・サイトでは、 本体の Web サイトで使用しているのと同じカラー・パレットを使用します。

下のイメージ・ラベル

図 1: Web サイトのカラー・パレット

色はページング加入者のホーム・ページで重要なことを強調するときにも使用します。リンクは、サイトの全体にわたって使用されている標準の青のままです。さまざまな背景色の上で、テーブルの見出しは白となりますが、本文はすべて黒です。

フォントとスクロール ページの先頭へ

ページング・サービスの Web サイトのフォントとスクロールの振る舞いは WebNewsOnLine Web サイトを模倣します。読みやすくするため、ほとんどのテキストにセリフ・フォントを使用します。水平方向にスクロールしないで 640 x 480 の画面内に収まるように、ページ幅を制限します。ユーザーは上下にスクロールして、コンテンツを見ます。一般的に、ニュース記事は、必要に応じて垂直にスペースをとり、1 画面に載せます。

サイトのナビゲーションとページ・ レイアウト ページの先頭へ

ページの幅は 600 ピクセルに限定し、水平方向の約 20% のスペースを左側のサイドバーに割り当てます。本体領域は残りの 80% となります。バナー・セクションには、 ロゴ、バナー広告、ニュースの Web サイトの本体セクションへのリンクが含まれます。

下のイメージ・ラベル

図 2: ページ・レイアウト標準

サイドバーには、ページング・サービスの Web サイトのサブリンクが含まれます。これらのリンクにより、 ユーザーはホーム・ページに戻ること、最近の記事やスコア登録を行き来することができます。本体セクションのフッターには、 さらにバナー広告が含まれます。

グラフィックス標準 ページの先頭へ

ページング・サイトへの来訪者は、T1 回線の速度から、 最低 28.8Kbps モデムの速度で接続します。サイトは、写真やその他のグラフィック・イメージの使用を最低限にして、 早くロードできるように設計します。本体ロゴ、ページ・ヘッダー、広告以外で、 各ページで使用されるグラフィック・イメージはほとんどありません。ニュース記事に関連する写真が 1 ~ 2 枚程度です。

このサイトでは、JavaScript のロールオーバーやアニメーションは使用しません (バナー広告に含まれるアニメーションを除く)。このため、 ダウンロードは高速で、Web サイトは新しいブラウザーにも古いブラウザーにも互換性を持ちます。

ブラウザー、フレーム、 その他の標準 ページの先頭へ

サイトへの来訪者は、Netscape Navigator、Internet Explorer、 その他の一般的な Web ブラウザーを使用しています。ブラウザーのバージョンはさまざまですが、 大抵は 3.0 以上のバージョンを使用しています。このサイトで使用する HTML コードとレイアウト技術は、HTML 3.0 以上をサポートする大抵のブラウザー・ブランドをサポートします。

スポーツ・ページング Web サイトでは、フレームは使用しません。新しいリンクを選択すると、 画面全体が最初からロードされます。この振る舞いは、この Web サイトに合っています。

さまざまなプラットフォーム、ブラウザー、画面の色構成で、サイトが同じに見えるように、Web セーフ・カラー・パレットを選択しています。

個別化要素 ページの先頭へ

加入者ページの先頭セクションは、加入者の名前を含む歓迎フレーズで構成されます。これにより、ユーザーは正しくログインできたことや画面の情報が自分用にカスタマイズされていることを確認できます。

2 番目の要素は、前回のページングの日時を示すヘッダーです。これは、 ホーム画面のコンテンツがその日時に受信したページに関連していることを示すものです。

ページング・サービスの 2 つの主要素は、ニュース記事とのゲームのスコアです。この 2 つが、ユーザーのホーム・ページのテーブルにグループ化されます。これらのテーブルには、見出しとスコア・レポートに、ニュースとゲーム・レポートの全文へのリンクがついています。

ユーザー・ホーム・ページの最下部には、最近のページへのリンク・テーブルがあり、過去のページの情報にアクセスできます。このリストが大きくなった場合には、「view all pages」に追加され、これによりページ・リンクの全リストが載せられた別のページに移動します

まとめ ページの先頭へ

スポーツ・ページング・サービスのビジュアル設計は、その Web サイトと同じです。ルック・アンド・フィールは、 読みやすく、移動しやすく、すばやくダウンロードできるような、ニュースとコンテンツに焦点を合わせたサイトとして、 特徴づけられます。来訪者は、とても高速な T1 回線から、遅いモデムまで、さまざまな速度で接続するため、グラフィックスは最低限に保ちます。使用する HTML は、バージョン 3.0 以上のすべての一般的なブラウザーに対して互換性を持ちます。

加入者のホーム・ページは、画面上の個別化された要素またはユニットから成り立ちます。これらの要素には、ウェルカム・メッセージ、ニュースの見出しとゲーム・スコアのリンク、前回のページのリンクが含まれます。これらの画面のバナー広告も加入者の好みでカスタマイズできます。

 

© Copyright IBM Corp. 1987, 2005. All Rights Reserved.