hatte games様コーポレートサイトリニューアル提 …...3 1. コーポレートサイトリニューアルの概要 1.1. 概要 hatte games様コーポレートサイトリニューアルを実施し、社内で新ができるよう

1

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

hatte Inc. 2015.09.24

2

⽬目次

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

33333

4

4

5

55

6

6667

10

11

3

1. コーポレートサイトリニューアルの概要

1.1. 概要

hatte games様コーポレートサイトリニューアルを実施し、社内で更更新ができるようCMS導⼊入を⾏行行う。

・WordPressを使った動的サイトにする。・スマートフォン⽤用に最適化させるため、各デバイスに対応したレスポンシブデザインにする。・デザインはフルリニューアル。・テキスト要素は既存サイトのものを流流⽤用。

1.3. スケジュール

●⽉月初旬頃を⽬目安にリニューアル。

▼暫定版スケジュールhttps://docs.google.com/a/hatte.co.jp/spreadsheets/d/hogehogehogehogehoge/edit?usp=drive_̲web

1.4. 予算

60万

※御⾒見見積は別紙参照

1.5. 納品物

・ワイヤーフレーム・ディレクトリマップ・サイトデザイン編集データ（psd）・htmlデータ⼀一式・サイト更更新マニュアル

1.2. 競合サイト

●●●サイトhttp://hogehoge.com/



4

2. システム環境

2.1. クライアントデバイス環境

▼OS・Windows7以降降・Mac OSX以降降・Android OS4.2X以降降・iOS7以降降

▼ブラウザ・Internet Explorer 最新版・Chrome 最新版・Firefox 最新版・Safari 最新版

5

3. CMS概要

3.1. CMSの種類

WordPressを採⽤用。

3.2. コンテンツ更更新機能

更更新頻度度の⾼高い下記コンテンツについて、誰でもページの追加及び編集が可能な仕様とする。

・NEWS：ニュース詳細ページ（カテゴリ名、⽇日付、タイトル、画像、記事本⽂文）・WORKS：制作実績ページ（画像、ゲームタイトル、アプリリンクボタン）

上記を更更新すると、それぞれ下記に⾃自動反映できるようにする。

・NEWS：ニュース詳細ページ

・TOPのNEWSエリア（⽇日付、タイトル）※最新5件までをニュースティッカー（ニュースが1件づつ再⽣生されるアニメーション）で表⽰示

・NEWS TOPのニュース⼀一覧（画像、カテゴリ名、⽇日付、タイトル）

・WORKS：制作実績ページ

・TOPのゲームサムネイル画像

6


4.2. 配⾊色イメージ

4.3. フォントイメージ

▼デバイスフォントの場合

欧⽂文：Lato ※Googleフォントを使⽤用和⽂文：sans-‐‑‒serif ※各デバイスに準拠したフォントを表⽰示

▼画像に埋め込むフォントの場合

WORKSページに反映する画像内フォント等は、ゲーム内容のトーンに合わせる。それ以外については、欧⽂文は「Lato」和⽂文はゴシック系のフォントを使⽤用。

モノトーンベースで、差し⾊色にコーポレートカラーを⼊入れる。

4.1. デザインイメージ

シンプルでフラットなデザインをイメージ。

Web⽤用ロゴ表⽰示⾊色

アイコンRGB：241,141,52Hex：#f18d34

社名RGB：0,0,0Hex：#000000

7


4.4. レイアウト

レスポンシブデザインを採⽤用。各デバイスのブレイクポイントとレイアウトは下記を想定。※デザイン・ワイヤーフレームについては、⼤大型PCサイズのみ制作とし、中型PCサイズ・タブレットサイズ・スマートフォンサイズのデザインについてはコーディング時に⾏行行います。

▼TOPページ各デバイスレイアウト

・⼤大型PCサイズ：1200px以上・中型PCサイズ：992〜～1199px・タブレットサイズ：768〜～991px・スマートフォンサイズ：767px以下

