投稿日:

目からウロコ！女性向け商品を取り扱うマーケター必見の書籍を紹介

obateaアカデミー

女性向け通販プロデュースを務める株式会社グローアップマーケティング代表・谷本理恵子氏の『ネットで「女性」に売る　数字を上げる文章とデザインの基本原則 』（MdN）を読了。女性向けの商品を取り扱う人は必見の一冊となっていました。

男と女の考え方の違い

男性と女性では「購買行動」に違いがある

最近では男女を差別しないように「男女差別」という意識が高まりつつありますが、生物的に違う生き物なので、やはり男と女で考え方の違いは出てくるもの。書籍の中では女性の「能力」や「考え方」の違いにフォーカスし、どのような販売方法が「女性」にマッチしているのかを解説していました。

女性は理想の世界に生きている

（女性が求めるのは）本当の自分を取り戻すための魔法

男性は商品を購入する際に「具体的な効果・効能」を手にしようとします。女性も同じかと思いきや全く違い「魔法」を求めていると言います。男性は目標を達成するための「努力」に重きを置きますが、女性はササッと何かをするとパパッと達成できてしまうことに魅力を感じるそうです。

たしかに、女性向けの通販番組を見ていると「飲むだけ」「簡単になれる」といった言葉が飛び交います。通販番組で購入した商品を夫から怒られたという主婦の話も聞いたことがありますが、男性目線で見える現実性やデメリットよりも、商品に対する夢や理想に目がいきやすいということなのかもしれません。

デザインは色にこだわりを

（女性は）色の微妙な違いを認識する

女性は「男性の4倍以上の色を識別することができる」というアメリカの研究結果があるそう。圧倒的に女性の「色彩認識能力」が高いと言われており、同じイラストを見せても認識できる色数に違いが出てくると言います。

バナーデザインをする際「赤」と「赤みのあるピンク」を区別せずにシンプルな作りをするよりも、細かやかな色彩をしたデザインにした方が販売促進には向いているそうです。

また女性は「赤は情熱」や「青は冷静」など「色の持つ意味」も大切にしているそうです。何となくキレイだからと言った、単なる「見栄え」ではなく、文章と色彩をマッチするような配色を意識したいところ。

認知心理学に基づくデザイン

書籍の後半では「認知心理学」に基づくデザインも紹介していました。

ウェブサイトのレイアウトを考える時、見栄えや使いやすさを重視してしまうことがあります。しかし、本来「ウェブサイト」は人間が見るものですので、人間の行動心理や認知方法に基づくデザインをベースにするのが適切なのかもしれません。

例えば、ウェブサイトを見た時、一番最初に目がいくのは文章（テキスト）ではなく一番左上部にある画像。人間の目は「上下の動き」よりも「横の動き」に強いことから、左上部から右上部に視線が動いていくというのです。

普段あまり意識しない人間の行動を紐解いていくと「販売促進」のヒントになるかもしません。

顧客をファンやリピーターにする方法

買った後「使っていない」人は案外多い

マーケターが勘違いやすいポイントとして「買った後に使う」が当たり前だと思ってしまう点。実は、買った後に使っていないケースも多いそうなんです。

書籍では「買った後にきちんと使ってもらえるように促す」「次につなげる顧客フォローをするだけでもファンやリピート率は増える」としており、具体的な手法の紹介が掲載されていました。

お客様との関係ステップ

  1. 出会い
  2. 見込み客化
  3. 顧客化
  4. 顧客維持
  5. ロイヤルカスタマー

一般的なマーケティング手法と同様、女性のマーケティングでも関係性を深めるステップが存在すると述べられていました。顧客との信頼関係をどのように構築していくかが重要ですよね。

今すぐ買ってもらう理由作り

  • 1月：新春、新年会、乾燥
  • 2月：節分、バレンタイン
  • 3月：ひな祭り、ホワイトデー
  • 4月：新生活、お花見
  • 5月：ゴールデンウィーク、紫外線
  • 6月：梅雨、ジューンブライド
  • 7月：七夕、海水浴
  • 8月：夏休み、花火
  • 9月：敬老の日、運動会、
  • 10月：体育の日、ハロウィン
  • 11月：文化の日、七五三
  • 12月：冬休み、クリスマス、大晦日
  • その他：人気ランキング、オススメ

月ごとのイベントや期間限定のキャンペーンなどで、今すぐ買ってしまう「いいわけ」を作るのが効果的なんだそうです。書籍には、具体的なキャッチコピーのリストも掲載されていました。

ネットで「女性」に売る

ネットで「女性」に売る　数字を上げる文章とデザインの基本原則

本書は、文章やデザインのノウハウがわかりやすくまとめられた書籍となっており、女性特有の考え方や購買心理・購買行動を汲んだ販売促進方法をすぐに実践し、売上向上に貢献できるような内容でした。

販売のみならず、ファンやリピーターになってもらうための仕組みづくりにも踏み込んでいるので、具体的で効果的な方法がたっぷり詰まっている印象です。

