カテゴリー: ホームページ作成ノウハウ

フェイスブックをホームページに埋め込む

スマートフォンが普及して、SNSの浸透率は劇的に変化しました。
スマートフォンが普及する前は、なつかしのmixiなど割とPCユーザー向けサービスが多かったのですが、カメラも高画質で手元で連動しやすく、気軽に使える存在へと変革していきました。
一般に普及するなら当然ビジネス用途の目的も多くなります。

最近はこの手の連携は楽

一昔前は、割と面倒な作業だった、各種サービスとホームページの連携ですが、今はとても楽です。
今回はホームページにフェイスブックを連動させて掲載をする、という作業ですが、フェイスブックのデベロッパーサイトに行けば、簡単にできそうです。

フェイスブックデベロッパーへ

まずはこちらのサイトへ飛びます。
https://developers.facebook.com/docs/plugins/page-plugin/

ログインなどは不要

特にログインなどは不要ですので、フェイスブックに移動して「作成済みのフェイスブックページのURL」をコピーしてきます。
あとは下記画像の部分にコピペをします。

コードを取得

前項でコピペしたら、このようにタイムラインが現れます。
あとは左下の「コードを取得」を押すと・・・

IFrameを選択

このような画面になります。
が、、、ここでは画像のようにIFrameを選択ください。

生成されたコードを取得

画像の赤枠で囲んだコードが、フェイスブックをホームページに連動させるためのコードです。
ワードプレスでも、普通のHTMLで書かれたホームページでも使用できます。

終わりに

ヘッダーを小さくしたり、友達（いいねをしてくれた人のアイコン）を削除する、などの項目があるので、プチカスタマイズはここでできます。

さて、今回は簡単な記事になりましたが、フェイスブックについては「スタッフさんが日々簡単な発信を行う」などの活用だと、定期的にwebから発信できる良い媒体と私は思ってます。（うちはなかなかできません）
ぜひ「webをメデイア化」させて、どんどん情報発信を行なって頂けましたら幸いです。

はじめに

情報としては古い（2015年発表分）のですが、一般に広く知られているかと言えば、そうではないのかなと思い、改めて記事にします。

まだPC用のホームページのレイアウトに慣れていた発表当初「スマホ上で表示された（PC用の）ホームページを、自分の指で広げて見る方がわかりやすい」などの声もお聞きした事があります。
が、人間の慣れとは不思議なもので（世界のweb担当者の努力も大きいのですが）、今ではスマホ用のレイアウトじゃないと、見づらく感じるのではないでしょうか。

特に重要なのがseo（検索順位）に影響を与えるという事です。

グーグルの発表（2015年当時）

検索結果をもっとモバイルフレンドリーにという発表がありました。

今となっては、モバイル（スマホやタブレット）からのアクセスが、PCからのアクセスを超えるほど、浸透してきました。

グーグルは「ユーザー視点」を一番重要視しています。
当然、世の中にスマホやタブレットが普及して、その端末からホームページを閲覧するとなると、レイアウトの対応も必須となってきます。

モバイルフレンドリーとは？

• 1. ユーザーが快適に利用できるサイトを作成する
• 2. モバイル ユーザーが一般的なタスクをどの程度簡単に行えるかを基準に、ウェブサイトの有効性を測定する
• 3. あらゆる端末に共通するモバイル用のテンプレート、テーマ、デザインを利用する（レスポンシブ ウェブ デザインを採用する）


グーグルのお知らせでは、この様に書かれています。
つまり、「見やすさ」、「扱いやすさ」、「表示速度の速さ」、「色んな端末のサイズに対応すべき」という事です。
ちなみに１つのレイアウト（スタイルシート）で様々なサイズの画面に対応する事を「レスポンシブデザイン」と言います。

余談ですが、この対応をするために、結局２倍近い作業（デザインやｃｓｓの記述）が増えたため、減少傾向だったホームページの制作料金が上昇しました。

あなたのホームページはモバイルフレンドリー？

こんな便利ツールがあります。




モバイル フレンドリー テスト – Google Search Console

このブログをチェックしてみよう