⼤大型PCサイズ中型PCサイズタブレットサイズスマートフォンサイズ

8


▼下層ページ各デバイスレイアウト（News、Company、Recruit、Contact、Site map、Privacy Policy）



9


▼下層ページ各デバイスレイアウト（Works）



10

5. サイトマップ

Top

Contact

News

Works

Company

Site map

Recruit

Privacy Policy

News詳細ページ

11

6. Top

ヘッダーエリア（全ページ共通）

・ロゴ：トップへリンク・News：ニュース⼀一覧へリンク・Works：制作実績へリンク・Company：会社情報へリンク・Recruit：採⽤用情報へリンク・Contact：お問い合わせヘリンク

ページトップボタン

フッターエリア（全ページ共通）

・コピーライト・Site map：サイトマップヘリンク・Privacy Policy：プライバシーポリシーへリンク・twitter、facebookへのリンクボタン

フィーチャーエリア

⾳音無しのコーポレートPV動画を再⽣生。「PLAY MOVIE」ボタンクリックで、YouTube動画を画⾯面内に表⽰示し⾳音あり動画を⾃自動再⽣生。

ニュースエリア

最新ニュース5件をニュースティッカー（ニュースが1件づつ再⽣生されるアニメーション）で表⽰示。⼀一覧へボタンで、ニュース⼀一覧へ遷移。

フィーチャーエリア（動画再⽣生）

ゲームサムネイル画像エリア

制作実績のゲーム公式サイトへのリンクを配置。最新の実績6件までを掲載。サムネイルマウスオーバーで、暗転しゲームタイトルを表⽰示させるエフェクトを実装予定。例例）http://www.nxworld.net/sample/css-‐‑‒only-‐‑‒caption-‐‑‒effect/#sample01

News yyyy.mm.dd ニューステキストニューステキストニューステキストニューステキストニューステキスト⼀一覧へ

ゲームサムネイル画像

PLAY MOVIE

ゲームサムネイル画像ゲームサムネイル画像

ゲームサムネイル画像ゲームサムネイル画像ゲームサムネイル画像

© 2015 hatte games Inc. Site map ┃ Privacy Policy

To all of the people the surprise and joy

News Works Company Recruit Contact

Top ＞ News

12

6. News

News

NEWS YYYY年年MM⽉月DD⽇日

ニュースタイトルが⼊入ります。ニュースタイトルが⼊入ります。サムネイル画像

PRESS YYYY年年MM⽉月DD⽇日

プレスリリースタイトルが⼊入ります。プレスリリースタイトルが⼊入ります。サムネイル画像


プレスリリースタイトルが⼊入ります。プレスリリースタイトルが⼊入ります。サムネイル画像

1 2 3 4 5 ▲

パンくずリスト※ページの現在位置を⽰示したリンク

⾒見見出し

各ニュース⼀一覧

1ページにつき10件のニュースを掲載。サムネイル画像及びニュースタイトルクリックで、ニュース詳細ページへ遷移。掲載要素は下記を想定。

・サムネイル画像※ニュース詳細ページのメイン画像をリサ

イズして表⽰示予定。・カテゴリアイコン（NEWS、PRESS）・⽇日付・ニュースタイトル

ページャー

数字アイコンクリックで次のニュース⼀一覧ページへ遷移。



Top ＞ News > ニュースタイトルニュースタイトル

13

6. News詳細ページ（カテゴリNEWSの場合）

News

NEWS YYYY年年MM⽉月DD⽇日

ニュースタイトルが⼊入ります。ニュースタイトルが⼊入ります。

メイン画像

ニュースタイトル

要素は下記を想定。・NEWSアイコン・⽇日付・ニュースタイトル

ページャー

前後のニュース記事へのリンクを表⽰示。< 前の記事PRESSプレスリリースタイトルプレスリリースタイトル