本書の構成

  • プロローグ（はじめに）　シンデレラに物を買わせるには?
  • 第1章　女性が見たいもの、見たくないもの
    • 男と女の「買い物」は違う
    • 女の子はお姫様を夢見る
    • 男性と女性では「現実」の認識が異なる
    • 「衝動買い」には深い深い理由がある
    • 女性はそもそも「悩んでいない」
  • 第2章　シンデレラが憧れる世界をつくる
    • 考える前の「無意識」に訴える
    • 色の微妙な違いを認識する
    • 写真や映像で「五感」に訴える
    • 理想の自分は金髪の外国人女性!?
    • 視線の先は必ず読まれる
    • 「一貫性」を欠くと逆効果になる
    • 「雑誌」の世界観をお手本にする
    • 芸術性よりも「わかりやすさ」
    • 読まれなければ「意味がない」
    • 飛ばし読みは当たり前
    • 兎の角にも迷わせない
    • 「シェア」しやすい見せ方にする
  • 第3章　女性をトリコにする文章の秘密
    • 知りたいのは「専門知識」ではない
    • 擬音語・擬態語が女性に響く
    • 材料がないと文章は書けない
    • 他人の土俵で勝負しない
    • 「たった一人」に向けた文章を書く
    • 言い換えたら伝わらない
    • 顔が見えるような接客をする
    • 「不安」があっては買ってくれない
    • 数字は直感を裏付ける「スパイス」
    • 「空気」を読んだ文体で書く
    • パッと目に入る工夫をする
  • 第4章　魔法がとけると買ってもらえない
    • 感動を設計して「行動」まで誘導する
    • 女性を「現実」に引き戻さない
    • 効果効能は全力で伝える
    • 迷うポイントを残さない
    • 女性のお客様に「押し売り」はNG
    • 商品の価値イコール自分自身の価値
    • お客様の「感想」を最大限に活かす
  • 第5章　買い物はいつでも、どこでも楽しい
    • リピートの仕組みをまず先に作る
    • 繰り返し買ってもらう
    • 購入後のフォローの仕組みを作る
    • すぐに「行動」してもらう理由を作る
  • エピローグ（終わりに）　「本当の価値」を正しく伝える力

関連記事

投稿日:

Google検索が「モバイルファーストインデックス2018」を開始

obateaアカデミー

Googleが、1年半続けてきた実験・テストを経て、モバイルファーストインデックス（MFI）のベストプラクティスに準拠したサイトの移行を開始したことを発表しました。段々と検索エンジンの結果に変動や影響が現れそうです。

モバイルファーストインデックスとは

Googleは、これまでクロール、インデックス、ランキング システムでは、主にデスクトップ版のコンテンツを採用していましたが、モバイル使用のユーザー割合が増えたことで、モバイル検索を重視する必要が出てきました。

そのため、デスクトップ版とモバイル版と大きく異なる場合、モバイル検索ユーザーに問題が発生する可能性を考慮し、モバイルユーザーが探しているものを見つけやすくすることに重点を置くようになりました。

モバイルサイトのみインデックスされる時代へ

Googleは、検索結果の提供に使用するインデックスは「引き続き1つのまま」としています。つまり、今後はデスクトップ版のコンテンツに代わりモバイル版のコンテンツをインデックスされることになるわけです。

モバイルファーストインデックスの移行確認

モバイルファーストインデックスへの移行は、Googleの「Search Console」で通知されます。サイト所有者は、スマートフォンの「Googlebot」からのクロールが大幅に増加することがわかるそうです。Google検索では、検索結果とキャッシュページにモバイル版ページが表示されます。

モバイルファーストインデックスの仕様詳細

Googleがモバイルコンテンツを特定する方法の詳細は「デベロッパー向けドキュメント」で確認することができます。

一般的に、レスポンシブ ウェブデザインやダイナミックサービングを使用しているサイトでは、モバイルファーストインデックスがあらかじめ設定されています。また、AMPページと非AMP ページを持つサイトの場合、モバイル版の非AMP ページをインデックスすると発表しています。

MFI対応遅れの影響

モバイルファーストインデックス対応が遅れた場合の影響は、Googleの発表によると大きな心配はないようです。MFIは、ランキングの設定方法ではなく、あくまで「コンテンツの集め方」を変えるというもの、デスクトップ版のコンテンツのみのサイトでもコンテンツは引き続きインデックスされます。

モバイルフレンドリーを推奨

Googleは「モバイルフレンドリー」を推奨しており、デスクトップ版・モバイル版に限らず、モバイルフレンドリーであるかどうか判断します。そのため、2015年からは「モバイルフレンドリーなコンテンツを検索結果に表示」しています。また、2018年7月初めからは「表示に時間のかかるコンテンツ」を検索に悪影響と評価するとしています。

モバイルファーストインデックスまとめ

  • MFIにランキング優位性はない
  • モバイルフレンドリー評価は検索結果に影響
  • 2018年7月から「コンテンツ高速化」を重視

SEO対策は、文章や画像の内容「コンテンツの品質」も重要ですが、今後はシステム的な「高速化」がより重要視されるので、ランキング上位を目指すためには複合的に「品質」を向上させていかなければならないですね。

投稿日:

Google、競合サイト比較する「モバイルテストツール」提供開始

obateaアカデミー

Google「モバイルテストツール」を刷新。ツールでは、読み込みに要する時間、読み込み中に離脱するユーザー数を計測でき、同じ業界内の他サイトと比較した評価も表示されます。

Googleモバイルテストツールの使い方

モバイルテストページにアクセスし、URLを入力するだけで計測を開始。テスト所要時間は約1分で完了します。

モバイルテストの項目一覧

  • 標準接続環境「3G」での読み込み時間
  • 訪問者の推定離脱率
  • 同じ業種内のパフォーマンス比較
  • サイトの速度向上するための修正点

モバイルテストは、標準接続環境でのアクセス、HTML/CSS/javascriptのソース解析によって結果が導き出されます。

1分もしない時間で、現在のパフォーマンスレベルを知ることができ、サイト改善についてのアドバイスも表示されるので便利ですよね。

関連ページ

WEBはパフォーマンスも重視する時代へ

2018年に入ってから計測ツールのアップデートが目立ってきました。もともとパフォーマンス計測ツール「PageSpeed Insights」がありましたが、モバイルテストツールも刷新されたことで、より「パフォーマンス」への注目が集まってきました

一方で、専門家によると「Googleは検索ランキングを大幅に変えたくない意向もある」と指摘。Googleは、コンテンツの中身やアクセスなど、ユーザーが求める検索結果を表示することを主軸として開発を進めています。パフォーマンスを重視はするものの、ユーザーの検索結果に求めるニーズを考えれば、結果的に「大きな変更にはならないだろう」という見方です。

ただ「速度が遅いと離脱する」というユーザー心理があることを忘れてはなりません。速度改善によってコンバージョンが向上したという報告もあるため、サイト運営者は「コンテンツの質」のみならず「パフォーマンス」も重視していく必要があるでしょう。

