クイックスタートマニュアル目次 スマホサイトビルダーモビークとは? モビークの特徴 ドラッグ& ドロップで簡単編集 スタイリッシュなデザイン部品 PC サイトと自動連動 最高のSEO 対策導入までの流れ STEP1 初期デザイン設定 STEP2 ページの登録 STEP3 スマホページの編集 STEP

Transcription

1 スマホサイトビルダーモビーククイックスタートマニュアル 更新日 :2014 年 06 月 02 日 Ver:2.0.0 Copyright mobeekAllRightsreserved.

2 クイックスタートマニュアル目次 スマホサイトビルダーモビークとは? モビークの特徴 ドラッグ& ドロップで簡単編集 スタイリッシュなデザイン部品 PC サイトと自動連動 最高のSEO 対策導入までの流れ STEP1 初期デザイン設定 STEP2 ページの登録 STEP3 スマホページの編集 STEP4 タグ発行 埋め込みモビーク全体図 ページ管理 画像管理 共通デザイン設定 編集画面 ヘッダメニュー ページの新規作成から編集への流れ編集作業の前に 要素とコンテナについて

3 編集画面の名称 1:PC サイトビュー 2: スマホサイトビュー 3: 詳細設定画面 4: 要素選択メニュー [ 重要 ] 5: コンテナ選択メニュー [ 重要 ] 6: その他メニューモビークにおけるページ編集の基本操作 基本操作手順基本操作 1( ドラッグ & ドロップ操作 ) ドラッグ& ドロップ PC サイトの画像を配置する PC サイトのテキストを配置する PC サイトの複数のテキストをまとめてボタンとして配置する PC サイトの複数の画像をまとめてスライドとして配置する基本操作 2( 詳細設定 ) 詳細設定 コンテナの詳細設定 テキスト要素の詳細設定 画像要素の詳細設定 コンテナ 要素の移動 コンテナ 要素の削除

4 スマホサイトビルダーモビークとは? モビークは既存の PC サイトから 必要なテキストや画像をドラッグ & ドロップすることで 簡単にスタイリッシュなスマホ サイトが作成できるサービスです モビークの特徴 ドラッグ & ドロップで簡単編集 ドラッグ & ドロップという直感的な操作で スマホサイトが作成 デザインできます スタイリッシュなデザイン部品 あらかじめプロのデザイナーが作成したデザインテンプレートとスライド タブ エキスパンドなどの豊富な部品が用意さ れています これらの部品を利用することで 誰でも簡単にスタイリッシュなスマホサイトが作成できます PC サイトと自動連動既存のPC サイトのテキスト 画像を活用しているため 元となるサイトが更新されると自動的にスマホサイトも更新されます これによりPC サイトとスマホサイトを別々に更新する運用の負荷を大幅に削減することが可能です もちろん既存サイトにはない新しいテキスト 画像などの要素をスマホサイトに追加することも可能です 最高の SEO 対策 PC サイトを変換してスマホサイトを作成するという方法は レスポンシブウェブデザインと呼ばれており Google 社がスマホサイト作成方法として最も推奨している方法です PC サイトと全く同じURL でスマホサイトが表示されるため PC サイトのSEO パワーを100% 引き継げる唯一の方法といわれております

5 導入までの流れ STEP1 初期デザイン設定 スマホサイトの全体的な配色を設定します また 編集中に利用するボタンやテキストをスマホサイトに配置した際の初期 状態 ( 色 形状など ) が指定できます これにより 編集中にテキストやボックスなどの色 形状などを 1 つ 1 つ指定する手間が大幅に軽減されます STEP2 ページの登録 変換元となる PC 用ページの URL を指定し登録します

6 STEP3 スマホページの編集 PC ページで使用されているテキストや画像等をドラッグドロップして スマホサイトを作成していきます STEP4 タグ発行 埋め込み 編集が完了したら PC ページヘ埋め込むタグを発行します PC ページに発行されたタグを埋め込みアップロードします スマホでタグを埋め込んだページの URL にアクセスすると 作 成したスマホページが表示されます PC でアクセスしても表示は変わりません