次の記事>NEWSニュースタイトルニュースタイトルニュースタイトル

ニュース詳細エリア

ニュース⼀一覧⽤用のサムネイル表⽰示が必要なため、メイン画像は必ず⼊入れるようにする。適切切な画像がない場合は、汎⽤用できるような画像を反映。

ニュース本⽂文が⼊入ります。

SNSシェアボタン



Top ＞ News > プレスリリースタイトルプレスリリースタイトル

14

6. News詳細ページ（カテゴリPRESSの場合）

News


プレスリリースタイトルが⼊入ります。プレスリリースタイトルが⼊入ります。

ページャー

前後のニュース記事へのリンクを表⽰示。< 前の記事PRESSプレスリリースタイトルプレスリリースタイトル

次の記事>NEWSニュースタイトルニュースタイトルニュースタイトル

プレスリリース本⽂文が⼊入ります。

メイン画像

プレスリリースタイトル

要素は下記を想定。・PRESSアイコン・⽇日付・プレスリリースタイトル

プレスリリース詳細エリア

ニュース⼀一覧⽤用のサムネイル表⽰示が必要なため、メイン画像は必ず⼊入れるようにする。適切切な画像がない場合は、汎⽤用できるような画像を反映。



SNSシェアボタン

Top ＞ Works

15

6. Works

Works

制作実績紹介⼀一覧

1ページにつき6件の実績を掲載。

要素は下記を想定・ゲームサムネイル画像・ゲームタイトル・プラットフォームリンクボタン

サムネイル画像・ゲームタイトルクリックで、ゲーム公式サイトへ遷移。プラットフォームリンクボタンクリックで、アプリページヘ遷移。※ない場合はボタン⾮非表⽰示。

ページャー

数字アイコンクリックで次のWORKS⼀一覧ページへ遷移。1 2 ▲

ゲームタイトルゲームタイトルゲームタイトル

iOS Android

サムネイル画像


iOS Android



iOS Android



iOS Android



iOS Android



iOS Android




Top ＞ Company

16

6. Company

Company

会社概要エリア

既存の内容を反映。会社概要


沿⾰革


アクセス

Google Mapsの埋め込み地図が⼊入ります。

沿⾰革エリア

既存の内容を反映。

アクセスエリア




Top ＞ Recruit

17

6. Recruit

Recruit

採⽤用情報エリア

既存の内容を反映。受付フォームは、mailtoかGoogleフォームか検討。

採⽤用情報が⼊入ります。



Top ＞ Contact

18

6. Contact

Contact

お問い合わせ窓⼝口エリア

既存の内容を反映。受付フォームは、mailtoかGoogleフォームか検討。

お問い合わせ窓⼝口詳細が⼊入ります。



Top ＞ Site map

19

6. Site map

Site map

サイトマップエリア

各テキストリンククリックで、各コンテンツページへ遷移。

> Top

> News

> Works

> Company

> Recruit

> Contact

> Privacy Policy



Top ＞ Privacy Policy

20

6. Privacy Policy

Privacy Policy

プライバシーポリシーエリア


プライバシーポリシーが⼊入ります。



21

6. タブレット・スマートフォン⽤用ヘッダー・フッター

コンテンツエリア

ヘッダーエリア

・ロゴ：トップへリンク・メニューボタン

ページトップボタン

フッターエリア

・Site map：サイトマップヘリンク・Privacy Policy：プライバシーポリシーへリンク・コピーライト・twitter、facebookへのリンクボタンPrivacy Policy

Site map

メニューボタンタップ時

News

Works

Company

Recruit

Contact

パンくずリストについて

タブレット、スマートフォンに関してはパンくずリストは無し。

⾒見見出し

© 2015 hatte games Inc.

Documents

hatte games様コーポレートサイトリニューアル提 …...3 1. コーポレートサイトリニューアルの概要 1.1. 概要 hatte games様コーポレートサイトリニューアルを実施し、社内で新ができるよう