関連ページ

投稿日:

磯島拓矢著「言葉の技術」に学ぶ「思考の深め方」とは？

obateaアカデミー

電通のクリエーティブ・ディレクター/コピーライターの磯島拓矢氏の『言葉の技術 』（朝日新聞出版）を読了。一見「言葉の技術」というと、コピーライティングにおける手順を書いている本に思えるのですが、中身の方向性は違うように思いました。コピーライターという職業以外にも「考えを深める」というのはとても大切なこと。プランナーやディレクターにも活かせる一冊だと感じます。

コピーライターへの偏見

コピーライターというと「一言」で商品の深みを与える仕事だと感じています。一方で、CMや広告ポスターなどあらゆるところで見かける「コピー」ですが、中には「こんなの誰でも……」と思えてしまうようなシンプルすぎて拍子抜けするようなものもありますよね。ただ、少ない言葉の中を何度も読み返すと、様々な「メッセージ」が見えてきます。磯島拓矢著「言葉の技術」を読むと「コピーライター」がどのようなプロセスで言葉を生み出し、アウトプットしているのかが具体的に見えてきた気がします。

思考の深める「4つの扉」

  • 商品・企業
  • ターゲット
  • 競合
  • 社会・時代

磯島拓矢氏は、電通のコピーライターを養成する際に説明される「4つの扉」を著書で紹介していました。4つの扉とは「商品・企業」「ターゲット」「競合」「社会・時代」のこと。この方法を使うことで、1つの物事を様々な視点で見つめることができると言います。

商品を伝えるための「4つの言葉」

4つの扉は書籍を読んでいただくとして、本を読んで噛み砕いて考案した「4つの言葉」を紹介します。

  • 商品を見て思った第一印象の言葉
  • 商品をあの人にオススメする時に出る言葉
  • 商品を比較して説明する言葉
  • 商品を現在に位置付ける言葉

板チョコを「4つの言葉」に照らし合わせて考えると様々なワードが浮かんでくると思います。もしかすると「甘い」「美味しい」かもしれませんし、ダイエット前の人には「ダイエット前にひとかけらのチョコを食べるとやせる」かもしれない。もう少し違う見方をすれば「シュークリームより美味しい」であったり「震災時の非常食として役立つ」と言えるかもしれません。

考えを深めるためには、様々なアイディアを出し切り、そしてまた絞り込むという繰り返しだと感じます。

思考をさらに深めるメソッド

書籍では、思考をさらに深めるには大きく2つのメソッドがあると書かれていました。

エピソードと普遍の往復

具体的な芸能人の名前を出して商品を販売することがありますが、極端な話をすれば、その芸能人を知らなければ商品は売れないことになります。具体的な名前ではなく「芸能人」というくくりにしてしまえば、より広い人に訴えることができますが、訴求力は弱くなってしまいます。

エピソードを普遍的に、普遍的なものをエピソードに落とし込むという作業は、思考を深めるのに大切なプロセスなのかもしれません。

言葉でしたいことを考える

  • 宣言する
  • 提案する
  • 挑発する
  • 描写する

書籍では「4つの扉」と似た部分もあるがと前置きがありましたが、コピーで何をしたいのかを考えると良いと書かれていました。

コピーでは、大きく4つのしたいこと「宣言」「提案」「挑発」「描写」があるそうです。違った表現にしてみると、宣言は「企業マインドを消費者に伝える」、提案は「具体的な相手にオススメする」、挑発は「競合の痛いところを突く」、描写は「伝えたい人になりかわる」といったところでしょうか。

どれが正しいとかはなく、商品のスケールや具体性、伝える範囲などで、4つの「言葉でしたいこと」から型を選ぶと良いようです。

コミュニケーションは受け手が主体

コピーライターも、他の職業もそうですが、忘れてしまいがちなのが「コミュニケーション」に求めることです。書籍に書かれた「コミュニケーションは受け手が主体」という言葉が印象的でした。

コミュニケーションは「発信者」が主体となりがちですが、本来は受け手がどう捉えるかによって内容が変化してしまうもの。つまり「受け手が主体」ということ。コミュニケーションで、もっとも大切なのは「伝わった・伝わってない」ではなく「良い関係性になれるか」が大切と述べていました。

磯島拓矢著「言葉の技術」

思いつくものではない。考えるものである。言葉の技術

電通のクリエーティブ・ディレクター/コピーライターの磯島拓矢氏の『言葉の技術 』（朝日新聞出版）は、いわゆるテクニック本ではなく、思考プロセスを具体例に沿って解説する書籍。コピーライターのみならず、ディレクター/プランナーなどあらゆる職種の人が「思考を深める」ために必要なメソッドが詰まった書籍だと思います。

投稿日:

【SSL対応】WordPressサイトの重複コンテンツ排除の設定方法

obateaアカデミー

2018年は「SSL元年」かも。Google検索のSSL化が必須となり、ランキングに影響する可能性が噂されています。一部、専門家によれば「httpsに直ちにしなければならない危機的状況ではない」という見方もありますが、いずれ必須条件となりそうなので早めに対応しておいても良いかもしれません。ということで今回は、WordPressで行った「SSL対応」についてシェアしたいと思います。

WordPressサイトをSSL化した手順

  1. SSL対応の影響の確認
  2. サーバーのSSL対応
  3. リダイレクト設定変更
  4. Google Analyticsの設定
  5. Google Consoleの設定
  6. WordPressの設定変更

この対応順がベストかわかりませんが、まずは「SSL対応の影響」について念のため確認。その後、サーバーの設定を変更してSSLに対応、重複コンテンツを避けるためにリダイレクト設定を変更、計測まわり「Google Analytics」「Google Console」の設定変更、最後にWordPressの設定を変更、という流れで対応しました。

SSL対応の影響の確認