自分のブログ（ホームページ）の調査結果って、ちょっと載せたくないですね・・

URLの入力

先ほどのリンクから、このブログのURLを叩きます。




分析中

分析されています・・・



結果発表

ジャン！
結構早く完了します。



結果は、何も問題なし！でした。
（だってワードプレスの標準テーマそのままですから・・）

モバイルフレンドリーでない場合

こんな風に、怒られてるかの様なエラーが出ます。

「クリック可能な要素同士が近すぎます」、「コンテンツの幅が画面の幅を超えています」、ばつ印と共に表示されました。



終わりに

懐かしい情報の記事を書きましたが、webマーケティングを頑張りたいのに、こういうツールを知らないと勿体無いので、エンドユーザー様向けにお伝えしました。

モバイル対応はseo（検索順位）に影響を与える大事な要素ですので、今一度調べてみてはいかがでしょうか。

はじめに

ホームページを作成したい！というお声を、お陰さまで沢山頂きます。
そして具体的に何を作りますか？とお聞きすると、実際あやふやなケースが多いです。
当然そのためにソルアライアンスが存在するのですが「何のためのホームページなのか？」という事を改めて考えてみたいと思います。

ホームページの種類

ホームページにも色々な種類があります。
当然会社を運営していると「売上を上げたい」「人を雇いたい」「よりよい情報をお客様に届けたい」など様々な想いが浮かびます。

ホームページはそこに連動します。
つまり「何をするためのホームページなのか」です。

もちろん自社でホームページを作成できるならまだしも、投資をして作成するはずなので、当然「収益につながるであろうホームページ」を検討する事になります。
5億円以下の中小企業であれば、なおさらでしょう。

またホームページという呼び名は日本独特なところがあり、一般的にはweb site（ウェブサイト）などと呼びます。
ですので下記からの解説では〜〜サイトという様な呼び名となります。

コーポレートサイト

いわゆる企業サイトです。
会社のご案内として

• 理念
• 沿革
• 会社概要
• サービス概要

などの情報を発信し、元請けや下請け、お客様や株主など、いわゆるステークホルダーに見ていただくホームページとなります。

例：ソニーのコーポレートサイト（https://www.sony.co.jp/）

パソコン、テレビ、スマホ、デジカメに音楽機器など多くの商品を手がけるsonyですが、コーポレートサイトとして単体のサイトが用意されています。

サービスサイト

サービスサイトでは、商品やサービスのホームページを作り、より詳しく知って頂こう、という目的となります。
皆さまの会社やお店でも様々なサービス展開をされていると思いますが、それを一挙にコーポレートサイトでご紹介するのには限界があります。
たとえ表現できたとしても、「お客様のニーズによる検索」に、そのサイトが引っかかるか、というと、各社がサービス毎のホームページを作って戦っているwebの熾烈な争いの中では勝ち残りにくいのではないでしょうか？

例：バイオ（vaio）のサービスサイト（https://vaio.com/）

特にブランディングが成り立ってないサービスや商品の場合、ドメインを商品名にするのではなく「サービスやニーズに合ったドメイン」を選択する事もあります。
例で言うと note-pc.comなんてドメインも考えうるのではないでしょうか。

この辺りのお話「マーケティングとブランディングの違い」は、別の機会でお伝えします。

ECサイト

ECサイト（イーシーサイト）とは、自社の商品（広義では他社の商品）やサービスを、インターネット上に置いた独自運営のウェブサイトで販売するサイトのことである。ECとは英語: electronic commerce（エレクトロニックコマース=電子商取引）の略。
引用：wikiペディアより（ecサイトとは）

平たく言うと「通販サイト」です。
サービスサイトとの違いは、このページ内で「購入」「決済」「発送（およびダウンロード）」ができるものです。

基本的には「物やデータ」の販売となりますが、その他の特徴としては「レビュー機能」「シェア機能」「特典付機能」などで、よりその商品に対する「お客様の声や満足度」を直感的に収集〜公開できるのも魅力の１つではないでしょうか。

例：ソニーストアのECサイト（https://www.sony.jp/）

