提案書

hatte games 様 コーポレートサイトリニューアル 提 案 書 hatte Inc. 2015.09.24 1

目 次 1. コーポレートサイトリニューアルの 概 要 1.1. 概 要 1.2. 競 合 サイト 1.3. スケジュール 1.4. 予 算 1.5. 納 品 物 2. システム 環 境 2.1. クライアントデバイス 環 境 3. CMS 概 要 3.1. CMSの 種 類 3.2. コンテンツ 更更 新 機 能 4. デザイン 概 要 4.1. デザインイメージ 4.2. 配 色イメージ 4.3. フォントイメージ 4.4. レイアウト 5. サイトマップ 6. ワイヤーフレーム 3 3 3 3 3 3 4 4 5 5 5 6 6 6 6 7 10 11 2

1. コーポレートサイトリニューアルの 概 要 1.1. 概 要 hatte games 様 コーポレートサイトリニューアルを 実 施 し 社 内 で 更更 新 ができるようCMS 導 入を 行行う WordPressを 使 った 動 的 サイトにする スマートフォン 用に 最 適 化 させるため 各 デバイスに 対 応 したレスポンシブデザインにする デザインはフルリニューアル テキスト 要 素 は 既 存 サイトのものを 流流 用 1.2. 競 合 サイト サイト http://hogehoge.com/ 1.3. スケジュール サイト http://hogehoge.com/ サイト http://hogehoge.com/ 月 初 旬 頃 を 目 安 にリニューアル 暫 定 版 スケジュール https://docs.google.com/a/hatte.co.jp/spreadsheets/d/hogehogehogehogehoge/edit?usp=drive_ web 1.4. 予 算 60 万 御 見見 積 は 別 紙 参 照 1.5. 納 品 物 ワイヤーフレーム ディレクトリマップ サイトデザイン 編 集 データ(psd) htmlデータ 一 式 サイト 更更 新 マニュアル 3

2. システム 環 境 2.1. クライアントデバイス 環 境 OS Windows7 以 降降 Mac OSX 以 降降 Android OS4.2X 以 降降 ios7 以 降降 ブラウザ Internet Explorer 最 新 版 Chrome 最 新 版 Firefox 最 新 版 Safari 最 新 版 4

3. CMS 概 要 3.1. CMSの 種 類 WordPressを 採 用 3.2. コンテンツ 更更 新 機 能 更更 新 頻 度度 の 高い 下 記 コンテンツについて 誰 でもページの 追 加 及 び 編 集 が 可 能 な 仕 様 とする NEWS:ニュース 詳 細 ページ(カテゴリ 名 日 付 タイトル 画 像 記 事 本 文) WORKS: 制 作 実 績 ページ( 画 像 ゲームタイトル アプリリンクボタン) 上 記 を 更更 新 すると それぞれ 下 記 に 自 動 反 映 できるようにする NEWS:ニュース 詳 細 ページ TOPのNEWSエリア( 日 付 タイトル) 最 新 5 件 までをニュースティッカー(ニュースが1 件 づつ 再 生されるアニメーション)で 表 示 NEWS TOPのニュース 一 覧 ( 画 像 カテゴリ 名 日 付 タイトル) WORKS: 制 作 実 績 ページ TOPのゲームサムネイル 画 像 5

4. デザイン 概 要 4.1. デザインイメージ シンプルでフラットなデザインをイメージ 4.2. 配 色イメージ モノトーンベースで 差 し 色にコーポレートカラーを 入れる 4.3. フォントイメージ Web 用ロゴ 表 示 色 アイコン RGB:241,141,52 Hex:#f18d34 社 名 RGB:0,0,0 Hex:#000000 デバイスフォントの 場 合 欧 文:Lato Googleフォントを 使 用 和 文:sans- serif 各 デバイスに 準 拠 したフォントを 表 示 画 像 に 埋 め 込 むフォントの 場 合 WORKSページに 反 映 する 画 像 内 フォント 等 は ゲーム 内 容 のトーンに 合 わせる それ 以 外 については 欧 文は Lato 和 文はゴシック 系 のフォントを 使 用 6

4. デザイン 概 要 4.4. レイアウト レスポンシブデザインを 採 用 各 デバイスのブレイクポイントとレイアウトは 下 記 を 想 定 デザイン ワイヤーフレームについては 大 型 PCサイズのみ 制 作 とし 中 型 PCサイズ タブレットサイズ スマートフォンサイズのデザインについてはコーディング 時 に 行行います TOPページ 各 デバイスレイアウト 大 型 PCサイズ:1200px 以 上 中 型 PCサイズ:992 ~1199px タブレットサイズ:768 ~991px スマートフォンサイズ:767px 以 下 大 型 PCサイズ 中 型 PCサイズ タブレットサイズ スマートフォンサイズ 7