7 モビーク全体図 モビークはページ管理 画像管理 共通デザイン設定 編集の 4 つの機能で構成されています ページ管理 作成したスマホページを管理します ページの新規作成 作成したページのプレビュー ページのコピー 変換ルールの範囲設定や優先順位設定 画像管理 PC サイトにない画像を使用する場合 スマホサイト用で作成した画像をこのページからアップロードして利用することがで きます

8 共通デザイン設定 サイトの全体的な配色パターン指定 および 編集中に利用するボタンやテキストをスマホサイトに配置した際の初期値 ( 色 形状など ) が指定できます これにより 編集中にテキストやボックスなどの色 形状などを 1 つ 1 つ指定する手間が 大幅に軽減されます 編集画面 PC サイトのテキストや画像をドラッグアンドドロップしてスマホページを作成します ヘッダメニュー ヘッダメニューは画面の右上に常に表示されています

9 ページの新規作成から編集への流れ ページの新規作成画面 ページタイトル : モビーク内でページを 管理するための目印になります 実際のスマ ホサイトページには影響しません 変換元となる URL: 変換元となる PC 用ペー ジの URL を指定します ページ管理画面 ページ作成が完了するとページ一覧へタイトルが追加されます 各ページタイトルをクリックすることで編集画面に遷移することができます ページ編集画面

10 編集作業の前に 要素とコンテナについて 実際の編集作業に入る前に画面上の用語を説明します 画像 テキスト ライン フォーム インラインフレームを 要素 と呼びます また 要素を入れる器を コンテナ と呼びます コンテナ には ボックスコンテナ ボタンコンテナ テーブルコンテナ タブコンテナ エキスパンドコンテナ スライドコンテナがあり 要素 は必ず これらいずれかのコンテナの中に入って配置されます 編集画面内のスマホサイトビュー内で選択する際には : 要素は緑色の表示 : コンテナは青色の表示になります テキストイメージ ライン インライン フレーム フォーム (6 種類 ) テキスト入力テキストエリア送信ボタン チェックボックスラジオボタンセレクトボックス

11 ボックスボタンテーブル タブエキスパンドスライド

12 編集画面の名称 ここでは 編集画面の各部名称を説明します 1 : PC サイトビュー 変換元となる PC ページを表示します ここで スマホに利用したいテキストや画像を選択することができます Flash 及び JavaScript で動的に出力されるコンテンツは表示されません 2 : スマホサイトビュー スマホサイトの編集画面です 表示順番やレイアウトの変更はこちらの画面で行います 3 : 詳細設定画面 スマホサイトビュー上で コンテンツを選択して 右クリック 詳細設定を選択することで 各コンテンツに対する詳細設 定画面を表示することができます 枠線 色 サイズ 形状の変更などの細かいプロパティの設定ができます

13 4 : 要素選択メニュー [ 重要 ] このメニューには 2 つの使い方があります 1.PC 要素をどの形式 ( テキスト or イメージ ) で表示するかを選択するメニュー 要素選択メニューで イメージ を選択して PC サイトビューの画像をスマホサイトビューにドラッグ & ドロップすると イ メージ がスマホサイトビューに反映されます 一方 要素選択メニューで テキスト を選択した状態で PC サイトビュー内の画像をスマホサイトビューにドラッグ & ドロ ップすると 選択したイメージの ALT テキスト がスマホサイトビューに反映されます 2. スマホサイトに新規で配置したい要素を作成する場合のメニュー PC サイトでは何も選択せずに 要素選択メニューのテキスト イメージ ラインのボタンをそのままドラッグして スマホ サイトビューにドロップすると新規のテキスト イメージ ラインを作成することができます 5 : コンテナ選択メニュー [ 重要 ] このメニューには 2 つの使い方があります 1.PC 要素をどのコンテナに入れて配置するのかを選択するメニューコンテナ選択メニューで エキスパンド を選択した状態でPC サイトビューの複数のテキストリンクを選択して スマホサイトビューにドラッグ & ドロップすると複数のテキストリンクは エキスパンドメニューとして スマホサイトビューに反映されます また コンテナ選択メニューで スライド を選択した状態でPC サイトビュー内の複数の画像を選択して スマホサイトビューにドラッグ & ドロップすると複数の画像が スライドメニューに格納された状態で スマホサイトビューに反映されます 2. スマホサイトに新規でコンテナを配置したい場合のメニュー PC サイトでは何も選択せずに コンテナ選択メニューのボックス ボタン テーブル タブ エキスパンド スライドのボタンを選択後 そのままドラッグして スマホサイトビューにドロップすると新規のコンテナをスマホサイト上に配置することができます 6 : その他メニュー ライン要素 インラインフレーム要素 マイパーツがまとまっているメニューです 基本的な使用方法は要素選択メニュー コンテナ選択メニューと同様です