最初のコーポレートサイトでソニーをたまたま例に挙げましたが、よくみると用途に応じて、それぞれのドメインを取得し、独立したホームページを作るというweb戦略を展開していますね。
こうなったらソニーのランディングページも探してみましょう。

このケースは企業規模が大きいので、総合的な通販サイトになっていますが、１商品を販売する小規模な通販サイトも多くあります。
（例：お酒の通販など）

ランディングページ

LPとも言われる最近主流の「サイト」および「ページ」です。

大きな意味としては「Land ＝ 着地」するホームページの事です。
簡単に言うならば「１商品や１サービスを売りために「イメージ提供」「必要性」「価値」「価格」などを１ページで一挙に伝えて、購買をゴールにしたものが多いです。
（購買ではなく資料請求や電話問い合わせをゴールとしたものも、多く存在します。）

よく使われる戦法として「流入経路を確保した」動線を描きます。
（戦略と戦法は違う）

例えばフェイスブックなどのSNSを活用して、記事を流す。そこにランディングページのURLを載せて、リンクをクリック〜閲覧していただく、という流れが作れます

またランディングページの魅力としては「基本1ページものだからサービスサイトより安く仕上がる」「他のメニューがない（または少ない）ので、せっかく来た来訪者が他のページに行ってしまう事がない（ホームページのKPIの１つに「離脱率」と言うものがあるくらいです。）

例：aiboのランディングページ（https://aibo.sony.jp/）

オウンドメディア

オウンド（owned）＝所有が直訳です。
サッカーのオウンゴール（自分チームのゴールに入れてしまう事）とは少し違います。

話が逸れかけましたが、大きな意味としては自社が所有する「魅力的」な情報やノウハウなどを発信するホームページとなります。
魅力的という点が非常に重要です。なぜなら「見てもらう」ために時間と労力をかけて情報やノウハウを「ページ」にして発信するからです。
このブログも同じなので、どうにか魅力的なものを書いていかないといけません・・・

何々を食べにいきました、ゴルフに行きましたなんて情報は特に有益ではないですし、自己啓発的な考え方を一方的に綴るブログも却って偏った情報の発信になってしまいますので、あくまで「ユーザー目線」の情報が大事になります。

例：Cocotameのオウンドメディア（https://cocotame.jp/）

やはりありました、sonyのオウンドメディア「Cocotame」です。

補足

オウンドメディアは「その企業の”有益な情報”を自己発信するものでしたが、トリプルメディアと呼ばれるものの１つで、他に「ペイドメディア」と「アーンドメディア」というものが存在します。
今回はあまり触れませんが・・・
ペイドメディア＝googleやマスメディアなどに広告料金を支払って情報発信するもの
アーンドメディア＝フェイスブックやツイッターなどのSNSを活用した情報発信
というイメージを持っていただけましたら、幸いです。

リクルートサイト

リクルートサイトは聞き馴染みがある方もいらっしゃるかもしれません。
大採用難の時代（執筆時点は2018年）に入り、各社「採用専用」のホームページを作るようになりました。

背景としては今回の記事とは内容が少し異なるため、簡単にしか書きませんが人が採れないと自社の魅力を打ち出さないといけなくなります。

• どんな理念の会社なのか
• どんな仕事をするのか
• どんなキャリア形成を描けるのか
• どんな将来像が待っているのか
• どんな人たちと働くのか

このような事をユーザー「求職者」に訴求していきます。

例：sonymusic新卒採用2019（https://saiyo.sme.co.jp/graduate/19/）

新卒向けなのでデザインも面白いですね！
でもポイントはきちんと抑えた作りです。（当たり前ですが・・）

その他ホームページの活用

他にもコンテンツマーケティングや、少し入り組んだものだとマーケティングオートメーションなどの所謂「手法」もありますが、少し戦略が違うものになるので、今回は割愛します。

まとめ

ホームページと一口に言っても様々な種類があります。
それはすべて「目的的であること」が大事です。
当然綺麗なデザインというのも大事（ブランディングとして）ですし、色々な想いがあるとは思いますが、今一度「戦略を考えた上」で「戦法を選ぶ」作業をし、ホームページの作成に着手をいただければと思います。