4. デザイン 概 要 下 層 ページ 各 デバイスレイアウト (News Company Recruit Contact Site map Privacy Policy) 大 型 PCサイズ:1200px 以 上 中 型 PCサイズ:992 ~1199px タブレットサイズ:768 ~991px スマートフォンサイズ:767px 以 下 大 型 PCサイズ 中 型 PCサイズ タブレットサイズ スマートフォンサイズ 8

4. デザイン 概 要 下 層 ページ 各 デバイスレイアウト (Works) 大 型 PCサイズ:1200px 以 上 中 型 PCサイズ:992 ~1199px タブレットサイズ:768 ~991px スマートフォンサイズ:767px 以 下 大 型 PCサイズ 中 型 PCサイズ タブレットサイズ スマートフォンサイズ 9

5. サイトマップ Top News News 詳 細 ページ Works Company Recruit Contact Site map Privacy Policy 10

6. Top フィーチャーエリア ( 動 画 再 生) PLAY MOVIE News Works Company Recruit Contact To all of the people the surprise and joy ヘッダーエリア( 全 ページ 共 通 ) ロゴ:トップへリンク News:ニュース 一 覧 へリンク Works: 制 作 実 績 へリンク Company: 会 社 情 報 へリンク Recruit: 採 用 情 報 へリンク Contact:お 問 い 合 わせヘリンク フィーチャーエリア 音 無 しのコーポレートPV 動 画 を 再 生 PLAY MOVIE ボタンクリックで YouTube 動 画 を 画 面 内 に 表 示し 音あり 動 画 を 自 動 再 生 ニュースエリア 最 新 ニュース5 件 をニュースティッカー (ニュースが1 件 づつ 再 生されるアニメーショ ン)で 表 示 一 覧 へボタンで ニュース 一 覧 へ 遷 移 News yyyy.mm.dd ニューステキストニューステキ ストニ ュー ステキ ストニ ュー ステキ スト ニュー ステ キスト 一 覧 へ ゲームサムネイル 画 像 エリア ゲームサムネイル 画 像 ゲームサムネイル 画 像 ゲームサムネイル 画 像 制 作 実 績 のゲーム 公 式 サイトへのリンクを 配 置 最 新 の 実 績 6 件 までを 掲 載 サムネイルマウスオーバーで 暗 転 しゲーム タイトルを 表 示させるエフェクトを 実 装 予 定 例例 ) http://www.nxworld.net/sample/css- only- caption- effect/#sample01 ページトップボタン ゲームサムネイル 画 像 ゲームサムネイル 画 像 ゲームサムネイル 画 像 2015 hatte games Inc. Site map Privacy Policy フッターエリア( 全 ページ 共 通 ) コピーライト Site map:サイトマップヘリンク Privacy Policy:プライバシーポリシーへリ ンク twitter facebookへのリンクボタン 11

6. News News Works Company Recruit Contact Top > News News パンくずリスト ページの 現 在 位 置 を 示したリンク 見見 出 し NEWS YYYY 年年 MM 月DD 日 サムネイル 画 像 ニュースタイトルが 入ります ニュースタイトルが 入ります 各 ニュース 一 覧 1ページにつき10 件 のニュースを 掲 載 サムネイル 画 像 及 びニュースタイトルクリッ クで ニュース 詳 細 ページへ 遷 移 掲 載 要 素 は 下 記 を 想 定 サムネイル 画 像 PRESS YYYY 年年 MM 月DD 日 プレスリリースタイトルが 入ります プレスリリースタイトルが 入ります サムネイル 画 像 ニュース 詳 細 ページのメイン 画 像 をリサ イズして 表 示 予 定 カテゴリアイコン(NEWS PRESS) 日 付 ニュースタイトル PRESS YYYY 年年 MM 月DD 日 サムネイル 画 像 プレスリリースタイトルが 入ります プレスリリースタイトルが 入ります ページャー 数 字 アイコンクリックで 次 のニュース 一 覧 ページへ 遷 移 1 2 3 4 5 2015 hatte games Inc. Site map Privacy Policy 12

6. News 詳 細 ページ(カテゴリ NEWSの 場 合 ) News Works Company Recruit Contact Top > News > ニュースタイトルニュースタイト ル News NEWS YYYY 年年 MM 月DD 日 ニュースタイトルが 入ります ニュースタイトルが 入ります ニュースタイトル 要 素 は 下 記 を 想 定 NEWSアイコン 日 付 ニュースタイトル SNSシェアボタン ニュース 詳 細 エリア メイン 画 像 ニュース 一 覧 用のサムネイル 表 示が 必 要 なた め メイン 画 像 は 必 ず 入れるようにする 適 切切 な 画 像 がない 場 合 は 汎 用できるような 画 像 を 反 映 ニュース 本 文が 入ります < 前 の 記 事 PRESS プレスリリースタイトルプレ スリリースタイトル NEWS ニュースタイトルニュースタ イトルニュースタイトル 次 の 記 事 > ページャー 前 後 のニュース 記 事 へのリンクを 表 示 2015 hatte games Inc. Site map Privacy Policy 13