SSL化をすると一番大きな問題は「http」と「https」の2サイトになってしまうという点。最悪の場合、検索エンジンに「重複コンテンツ」と認識され、検索結果のランキングに影響すると言われていますので注意が必要です。リダイレクト処理を入れ、「https」のサイトに統合しましょう。

2つ目の影響は「http」時代に公開した記事についた「いいね」、はてなブックマークの数が「0」になってしまうということ。これは対応策がなく、どのサイトも「http」から「https」に変更する際に諦めていることが多いようです。

SSL化で影響が及ばないのは「Google AdSense」など、ドメイン以下で登録しているサービスは、サイトが動作していれば、大きな問題なさそうです。

サーバーのSSL対応

サーバーはレンタルサーバーを利用していたため「独自SSL証明書」を申請し、対応を進めました。一定期間サイトにアクセスできないという報告もありましたが、しばらく待っていると回復されるのでご安心を。

SSLの対応が完了したら「http」「https」の両方でアクセスできるかを確認しましょう。いずれもアクセスを確認できれば、サーバーのSSL対応は完了です。

リダイレクト設定変更

RewriteEngine on
RewriteCond %{HTTPS} !=on [NC]
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

サーバーにある「.htaccess」の最上部に処理を記述し、リダイレクトを行いました。なお、リダイレクト設定は「RewriteEngine（URL書き換え）」をon（有効）にした後、「https以外のURL」を対象に、書き換えルールに従って処理を行っています。

https以外のものを全部「https」しているので少し乱暴な気がするかもしれませんが、とても簡単で楽な方法です。

Google Analyticsの設定

  1. Google Analytics「設定＞プロパティ＞プロパティ設定」
  2. デフォルトURLを「http」から「https」に変更

Google Analyticsはプロパティ設定のURLを「http」から「https」に変更しました。変更後は、リアルタイム計測で確認しておくと安心です。

Search Consoleの設定

Search Console「プロパティを追加」を選択し「https」から始まるサイトURLを入力します。ここで注意が必要なのが「変更」ではなく「追加」ということ。つまり、設定後は「http」と「https」の2つが存在することになります。

WordPressの設定変更

  1. WordPress「設定＞一般」にアクセス
  2. 項目「WordPress アドレス (URL)」を変更
  3. 項目「サイトアドレス (URL)」を変更

WordPressの管理画面から「設定＞一般」にアクセスし、設定していたURL（通常、2箇所）を「http」から「https」に変更しましょう。

SSL化対応を終えて

作業時間は15分程度で、大きな問題もなく終えることができました。

投稿日:

【PageSpeed Insightsの活用】Webサイト高速化・表示速度を改善する方法

obateaアカデミー

Google公式のパフォーマンス計測ツール「PageSpeed Insights」を活用したWebサイト高速化・表示速度を改善する方法について解説していきます。

PageSpeed Insightsとは

パフォーマンス計測ツール「PageSpeed Insights」とは、0～100 の値で表示するパフォーマンスのスコアと具体的な改善アドバイスを提示するGoogle公式のサービスです。

WEBサイト高速化・表示速度改善の手順

  1. PageSpeed Insightsにアクセス
  2. ウェブページのURLを入力し分析開始
  3. スコア・アドバイスにもとづいて改善

コンテンツ品質が最も重要なのは言うまでもないのですが、パフォーマンスのスコアはあくまで参考値であり、必ずしも「100」にすることはありません。分析結果に表示される「最適化についての提案」を参考に、WEBサイト高速化・表示速度改善を目指しましょう。

パフォーマンス向上の2大要素

Googleの解説によると、速度のパフォーマンス向上するには2つの要素「レンダリングブロックリソースのラウンドトリップの回数」「レスポンスのサイズ」を改善することが重要だと述べています。

ラウンドトリップ回数の削減

  • リンク先ページでリダイレクトを使用しない
  • レンダリングを妨げる JavaScript や CSS を削除
  • ブラウザキャッシュを活用
  • スクロールせずに見える範囲のコンテンツのサイズを削減
  • サーバーの応答時間を改善する

いずれも「サイトを表示するための処理を極力少なくする」というのが根本的な考え方です。サイトのリッチ化で複雑な構成となっている場合、様々な処理によってサイトの速度が低下します。1ぺージ目の見える範囲（ファーストビュー）には余計な処理を読み込ませないような工夫し、改善していきましょう。

レスポンスのサイズを縮小

  • 圧縮を有効にする
  • リソースを圧縮する
  • 画像を最適化する

レスポンスのサイズを縮小することで、サイト表示速度を改善できます。処理の回数ではなく、処理をするデータサイズの量と考えるとわかりやすいかもしれません。テキスト、HTML、JavaScript、CSS、画像のデータを圧縮することで、コンテンツ品質を変えずにレスポンスのサイズを縮小することができます。

サイト表示速度の重要性

サイト表示速度は「SEO」にも関係はありますが、PCよりも通信速度が遅いモバイルの普及によって、サイト品質向上のために重要な要素だと言われ始めています。

諸説ありますが「表示に3秒以上かかるサイトは、4割以上のユーザーが離脱する」というデータもあるようです。そのため、通信環境が悪い状況のユーザーに対しても、より快適なブラウジングを提供していくことが、今後の課題と言えるのではないでしょうか。

投稿日:

【2018年版】今さら聞けない！知らないと恥ずかしいSEO用語

obateaアカデミー

SEOは時代によって変化していくので、少し気をぬくと知らない最新用語が増えていくと思う方も多いかもしれません。2018年に抑えておきたいSEO用語をまとめてみるので、チェックしていきましょう。

2018年は「高速化」を重視

検索サイトの掲載順を決める「Google検索アルゴリズム」は、Googleが求める「完璧な検索」を目指して日々更新され続けています。また、時代に合わせた変更もなされており、2017年に問題となった「フェイクニュース」や「医療情報表示」、モバイルユーザーが増えたことで「モバイルファーストインデックス（MFI）」なども検索アルゴリズム改変に大きく影響を及ぼしています。

