スマホサイトビルダー
操作ガイド
目 次
はじめに スマホサイトビルダー 公開までの流れ 用語集 プラグインの機能追加 ペイパル機能 3 4 5 6 8 8 9 19 19 20 22 22 23 24 24 25 10 10 12 13 15 15 16 17 利用開始/ログイン Step1
テンプレートの選択 テンプレートの選択 カラーパレットを選択 Step2
2-1 2-2 サイト全体のデザイン編集 ヘッダー&ロゴの編集 クリックツーコール Yahoo!地図を編集 Step3
3-1
3-2
3-3 ナビゲーションメニューの編集 ナビゲーションメニューのテキスト、アイコン、リンク先変更 ナビゲーションメニューのスタイル変更 ナビゲーションメニューの追加 Step
4
4-1
4-2
4-3 サイトの保存と公開 サイトの保存と公開 ロールバック/非公開 Step
5
5-1
5-2 各コンテンツのデザイン変更 各コンテンツの文字サイズ、フォント、色の編集 各コンテンツの背景色を変更 Step
6
6-1
6-2 コンテンツの削除/追加 コンテンツの削除 コンテンツの追加 Step
7
7-1
7-2 コンバージョンタグの設定 既存ページに貼り付ける場合 貼り付け後の確認方法 Step
8
8-1
8-2 リダイレクトの設定 Step
9
27 27 28 29 31 31【 推奨ブラウザー 】 弊社が推奨しているブラウザーは、以下の通りです。 下記以外のブラウザーはサポート対象外となりますのでご注意ください。 Windows Internet Explorer : 10.0以降 Mozilla FireFox : 10.0以降 Google Chrome Macintosh OS Safari Mozilla Firefox : 10.0以降 Google Chrome 【 スマホサイトビルダー設定権限 】 スマホサイトビルダーにログインできる広告管理ツールの権限は、以下のとおりです。 管理者 利用者 (登録更新権限)
はじめに
。 す ま い て し 明 説 を 法 方 作 操 の 」 ー ダ ル ビ ト イ サ ホ マ ス 「 、 は で 料 資 本 Yahoo!プロモーション広告では、すでにお持ちのPCサイトを スマートフォン用に最適化されたサイトに簡単に変換できる「スマホサイトビルダー」を 無料でご利用いただけます。 スマートフォンサイトの必要性はわかっていても、費用面や作成が難しいなど、 対応が追いついていない方は、まずはこの「スマホサイトビルダー」を利用して、 無料でカンタンにスマートフォン対応サイトを作りましょう! ※この情報は2013年8月現在の内容です。Yahoo!プロモーション広告では、さまざまな機能改善を行っているため、 実際の画面やボタンの名称などが異なる場合があります。 スマホサイトビルダーについて、ご不明な点などは以下にお問い合わせください。スマホサイトビルダー 公開までの流れ
利用開始/ログイン テンプレートの選択 サイト全体のデザイン編集 ナビゲーションメニューの編集 サイトの保存と公開 各コンテンツのデザイン変更 スマホサイトビルダーにログインし、スマートフォン用に 最適化したいウェブサイトのURLを記入します。 ヘッダーロゴや、サイト全体の各項目要素を編集します。 Step 1 Step 2 Step 3 Step 6 スマートフォンサイトをインターネット上に保存、公開します。 ページごとに、コンテンツの追加、修正を行います。 スマートフォンからPCサイトにアクセスした時、 自動でスマートフォンサイトのURLに転送され、 スマートフォン対応サイトを表示します。 リダイレクトの設定 Step1
Step2
Step3
Step4
Step5
Step6
Step7
Step8
Step9
コンテンツの削除/追加 コンバージョンタグの設定 http://www. 編集中のデータを現在公開中の状態に戻します。 公開バージョンへ戻す 公開中のスマートフォン対応サイトを非公開にします。 非公開にするPoint!
スマートフォンサイト公開までの所要時間 ヘッダー&ロゴ クリックツーコール Yahoo! 地図 ナビゲーションメニュー スマートフォン用のサイトコンテンツ決定 スマートフォンサイトをカンタンに公開できます。 公開完了 スマートフォン対応サイト 公開完了30
分 約用 語 集
用 語 意 味 背景画像やナビゲーションの配置など スマートフォンサイトのベースとなるものです。 スマートフォンサイトの「保存」と「公開」は、同時に実施します。 サイトの保存と公開の[実行]ボタンを押すまで、 作成したサイトはインターネット上に公開されませんので、ご注意ください。 広告管理ツールで発行したスポンサードサーチ/ Yahoo!ディスプレイアドネットワーク(YDN)の コンバージョン測定タグをスマートフォンサイトにも設定できます 全ての編集内容をリセットし、現在公開中の内容に戻すロールバック機能です。 スマートフォンサイトを公開済みの場合に、ロールバックが可能です。 新規作成の場合や、サイト未公開の場合はロールバック機能が ありませんのでご注意ください。 インターネットユーザーがスマートフォンからPCサイトにアクセスした場合、 自動でスマートフォンサイトのURLに転送され、 スマートフォン対応サイトを表示させます。 現在公開されているスマートフォン対応サイトを非公開にします。 サイトデータは削除せずに、インターネット上から非公開となります。 テンプレート サイトの保存と公開 コンバージョン測定タグの設定 公開バージョンへ戻す リダイレクト設定 非公開にするさあ、スタート! 楽しんでいきましょう!
Step
1
利用開始 / ログイン
広告管理ツールにログイン後、 [運用サポートツール]タブに移動し、 [スマホサイトビルダー]タブをクリックします。 ログインステータスの[設定]ボタンをクリックします。 [スマホサイトビルダー利用規約]画面が表示されるので、規約内容を確認の上、 [同意する]にチェックを入れて、[規約に同意してアカウント一覧へ]ボタンをクリックします。 1 2 3ログインステータスが[ログイン]に変わりましたら、[ログイン]ボタンをクリックします。 まずは、スマートフォンサイトに変換したいウェブサイトのURLを記入し、 [スマホサイトを作成!]ボタンをクリックします。 ユーザー登録完了までは時間がかかる場合がございますので、しばらく時間をおいて更新を行ってください。 この時、ウェブサイトのトップページのURLを入力し、 指定したウェブサイト全体がスマートフォン対応されるようにしましょう。 クリック後、最初の[スマホサイトビルダーアカウント一覧]画面へ戻ります。 ログインステータスが[設定中]になっている場合は、[F5]ボタンを押すなどして画面の更新を行ってください。 4 5 6
テンプレートとカラーパレットでカンタン!
Step
2
好みのレイアウトを[テンプレートの選択]から選んでください。 表示されている[テンプレートの選択]の各テンプレートをクリックすると、 スマートフォンサイトのプレビューを確認できます。 リスト 展開 マトリクス 下 上テンプレートの選択
リスト 展開 マトリクス 下 上テンプレートの選択
スマートフォンサイトの全体的なデザインテンプレートとサイトカラーを決定します。
画面中央に横でナビゲーションが表示されます。 画面右上にナビゲーション展開が表示されます。 ナビゲーションが中央に表示されます。 ナビゲーションが画面下部に表示されます。 ナビゲーションが画面上部に表示されます。 Step2
1
Step
2
2
新規作成されたスマートフォンサイトは、PCサイトの配色を引き継いで作成されています。 スマートフォンサイトの色を変更したい場合は、[カラーパレットを選択]で設定します。スキマはスマホ?
■デバイス別 インターネット利用シーン (出典:弊社独自の調査による結果 複数回答 n=2,060) 〈 スマートフォン 〉 スマートフォンでのインターネット利用率の特長は、移動中などのいわゆる「すき間時間」に高いこと。 「ウィンドウショッピング中・買い物中」などに利用する人も目立っています。「外出中はスマホ」。 こんなところにビジネスチャンスがあるかも! ちょっとブレイクカラーパレットを選択
① 電車・バス・車・飛行機などに乗車中 ② 駅・バス停・空港で待機中 ③ ウィンドウショッピング・買い物中 〈 タブレット 〉 ① テレビを視聴中 ② 旅行・レジャー中 ③ 仕事中・学習中 〈 パソコン 〉 ① 仕事中・学習中 ② テレビを視聴中 ③ 雑誌・新聞・書籍を閲覧中 76.7 % 65.9 % 33.6 %1
45.2 % 22.2 % 18.1 % 43.5 % 38.1 % 18.1 % 変更したい場合には、[カラーパレットを選択]から配色をクリックして選択してください。 カラーパレットを選択すると、プレビュー画面で確認できます。いよいよ基本デザイン!
Step
3
ヘッダー&ロゴの編集
サイト全体のデザイン編集
Step3
1
[サイトを編集]画面で、サイトデザインを編集します。
トップページで変更されたサイトデザインは、他のページにも引き継がれます。
ヘッダーとロゴの変更を行います。新規作成後のスマートフォンサイトは、PCサイトのロゴを自動で表示しています。 ロゴ画像の変更やテキスト修正の際、編集を行います。[ヘッダー&ロゴを編集]をクリックします。 変換元のサイトや変換時の業種選択によって、各項目要素は異なります。 ヘッダー&ロゴ クリックツーコール Yahoo! 地図 ナビゲーションメニュー画像変更 [変更]ボタンをクリックして、変更するロゴ画像ファイルを選択します。 [全般]を選択し[ロゴ画像を使用]が指定されていることを確認してください。 画像のトリミング [トリミング]ボタンをクリックして、トリミングで範囲を囲むか、または画像サイズ(幅/高さ)を指定します。 サイズ変更 サイズ変更の単位を[パーセント]、[ピクセル]のどちらかを選択します。 ロゴ画像の幅サイズをスライドバーで調整します。 配置 ロゴ画像の配置を、左寄せ、中央 え、右寄せから選択します。 1 2 3 4
ロゴ画像ではなく「テキスト」に変更する場合は、[全般]で[テキストを使用]を指定してください。 タイトルの変更 PCサイトから自動的に[タイトル]テキストを表示されます。 フォントサイズの変更 フォントのサイズをスライドバーで調整します。 フォント書式の変更 フォントの書式を設定します。 配置 ロゴ画像の配置を、左寄せ、中央 え、右寄せから選択します。 クリックすると起動する、ワンプッシュコールの設定をします。 プレビュー画面で、[発信]ボタンをクリックすると、[クリックツーコール]のダイアボックスが表示されます。 ([発信]ボタンは、変換元のサイトや変換時の業種選択によって、表示されない場合がございます)
クリックツーコール
Step3
2
1 2 3 4電話番号 ボタンがクリックされたときに、起動される問い合わせ用電話番号を入力します。 [全般]を選択してください。 ボタン上に表示されるテキスト ボタン名を入力します。 例:「発信」など。 お店の住所などをYahoo!地図を使って表示させます。 プレビュー画面で、[アクセス]ボタンをクリックすると、[Yahoo!地図]のダイアボックスが表示されます。 ([アクセス]ボタンは、変換元のサイトや変換時の業種選択によって、表示されない場合があります) その後、Yahoo!地図画面で、[全般]を選択し、[手動入力]をクリックします。
Yahoo!地図を編集
Step3
3
1 2住所 地図を表示させたい店舗や会社の住所を記入し、保存します。 マップに表示 入力した住所が地図上で問題ないかどうか確認します。 Yahoo!地図の表示イメージ 1 2
ナビゲーションメニューのテキスト、アイコン、リンク先変更
ナビゲーションメニューの編集
Step4
1
[テンプレートの選択]で選択したデザインから、さらにナビゲーションメニューを
カスタマイズできます。
[ナビゲーションメニューを編集]をクリックします。
ナビゲーションメニューの項目ごとに、テキスト、アイコン、リンク先を変更します。Step
4
[メニュー項目]を選択します。 テキストの変更 変更したい項目のテキスト上でクリックし、テキストを変更します。 アイコンの変更 「★」マークをクリックすると、スマホサイトビルダー既存のアイコンが表示されるので、 好みのアイコンを選択。 ※自分が持っているアイコン画像をアップロードして使用することも可能です。 1 2ナビゲーションメニューのスタイル変更
Step4
2
リンク先の変更 「鎖」マークをクリックし、リンク先のURLを記入します。 [デザイン]を選択すると、ナビゲーションメニューの背景色、テキスト色、アイコンに加え、 アイコンまたはテキストのどちらかを非表示にする設定もできます。 [このリンクをスマホサイト化しない]にチェックを入れると、 リンク先のページをスマートフォンサイト用に最適化せずに、PCサイトのまま表示されます。 [新しいウィンドウにページを開く]にチェックを入れると、 サイト内のページ移動ではなく、新規ウィンドウとしてページが表示されます。 3ナビゲーションメニューの追加
Step4
3
新規作成後のスマートフォンサイトは、 PCサイトからナビゲーションメニューと思われるリンクを自動で設定しています。 さらにナビゲーションメニューを追加できます。 [メニュー項目]を選択し、[新しいリンクを追加]ボタンをクリックします。 色 ナビゲーションメニューの背景色、テキスト色などを選択します。 項目に表示するアイテム アイコンとテキストの表示/非表示に設定します。 表示するテキスト ナビゲーションメニューに表示するテキストを記入します。 ウェブサイトURL ナビゲーションメニューからリンクさせるURLを記入します。 1 2 1 2作成した新しいページ PCサイト(既存のウェブサイト)にはない新しいページを作成し、 ナビゲーションメニューのリンク先として指定できます。 メールアドレス/クリックツーコール メールの起動やワンプッシュコールの起動を設定します。 [新しいウィンドウにページを開く]にチェックを入れると、 サイト内のページ移動ではなく、新規ウィンドウとしてページが表示されます。 [このリンクをスマホサイト化しない]にチェックを入れると、 リンク先のページをスマートフォンサイト用に最適化せずに、PCサイトのまま表示されます。
スマホユーザーは即行動?
(出典:弊社独自の調査による結果 複数回答 n=1,748) 場所や道順を確認し、クーポンをゲットしてお店へ。 外出中にお店の情報を検索する場合は、直接来店に結びつくケースが多いことが見て取れます。 スマホユーザーならではの検索キーワードを設定することが、広告効果アップの秘訣かも!? 場所や道順を確認し、クーポンをゲットしてお店へ。 外出中にお店の情報を検索する場合は、直接来店に結びつくケースが多いことが見て取れます。 スマホユーザーならではの検索キーワードを設定することが、広告効果アップの秘訣かも!? ちょっとブレイク お店の場所や経路を地図で確認する お店のクーポンを探す お店に行く お店のウェブサイトにアクセスする お店に電話する お店で商品やサービスを予約・購入・利用する 81.9 % 55.0 % 51.1 % 42.2 % 35.5 % 22.5 %2
3 4Step
5
サイトの保存と公開
スマートフォンサイトをインターネット上に保存、公開します。 画面上部のナビから[サイトの保存と公開]を選択します。 プレビューのURLが表示されますので、[URLをコピー]ボタンをクリックして、 ブラウザーで作成したスマートフォンサイトのプレビュー確認をします。 [実行]ボタンをクリックし、スマートフォンサイトをインターネット上に保存/公開します。 公開されると「完了しました! スマホに最適化されたサイトが完成しました。」の文字が表示されます。 「これがスマホサイトのURLです」に記載されたURLをコピーし、 実際に公開されたサイトをスマートフォンで確認します。サイトの保存と公開
Step5
1
1 2 3 4 5スマートフォンサイトをインターネット上に保存/公開後に、 修正を実施した場合は、[更新を適用して公開]にボタン名が変更されます。 スマートフォンサイトを公開しただけでは、インターネットユーザーがスマートフォンから PCサイトにアクセスしてもスマートフォン対応サイトが表示されません。 この後、必ずリダイレクトの設定を行いましょう。 [サイトの保存と公開]の画面から、編集前の初期状態に画面を戻せます。 また、スマートフォンサイトデータを削除せずにインターネット上から非公開にすることも可能です。 画面上部のナビから[サイトの保存と公開]を選択します。 Step
5
2
ロールバック/非公開
ロールバック 画面下の[公開バージョンへ戻す]リンクをクリックします。 確認用のメッセージボックスが表示されるので、「はい」を選択します。 (スマートフォンサイトの)非表示 画面下の[非公開にする]リンクをクリックします。 今まで作成したスマートフォンサイトのデータを削除せずに、 インターネット上からスマートフォン対応サイトを非表示にできます。 ロールバックは、全ての編集内容をリセットし、現在公開中の内容に戻します。 そのため、すでにサイトを公開済みの場合にロールバックが可能です。 新規作成の場合や、サイト未公開の場合はロールバック機能がありません。 ボタン自体が表示されませんので、ご注意ください。
スマホとパソコン、検索ワードの違い?
キーワード 前月比 キーワード 前月比 (2012年11月1日∼2012年12月31日における「クリスマス関連ワード」の比較 出典:弊社独自の調査による結果) 〈 パソコン 〉 一例としてクリスマスを取り上げてみると、こんなに違いがあります。 事前に検索する計画的な行動はパソコンで、メッセージやレシピなど直前の調べものはスマホ。 デバイスごとに予算配分を変えて広告運用を変えることが成功の秘訣かも!? ちょっとブレイク クリスマス デートプラン サンタクロース 追跡 ケンタッキー フライドチキン メリークリスマス 英語 クリスマス 子供 プレゼント ケーキクリスマス 江ノ島 イルミネーション クリスマス レシピ クリスマス テンプレート クリスマス レシピ 簡単 1131.6 倍 870.1 倍 398.4 倍 192.2 倍 185.8 倍 110.3 倍 108.0 倍 88.2 倍 71.3 倍 60.9 倍3
〈 スマートフォン 〉 ローストチキン レシピ ポインセチア 花言葉 クリスマス メール フライドチキン レシピ メリークリスマス 英語 クリスマス 英語 クリスマスイヴ クリスマス メッセージ クリスマス テンプレート メリークリスマス スペル 1019.2 倍 177.1 倍 162.2 倍 154.4 倍 123.8 倍 116.4 倍 89.1 倍 72.7 倍 70.2 倍 67.8 倍 1 2あなたはシンプル派? それとも、こだわり派?
各コンテンツのデザイン変更
スマートフォンサイト全体だけではなく、ページ単位で編集可能です。
変更したいページをプレビュー画面で開き、コンテンツの修正を行います。
文字をクリックすると、左側に編集画面が表示され、ワード感覚で編集が可能です。 サイズを変更 pxボックス内の数字を変更、またはバーを左右に動かして調整します。 フォントを変更 「Tt(フォントの種類)」をクリック、お好みのフォントを選択します。 色を変更する 「A(テキストの色)」をクリック、カラーパレットからお好みの色を選択します。各コンテンツの文字サイズ、フォント、色の編集
Step6
1
Step
6
1 2 3ページ全体の背景色ではなく、各コンテンツの背景色のみを変更可能です。 プレビューで変更したい段落を選択します。 [デザイン]を選択し、好みの色を選択します。
各コンテンツの背景色を変更
Step6
2
1 2そろそろゴールが見えてきた!
新規作成後のスマートフォンサイトはPCサイトに準じて作成されています。
スマートフォンサイトに不要なコンテンツを削除と、追加が可能です。
コンテンツを削除したいページをプレビューに表示します。 [コンテンツを削除]をクリックします。 プレビュー画面から削除したいコンテンツを選択し、 [選択したコンテンツを削除]ボタンをクリックします。コンテンツの削除
Step7
1
コンテンツの削除 / 追加
Step
7
1ベーシック編集以外に準備されている各コンテンツをサイト内に追加することが可能です。 コンテンツを追加したページをプレビューに表示します。 正常に削除されると、[要素が正常に削除されました]と表示されます。
コンテンツの追加
Step7
2
2[詳細編集]をクリックします。 [コンテンツを追加]から[おすすめ][ビジネス][デザイン][ソーシャル]から 追加したいコンテンツのアイコンを表示します。 追加するコンテンツのアイコンを画面右側のプレビュー画面の追加したい箇所まで、 ドラッグ&ドロップします。 詳細設定画面が表示されるので、必要な情報を設定します。 追加するコンテンツよって、設定情報は異なります。 1 2 3 4
新規作成と同様に、【広告管理ツール】から、コンバージョンタグを【新規発行】または【編集画面】から コンバージョンタグをコピーします。 【スマホサイトビルダー】で、コンバージョンタグを貼り付けるページをプレビューに表示します。 [詳細編集]より、コンテンツ[HTMLコードを追加]を挿入します。 【広告管理ツール】からコピーしたコンバージョンタグを、HTML内にペーストし、 [終了]ボタンをクリックします。
既存ページに貼り付ける場合
Step8
1
広告管理ツールで発行したコンバージョンタグをスマートフォンサイトに設定します。
スマートフォンサイトにすでにあるページにコンバージョンタグを貼り付けます。 【広告管理ツール】から、コンバージョンタグを【新規発行】または【編集画面】から コンバージョンタグをコピーします。コンバージョンタグの設定
Step
8
1 2 3 4 1 2 3 4 新規発行する場合は「コンバージョン名」をスマホ用とわかるように名称入力すると分かりやすいです。 コンテンツの追加場所は「ヘッダー」「フッター」部分以外に追加します。コンバージョンタグを挿入したページをプレビューに表示させた状態で、 画面上部の[設定]-[CSS&HTML]をクリックします。 [ページ]HTMLにコンバージョンタグが挿入されていることを確認します。
貼り付け後の確認方法
Step8
2
コンバージョンタグの設定後に[更新][終了]した場合は、プレビュー画面上では内容の確認ができません。 別のメニューから確認が必要になります。 表示しているブラウザーの検索を利用して、 コンバージョンIDで検索しても貼り付けたデータが確認できます。 1 2リダイレクト設定は、スマートフォン対応サイトを表示させたい全てのPCページへの設定を行いましょう。 広告のランディングページとして設定している場合は、該当ページにリダイレクトを設定することで、 スマートフォン対応サイトを表示することが可能となります。 [スマホサイトへのリダイレクト設定を行う]ボタンをクリックします。 リダイレクト画面が表示されるので、[コードをコピー]ボタンをクリックし、ソースコードをコピーします。
リダイレクトを設定すると、ユーザーがスマートフォンからPCサイトにアクセスした場合、
自動でスマートフォン用に最適化されたサイトのURLに転送され、
スマートフォン対応サイトを表示することができます。
リダイレクトの設定
Step
9
1 2ついに完了! お疲れさまでした! ホスティングプロバイダーをご利用の場合は、設定方法が異なりますので、 ご利用のホスティングプロバイダーまでお問い合わせください。 コピーしたソースコードを、PCサイトのindex.html ファイル内の <head>∼</head>タグの間に貼り付けます。 編集したindex.html ファイルを保存し、FTPなどでPCサイトが保存されている Webサーバーにアップロードします。 お手持ちのスマートフォンからPCサイトのURLにアクセスし、 スマートフォン対応サイトが表示されることを確認してください。 PCサイトのトップページのファイル名が index.html ではない場合がありますので、 PCサイトのトップページのファイル名をご確認のうえ、リダイレクトの設定を行ってください。 スマートフォンからPCサイトのURLにアクセスし、 スマートフォンサイトへのリダイレクトが確認できたタイミングで、 ダッシュボード画面のリダイレクト設定状況が、「リダイレクト」のステータスに更新されます。 htaccessを使ってのリダイレクトも可能ですが、 設定後、画像が表示されないなどの問題が発生することがあります。 そのため、スマホサイトビルダーのリダイレクトコードを使用することをおすすめします。 3 4 5
スマートフォン対応サイト 公開完了です!
スマホサイトビルダーでは、独自のプラグインを用意しています。
【 税 】 ペイパルは、eBayグループの決済サービス(支払代行)です。 この決済サービスの「ペイパル」サイトへの設定ができます。 [コンテンツの追加]より[ペイパル]を選択し、必要項目に入力してください。 【 注意点 】 本プラグインは、カート機能ではありません。 【 送料 】 送料は1つのみ設定ができます。そのため「地方ごと」「重さ」ごとなど「送料が異なる」場合の設定はできません。 単一送料の時のみ入力が可能です。ペイパル機能
プラグインの機能追加
「複数商品」を販売する場合は「商品ごとにページが必要」です。 「同じ商品の複数個」販売をする場合は「販売個数ごとにページが必要」です。【 利用条件 】 広告主が機能を利用するため条件は「ペイパル」の【ビジネスアカウント】の開設が必要です。 アカウントがなく、Yahoo! JAPANビジネスIDなどを間違って入力した場合、 スマホサイトビルダーではエラー表示されず、そのまま登録されてしまいます。 スマホサイト利用者がペイパルのボタンをクリックした時に、 「ペイパル」サイトでエラーが表示されてしまうため、ご注意ください。 スマホサイトビルダーについて、ご不明な点などは以下にお問い合わせください。
Copyright © 2013 Yahoo Japan Corporation. All Rights Reserved.
掲載されている会社名、製品名、サービス名は各企業の商標または登録商標です。本資料・データの無断転用はご遠慮ください。 お問い合わせフォーム