6. News 詳 細 ページ(カテゴリ PRESSの 場 合 ) News Works Company Recruit Contact Top > News > プレスリリースタイトルプレスリ リー スタイ トル News PRESS YYYY 年年 MM 月DD 日 プレスリリースタイトルが 入ります プレスリリースタイトルが 入ります プレスリリースタイトル 要 素 は 下 記 を 想 定 PRESSアイコン 日 付 プレスリリースタイトル SNSシェアボタン プレスリリース 詳 細 エリア メイン 画 像 ニュース 一 覧 用のサムネイル 表 示が 必 要 なた め メイン 画 像 は 必 ず 入れるようにする 適 切切 な 画 像 がない 場 合 は 汎 用できるような 画 像 を 反 映 プレスリリース 本 文が 入ります < 前 の 記 事 PRESS プレスリリースタイトルプレ スリリースタイトル NEWS ニュースタイトルニュースタ イトルニュースタイトル 次 の 記 事 > ページャー 前 後 のニュース 記 事 へのリンクを 表 示 2015 hatte games Inc. Site map Privacy Policy 14

6. Works News Works Company Recruit Contact Top > Works Works 制 作 実 績 紹 介 一 覧 1ページにつき6 件 の 実 績 を 掲 載 サムネイル 画 像 サムネイル 画 像 サムネイル 画 像 要 素 は 下 記 を 想 定 ゲームサムネイル 画 像 ゲームタイトル プラットフォームリンクボタン ゲームタイトルゲームタイトル ゲームタイトル ios Android ゲームタイトルゲームタイトル ゲームタイトル ios Android ゲームタイトルゲームタイトル ゲームタイトル ios Android サムネイル 画 像 ゲームタイトルクリックで ゲーム 公 式 サイトへ 遷 移 プラットフォームリンクボタンクリックで アプリページヘ 遷 移 ない 場 合 はボタン 非 表 示 サムネイル 画 像 サムネイル 画 像 サムネイル 画 像 ゲームタイトルゲームタイトル ゲームタイトル ゲームタイトルゲームタイトル ゲームタイトル ゲームタイトルゲームタイトル ゲームタイトル ios Android ios Android ios Android 1 2 ページャー 数 字 アイコンクリックで 次 のWORKS 一 覧 ページへ 遷 移 2015 hatte games Inc. Site map Privacy Policy 15

6. Company News Works Company Recruit Contact Top > Company Company 会 社 概 要 会 社 概 要 エリア 既 存 の 内 容 を 反 映 プレスリリース 本 文が 入ります 沿 革 沿 革エリア 既 存 の 内 容 を 反 映 プレスリリース 本 文が 入ります アクセス アクセスエリア 既 存 の 内 容 を 反 映 Google Mapsの 埋 め 込 み 地 図 が 入ります 2015 hatte games Inc. Site map Privacy Policy 16

6. Recruit News Works Company Recruit Contact Top > Recruit Recruit 採 用 情 報 エリア 既 存 の 内 容 を 反 映 受 付 フォームは mailtoかgoogleフォーム か 検 討 採 用 情 報 が 入ります 2015 hatte games Inc. Site map Privacy Policy 17

6. Contact News Works Company Recruit Contact Top > Contact Contact お 問 い 合 わせ 窓 口エリア 既 存 の 内 容 を 反 映 受 付 フォームは mailtoかgoogleフォーム か 検 討 お 問 い 合 わせ 窓 口 詳 細 が 入ります 2015 hatte games Inc. Site map Privacy Policy 18

6. Site map News Works Company Recruit Contact Top > Site map Site map サイトマップエリア > Top > News 各 テキストリンククリックで 各 コンテンツ ページへ 遷 移 > Works > Company > Recruit > Contact > Privacy Policy 2015 hatte games Inc. Site map Privacy Policy 19

6. Privacy Policy News Works Company Recruit Contact Top > Privacy Policy Privacy Policy プライバシーポリシーエリア 既 存 の 内 容 を 反 映 プライバシーポリシーが 入ります 2015 hatte games Inc. Site map Privacy Policy 20

6. タブレット スマートフォン 用ヘッダー フッター メニューボタンタップ 時 見見 出 し ヘッダーエリア ロゴ:トップへリンク メニューボタン パンくずリストについて タブレット スマートフォンに 関 してはパン くずリストは 無 し News Works Company Recruit Contact コンテンツエリア ページトップボタン フッターエリア Site map Privacy Policy Site map:サイトマップヘリンク Privacy Policy:プライバシーポリシーへリンク コピーライト twitter facebookへのリンクボタン 2015 hatte games Inc. 21