WEBサイトがよりリッチ化する一方で、サイトの表示速度が遅くなっているという問題が深刻になり始めました。そのため、Googleは検索アルゴリズムを見直して、低速表示のWEBサイトを低品質とみなし、高速化されたWEBサイトを高品質とすることにしたようです。

Speed Updateを実施

専門家「すぐさまランキング表示に大きな影響はない」

Googleは「Speed Update（スピードアップデート）」を2018年7月に実施することを発表。内容としては、モバイル検索においてページ速度をランキング要因に使うというもので、専門家の間では「ものすごく遅いとユーザーに感じさせるページだけに影響」「優れたコンテンツであれば上位に表示」としており、すぐさまランキング表示に大きな影響はないとしています。ただ、それでも今後のサイト作りにおいて、コンテンツの品質のみらなず「高速化」というのは重要なキーワードとなりそうです。

2018年版！抑えておきたいSEO用語

2018年のトレンドとなりそうなのが「AMP」と「PWA」です。いずれもWEBサイトの「高速化」で使用される技術という印象ですが、高速化のみを目的として作られた「AMP」と、モバイルページの進化を目的とした「PWA」は、全く違う意味をなしています。

AMP（Accelerated Mobile Pages）とは

AMP「モバイルページの読み込み高速化」

AMP（アンプ）とは、Googleが中心となって立ち上げた「モバイルWeb高速化のオープンソースイニシアチブ（Open Source Initiative ）」のことで、モバイルでのWebページ読み込み高速化を目指し設立したプロジェクト及びその技術のことです。

AMPと似たような技術で、各社で独自の技術を採用しているケースもあり、Facebookでは「Instant Articles」、Appleは「Apple News」をそれぞれ採用しています。

AMP「モバイル高速化」の仕組み

  • HTML：リンクをしてから読み込む
  • AMP：あらかじめ読み込んでおく

これまでHTMLでWEBサイトを作成してきました。AMPの規定（フォーマット）にも合わせておくと、Googleがページをあらかじめ読み込んでくれるため、サイト表示が速くなります。

AMPの構成

  • AMP HTML：高速化のため制限されたHTML
  • AMP JS：HTMLを正しく高速化する機能
  • AMP Cache：AMPページをキャッシュし配信

AMPは大きく3つの要素から構成されており、加えてデザイン調整で「CSS3」が使用されます。あらかじめ「AMP」が決めたフォーマットに合わせることで、有効なAMPページとなり、配信することができます。

Googleページでモバイル検索すると「雷マーク」が表示されているWEBサイトが、AMPの適応されたページとなっています。

AMPの課題

AMPの課題点は、高速化を重視しているため、表示に「制限」がかけられていること。HTMLで表示している内容をそのままAMPにすることはできないのが現状ですが、技術の進歩によって、表現の幅が広がってきています。

AMP Storyを発表

2018年2月13日、アムステルダムにて開催された「AMP Conf 2018」で、Googleは「AMP Story」を発表しました。AMP Storyは、InstagramやSnapchatで採用されているストーリー表示を、検索の上位に表示するというもの。

好きなブランドバックやアパレル、化粧品などの商品名やキーワードを検索した際に、検索結果の上部に「ストーリー」が表示されるのも、そう遠い未来ではなさそうです。

PWA（Progressive Web Apps）とは

PWA「Webのアプリ化プロジェクト」

PWA（ピーダブリューエー）とは、アプリで出来ていた表現をブラウザ上でも可能にするためのプロジェクト。これまでアプリのみで行っていた施策をWebサイト上でも実現できます。

PWA対応のメリット

  1. レスポンスの向上
  2. オフライン時の閲覧
  3. プッシュ通知
  4. インストール不要
  5. ストア審査不要
  6. GPSによる現在地取得の利用
  7. ネイティブアプリのUI実現

PWA対応をすることで、新たなブラウザをインストールすることなく、ネイティブアプリのような機能や体験をユーザーに提供することができます。また、アップデートの際もストア審査がないため、開発後すぐに公開することが可能です。

ブラウザデフォルトのUI（メニューバーなど）を非表示にすることによって、より快適なブラウンジングを可能に。また、ホームアイコンの追加、起動時のスプラッシュ画面などネイティブアプリに近い使い心地を実現します。

PWAの課題

  1. 管理コストの増加
  2. 非対応ブラウザの存在
  3. SSL化の対応コスト

ユーザー・デベロッパー双方にメリットが多いPWAは、様々な課題があるのが現状です。

（1）ネイディブアプリを提供しているデベロッパーが「PWA」を導入すると、これまで提供してきたアプリとブラウザの2重管理が発生します。導入後の施策で複数環境の管理を行うのは、コストがかかってしまうと考えられます。

（2）海外で使われているブラウザ「Chrome」はPWA対応済みですが、日本で多く利用されているブラウザ「Safari」は現在開発中となっています。現在、PWA対応を提供しても、恩恵を受けることができるユーザーはごく一部と言われています。

（3）これまで「HTTP」で作成されているサイトは「HTTPS」に切り替える必要があります。SSL化をするには、開発コストが発生するため、導入に時間がかかります。

AMP/PWAの使い分け

専門家「AMP to PWAがベスト」

モバイル高速化が行える「AMP」と「PWA」の対応優先度としては、すでに普及が始まっている「AMP」にするべきという考え方が主流。AMPがすでに対応済みであれば、PWAも対応し「AMP to PWA」にしていくのが理想的です。

AMP to PWAを実現すると、あらかじめキャッシュされたAMPページを検索サイトから素早く表示し、AMPページ閲覧中に裏側でPWAページを読み込むことで、2ページ目以降を高速表示することができます。

すでにアメリカなどでは対応するデベロッパーがいるため、日本にも数年後、AMP/PWAを対応していく必要がありそうです。

ニュースメディアならAMPは必須

