GMO MobileHomePage

テンプレート 解 説 書 (キャンペーンサイト) Last update 2010/02/26 1

目 次 1. テンプレート 解 説 書 (キャンペーンサイト)について...3 2. テンプレートを 利 用 した 携 帯 サイト 制 作 方 法...4 3. 全 ページ 共 通 画 像 について...5 4. トップページ 解 説...7 5. 問 題 ページ 解 説...8 6. 正 解 ページ 解 説...9 7. はずれページ 解 説...10 8. 文 言 を 編 集 する... 11 9. サーバにアップして 完 成...12 参 考 : 画 像 一 覧 (キャンペーンサイト)...13 2

1. テンプレート 解 説 書 (キャンペーンサイト)について テンプレート 解 説 書 はラウンドアバウトが 動 作 する 環 境 上 で 利 用 可 能 な 携 帯 サイト 制 作 用 のテンプレートに 関 する 解 説 を 行 います この 解 説 書 を 利 用 することで 携 帯 サイト 制 作 経 験 がない 場 合 でもテンプレートを 使 って どのように 携 帯 サイトを 制 作 するかを 解 説 し ていきます 本 書 ではあくまでテンプレートとほぼ 同 じレイアウトのサイトを 作 成 する 方 法 を 解 説 していきます 尚 テンプレート 解 説 書 はテンプレート 毎 に 用 意 されています 本 書 は キャンペーン を 想 定 したサンプルになります テンプレートの 対 応 端 末 テンプレートが 対 応 している 端 末 はテーブルに 対 応 している 3G 端 末 キャンペーンサイトは 以 下 のコンテンツが 用 意 されております トップページ 問 題 ページ 正 解 ページ はずれページ 各 サンプルページを1ページ 毎 に 解 説 を 行 っていきます テンプレート 内 で 利 用 されている 全 画 像 のファイル 名 サイズについては 本 書 最 後 の 画 像 一 覧 を 参 照 ください ラウンドアバウトを 利 用 した 携 帯 サイト 開 発 手 法 についてはデベロッパーズサイトよ り 開 発 ガイド( 基 本 編 ) を 参 照 してください(デベロッパーズサイトへの 登 録 が 必 要 です) 3

2. テンプレートを 利 用 した 携 帯 サイト 制 作 方 法 テンプレートを 利 用 した 携 帯 サイト 制 作 は 以 下 の 手 順 で 行 われます 手 順 1 テンプレート 内 で 利 用 されている 全 ページ 共 通 画 像 を 独 自 画 像 に 置 き 換 える 全 ページ 共 通 画 像 について p.5 手 順 2 各 ページで 利 用 されているメイン 画 像 を 独 自 画 像 に 置 き 換 える トップページ 解 説 p.7 問 題 ページ 解 説 p.8 正 解 ページ 解 説 p.9 はずれページ 解 説 p.10 手 順 3 各 ページの 自 由 コンテンツ 部 分 を 必 要 に 応 じて 編 集 する 自 由 コンテンツ 部 分 とは 作 成 するサイトによって 内 容 がテンプレートと 異 なってくる 箇 所 トップページ 解 説 p.7 問 題 ページ 解 説 p.8 正 解 ページ 解 説 p.9 はずれページ 解 説 p.10 手 順 4 各 ページの 文 言 を 編 集 する 文 言 を 編 集 する p.11 手 順 5 コンテンツをサーバにアップすれば 完 成 サーバにアップして 完 成 p.12 では 実 際 に 次 のページから 解 説 をします 4

3. 全 ページ 共 通 画 像 について テンプレートで 利 用 されている 画 像 の 中 には 全 ページで 共 通 に 利 用 されている 画 像 があります このキ ャンペーンサイトを 想 定 したテンプレートでは 以 下 の 画 像 が 共 通 で 利 用 されています これらの 全 ペー ジ 共 通 画 像 をサイトに 合 わせて 独 自 画 像 と 置 き 換 えます 簡 単 に 置 き 換 えるためには 実 際 にサイトで 利 用 されているファイル 名 と 同 じファイル 名 にする 必 要 があ ります ファイル 名 を 変 更 する 場 合 は HTML ファイルの img タグを 修 正 してください 1 項 目 画 像 1 ファイル 名 :menu01.gif サイズ: 横 480px 縦 75px ( 自 由 ) 2 項 目 画 像 2 ファイル 名 :menu02.gif サイズ: 横 480px 縦 75px ( 自 由 ) 3 項 目 画 像 3 ファイル 名 :menu03.gif サイズ: 横 480px 縦 75px ( 自 由 ) 4 項 目 画 像 4 ファイル 名 :menu04.gif サイズ: 横 480px 縦 75px ( 自 由 )) 5

