Peace & Piece 画面設計書

ホームページ 仕 様 書 株 式 会 社

目 次 1. 更 新 履 歴 2. 構 成 図 3. 制 作 における 基 本 事 項 4. 画 面 設 計 の 定 義 ルール 5. 各 画 面 仕 様 設 計 6. 仕 様 書 確 定 の 合 意

更 新 履 歴 更 新 日 付 更 新 箇 所 更 新 内 容

構 成 図 A-1 トップページ 会 社 サービス 特 徴 コンテンツ サブコンテンツ その 他 CV B-1 会 社 概 要 C-1 料 金 案 内 D-1 プランニング E-1 マーケティング F-1 Web 制 作 G-1 ブログ H-1 コラム I-1 実 績 公 開 J-1 リンク 集 K-1 お 問 合 せ L-1 サイトマップ M-1 FAQ B-2 代 表 挨 拶 D-2 企 画 書 見 本 E-2 手 法 解 説 F-2 システム 制 作 H-2 内 容 D-3 設 計 書 見 本 F-3 CMS 改 修

制 作 するページ 数 制 作 における 基 本 事 項 1 ホームページ 制 作 にあたり その 総 ページ 数 の 上 限 を 予 め 定 めておきます 企 画 の 検 討 が 進 行 するほど ホームページに 対 する 要 望 が 増 えていくものですが それらを 無 制 限 に 加 えてい くと 作 業 量 も 増 え 納 品 が 遅 くなってしまいます まずは 当 初 の 仕 様 とおりの 制 作 を 終 え 期 日 までに 公 開 をする 必 要 があります (ホームページは 公 開 してから の 継 続 的 な 情 報 の 追 加 と 更 新 が 大 事 です ) 本 ホームページ 制 作 においては 初 期 の 総 ページ 数 を ページ 以 内 で 設 計 します 使 用 するWEBプログラム ホームページには 単 純 なHTMLのみで 動 作 するものとコンテンツ マネジメント システム(CMS)によって 動 作 するものがあります CMSにはムーバブルタイプ ワードプレス ズープスなどの 種 類 があり どのシステムを 採 用 するかを 明 らかにします また 各 種 フォームや 動 画 再 生 などの 機 能 を 設 置 するには CGI JAVA Flashなどのプログラムを 使 用 する 必 要 があり これらのWEBプログラムについても 明 らかにします ホームページに 採 用 するシステム: バージョン: フォームに 採 用 するプログラム: バージョン: 動 画 再 生 に 採 用 するプログラム: バージョン

制 作 における 基 本 事 項 2 動 作 保 証 をするOSとブラウザ ホームページを 閲 覧 する 端 末 は PCの 他 にタブレットやスマートフォンなど 多 岐 に 渡 っています PCの 場 合 に は 複 数 のOSとブラウザが 存 在 し そのバージョンも 多 くあります タブレットやスマートフォンもOSがアンドロイド とIOSが 存 在 しています こうした 複 数 の 環 境 の 中 で 正 常 な 動 作 を 保 証 する 環 境 を 明 らかにします また 複 数 の 表 示 環 境 を 自 動 的 に 判 別 して 最 適 な 解 像 度 で 表 示 するレスポンシブウェブデザインを 採 用 するか 否 かも 明 らかにします サポートOS:WindowsVista XP 7 8 マックOS9 X サポートブラウザ:InternetExplorer8 以 降 FireFox3.5 以 降 Chrome3.0 以 降 サポートタブレットOS: Android ios レスポンシブウェブデザインの 採 用 の 有 無 ( ) 制 作 期 間 と 料 金 ホームページの 制 作 は 本 仕 様 書 の 確 定 と 別 紙 契 約 書 の 締 結 が 出 来 てから 着 手 となります 本 件 のホームページ 制 作 の 料 金 と 支 払 い 方 法 は 次 のとおりです 制 作 期 間 : 着 手 から 日 間 制 作 料 金 : 円 (1) 着 手 金 : 円 ( 支 払 期 限 : 年 月 日 ) (2) 検 収 終 了 後 : 円 ( 検 収 の 定 義 および 支 払 い 時 期 は 別 紙 契 約 書 に 基 づく)

制 作 における 基 本 事 項 3 SEO SEOとは 検 索 エンジン 最 適 化 の 略 で コンテンツの 質 を 高 める 技 術 です 検 索 結 果 で 上 位 表 示 されたり 質 の 高 さからソーシャルに 情 報 が 流 れ クチコミ 効 果 も 高 まります 各 タグの 意 味 を 理 解 し 正 確 に 扱 う 事 <title><meta><h1>などは 特 に HTMLの 中 にCSSを 組 み 込 む 場 合 は 長 くなりすぎないように 注 意 すること 重 要 コンテンツには 基 本 的 にFlashやJavaScriptを 活 用 しないこと ページ 全 体 にリンクが 行 き 渡 るよう リンク 設 計 をしっかり 行 うこと 効 果 検 証 アクセス 解 析 ホームページは 出 来 上 がり 公 開 してからが 本 当 のスタートになります アクセス 解 析 は 必 ず 設 置 し 効 果 検 証 によるPDCAサイクルを 必 ず 実 行 して 下 さい アクセス 解 析 出 来 るように 設 定 を 公 開 時 点 で 必 ず 行 うこと 効 果 検 証 がしやすいよう 目 標 地 点 目 標 数 などを 設 定 しておくこと コンバージョンページを 明 確 に 定 めることが 可 能 ならば 設 定 し 検 証 の 材 料 とすること その 他 ユーザー 定 義 が 必 要 であれば 専 門 家 の 意 見 も 伺 いながら 設 定 をすること