サイトの特性によって、対応優先度は変わってきます。ECサイトであれば、必ず「決済」をするフローが存在するため、アプリのように決済できる「PWA」を導入するべきだという考え方が強いように感じます。一方で、ニュースメディアなど「テキスト」を重視するコンテンツにおいては、高速表示を優先する「AMP」を導入することが優先されると言われています。

WEBの高速化手法

WEB高速化の話をした時、AMP/PWAが注目されますが、導入コストがかかるのが現状。コンテンツの質を極力下げずに、提供速度を高めることも重要視されるべきです。

PageSpeed Insightsの活用

Googleは“ウェブページの読み込み時間を短く”を推奨しており、パフォーマンス計測ツール「PageSpeed Insights」を提供しています。0～100 の値として算出されるパフォーマンス改善の余地を推定したスコアとアドバイスをもとに、WEBサイトの改善を図っていきましょう。

主に重要な改善点

  • リンク先ページでリダイレクトを使用しない
  • レンダリングを妨げる JavaScript や CSS を削除
  • ブラウザキャッシュを活用
  • スクロールせずに見える範囲のコンテンツのサイズを削減
  • サーバーの応答時間を改善する
  • 圧縮を有効にする
  • リソースを圧縮する
  • 画像を最適化する

WEB速度がGoogleランクにすぐさま影響するものではないものの、PageSpeed Insightsのスコア80点以上を目指してWebサイトを改善することが、サイト品質を向上で大切なことだと思います。

投稿日:

【超初心者向け】Webサイト制作のはじめ方・手順や方法とは？

obatea academy

Webサイトを作ろうと思い立ち、HTMLの本を読んで「さぁはじめよう」と意気込んだものの「何から始めればいいのか」わからない人が多いのが現状。ここでは、Web制作のはじめ方・手順や方法について書いていきます。

初心者の落とし穴

結論から言うと「HTMLを学んでもWebサイトは作れません」と断言できます。HTMLは手段であって、道具なだけです。HTMLは言わば「箱」なので、その中に「何を入れるのか」が重要なのです。

箱の中に「検索」を入れれば「検索サイト」になり、また別の箱に「自己紹介」を入れれば「ポートフォリオ」にもなります。HTMLを始める前に、どんなサイトを作りたいのかを「設計」する必要があります。

Webサイト作りの手順

Webサイトを0から作ろうと思うと多くの手順があります。

  1. 開発環境を用意する
  2. どんなサイトにするか考える
  3. 具体的なデザインを考える
  4. 素材を用意する
  5. HTMLなどで構築する
  6. サイトを公開する

Webサイトは、開発ができる環境を準備し、どんなサイトにするか考えるということから始まります。そして、デザイン素材やテキストを用意し、HTMLなどで組み合わせていきます。

企業が取り扱うWebサイトでは、開発環境を用意する際に「セキュリティ」も考慮する必要がありますし、開発スケジュールによって「規模感」や「工数」も大事になってきます。品質の良いサイトを作るには、サイトを見てくれる人がどんな人かも考え、文章や画像などの素材も用意する必要があります。

個人や企業、利用シーンなどによって、Webサイトにどれくらいの力をかけるのかを考える必要があります。

1.開発環境を用意する

企業では「システム担当」「システムエンジニア」が担当する領域です。開発環境は「サーバー」「ドメイン」を用意する必要があります。

サーバーを用意する

サーバーとは、簡単に言うと「誰もがアクセスできるパソコン」です。普段、私たちがインターネットにアクセスするように、世界中の人に自分のWebサイトを見てもらうことができます。

サーバーを用意できない人向けに、無料ホームページを作成できるサービスなどがあるので、簡易的なサイトであれば活用するのも良いでしょう。また、アメーバブログなどのブログサービスも「サーバー」を用意する必要はありません。

本格的なサイトを作ってみたい、wordpressでブログを始めたいという方は『lolipop』『さくらインターネット』などの「レンタルサーバー」と呼ばれるサービスを利用するのが良いと思います。

レンタルサーバーを使わずに、自身のパソコンをサーバーにすることも可能です。24時間365日パソコンを自宅で稼働させるため電気代などの維持費用がかかるため、小規模サイトでは実用的ありません。ただ、Web制作においてシステムの理解度が深まるので、やってみると勉強になります。

ドメインを用意する

ドメインとは、簡単に言うと「住所」「URL」です。例えば、大手検索サイト「Google」の場合は「https://www.google.co.jp」になります。インターネット上で住所は「123.45.67.89」といった「IPアドレス」と呼ばれる数字のみでしたが、ローマ字なども使うことで、わかりやすくしたのが「ドメイン」です。

引っ越したら「引越し届け」を役所に届け出るように、Webサイトの住所を「お名前.com」などのドメイン取得サービスで申請すると、ブラウザに住所を打ち込むことでサイトにアクセスすることが可能です。

ドメインは、基本的にサービス名をそのまま表記するものが多いです。

2.どんなサイトにするか考える

開発環境が整ったなら、いつまでにどんなサイトを作るかを考える必要があります。大まかなスケジュールを決めて、どんな内容をWebサイトで発信するかを決めると、途中で諦めず最後までやり抜くことができるはずです。

どんなサイトにするか考えることを「Webプラニング」と言います。Webサイトは作って終わりではなく「運用」していくことも大切です。常に新しい情報を発信することで、Webサイトを見に来てくれる人が増えていきます。

Webサイトを作る「目的」も明確にしておくと良いでしょう。Webサイトを作る目的が不明確だと、開発が終わってから「あれ？なんで作ったんだっけ」と路頭に迷ってしまいます。ブランドイメージアップなのか、集客をしたいのか等、必ず目的があるはずなので、明確な言葉にしておきましょう。

3.具体的なデザインを考える

Webサイトの方向性が決まってきたら、今度は具体的なデザインに落とし込む必要があります。様々な手順がありますが、まずは「ワイヤーフレーム」を作るのが一般的です。どの位置に何をおくのかを紙の上でざっくりと配置していきます。ここでは、キレイなデザイン資料にする必要はなく「ここに画像があって、ここに文字を置く」といった大まかな骨格を描いていきます。