14 モビークにおけるページ編集の基本操作 基本操作手順 モビークでは 1. PC サイトビューで 必要な要素 ( 画像 テキスト ) を選択して スマホサイトビュー上にドラッグ & ドロップする 2. スマホサイトビューでコンテンツの詳細プロパティ ( サイズ 色 余白 形状 ) を設定する という 2 つの操作を繰り返して スマホサイトを作成します

15 基本操作 1( ドラッグ & ドロップ操作 ) ドラッグ & ドロップ STEP1 要素選択メニューでイメージを選択 STEP2 PC サイトビューで 配置したい画像を選択 STEP3 選択した画像をドラッグして スマホサイトビューでドロップ

16 PC サイトの画像を配置する 1. 要素選択メニュー内の イメージ を選択します 2.PC サイトビューで配置したい画像を選択します 3. 選択した画像を右側のスマホサイトビュー上にドラッグ & ドロップします PC サイトのテキストを配置する 1. 要素選択メニュー内の テキスト を選択します 2.PC サイトビューで配置したいテキストを選択します 3. 選択したテキストを右側のスマホサイトビュー上にドラッグ & ドロップします PC サイトの複数のテキストをまとめてボタンとして配置する 1. コンテナ選択メニュー内の ボタン を選択します 2.PC サイトビューで配置したいテキストをCTRL キーを押下しながら 複数選択します 3. 選択したテキストを右側のスマホサイトビュー上にドラッグ & ドロップします PC サイトの複数の画像をまとめてスライドとして配置する 1. コンテナ選択メニュー内の スライド を選択します 2.PC サイトビューで配置したい画像をCTRL キーを押下しながら 複数選択します 3. 選択した画像を右側のスマホサイトビュー上にドラッグ & ドロップします

17 基本操作 2( 詳細設定 ) 詳細設定スマホサイトビュー上で 右クリック 詳細設定を押すことで 詳細プロパティの設定を行います スマホサイトビュー上には 複数のコンテナとその中に要素が配置されています 詳細設定は コンテナ 要素それぞれに対して 個別に設定することができます 詳細設定 ( ボックス ) スマホサイトビュー コンテナの詳細設定 背景色 枠線 コンテナー間の上余白 幅 形状などの設定を行います スマホサイトビュー上でコンテナが複数ある場合や隣接する場合など うまく選択できない場合があります その際は要素を選択して 右クリックメニューで 親ノードを選択 することで簡単にコンテナの選択ができます テキスト要素の詳細設定 テキストの色 フォントサイズ 装飾の設定 行間 コンテナ内の余白などの設定を行います 画像要素の詳細設定 画像の大きさ 画像の切り取り 画像の変更などを行います コンテナ 要素の移動 スマホサイトビュー上で 配置 順序を入れ替えたい場合はコンテナまたは要素を選択し 移動したい場所までドラッグ & ドロップしコンテナ 要素を移動します コンテナ 要素の削除 スマホサイトビュー上で 削除したいコンテナ 要素を選択し 右クリック 削除 または DELETE キーを押下することで 削除します