継 続 的 更 新 サポート 制 作 における 基 本 事 項 4 ホームページは 公 開 後 に 掲 載 する 情 報 の 更 新 を 継 続 することで 価 値 が 高 まっていくものです ホームページの 更 新 には 一 定 の 手 間 がかかるものであり その 更 新 作 業 を 弊 社 がサポートするメニューをご 用 意 しています ホームページの 継 続 的 更 新 業 務 サポート 料 金 : 円 / 月 額 本 メニューの 契 約 有 無 ( 有 無 ) (1) 新 規 ページの 追 加 ( 月 間 ページを 上 限 ) 貴 社 から 原 稿 や 画 像 等 の 資 料 を 提 供 頂 いたものを 弊 社 が 編 集 して 投 稿 します (2)コンテンツ 内 容 のコンサルティング 貴 社 が 掲 載 した 内 容 を 精 査 し 閲 覧 者 の 反 応 率 を 高 めるためのコンサルティングを 実 施 します 継 続 的 運 営 代 行 ホームページの 運 営 を 弊 社 が 代 行 するメニューもご 用 意 しています ホームページの 運 営 代 行 料 金 : 円 / 月 額 本 メニューの 契 約 有 無 ( 有 無 ) (1) 新 規 ページの 追 加 ( 月 間 ページを 上 限 ) 弊 社 より 貴 社 を 取 材 させて 頂 き 毎 月 の 記 事 を 投 稿 します (2) 顧 客 とのメール 対 応 の 代 行 (3)イベントやセールス 企 画 のご 提 案 と 実 施 (4)メールマガジンの 発 行 代 行 (5)SEOや 広 告 のコンサルティングと 操 作 代 行

文 章 文 法 構 成 画 面 設 計 の 定 義 ルール1 HTML 要 素 属 性 には 小 文 字 で 記 述 し 大 文 字 は 使 用 しないこと img 要 素 にはwidth,heightを 必 ず 設 定 すること の 記 述 漏 れをしないこと HTML 要 素 は 文 書 構 造 を 示 す 為 だけに 使 用 し 整 形 する 為 には 使 用 しない(b,i,centerなど) 基 本 的 な 構 造 整 形 はCSSを 使 って 行 い また 過 剰 な 全 体 適 用 は 避 けること(bodyタグに 適 用 ) クラス 名 ID 名 は 簡 潔 である 事 が 望 ましく アンダーバーの 過 剰 使 用 を 避 けること(m_T10など) 文 字 サイズ 使 用 フォント 使 用 する 基 本 文 字 フォントはLucida Grande 代 用 英 字 用 としてCalibri, Helvetica, Arialを 使 用 使 用 する 文 字 のカラーは#333を 基 本 見 出 しなどの 部 分 は#444488,#ddddeeを 使 う 事 文 字 フォントは 適 宜 状 況 によって 利 用 し 上 記 フォントのみを 使 用 するとは 限 らない 文 字 コードはUTF-8を 基 準 とし システムとの 連 携 がある 場 合 は 状 況 に 合 わせる 文 字 サイズは 可 読 度 を 考 慮 した 上 14pxを 基 準 とし 13px 以 下 には 可 能 なかぎり 下 げない 事 変 更 が 多 い 項 目 である 為 基 本 を 確 認 踏 襲 した 上 で 状 況 に 合 わせること

画 面 設 計 の 定 義 ルール2 DOCTYPE 宣 言 meta 情 報 記 述 全 てのページでDOCTYPE 宣 言 を 記 述 すること 全 てのページで 言 語 属 性 (lang 属 性 )の 指 定 を 必 ず 行 うこと meta 要 素 のcharsetには 使 用 する 文 字 コードを 記 述 すること meta name= のrobots,description,keywords,copyrightは 必 ず 設 定 すること description,keywordsのに 内 容 は 各 ページ 毎 に 変 えること copyrightには 年 号 を 加 えないこと meta http-equivの 記 載 も 必 ず 行 うこと レイアウト 制 限 frame 要 素 は 使 用 しないこと frame 要 素 は 要 素 内 のページのみが 検 索 結 果 に 認 識 されてしまうと ナビゲーションが 表 示 されない table 要 素 は 表 組 みとしての 使 用 は 可 能 見 出 しにはth 要 素 を 使 うこと レイアウトとしてのtable 要 素 の 使 用 は 原 則 禁 止 (tableレイアウトと 言 われるもの) table 要 素 によるレイアウトはCSSによる 部 分 との 乖 離 が 発 生 する 為 問 題 が 起 きやすい table 要 素 によるレイアウトを 行 う 場 合 には 必 要 な 理 由 を 必 ず 相 互 で 確 認 すること ファーストビューを 意 識 してレイアウトする 事 ファーストビューは 横 幅 890px 縦 幅 620pxが 一 般 的