Webデザインはファッション同様「トレンド」があります。Webデザインの最新情報をチェックして、配色やレイアウトを参考にしましょう。

4.素材を用意する

  • テキスト素材
  • 画像素材

大まかなデザインや「伝えたいこと」が明確に決まってきたら、品質の良い素材を用意しましょう。Webサイトを見てくれる人をイメージしながら「文章（テキスト）」や「画像」を制作するのです。

5.HTMLなどで構築する

Webサイト制作ではHTMLの他、スタイルを決めるCSS、アニメーションなど動きを加えるjavascriptを使用します。尚、CSSのみでアニメーションのように見せることもできます。

【初心者向けHTML講座】書き方の基本ルールとタグの使い方

6.サイトを公開する

サイトを公開したら終わりではなく、広告やSNSでサイトが出来たことをお知らせして見に来てもらうことが始まりです。

検索した時に上位表示されるように「SEO対策（検索エンジン最適化）」を行い、内容を充実させるために「運用」していくことが必要となります。

投稿日:

【初心者向け】必ず覚えておきたいリスティング広告の用語

obatea academy

GoogleやYahoo!など、検索エンジンの検索結果に表示される広告「リスティング広告」で指標となる用語についてまとめてみます。同じことを示していても略称になっていたり、上級者でも忘れてしまうケースもある大切な用語なので、必ず覚えておきたいものばかりです。または「なんとなくわかっている」と思っていても、人には説明しにくい時に活用してみてください。

リスティング広告の用語

リスティング広告は、英語で「product listing ads」です。広告がリストのように並べられて表示されることから「リスティング」と呼ばれたのが由来と言われています。

リスティングは広告の中でも最もスタンダードな広告手法の一つとして知られています。WEBマーケティングの最初の一歩でリスティングを開始する方も多いかもしれません。ここでは、広告を運営していく上で「必ず覚えておきたいリスティング広告の用語」を説明していきます。

インプレッション数（imp）

インプレッション数は「Impression（インプレッション）」や略して「imp（インプ）」と呼ばれることが多いです。英語を直訳すると「印象」という意味ですが、リスティング広告では「広告が表示された回数」という意味になります。

広告が表示されるということを「顧客（ユーザー）の目に触れた機会」とも言い代えるとわかりやすいかもしれません。

クリック数（CTs）

クリック数は、リスティング広告では「表示された広告がクリックされた数」という意味で使われています。インプレッションされたからと言って、広告を見たい全ての人がクリックすることがないため、現実的にはクリック数はインプレッションより少ない値になるのが一般的です。クリック数は「Click」「Click Through」「CTs」と表記されることもあります。

クリック率（CTR）

クリック率 ＝ クリック数÷インプレッション

クリック率は「広告がクリックされた割合」という意味になり「Click Through Rate」や「CTR」と表記されることもあります。

クリック率は、クリック数をインプレッションで割った値。値が高いと、広告を見た人がクリックしたくなるような文言や画像になっているということになります。反対に、値が低いと、広告を見た人がクリックしたくなるようなものにはなっていないということが判断できます。

クリック率が高いからと言って、その広告が「良い」と判断するのは少し早いかもしれません。クリックされるからと言って、広告の目的―CV、つまり商品購入や登録―を達成するわけではないため、クリック率と目的を達成したかを見て判断するのが賢明でしょう。

とはいえ、広告がクリックされなければ、広告の目的を達成することはできないはずです。クリック率を高くし、適切な広告表示を模索していくことが大切です。

コスト（Cost）

コスト ≒ クリック数×平均CPC

発生した広告費を「コスト」と呼び、クリック数と平均クリック単価（平均CPC）をかけた値とほぼ同値になります。GoogleやYahoo!などにリスティング広告を掲載するための費用、支払った金額とも言えます。

広告は、コストが抑えながらも効果を最大化していくことが必要です。コストを増やしても効果が高ければ運用は問題がなく、コストが低くても効果が低ければ運用方法を改善する必要があります。

平均クリック単価（CPC）

平均CPC ＝ コスト÷クリック数

平均クリック単価（CPC、Cost Per Click）とは「広告の 1 回のクリックに対して請求された金額の平均額」を意味します。クリックの合計費用を合計クリック数で割って算出されます。

平均 CPCが高いからといって広告効果が高いとは限りませんので、広告のコストとリターンを比べるための目安にしましょう。

コンバージョン数（CV）

コンバージョン数とは、広告をクリックして商品購入やお問い合わせなど、広告主が「成果」や「リターン」とみなした行動がとられた数です。英語では「Conversion」「CV」「CVs」と表記されます。

広告の目的は「クリック」されることではなく、その先の「コンバージョン」を獲得することです。運用上で最も重要視される数で、広告運用の課題と言えるでしょう。

コンバージョン率（CVR）

コンバージョン率 ＝ コンバージョン数÷クリック数

広告のクリック数に対しコンバージョンが発生した割合を「コンバージョン率（CVR）」と言い、コンバージョン数をクリック数で割ると算出されます。

コンバージョン数およびコンバージョン率を改善するには、表示される広告から流入する「ランディングページ（LP）」の質を高める必要があることを示していることが考えられます。また、表示された広告とLPのユーザー属性が合っていない可能性もあります。

広告を見てクリックしたユーザーがどのような気持ちでLPを見るのかを考えて、コンバージョン率を高めていきましょう。

顧客獲得単価（CPA）

CPA＝ コスト÷コンバージョン数

ユーザーを一人を獲得するために必要なコストのことを「顧客獲得単価（CPA）」と言います。顧客獲得単価は、広告でかかった全体の費用「コスト」を獲得した顧客数「コンバージョン数」で割ると算出することができます。

広告費用対効果（ROAS）

ROAS ＝ 売上÷コスト×100

