Upload
others
View
2
Download
0
Embed Size (px)
Citation preview
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/
●●●サイトhttp://hogehoge.com/
●●●サイト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. デザイン概要
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.4. レイアウト
レスポンシブデザインを採⽤用。各デバイスのブレイクポイントとレイアウトは下記を想定。※デザイン・ワイヤーフレームについては、⼤大型PCサイズのみ制作とし、中型PCサイズ・タブレットサイズ・スマートフォンサイズのデザインについてはコーディング時に⾏行行います。
▼TOPページ各デバイスレイアウト
・⼤大型PCサイズ:1200px以上・中型PCサイズ:992〜~1199px・タブレットサイズ:768〜~991px・スマートフォンサイズ:767px以下
⼤大型PCサイズ 中型PCサイズ タブレットサイズ スマートフォンサイズ
8
4. デザイン概要
▼下層ページ各デバイスレイアウト(News、Company、Recruit、Contact、Site map、Privacy Policy)
・⼤大型PCサイズ:1200px以上・中型PCサイズ:992〜~1199px・タブレットサイズ:768〜~991px・スマートフォンサイズ:767px以下
⼤大型PCサイズ 中型PCサイズ タブレットサイズ スマートフォンサイズ
9
4. デザイン概要
▼下層ページ各デバイスレイアウト(Works)
・⼤大型PCサイズ:1200px以上・中型PCサイズ:992〜~1199px・タブレットサイズ:768〜~991px・スマートフォンサイズ:767px以下
⼤大型PCサイズ 中型PCサイズ タブレットサイズ スマートフォンサイズ
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⽇日
プレスリリースタイトルが⼊入ります。プレスリリースタイトルが⼊入ります。サムネイル画像
PRESS YYYY年年MM⽉月DD⽇日
プレスリリースタイトルが⼊入ります。プレスリリースタイトルが⼊入ります。サムネイル画像
1 2 3 4 5 ▲
パンくずリスト※ページの現在位置を⽰示したリンク
⾒見見出し
各ニュース⼀一覧
1ページにつき10件のニュースを掲載。サムネイル画像及びニュースタイトルクリックで、ニュース詳細ページへ遷移。掲載要素は下記を想定。
・サムネイル画像※ニュース詳細ページのメイン画像をリサ
イズして表⽰示予定。・カテゴリアイコン(NEWS、PRESS)・⽇日付・ニュースタイトル
ページャー
数字アイコンクリックで次のニュース⼀一覧ページへ遷移。
© 2015 hatte games Inc. Site map ┃ Privacy Policy
News Works Company Recruit Contact
Top > News > ニュースタイトルニュースタイトル
13
6. News詳細ページ(カテゴリNEWSの場合)
News
NEWS YYYY年年MM⽉月DD⽇日
ニュースタイトルが⼊入ります。ニュースタイトルが⼊入ります。
メイン画像
ニュースタイトル
要素は下記を想定。・NEWSアイコン・⽇日付・ニュースタイトル
ページャー
前後のニュース記事へのリンクを表⽰示。< 前の記事PRESSプレスリリースタイトルプレスリリースタイトル
次の記事>NEWSニュースタイトルニュースタイトルニュースタイトル
ニュース詳細エリア
ニュース⼀一覧⽤用のサムネイル表⽰示が必要なため、メイン画像は必ず⼊入れるようにする。適切切な画像がない場合は、汎⽤用できるような画像を反映。
ニュース本⽂文が⼊入ります。
SNSシェアボタン
© 2015 hatte games Inc. Site map ┃ Privacy Policy
News Works Company Recruit Contact
Top > News > プレスリリースタイトルプレスリリースタイトル
14
6. News詳細ページ(カテゴリPRESSの場合)
News
PRESS YYYY年年MM⽉月DD⽇日
プレスリリースタイトルが⼊入ります。プレスリリースタイトルが⼊入ります。
ページャー
前後のニュース記事へのリンクを表⽰示。< 前の記事PRESSプレスリリースタイトルプレスリリースタイトル
次の記事>NEWSニュースタイトルニュースタイトルニュースタイトル
プレスリリース本⽂文が⼊入ります。
メイン画像
プレスリリースタイトル
要素は下記を想定。・PRESSアイコン・⽇日付・プレスリリースタイトル
プレスリリース詳細エリア
ニュース⼀一覧⽤用のサムネイル表⽰示が必要なため、メイン画像は必ず⼊入れるようにする。適切切な画像がない場合は、汎⽤用できるような画像を反映。
© 2015 hatte games Inc. Site map ┃ Privacy Policy
News Works Company Recruit Contact
SNSシェアボタン
Top > Works
15
6. Works
Works
制作実績紹介⼀一覧
1ページにつき6件の実績を掲載。
要素は下記を想定・ゲームサムネイル画像・ゲームタイトル・プラットフォームリンクボタン
サムネイル画像・ゲームタイトルクリックで、ゲーム公式サイトへ遷移。プラットフォームリンクボタンクリックで、アプリページヘ遷移。※ない場合はボタン⾮非表⽰示。
ページャー
数字アイコンクリックで次のWORKS⼀一覧ページへ遷移。1 2 ▲
ゲームタイトルゲームタイトルゲームタイトル
iOS Android
サムネイル画像
ゲームタイトルゲームタイトルゲームタイトル
iOS Android
サムネイル画像
ゲームタイトルゲームタイトルゲームタイトル
iOS Android
サムネイル画像
ゲームタイトルゲームタイトルゲームタイトル
iOS Android
サムネイル画像
ゲームタイトルゲームタイトルゲームタイトル
iOS Android
サムネイル画像
ゲームタイトルゲームタイトルゲームタイトル
iOS Android
サムネイル画像
© 2015 hatte games Inc. Site map ┃ Privacy Policy
News Works Company Recruit Contact
Top > Company
16
6. Company
Company
会社概要エリア
既存の内容を反映。会社概要
プレスリリース本⽂文が⼊入ります。
沿⾰革
プレスリリース本⽂文が⼊入ります。
アクセス
Google Mapsの埋め込み地図が⼊入ります。
沿⾰革エリア
既存の内容を反映。
アクセスエリア
既存の内容を反映。
© 2015 hatte games Inc. Site map ┃ Privacy Policy
News Works Company Recruit Contact
Top > Recruit
17
6. Recruit
Recruit
採⽤用情報エリア
既存の内容を反映。受付フォームは、mailtoかGoogleフォームか検討。
採⽤用情報が⼊入ります。
© 2015 hatte games Inc. Site map ┃ Privacy Policy
News Works Company Recruit Contact
Top > Contact
18
6. Contact
Contact
お問い合わせ窓⼝口エリア
既存の内容を反映。受付フォームは、mailtoかGoogleフォームか検討。
お問い合わせ窓⼝口詳細が⼊入ります。
© 2015 hatte games Inc. Site map ┃ Privacy Policy
News Works Company Recruit Contact
Top > Site map
19
6. Site map
Site map
サイトマップエリア
各テキストリンククリックで、各コンテンツページへ遷移。
> Top
> News
> Works
> Company
> Recruit
> Contact
> Privacy Policy
© 2015 hatte games Inc. Site map ┃ Privacy Policy
News Works Company Recruit Contact
Top > Privacy Policy
20
6. Privacy Policy
Privacy Policy
プライバシーポリシーエリア
既存の内容を反映。
プライバシーポリシーが⼊入ります。
© 2015 hatte games Inc. Site map ┃ Privacy Policy
News Works Company Recruit Contact
21
6. タブレット・スマートフォン⽤用ヘッダー・フッター
コンテンツエリア
ヘッダーエリア
・ロゴ:トップへリンク・メニューボタン
ページトップボタン
フッターエリア
・Site map:サイトマップヘリンク・Privacy Policy:プライバシーポリシーへリンク・コピーライト・twitter、facebookへのリンクボタンPrivacy Policy
Site map
メニューボタンタップ時
News
Works
Company
Recruit
Contact
パンくずリストについて
タブレット、スマートフォンに関してはパンくずリストは無し。
⾒見見出し
© 2015 hatte games Inc.