5 フッター 画 像 ファイル 名 :footer.jpg サイズ: 横 480px 以 内 縦 200px ( 自 由 ) 以 上 の 画 像 を 独 自 画 像 と 置 き 換 えれば 手 順 1は 終 了 です 6

4. トップページ 解 説 1 トップページのメイン 画 像 について トップページのメイン 画 像 を 独 自 画 像 と 置 き 換 えます 画 像 ファイル 名 : header01.jpg サイズ: 横 480px 縦 510px ( 自 由 ) 2 トップページの 自 由 コンテンツについて キャプチャ 画 像 の 赤 枠 部 分 は 自 由 コンテンツとなります 作 成 するコンテンツの 内 容 に 合 わせて 自 由 に 変 更 してください 同 じレイアウトで 画 像 だけ 変 更 する 場 合 赤 枠 内 の 画 像 を 独 自 画 像 と 置 き 換 えてください 自 由 に 変 更 する 場 合 他 のテンプレートの 一 部 分 をコピーして 利 用 することもできます その 際 は コピー 元 テンプレートで 使 われている CSS も 一 緒 にコピ ーしてください また 完 全 に 独 自 に 作 成 する 場 合 でも CSS に 関 し てはデフォルトの style.css 内 の class を 極 力 利 用 するようにしてく ださい 携 帯 サイトで 利 用 できるタグは PC と 異 なるので 注 意 が 必 要 です 携 帯 サイトでは 使 える CSS が 限 られているので テンプレート 内 で 利 用 している CSS 以 外 を 利 用 する 場 合 は 想 定 通 り 動 かな い 可 能 性 がございます 7

