Ameba Ownd で早速おしゃれとは無縁な “ラーメン屋” のサイトを作ってみた ~ サイト作成・アクセス解析・設定方法まとめ ~
Ameba Ownd とは、アメーバブログなどで知られるサイバーエージェントが提供するウェブサイト作成サービスです。2015年3月18日より正式にサービスを開始しました。「誰でも」「カンタンに」「おしゃれな」ウェブサイトが作れる、というのがウリです。
で、早速サイトを作ってみようというのが今回の話。オシャレとは無縁なラーメン屋のサイトですいません・・・
取得できるドメイン（後述）を見ると、どうやらショップや飲食店向けにオウンドメディア（オウンドメディアとは – コトバンク）として利用してもらうことを想定しいているみたいですね。ブログ機能はもちろん、FacebookやTwitterとも連携できまますので、自社情報の発信の場をこれから作りたいという場合には手軽に始められて良いのではないでしょうか。
今回は Ameba Ownd の始め方、サイトの作り方、Google Analytics や ウェブマスターツールとの連携・設定方法などをまとめてみました。参考になれば幸いですm(_ _)m
※注）
サービス開始直後なので、今後仕様が変更される可能性はあります。
始め方・登録方法
公式：Ameba Ownd
公式サイトの画面右上にある「ログイン/新規登録」から。登録後はここから自身の管理ページにログインできます。
「アメーバID」や各種SNSアカウントから登録できます。
「アメーバID」の場合は次の画面でログイン、もしくは未取得の場合は「アメーバID登録」から新規登録します。SNSアカウントを使用する場合は「Amebaが次の許可をリクエストしています」で「承認する」をクリックすると、アカウントが紐付けされます。登録は以上で完了です。
新規サイトの作り方
Ameba Ownd でログインしたら画面右上の[∨]をクリック → [+新しいサイトを作成] から新規サイトを作成できます。またここからAmebaIDの[プロフィール]や[アカウント設定]の変更もできます。
新規ドメイン（URL）の設定
新規サイトのドメイン（URL）を設定します。「○○○○（好きな名前） + 決められたドメイン」になります。デフォルトでは「○○○○.amebaownd.com」となりますが、他にも「therestaurant.jp」や「shopinfo.jp」など飲食店他ショップ向けのものが選択できます。日本語ドメインは使えないようです。今回はラーメン屋のサイトですので以下の様に設定しました。
ichibantei-omigawa.therestaurant.jp/
「ramen」とか入れておけば良かったかもしれません・・・
サイトの種類の設定
サイトのテンプレートを選択します。今回は「飲食店や地域のお店」を選択しました。
デザインは後から変更することもできます（後述）が、選択できるなはこの「サイトの種類」の中で用意されたデザインです。他の「種類」とかぶっているのもありますし、その「種類」でしか選べないものもあります。
カテゴリの選択
どんな情報のサイトなのかを選択します。1つでも2つ以上でも設定できます。後からでも変更できますし、一旦[skip]しても構いません。
デザインの設定
上で選んだ「サイトの種類」の中に用意されているデザインを選択します。デザインは後から変更することもできます（後述）。クリックするとプレビューが表示されるので、確認して[このデザインで始める]をクリックします。
この画面になれば完了です。［自分のサイトの編集］から「サイトの管理 – ダッシュボード」へ移行します。
ログインした Ameba Ownd のトップページから画面右上の[∨]をクリック → サイト名 で同様に「ダッシュボード」へ行けます。
サイトの管理・各種設定方法
「サイトの管理」画面です。ここから新しいページの作成や、各種設定などを行います。[ツアーを開始]で動画によるチュートリアルが見られるので参考にしましょう。
画面左側に並ぶ項目から各種設定を行います。一番上の画像はサイトアイコンで、これは「設定 → 基本設定」から設定・変更ができます。次の[投稿]から新規ブログ記事を投稿できます。[投稿の管理]は過去記事の編集などが行えます。このサイトではブログ記事を書く予定は無いので今回は割愛します。
基本情報の編集
まずはサイトの基本情報を編集していきます。以下の項目を確認・編集することができます。
【基本情報】
・サイト名／キャッチフレーズ（サイト名・キャッチフレーズ・コピーライト）
・ドメイン（確認のみ）
・サイトアイコン（300px × 300px以上）
・カテゴリ
・アクセス（店舗向け）
【コメントの設定】
【サイトを削除】
「コピーライト」はサイトの一番下に出てくる”アレ”です。
「サイトアイコン」は自身が確認するためのもので、閲覧者向けのもではありません。自分が分かりやすいものを設定すれば良いと思います。
「アクセス」は店名や住所など。実店舗なら必須です。
「コメントの管理」で閲覧者が記事にコメントできるかどうかを設定できます。
「サイトを削除」したければここからできます。
SNS（ソーシャルメディア）連携
Ameba・Facebook・Twitter・Instagramと連携させることができます。サイトのメニュー（ナビゲーション）から各種SNSの投稿をサイト内で表示させることができます。［連携］からSNSにログインし［承認する］と完了です。［連携解除］もここからできます。複数のSNSアカウントを持っていて、自動ログイン設定になっているなら、予め連携させたいアカウントでログインしておきましょう。Facebookページと連携する場合は管理者でログインしておきます。
ここではFacebookページ（←更新してない）とTwitter（←更新してない）と連携してみました（一応・・・）。
SEO設定
SEO（検索エンジン最適化 – Wikipedia）の設定です。要はインターネット上で自身のサイトを “より見つけてもらいやすくする” 設定となります。設定項目は以下の通りです。
・Title（サイト名）
・Description（サイト概要）
・Keywords
・Image（300px × 300px以上）
・Noindex / Nofollow
Googleで検索すると（順位はともかく）このような画面が出てきます。上から順に「サイトタイトル」「URL」「Description（サイト概要）」です。説明文である「Description」が魅力的でなければクリックしてもらえないでしょう。ここではカンタンに設定してしまいましたが、SEOについて詳しく知りたい方は検索してみて下さい。
外部ツール：Google Analytics・ウェブマスターツールとの連携、アクセス解析方法
Googleが提供する無料アクセス解析ツール、Google Analytics と ウェブマスターツール （共に要Googleアカウント）に連携することができます。Google Analytics と ウェブマスターツール の使い方については割愛します。将来的には Ameba Ownd 独自のアクセス解析ツールも提供されるようです。
まずは Google Analytics との連携から。 Google Analytics へログインし、該当サイトを選択したら「アナリティクス設定 → プロパティ → トラッキング情報 → トラッキングコード」へ進みます。
次の画面に出てくる「UA-●●●●●●」という部分を（UA-も含み）そのままコピーし、Ameba Ownd の設定画面にある「Google Analytics のトラッキングコードを入力」欄にペーストします。コレで連携完了です。
次は ウェブマスターツール との連携。Ameba Ownd のサイトを追加したら、サイト名の脇にある「このサイトを確認」から 「別の方法 → HTMLタグ → metaタグ」の中にある「content=”●●●●●●”」を確認します。この●●●●●●をコピーして、 Ameba Ownd の設定画面にある「Google ウェブマスターツールの Content を入力」にペーストします。コレで連携完了です。
ちょっと分かりにくいですね・・・
ここまででサイトの設定は終了です。
ページの追加・編集
次はページの編集です。ホームから「ページ編集」へ進みます。[+ ページの追加]から静的なページやブログ記事、SNSのページなどが追加できます。新規ページを作成すると、一旦「非公開ページ」になるので、公開したい場合はこの画面から該当ページを「非公開ページ」より上にドラッグするか、編集画面から[このページを公開]を選択しましょう。
静的なページの追加・編集・削除
ページを追加すると編集画面になりますが、画面上の [プレビュー｜編集] から一旦プレビュー画面に戻ります。先にタイトルやURLを決めてからの方が分かりやすいです。
はじめは「Page」という名前のページができています。画面左にある「ページタイトル」でこのページのタイトルを設定します。その下はこのページのURLの設定となります。ページの削除もここから行えます。
画面左上にある[PC ↔ スマホ]のアイコンをクリックするとそれぞれのプレビューを確認することができます。
実際の画面を見ながら編集が行えます。画面左側の各種アイコンから追加したいものを選び（クリック）、画面右側に持っていきます。テキストなら設置後、テキストを入力。画像なら新規にアップロードしたり、アップロード済みの画像を選べます。各種項目は設置後に、任意で順番を変えることができます。上下左右可能です。
例えば同じ行の左側に画像、右側に説明文を配置するには、「画像を設置 → テキストをその右側に設置」です（逆も可）。画面上では分かりにくいですが・・・
Amazonや楽天へのリンクも作成できるのでショップ向けにも良いかもしれませんね。
テキスト部分の範囲を選択すると編集用のアイコンが並びます。太文字・斜体文字・下線・取り消し線・大きさ・リンク・左寄せ・中央揃え・右寄せが選択できます。
SNS（ソーシャルメディア）ページの追加
例としてFacebookページを作成してみます。
Facebookページを追加したい場合は、Facebookアイコンをクリックし、次の画面で連携したいFacebookページのURLを記入します。モジュールタイプ（表示方法）や表示させる件数を設定します。
他のSNSについても同様です。
デザイン編集
ホームから「デザイン編集」に進むと「テーマの変更」や、そのテーマで用意された「カラーセット」を選択することができます。
その下にある[詳細設定]を開くと、背景やタイトルなど各項目の「カラー」や、テキストの「フォント」を編集することができます。
以上でサイト作成は終了です。
あとがきとか要望とか
誰でも、カンタンに、おしゃれなウェブサイトが作れるのは確かです。直感だけでなんとかなるレベルです。アメブロのようなチープさ（失礼）はありませんね。デフォルトでスマホにも対応しているのは嬉しいです。
設定関連はもう少し説明があった方が初心者には優しいかもしれません。特にGoogle関連。一応ヘルプページはありますが・・・ ▼
・Ameba Ownd Help
知識ゼロの状態からサイトを作るなら良いかもしれませんが、普段WordPressとか弄ってる方からすれば物足りなさはありそうです。例えば「h1」や「strong」タグに該当するものがありません。ブログのビジュアルエディタみたいに「見出し1」とか欲しいですね。
「SNS共有」ボタンも欲しいですね。「ボタン」で作れないことも無さそうですが・・・ せっかくSNSと連携しているのだから勿体無い気がします。
あと個人的には「画像をクリック（タップ）して拡大」機能を実装して欲しいです。スマホからアクセスした時に画像のズームイン・アウトができないので。
今回は飲食店のサイトを作りましたが、既に「食べログ」や「ぐるなび」を利用している場合は、やはりドメインで力負けしそうな気はします。まぁこのへんは個人の努力次第の部分も多くあるとは思います。如何にコンテンツを充実させるかでしょうけど。ここでSEO設定したからといってすぐさま検索上位されるわけではありません。
いずれにせよまだサービスは開始したばかりですし、今後の改善・改良に期待したいですね。記事冒頭でも書きましたが、これからオウンドメディアとしてウェブサイトを作りたい方にはおすすめできると思います。