第 1 問 ( 参 考 問 題 ) 一 次 試 験 で 制 作 した 企 画 書 に 基 づき,Web サイトの 仕 様 書 と,その 仕 様 書 に 基 づいたモック アップを 制 作 せよ.また,モックアップについて 制 作 レポートを 作 成 せよ.なお, 仕 様 書 は 企 画 書 の 内 容 を 改 善 したものでもよい. Web サイトの 仕 様 書 制 作 の 条 件 Web サイトの 機 能, 表 現, 技 術, 操 作 性 に 関 して 記 述 すること. Web サイトのモックアップ 制 作 の 条 件 1.キャンペーンサイトのトップページ, 応 募 フォームのトップページ, 東 京 青 山 店 サイトのト ップページ, 選 択 した 地 方 都 市 店 舗 サイトのトップページは, 必 ず 制 作 すること. 2.アトリエ カプのロゴは, 独 自 に 制 作 すること. 3. Web サイトすべてを Macromedia Flash で 制 作 することは 禁 止 する.ただし, 部 分 的 に 使 用 することは 可 能 とする. 4. 審 査 はインターネットに 接 続 しない 状 態 で 行 うため,モックアップは Web コンテンツとし て 独 立 かつ 完 結 したものにすること. 5. 審 査 は, Windows XP を 搭 載 したコンピュータによって,FlashPlayer8.0 と JavaScript が 使 用 可 能 な Internet Explorer6.0 を Web ブラウザとして 使 用 する.そのため,これらの 条 件 で 表 示 動 作 できるデータおよびフォーマット 形 式 であること. 6.JavaScript や CSS を HTML 内 に 直 接 記 述 することは 禁 止 する. 7. 写 真 作 品 の 応 募 フォームには,CGI などのプログラムを 組 み 込 む 必 要 はない. Web サイトのモックアップの 制 作 レポートの 条 件 制 作 したモックアップについて, 以 下 の 点 を 簡 潔 に 記 述 すること. ページデザインとレイアウトの 特 徴 インタフェースとナビゲーションへの 配 慮 や 実 現 ユーザビリティへの 配 慮 や 実 現 表 現 上 のクオリティ 管 理 更 新 性 のクオリティ 管 理 使 用 した 素 材 の 知 的 所 有 権
提 出 物 1. Web サイトの 仕 様 書 仕 様 書 のデータと,そのデータを 印 刷 した 書 類 の 両 方 を 提 出 すること. 枚 数 は 任 意 とする. 2. Web サイトのモックアップ HTML データや 画 像 データなど Web サイトのモックアップを 表 示 させるために 必 要 なすべ てのデータと, 作 成 したモックアップが 表 示 されている 画 面 を 印 刷 した 書 類 の 両 方 を 提 出 すること. 3. Web サイトのモックアップの 制 作 レポート 制 作 レポートのデータと,そのデータを 印 刷 した 書 類 の 両 方 を 提 出 すること. 枚 数 は 任 意 と する. 1~3のデータはすべて 同 じ CD-R に 保 存 すること.また,1~3の 各 書 類 は,A4 サイズの 上 質 紙 を 用 いて, 必 要 に 応 じてカラーで 印 刷 すること.なお, 各 書 類 には 受 験 番 号 と 受 験 者 名 を 明 記 すること.
正 解 答 例 ( 参 考 問 題 ) 提 出 物 1.Web サイトの 仕 様 書 アトリエ カプ Webサイト(モックアップ) 仕 様 書 目 次 1. 機 能 1-1. 基 本 仕 様 1-2. Web サイトの 構 造 2. 表 現 2-1. トップページデザイン 2-2. 各 コンテンツ 内 における 基 本 フォーマット 2-3. 支 店 別 カラー 3. 技 術 3-1. ディレクトリ 構 造 3-2. 応 募 フォームの 基 本 仕 様 4. 操 作 性 4-1. 共 通 リンク 4-2. キーボード 動 作 のみによる 動 作 確 認 1
1. 機 能 1-1. 基 本 仕 様 本 Webサイトは HTML4.01に 準 拠 する 一 般 にもっとも 使 用 頻 度 の 高 い Windows XP を 搭 載 したコンピュータで Internet Explorer6.0 を Web ブラウザで 最 適 に 表 示 されるようにページレイアウトを 行 っている 1-2. Web サイトの 構 造 1-2-1. 店 舗 サイト 構 造 ( 東 京 青 山 店 地 方 都 市 店 共 通 ) モックアップでは 1-1 トップページと 3-1 地 方 都 市 店 舗 紹 介 を 作 成 している 1-2-2. 写 真 キャンペーンの Web サイト 構 造 応 募 フォームでは 基 本 的 なフォームデザインを 行 っているが CGIとは 連 動 していないため 現 状 (モックアップ)の 状 態 で 応 募 確 認 (submit) をクリックした 場 合 リンクエラーが 起 こる 2
2. 表 現 2-1. トップページデザイン 2-1-1. 東 京 青 山 店 全 体 サイズは 1024 ピクセル 768 ピクセルの 画 面 で 一 覧 できるように 設 計 する 東 京 青 山 店 サイト 地 方 都 市 店 舗 サイトどちらも ヘッダー フッダー 会 社 ロゴ 支 店 表 示 メインイメージの 位 置 サイズは 共 通 させている 2-1-2. 地 方 都 市 店 舗 モックアップでは 福 岡 店 とし 福 岡 店 のアイデンティティーカラーはオレンジとした 3
2-1-3. キャンペーンサイト キャンペーンサイトは 大 手 ポータルサイトや 検 索 サイトなどからジャンプしてくるユーザを 考 慮 に 入 れ デザインは 東 京 青 山 店 のカラーを 基 調 とする トップページで 簡 単 な 会 社 紹 介 とキャンペーンの 趣 旨 を 入 れる キャンペーンサイトは キャンペーン 内 容 に 合 わせコンテンツの 項 目 数 デザインを 新 規 に 作 成 する 4
2-2. 各 コンテンツ 内 における 基 本 フォーマット 2-2-1. 東 京 青 山 店 各 コンテンツで 更 新 追 加 修 正 が 発 生 した 場 合 以 下 の 基 本 フォーマットに 準 じて 作 成 する 基 本 構 造 を 以 下 に 示 す ヘッダー フッダー 支 店 所 在 地 連 絡 先 は トップページと 共 通 する 各 項 目 にリンクしているナビゲーションボタンは ページ 上 下 に 同 じものを 配 置 する 2-2-2. 地 方 都 市 店 舗 地 方 都 市 店 舗 では コンテンツ 数 が 異 なるためナビゲーションのサイズを 調 整 している 各 店 舗 ごとヘッダー フッダーのカラーを 変 えて 特 徴 づける 5
2-2-3. キャンペーンサイト キャンペーンサイトは 独 立 して 成 立 しているため ナビゲーションのデザインを 変 えている ヘッダーやフッダーのカラーは 本 店 ( 東 京 青 山 店 )から 情 報 発 信 していることを 示 すため 本 店 ( 東 京 青 山 店 )と 同 じカラ ーリングを 施 している ナビゲーションボタンは キャンペーン 内 容 に 合 わせ 項 目 数 デザインを 変 化 させる モックアップでは 写 真 コンテスト キャンペーン 用 とし 応 募 要 項 応 募 フォーム アトリエカプ 店 舗 紹 介 になっている 2-3. 支 店 別 カラー 各 支 店 の 特 徴 を 出 すために ヘッダー フッダーなどを 色 分 けする また CI ロゴマークも 色 分 けし 店 舗 紹 介 ページのポイントカラーと 同 様 にする 東 京 青 山 店 のヘッダーとフッダー ヘッダー フッダー 東 京 青 山 店 のCI ロゴマーク 6
福 岡 店 のヘッダーとフッダー ヘッダー フッダー 福 岡 店 のCI ロゴマーク キャンペーンサイトのヘッダーとフッダー ヘッダー フッダー CI ロゴマークは 東 京 青 山 店 と 同 じものを 使 用 する 7
3. 技 術 3-1. ディレクトリ 構 造 8
ディレクトリの 構 造 図 の 中 で 各 img フォルダ 内 にあるイメージデータの 記 述 は 省 略 した また キャンペーンサイトは 今 後 もキャンペーン 追 加 していくことを 考 慮 し モックアップでの 写 真 コンテストサイトは 1 つ 階 層 を 設 け 06 photo contest フォルダの 中 に 収 納 した 3-2. 応 募 フォームの 基 本 仕 様 応 募 フォームのページデザインは 以 下 のとおりである 9
CGI で 取 得 管 理 する 情 報 1. 氏 名 / 姓 ( 全 角 で 入 力 ) 2. 氏 名 / 名 ( 全 角 で 入 力 ) 3. 氏 名 カナ/ 姓 ( 全 角 カナで 入 力 ) 4. 氏 名 カナ/ 名 ( 全 角 カナで 入 力 ) 5. 性 別 6. 生 年 月 日 / 年 7. 生 年 月 日 / 月 8. 生 年 月 日 / 日 9. 郵 便 番 号 / 上 3 桁 ( 半 角 で 入 力 ) 10. 郵 便 番 号 / 上 4 桁 ( 半 角 で 入 力 ) 11. 住 所 / 都 道 府 県 名 12. 住 所 / 詳 細 13. 電 話 番 号 / 前 2 桁 ~3 桁 ( 半 角 で 入 力 ) 14. 電 話 番 号 / 中 2 桁 ~4 桁 ( 半 角 で 入 力 ) 15. 電 話 番 号 / 後 4 桁 ( 半 角 で 入 力 ) 16. メールアドレス ( 半 角 英 数 字 で 入 力 ) 17. メールアドレス( 確 認 用 ) ( 半 角 英 数 字 で 入 力 18. ペット 名 19. キャンペーンを 知 ったきっかけ (チェックボタン 形 式 複 数 回 答 可 ) 店 頭 リーフレット テレビCM 朝 日 新 聞 読 売 新 聞 雑 誌 ペット 大 好 き! 大 手 ポータルサイト(Yahoo!など) ブログ mixi その 他 Webサイト その 他 メルマガ 以 前 から 知 っていた 知 人 から 聞 いた その 他 20. 応 募 画 像 10
CGI で 取 得 するための name フォームのタイプ typs などを 以 下 に 表 記 する 情 報 概 要 name type id リスト 項 目 備 考 1 氏 名 / 姓 sei text sei 2 氏 名 / 名 mei text mei 3 氏 名 カナ/ 姓 seikana text seikana 4 氏 名 カナ/ 名 meikana text meikana 5 性 別 gender radio 女 性, 男 性 6 生 年 月 日 / 年 birth_y select 1900~2006 defalt:1970 7 生 年 月 日 / 月 birth_m select 1~12 8 生 年 月 日 / 日 birth_d select 1~31 9 郵 便 番 号 / 上 3 桁 zip3 text 10 郵 便 番 号 / 上 4 桁 zip4 text 11 住 所 / 都 道 府 県 名 add1 select add1 47 都 道 府 県 すべて 12 住 所 / 詳 細 add2 text add2 13 電 話 番 号 / 前 2 桁 ~3 桁 tel1 text tel1 14 電 話 番 号 / 中 2 桁 ~4 桁 tel2 text tel2 15 電 話 番 号 / 後 4 桁 tel3 text tel3 16 メールアドレス mail1 text mail1 17 メールアドレス( 確 認 用 ) mail2 text mail2 18 ペット 名 petname text petname 19 キャンペーンを 知 ったきっかけ lead1~lead14 checkbox lead1~lead14 20 応 募 画 像 img file モックアップのため CGI で 処 理 された 後 の 結 果 ( 送 信 完 了 ページと 送 信 エラー)にまかなうページは 省 略 する 11
4. 操 作 性 4-1. 共 通 リンク 全 ページからサイトトップページおよび 各 項 目 トップページにジャンプできるように 設 計 する また コンテンツページでは ページの 上 下 に 各 項 目 トップページにジャンプできるナビゲーションボタンを 設 置 する そのナビゲーションでは 全 店 舗 共 通 のアイコンを 使 用 し 視 認 性 を 高 める 各 項 目 アイコン 店 舗 紹 介 他 店 舗 紹 介 ナチュラルフード ペットアイテム 子 犬 紹 介 子 猫 紹 介 4-2. キーボード 操 作 のみによる 動 作 確 認 本 Web サイトは HTML4.01 に 準 拠 しているため マウスを 接 続 しない 状 態 で キーボードの Tab キー キー キー Enter キーなどで すべてのリンクを 選 択 し すべての 入 力 項 目 に 適 切 に 入 力 操 作 が 行 うことができる 更 新 時 に 新 たに JavaScript を 使 用 する 場 合 キーボード 操 作 のみで 動 作 可 能 か 確 認 する 必 要 がある 12
東 京 青 山 店 サイト 地 方 都 市 店 舗 サイト
キャンペーンサイト
応 募 要 綱
応 募 フォーム
アトリエカプ 店 舗 紹 介