5. 問 題 ページ 解 説 1 問 題 ページのメイン 画 像 について 問 題 ページのメイン 画 像 を 独 自 画 像 と 置 き 換 えます このメイン 画 像 は 正 解 ページとはずれページでも 利 用 されている 部 分 的 な 共 通 画 像 になります 画 像 ファイル 名 : header02.jpg サイズ: 横 480px 縦 220px ( 自 由 ) 2 問 題 ページの 自 由 コンテンツについて キャプチャ 画 像 の 赤 枠 部 分 は 自 由 コンテンツになります コンンテンツの 内 容 に 合 わせて 自 由 に 変 更 してください 携 帯 サイトで 利 用 できるタグは PC と 異 なるので 注 意 が 必 要 です 携 帯 サイトでは 使 える CSS が 限 られているので テンプレート 内 で 利 用 してい る CSS 以 外 を 利 用 する 場 合 は 想 定 通 り 動 かない 可 能 性 がございます このレイアウトを 利 用 する 場 合 この 問 題 ページではラウンドアバウトの 独 自 タグ <ra:field><ra:area>を 利 用 しています これらのタグを 利 用 するこ とで このテンプレートで 使 われているようなクリッカブルマップを 作 成 することができます クリッカブルマップは 元 は1 枚 の 画 像 からリンクしたい 箇 所 を 考 え て 賽 の 目 に 細 かく 切 り 分 けた 画 像 の 連 続 で 構 成 されています 詳 細 はデベロッパーズサイト(http://developer.symmetric.jp)からダウンロード 可 能 な 開 発 ガイド( 応 用 編 )を 参 照 ください 8

6. 正 解 ページ 解 説 1 正 解 ページメイン 画 像 正 解 ページのメイン 画 像 は 問 題 ページのメイン 画 像 と 同 じなので 新 たに 独 自 画 像 と 置 き 換 える 必 要 はありませ ん 2 正 解 ページの 自 由 コンテンツについて キャプチャ 画 像 の 赤 枠 部 分 は 自 由 コンテンツになります 作 成 するコンテンツの 内 容 に 合 わせて 自 由 に 変 更 してく ださい 携 帯 サイトで 利 用 できるタグは PC と 異 なるので 注 意 が 必 要 です 携 帯 サイトでは 使 える CSS が 限 られているので テンプレート 内 で 利 用 してい る CSS 以 外 を 利 用 する 場 合 は 想 定 通 り 動 かない 可 能 性 がございます このレイアウトを 利 用 する 場 合 コーナータイトル 画 像 とその 他 の 画 像 を 独 自 のコンテンツに 合 わ せた 内 容 の 画 像 と 置 き 換 えてください 尚 文 字 色 など style の 変 更 については style.css 内 の class を 利 用 してください のボタンの mailto リンクに 関 しては#を 適 切 な 内 容 に 変 更 してご 利 用 ください 9

7. はずれページ 解 説 1 はずれページメイン 画 像 はずれページのメイン 画 像 は 問 題 ページのメイン 画 像 と 同 じなので 新 たに 独 自 画 像 と 置 き 換 える 必 要 はあり ません 2 はずれページの 自 由 コンテンツについて キャプチャ 画 像 の 赤 枠 部 分 は 自 由 コンテンツになりま す 作 成 するコンテンツの 内 容 に 合 わせて 自 由 に 変 更 し てください 携 帯 サイトで 利 用 できるタグは PC と 異 なるので 注 意 が 必 要 です 携 帯 サイトでは 使 える CSS が 限 られているので テンプレート 内 で 利 用 して いる CSS 以 外 を 利 用 する 場 合 は 想 定 通 り 動 かない 可 能 性 がございます このレイアウトを 利 用 する 場 合 コーナータイトル 画 像 とその 他 の 画 像 を 独 自 のコンテンツに 合 わせた 内 容 の 画 像 と 置 き 換 えてください 尚 文 字 色 など style の 変 更 については style.css 内 の class を 利 用 してください このキャンペーンサイトの 想 定 としては 誰 でも 絶 対 に 応 募 できるけど 一 工 夫 してあるサイトを 想 定 している ので のボタンは 現 在 問 題 ページにリンクし ており 何 度 でも 応 募 可 能 になっています こちらはコ ンテンツの 内 容 によって 変 更 してください 10

8. 文 言 を 編 集 する 最 後 に 各 ページのテキスト 文 言 をサイト 内 容 に 合 わせて 編 集 します テキスト 編 集 には DreamWeaver などを 使 って 直 接 HTML ファイルを 編 集 してください テキスト 文 言 編 集 時 には 下 記 点 に 注 意 してください 1 行 で 表 示 するテキスト 文 字 数 は 12 文 字 以 内 12 文 字 以 内 とすることで 意 図 しない 折 り 返 しが 少 なくなります 右 又 は 左 に 画 像 逆 側 にテキストのようなレイアウトではこの 限 りではありません 各 ページの title タグも 忘 れずに 編 集 を 行 ってください また 各 ページに keyword と description を 記 載 する 箇 所 もありますので こちらも 忘 れずに 編 集 をおこなってください キーワード 記 述 部 分 <meta name="keyword" contents="キーワードを 記 述 " /> ページ 紹 介 記 述 部 分 <meta name="description" contents="ページ 内 容 の 紹 介 文 を 記 述 " /> 尚 多 くの 携 帯 サイトでカタカナは 半 角 文 字 で 入 力 しますが ラウンドアバウトが 半 角 への 変 換 は 自 動 的 に 行 うので テキスト 文 言 編 集 時 には 半 角 を 意 識 する 必 要 はありません 11

9. サーバにアップして 完 成 全 ページ 共 通 画 像 各 ページメイン 画 像 自 由 コンテンツ 部 分 文 言 の 編 集 を 終 えるとテンプレー トを 利 用 した 携 帯 サイト 制 作 は 完 了 です 最 後 に 作 成 したコンテンツ(HTML 画 像 CSS)をサーバ 上 にアップロードすれば 完 了 です 以 後 テンプレートをカスタマイズする 方 法 として 他 のテンプレートの 一 部 分 だけを 利 用 したりする ことで 自 由 コンテンツ 部 分 を 変 更 したり 新 たなページを 作 成 したりすることで 作 成 した 携 帯 サイ トをさらに 高 いレベルのサイトに 変 更 していきます 12

参 考 : 画 像 一 覧 (キャンペーンサイト) 画 像 ファイル 名 Width Height button.jpg 270 85 false.jpg 480 180 footer.jpg 480 200 header01.jpg 480 510 header02.jpg 480 220 img01.jpg 480 130 menu01.gif 480 75 13

menu02.gif 480 85 menu03.gif 480 85 menu04.gif 480 85 menu05.gif 480 65 true.jpg 480 180 map01.jpg 480 50 map02.jpg 30 100 map03.jpg 60 100 map04.jpg 200 100 map05.jpg 60 100 map06.jpg 130 100 map07.jpg 480 20 14

map08.jpg 130 100 map09.jpg 60 100 map10.jpg 150 100 map11.jpg 60 100 map12.jpg 80 100 map13.jpg 480 10 map14.jpg 170 100 map15.jpg 60 100 map16.jpg 250 100 map17.jpg 480 60 15