対 応 OS ブラウザ 画 面 設 計 の 定 義 ルール3 IE6,IE7への 過 剰 な 対 応 は 不 必 要 Safari,Firefox,Chromeへの 対 応 を 主 軸 にする OSに 関 してはどのOSからでも 閲 覧 できるようにすること iphoneなどのスマートフォンへの 対 策 も 考 慮 し ブラウザチェックを 行 うこと ターゲットユーザーを 明 確 に 策 定 し 利 用 されるであろうブラウザ 全 てに 対 応 する IE6,IE7などIE 系 は 表 示 の 不 具 合 が 発 生 しやすく 対 応 CSSも 少 ないため 注 意 すること どうしても 各 ブラウザに 対 応 できない 場 合 は 画 像 プログラムなどで 修 正 すること ディレクトリ 構 成 各 コンテンツページを 同 じディレクトリ 内 で 管 理 しないこと プランニングはプランニング マーケティングはマーケティングのディレクトリ 内 で 管 理 すること 各 コンテンツ 毎 にディレクトリを 作 成 し その 中 で 画 像 ファイルなどを 管 理 すること 共 通 のコンテンツ ファイルに 関 しては 共 有 のディレクトリ 内 で 管 理 すること ただし 基 本 的 に 共 有 を 作 らないこと( 削 除 した 場 合 共 有 していた 全 てが 影 響 を 受 けるため) 共 有 する 場 合 には 何 処 と 何 処 が 共 有 しているのかを 明 確 化 出 来 るよう 仕 組 化 すること

A-1 トップページ header 横 幅 は960px 縦 幅 は2500pxを 限 度 とする header 部 にはロゴ サイト 名 メニュー メニューはアイコンなどを 使 い 視 覚 的 に banner main banner 部 にはコンテンツ 内 容 を 強 調 する 内 容 または 強 調 したい 広 告 がある 場 合 に 活 用 content1 content2 content3 main 部 にはインパクトある 画 像 を 使 用 鳩 content4 contents 部 にはメインコンテンツを 並 べる 更 新 履 歴 制 作 実 績 なども 配 置 footer footer 部 にはフッターメニューの 設 置 と 縦 幅 の 活 用 画 像 背 景 の 使 用 で 立 体 的 に

サブページ 基 本 構 成 header page title header 部 にはロゴ サイト 名 メニュー トップページと 構 成 を 決 して 変 えないこと page titleはインパクトが 出 るよう 画 像 を 使 用 breadcrumb list パンくずリストの 事 必 ず 各 ページには 挿 入 main sub main 部 には 各 コンテンツの 詳 細 sub 部 には 別 途 コンテンツへの 誘 導 部 分 単 純 なバナー 配 置 ではなく 問 い 合 わせへ などの 誘 導 やユニークな 装 飾 を 行 って 面 白 楽 しく footer footer 部 にはフッターメニューの 設 置 トップページと 構 成 を 変 えず 共 通 で 使 用 する

header B-1 会 社 概 要 page title breadcrumb list main footer sub 会 社 概 要 のページには 企 業 理 念 の 挿 入 経 営 理 念 の 挿 入 各 解 説 も 入 れること また 代 表 挨 拶 へのページ 誘 導 も 行 う 会 社 の 詳 細 を 明 記 したものも 挿 入 する ただ 現 状 は 個 人 での 運 営 になるため 載 せれる 情 報 に 限 度 がある 事 に 注 意 情 報 量 が 少 なすぎる 場 合 不 信 感 に 繋 がることもある 為 個 人 でやっている 事 協 力 クリエイターがいる 事 グ ループ 活 動 をしている 事 など 明 記 できることがあれば 出 来 る 限 り 詳 細 に 記 述 する シンプルなページになりがちな 為 文 章 だけではなく 装 飾 などでミニマルながら インパクトのあるページにし ておきたい 印 象 に 残 るように 装 飾 の 都 合 上 場 合 によってはsub 部 を 撤 廃 しても 良 いかもしれない 幅 を 取 ることで 自 由 度 と 目 新 しさ イ ンパクトを 提 供

仕 様 書 確 定 の 合 意 委 託 者 と 受 託 者 は 別 紙 契 約 書 を 基 本 としたうえで 本 仕 様 書 の 内 容 について 合 意 し ホームページ 制 作 について 着 手 するものとする 本 仕 様 書 に 記 載 された 内 容 に 基 づき ホームページ 制 作 を 実 施 することに 同 意 した 平 成 年 月 日 委 託 者 受 託 者