広告費用対効果「ROAS」とは「Return On Advertising Spend」の略で、売上をベースにコストの回収率を示す指標として活用されています。コストに対し、どれだけ売上をあげたのかを割合で知ることができるというものです。

売上とコストが1:1の場合、つまり「ROAS＝100%」が基準となり、ROASからコストに見合った売上があがっているのかを判断することができるのです。

投資対効果（ROI）

ROI=利益額÷コスト×100

投資対効果（ROI）とは「Return on Investment」の略、ROASとROIは指標として似ているため比較して説明されることが多いです。ROASが「売上」をベースの指標に対して、ROIは「利益額」をベースの指標となっています。

 

 

売上がコストの2倍出た場合、ROASは200%となるため広告効果としては良いように思えます。しかし、広告のコストに対して利益がマイナスだった場合、ROIは100%以下となってしまうので赤字となってしまうわけです。

一般的な企業で広告運用する場合、ROASよりもROIを重要視する必要があると言われています。

 

投稿日:

【初心者向けHTML講座】書き方の基本ルールとタグの使い方

obateaアカデミー

PC、スマートフォンなど全ての「ウェブサイト」を作るに必要なものが「HTML（エイチティーエムエル）」です。HTMLは「タグ」や「マークアップ」などと違った呼び方がされる場面もありますが、意味としては大きな違いはありません。

HTMLとは

HTMLとは「Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略です。直訳すると「テキストを超えたテキストをマークアップする言語」となります。

マークアップ（Markup）とは「文章構造」を明確に整理すること。タイトルや見出しに「タグ」と呼ばれる目印をつけると、コンピューターが認識しやすくなります。例えば、ページのタイトルを「<title>タイトル</title>」と囲む、文章を「<p>文章がここに入る</p>」といった具合です。

要するに、HTMLは「ウェブサイトを作るパーツ」くらいに、思っているくらいで良いのです。または「大まかなレイアウト構成」や「表示する規則やルール」と思っても良いかもしれません。

HTMLの歴史

HTMLの歴史は1989年、欧州12か国の共同研究機関・CERN（欧州原子核研究機構）で、ティム・バーナーズ・リー氏によって誕生しました。その後、世界標準化の推進や改善が進められています。

W3Cが世界標準化を推進

1994年には、ブラウザやサーバーを標準化を推進する非営利団体・W3C（World Wide Web Consortium）を設立。

CSSの誕生

1996年に、W3Cが「CSS1.0」を勧告。HTMLを装飾する「CSS（Cascading Style Sheets）」によって、文章構造のみだったHTMLがより見やすくなったのです。

現在では、CSSは「シーエスエス」や「スタイルシート」と一般では呼ばれています。HTMLと同様、CSSも改善が日々なされているため、書き方が数年に一度変わってきています。

HTML5の推進

2008年に草案が勧告された「HTML5」は、文章構成をより簡略化し、動画表示やアニメーションなど「リッチ化」するために考えられました。

HTMLのはじめ方

ウェブサイトを作るために「HTML」を学びたいと思っている人は「HTMLを読む」から進めると良いかも。ウェブサイト上で「右クリック＞ページのソースを表示」をすると、表示されているウェブぺーじの「文章構成」が見えてきます。

デザインは「CSS」を読む

HTMLは「文章構成」のみとなるため、憧れのサイトと同じデザインにしたい場合は「CSS」を読んでみると参考になります。

動きは「js」で作る

動きのあるアニメーションを使用したサイトの場合は「JavaScript（ジャバスクリプト）」と呼ばれるプログラム言語や、JavaScriptをより容易に使えるようにしたライブラリ「jQuery（ジェイクエリー）」を使用するのが一般的です。

HTMLの基本

初心者にありがちなのが、HTMLに「意味」を求めすぎること。まず初めに、世界のルールだと思って「定型文」を覚えます。その後「よく使うタグ」を覚えれば、90%は完了です。

HTMLは「履歴書」みたいなもの

HTMLは「とても難しい」とイメージがあるかもしれませんが、実は「文章を整理するツール」なので、全く難しくありません。

履歴書で「名前」の欄に名前を書くの逆かもしれません。例えば「見出し」には「<h1>見出し</h1>」と、文章には「<p>文章</p>」と、文章構造を明確化してばいいだけなのですから。

難しいのは、文章やデザインを考案していくこと。HTMLはあくまで「枠組み」や「箱」であり、大切なのは中身であったりします。

HTMLの定型文

  • <!DOCTYPE html> ：ドキュメントタイプの宣言
  • <html>：HTML文書であることの宣言
  • <meta>：文書に関する情報（メタ情報）を指定
  • <link>：cssファイルなど外部の関連文書を指定
  • <script>：スクリプト文書の埋め込みを指定
  • <head>：ヘッダー情報を表す
  • <title>：文書のタイトル
  • <style>：cssを指定
  • <body>：文書の本体部分

HTMLの定型文は、基本的にはどのウェブサイトで使われている記述になります。プロの「マークアップエンジニア」でもテンプレートをコピーして使うことが多いため、覚えていない人もいるかもしれません。

検索エンジンに最適化（SEO）を意識する場合は「定型文」をしっかりと記述することが重要となります。

HTMLでよく使うタグ

  • <div>：段落やまとまりを指定
  • <h1>：大見出しを指定
  • <h2>：中見出しを指定
  • <h3>：小見出しを指定
  • <img>：画像を表示指定
  • <p>：ひとつの段落を指定
  • <a>：リンクを指定
  • <span>：文のまとまりを指定
  • <ul><li>：リストを作成

HTMLの定型文「<body>」の中に記述するタグ。ブログやニュースサイトでは、見出し（h1）と文章（p）のセットを段落（div）にするというのが基本構造になります。

まとめ

たった1日で基本が身に付く! HTML&CSS 超入門
  • HTML：ウェブサイトを作るパーツ
  • HTMLのはじめ方：HTMLを読んでみる
  • HTMLの基本：定型文とよく使うタグを覚える