第

7章

補章
7-01

Web サイトの主なパターン

7-02

ペルソナ

7-03

素材・ドキュメント管理

7-04

CSS 設計7-05 オウンドメディアの活用
7-06

Google の各種サービスの活用

Chapter

7 Webサイトの主なパターン

01
Point

受注制作で、企画から公開までを依頼される Webサイトのパターン
は、コーポレートサイト、ブランド・プロダクトサイト、キャンペーン
サイト、ECサイトの 4 つが代表的である。

コーポレートサイトは事業規模によって必要なボリュームが異なり、

特に上場企業と非上場企業とで大きな違いがある。
キャンペーンサイトは設計優先ではなく企画優先でプロジェクトが進むことが多い。
ECサイトは商品を販売するためのサイトであり、単品販売型と総合販売型に大別できる。

コーポレートサイト

ブランド・プロダクトサイト

会社概要や事業内容を掲載するサイトであり、企業サイ

ある会社の製品群やサービス群を「ブランド（ブランドラ

トや会社サイトとも呼ばれる。事業規模によって、サイトイン）」と表現する。ブランド専用のサイトを「ブランドサイ

として必要なボリューム（ページ数など）が大きく異なる。

ト」、製品やサービス専用のサイトを「プロダクトサイト」と

例えば、証券取引所に株式を上場している会社（上場企呼ぶ。ブランドサイトには飲料メーカーのブランドライン

業）の Webサイトであれば、IR（投資家向け）情報、
CSR（企のサイト、プロダクトサイトには輸入代理店の商品専用サ業の社会的責任）情報、採用情報を充実させるなど、ボイトが挙げられる。
ブランド・プロダクトサイトの目的は、文字どおり、その業のサイトであれば、主要ページは 10 ページから30 ペー

ブランド、製品やサービスの周知である。特に大手企業

ジくらいで収まるケースが多い。

の B2C のブランドやプロダクトにはファンが多数存在する

コーポレートサイトの主な目的は、会社や事業の周知やため、これらのサイトを通したキャンペーンやイベントなブランディング、ステークホルダー（利害関係者）への説

どのタイムリーな情報提供やコミュニケーションが求めら

明責任の実施である。さらに、会社によっては人材募集れる。

や問い合わせコストの低減、上場企業の場合は法定開示

ブランド・プロダクトサイトは、別ドメインやサブドメイ

や適時開示の履行なども、Webサイトに期待する大切なンで運営する場合と、サブフォルダで（サイト内のカテゴ役割である。

リーと同じ階層として）運営する場合がある。どちらの場

7
W
e
b

マーケティング

リュームがかなり多く、設計も複雑になる。一方、中小企

Chapter

合でも、メインサイトとはまったく異なるテイストで制作するケースが多い。

K E Y WORD

IR（ 投資家向け）情報
IR は「Investor Relations」の略。投資家との関係構築を目指し

た情報発信であり、既存の株主だけでなく、株式の購入を決定していない潜在的な投資家も対象とする。有価証券報告書、決算短信、
株主総会資料などを公開する企業が多い。

法定開示や適時開示
証券取引所の上場企業は、会社法や金融商品取引法で義務付けられている法定開示や、証券取引所の規則に基づく適時開示（タイムリーディスクロージャー）を実施する。IR 情報の主軸となる内容で
ある。

002

コーポレートサイトの例

三菱商事株式会社

https://www.mitsubishicorp.com/jp/ja/

ブランドサイトの例

Chapter7

ポカリスエット（ 大塚製薬株式会社）
https://pocarisweat.jp/

Web

マーケティング

プロダクトサイトの例

コロナ・エキストラ（ モルソン・クアーズ・ジャパン株式会社）
http://corona-extra.jp/

K E Y WORD

ブランディング

別ドメインやサブドメインでの運用

ブランドは元々、昔の牧場主が自分の家畜に焼印で印をつけ、他所

ブランド・プロダクトサイトやキャンペーンサイトは、運用体制や関プロダクトの信頼や価値を高め、他のものとの区別をより促進するとは異なるメインドメインやサブドメインで運用するケースがある。

の家畜と区別するために用いていたものである。現代では、企業や取り組みをブランディングと呼ぶ。

係部署、プロモーション計画の違いなどから、コーポレートサイト003

キャンペーンサイト

ECサイトの目的は、Webサイト上で商品を直接販売し、収益を上げることである。通常のコーポレートサイトが「サあるブランド、製品やサービスのキャンペーンのためのイト管理」だけとすると、ECサイトでは上記のとおり「商品サイトであり、特設サイトやプロモーションサイトとも呼ば管理」「売上管理」「顧客管理」「サポート業務」が必要でれる。日常の情報発信が目的ではなく、期間限定やマスあり、運営体制や人員、スピード感がまったく異なる。ま

コミ連動のサイトが該当する。ブランド・プロダクトサイト

た、販売促進のためのマーケティング活動も極めて重要に似ているが、ソーシャルメディアと連携して投稿を促しとなる。

たり、アイデアや意見を募集したりと、消費者参加型のし独自の ECサイトを立ち上げるのではなく、ショッピング

かけを行うことが多い。また、ゲームや動画などのエンター

モ ー ル へ の 出 店（ 楽 天 市 場、Yahoo! ショッピ ン グ、

テインメント性を前面に出したサイトもある。

Amazon な ど ）、ASP の 利 用（ カ ラ ー ミ ー シ ョップ、

広告代理店、企画力や運用力のある制作会社であれば、キャンペーンサイトに関わる一切の業務を請け負えるだろ

MakeShop、BASE など）といった方法で、初期投資をそこまでかけずに EC ビジネスをスタートするケースもある。

う。一方、フロントエンド実装やソーシャルメディア運用を強みとしている会社であれば、その分野のみを担当するような関わり方が考えられる。コーポレートサイトやブその他

ランド・プロダクトサイトのように「設計」優先ではなく、「企

他にもさまざまなパターンの Web サイトがある。比較

画」優先でプロジェクトが進んでいくため、受発注側の体的規模の大きいもの、複雑な機能が求められるものは、制や得意とする領域によって、関わり方に大きな違いがあ

次のとおりである。

るのがキャンペーンサイトである。
研 究 教 育 機 関サイト（大 学 、 研 究 所 など）

EC サイト

官 公 庁 ・自治 体サイト
（中央官庁、都道府県、市区町村など）商品を販売するためのサイトであり、B2C 型ではインターニュースサイト（新 聞 社 、 出 版 社 など）

ネットショップが代表的である。ECサイトは、コーポレー

情 報サイト（不 動 産 情 報 、 求 人 情 報 など）

トサイトやブランドサイトとは目的も設計もまったく異なる

会員制サイトChapter

7

ことを、まず認識しよう。
さらに、情報サイト、かつ、会員制（ログインが必要な）型」の 2 つがある。単品販売型は寝具のみを販売するサイサイトなど、複数の機能を組み合わせたサイトも珍しくトを、総合販売型は有名デパートの ECサイトを思い浮かない。

べてもらうとよいだろう。単品販売型はそれほどではない

Webサイトの作り手として常に意識しておきたいのは、が、総合販売型をゼロから構築する場合やリニューアルをどのような Webサイトにもエンドユーザーが存在することする場合は、CMS の設置、EC 機能の実装、そのサイトにである。ユーザーに実際に見て、使ってもらってはじめて、合わせた入念なカスタマイズはもちろん、在庫管理や CRM

Webサイトを公開している意味が生まれる。
「ひとりのユー（顧客管理）、物流や配送とのシステム連携が求められるザーとして、このデザインは、この機能は適切か」とたびため、投資額が大きくなる。

たび問いかけ、プロジェクトの途中でユーザーの姿を見失Web

マーケティング

ECサイトには、大きく分けて「単品販売型」と「総合販売なわないようにしよう。

K E Y WORD

キャンペーン（ campaign）
ラテン語の「campus（平野）」と「ania（地域）」、転じて、軍事行EC（ Electronic Commerce）
電子商取引の略。取引主体によって、B2C（企業と消費者）、B2B

動や戦闘が語源。日本では和製英語的に、広告や販売促進を意味（企業間）、C2C（消費者間）などに分類される。国内の B2C のざまな取り組みを指す。

達している（2019 年 5 月公表、経済産業省調べ）。

することが多いが、本来、その語だけでは選挙や運動など広狭さま

市場規模は約 18 兆円、B2B の市場規模（広義）は約 344 兆円に004

キャンペーンサイトの例

SMBC 1000DAYS COUNTDOWNPROJECT（ 株式会社三井住友銀行）
http://smbc-2020.com/

EC サイトの例（単品販売型）

Chapter

7

表参道布団店。（ 株式会社表参道布団店）
http://omotesando-futonten.com/

Web

マーケティング

EC サイトの例（総合販売型）

大丸松坂屋オンラインショッピング
（ 株式会社大丸松坂屋百貨店）

http://www.daimaru-matsuzakaya.jp/

K E Y WORD

CRM（ Customor Relationship Management）
顧客管理（または顧客関係管理）の略。顧客の維持やロイヤルティ

エンドユーザー
製品やサービスを最終的に使う人のこと。飲食店のサイトであれば、向上、販売機会の増加などを通じて、売上の最大化を目指す仕組み。

その飲食店の事業者ではなく、店舗情報やメニュー情報を知りたい

み顧客にまで対象が広がっている。

の人（通常はペルソナとして設定）を軸に判断する。

現在では、マーケティングオートメーションなどの観点から、見込消費者がエンドユーザーである。提供する体験や UI の適否は、そ005

Chapter

7 ペルソナ02
Point

Webサイトのユーザー体験を高めるためには、代表的な顧客像であるペルソナを設定し、コンテンツやデザイン、機能を設計、制作することが大切である。ペルソナの具体的な内容や種類、注意点を学ぼう。

ペルソナは、製品やサービスを利用する象徴的なユーザーや顧客を定めた仮想人格であり、
Webサイトの企画段階や設計段階で設定する。
ペルソナ設定では、その像の人となりや振る舞いがわかるように、

さまざまな項目についてできるだけ具体的に記述するのがよい。
ペルソナとして、プライマリーユーザー、セカンダリーユーザー、

特殊ユーザーを描くのが一般的である。

ペルソナの基本

一般的に、顧客像が明確な製品やサービスほど評価が高く、人気がある。一方、誰に何を伝えたいのかが不明

情報アーキテクチャ設計の代表的な手法のひとつに「ペ瞭な製品やサービスは、どのようなユーザーにとっても利ルソナ」がある。ペルソナは、製品やサービスを利用する

用しづらい傾向がある。このようなことから、ペルソナに象徴的なユーザーや顧客を定めた仮想人格であり、製品

よって Web サイトや Web サービスの顧客像を明確にし、やサービスとの関係性やニーズ、接触点を考察するため

コンテンツ、デザイン、機能を設計し、制作していく手法に、その像のライフスタイルや趣味嗜好などを詳細にプロが広まっている。

Chapter7

ファイリングしたものである。プロジェクトの企画段階や、PDCAサイクルを実施する前の段階で設定し、プロジェク
トメンバーで共有することで、明確な顧客像に向けたブレWeb

マーケティングの少ない Webサイトにできる。

ペルソナの準備
予算規模が大きいプロジェクトでは、顧客に関するア

Web サイト制 作でペルソナが 注目されるきっか けとンケートやデータマイニングなどの定量調査や、インタなったのは、1990 年代後半に、Visual Basic の考案者とビュー、フォーカスグループ、ユーザー観察、エスノグラ

して知られるソフトウェアエンジニア、Alan Cooper（アフィ調査などの定性調査を、ペルソナ設定のために実施

ラン・クーパー）氏が導入したデザイン手法といわれる。

する本格的な方法がある。このように、ペルソナは、実Cooper 氏は著書『コンピュータは、むずかしすぎて使え在する顧客データから導き出すサンプリングモデルであり、ない！』の中で「多くのユーザーを満足させようとするより、企業や Webサイトにとって都合のよい、空想上のユーザー

たった 1 人のためにデザインする方が成功する」と主張しではない点に注意しよう。

ている。さまざまなユーザーのニーズや目的を満たすた
めに、たくさんの機能を追加するよりも、対象となるユー
ザーから典型的な顧客像を抽出し、そのユーザーに特化したデザインを行うほうが成功する、という考えである。

K E Y WORD

ペルソナ
製品やサービスを利用する象徴的なユーザーや顧客を定めた仮想人格。元々は演劇などの登場人物や、心理学での外的人格を指す。

ラテン語の「仮面」が由来。

データマイニング
英語で「data mining」。データを掘り起こすこと。特に、大量のデー

タからパターンや規則性を発見すること。近年では、CRMで蓄積した顧客データやビッグデータを元にしたデータマイニングが盛ん
である。

006

実際のプロジェクトで使われたペルソナ

Googleアナリティクスの「ユーザー属性」
Chapter

7
マーケティングWeb

K E Y WORD

Alan Cooper（アラン・クーパー）
Microsoft Visual Basic の開発者、Windows 3.1 から95 へのリデザイン責任者として知られる。後に、UXコンサルティング会社「Cooper 社」を創業。『コンピュータは、むずかしすぎて使えない！』『About Face 3』などの名著がある。

ユーザー属性
Googleアナリティクスで見られるデータのひとつ。プロパティ設定

で「広告向け機能」をオンにすることで、ユーザーの年齢と性別に関する分布や、興味関心、購買意識などのデータが確認できる。

007ただし、予算やスケジュール上、上記のような調査がほか、Webサイトによっては身体的特徴、兄弟の有無、実施できなかったり、高度な調査を実施できるスタッフが車の有無、学歴、政治的価値観などを、ECサイトでは解いないプロジェクトも多い。このような場合は、クライア

決したい悩みや課題、購入動機などを決めておく場合もント企業が描く顧客像に近い人にインタビューを行ったり、ある。

各種調査結果などを参考にしながらプロファイリングをしていく。また、アクセス解析データや顧客データなどで、主要なユーザーの年齢や性別などがわかると（Googleア
ナリティクスの「ユーザー属性」など）、ペルソナ設定の参考にできる。
なお、ペルソナと似た言葉としてよく使われる「ターゲットユーザー」は、例えば「30 代後半の都会に住む女性」とペルソナの種類
ペルソナは 1 つから3 つ程度を描くのが一般的である。
製品やサービスの特色が明確であり、顧客像がかなり絞れる場合は、1 つだけ描けば充分である。
3 つ作る場合は、次のような構成にすることが多いだろう。

いうように、製品やサービスを提供したい相手を明文化しプライマリーユーザー

たものに過ぎない。一方、ペルソナは実際のデータに基セカンダリーユーザー

づく点、具体的である点に大きな違いがある。

特殊ユーザー

また、ペルソナとして設定するのは必ずしもターゲットユーザーでなくてもよく、対象から外したいユーザーを設

企業情報中心のコーポレートサイトであれば、次のような 3 人を描く。

定することで、プロジェクトの輪郭をはっきりさせるケース

問 い合わせや資料請求をしたい人（プライマリーユー

もある。このようなペルソナを「負のペルソナ」と呼ぶこと

ザー）

がある。

就職希望者（セカンダリーユーザー）
競合他社の担当者（特殊ユーザー）

ペルソナの内容
ペルソナには、その像の人となりや振る舞いがわかるよ

ギフト向け商品を販売する ECサイトであれば、次のような 3 人を描く。

うに、次のような項目についてできるだけ具体的に記述す商品を贈られた人（セカンダリーユーザー）

るのがよい。

納入業者である取引先（特殊ユーザー）

顔写真

Chapter

商品を贈る（購入する）人（プライマリーユーザー）

7

なお、ペルソナ設定の段階で、リアリティのために、
簡単なストーリー（背景説明など）を考えておくことがよく名前ある。より本格的にストーリーを描いたものがユーザー

年齢

シナリオである（次節参照）。

Web

マーケティング

キャッチコピー（人となりを端的に表す言葉）

性別
住所（地理的環境）
職業
家族構成（既婚・未婚、子どもの有無）
年収（世帯年収）や利用金額
興味関心
インターネットリテラシー
よく利用するデバイスと利用シーン
よく利用する Webサイト（好きな Webサイト）

K E Y WORD

プライマリーユーザー
最も優先すべきユーザー（顧客）のこと。Web サイトの規模の大小に関わらず、ペルソナとして描いておきたい。

セカンダリーユーザー
二次的な対象となるユーザー（顧客）のこと。一定規模以上のWeb サイトでは、ビジネスゴールが複数になることが多いため、補完的なペルソナとして描いておく。

008

いてビジュアルデザインやコンテンツを作る、という方向

ペルソナの注意点性が考えられる。

ペルソナはたくさん作ればよいわけではない。事業規

一方、Webサイト全体として、車種を比較検討したい

模やサイトの規模が大きい場合、3 人以上のペルソナを描

人を優先するのではなく、会社全体のこと、例えばファン

くケースもあるが、ペルソナが増えれば増えるほど、コン向けの交流イベントなどの情報、IR（投資家向け）情報、

テンツやデザインのブレ幅が大きくなる点に注意しよう。

ライフスタイルの提案などに興味がある人を優先するのかさまざまな製品やサービスごとにペルソナが存在するよ

で、構造設計が大きく変わってくる。さらに、運用予算やうな場合、Webサイト全体のペルソナとどのように整合さ権限が、車種別に分かれているかといった社内体制も、せるかを判断する必要がある。例えば、自動車メーカー

構造設計に影響する。

のサイトであれば、このワンボックスカーを買うのはこのような人、このセダンを買うのはこのような人と、明確なペルソナという観点からこれらの前提条件をあらためて見直すことで、プロジェクトを推進しやすくなるだろう。

コンセプトをもとにブランドが作られており、それに基づペルソナの内容（例）

家族とグルメをこよなく愛するパパ

山本 隆史（やまもと たかし）

性別

男性

住所・年齢・家族構成

東京都杉並区、39 歳、既婚、妻（主婦／ 36 歳）と子ども（2 歳半）

職業◯◯興産株式会社 東京本社物流部（東京都千代田区丸の内）

学歴

××大学 商学部 マーケティング専攻卒

インターネットとの付き合い方

仕事ではパソコンをよく使う。プライベートでは、もっぱらタブレットとスマホを利用香川県に来たことのある回数

0 回（はじめて）

旅行の動機

東京・神田神保町の人気店「△△」で讃岐うどんに目覚め、本場でぜひ味わいたいということで、香川への「うどんたび」を願っていた。
子どもがふつうの食事を食べられる年齢になったので、決意。

旅程

土・日と、月は有給休暇をとって、2 泊 3日（香川県内に 2 泊）

移動手段

飛行機（羽田空港～高松空港）／高松空港からはレンタカー

予算／家族で14.5 万円（交通費 70,000 円、宿泊費 30,000 円、グルメ 30,000 円、
観光レジャー 15,000 円）

旅行の目的

うどん、うどん、うどん、ただし、妻子へのサービスも必要。
昼は子どもと体験型の観光なども、夜はうどん以外のグルメを。

今後、香川県でしたいこと

子どもが電車好きなので、もう少し成長したら、JR 四国多度津工場に一緒に行きたい。

K E Y WORD

特殊ユーザー

7
W
e
b

ストーリー

プライマリー、セカンダリー以外に考慮しておくべきユーザー（顧客）

物語のこと。ここでは、ペルソナが抱えている課題など背景説明のこのようなユーザーを「負のペルソナ」ということがある。

ボード」という手法もある。

のこと。あえて、対象から外したいユーザーを設定することもある。

Chapter

マーケティング

名前意味。一連のユーザー体験を絵コンテのように表現する「ストーリー009

Chapter

7 素材・ドキュメント管理

03
Point

Webサイト制作というプロジェクトに特有の素材・ドキュメントの作
業環境をどのように整えるか、これらをどのように共有し、管理するか。実務的な観点も交えて、素材・ドキュメントの具体的な管理方法を解説する。

作業環境には、主に制作・開発環境、テスト環境、データ共有環境の 3 つがあり、それぞれで業務効率を高める工夫が必要である。
サイト設計書や素材管理表で、各素材の内容と形式、提出・共有方法を決めておく。
元ファイルの取り扱いや管理画面へのログイン情報などをきちんとまとめておくことも大切。

作業環境の管理プロジェクトメンバーがいつでもプロジェクトの資料や成果物など素材やデータにアクセスでき、途中からプロ

リ容量が多く、GPU の処理能力が高いマシンが望ましい。
社外での打ち合わせが多いディレクターには、持ち運びに適した 重 量で、Microsoft Word、Excel、PowerPoint な
どが問題なく使えるマシンがよいだろう。

ジェクトに加わったメンバーでもすぐにプロジェクトの概要を把握できる環境を整えることは、効率的なプロジェクト
運営に欠かせない。

Chapter

テスト環境
Webサイトをテスト公開するサーバーやネットワークな進捗状況や成果物の品質を高めるために非常に重要な役どのこと。ステージング環境とも呼ばれる。最終成果物（納割を果たす。Webサイト制作で管理すべき環境は、
主に「制品物）が本番環境で正常に表示・実行されるように検証

作・開発環境」「テスト環境」「データ共有環境」の 3 つにを行うことを目的とする。例えば、サブドメインを設定し、整理できる。

その中にテスト環境を構築するなどである。本番環境とで

7
W
e
b

マーケティング

適切な作業環境の構築と管理は、プロジェクト全体のきるだけ同じ条件にすることで、テストやデバッグを的確制作・開発環境に行うことができる。
デバイスの多様化にともない、テスト環境構築に一定

デザイナーやエンジニアなどが使用するマシン、OS、のコストをかけること、継続的にケアをすることが求めら

Webブラウザ、
プラグイン、プログラムなどのこと。メンバーれる。例えば、スマートフォンやタブレットの代表的な機それぞれが品質の高い成果物を生み出すには、作業に必種の購入、古いデバイスとOS 環境の保持などである。仮要なスペックを持ったマシンや、アプリケーションなどが想化環境の構築や、Remote Testkit などのスマートフォン

十分に機能する環境が与えられることが大切である。

実機検証サービスの利用も検討したい。

例えば、デザイナーは Adobe Illustrator や Photoshopなどを頻繁に使うことが多く、大きなディスプレイで、メモ

K E Y WORDGPU
Graphics Processing Unit の略。グラフィックスの描画などの計

仮想化環境
環境構築には「VirtualBox」などを利用するのが一般的。アプリケー

算処理を行う半導体チップ。マシンの総合的な計算処理（汎用演算）ションとしてインストールした後、追加の OS（ゲストOS）の実行環が統合されたチップセットも一般的。

有名。

は CPU（Central Processing Unit）が担当。CPUとGPU など

境を構築できる。Parallels Desktop、VMWare Fusion なども

010

データ共有環境
企画書、設計書、画像、デザインカンプ、HTMLテン
プレートなど、プロジェクトに関するドキュメントや中通常、プロジェクト立ち上げ時に用意し、すべてのプ
ロジェクトメンバーを招待する。フォルダ名やファイル
名、整理方法などについて混乱があるようであれば、きちんとルールを決めるとよい。

間成果物を管理するための共有環境のこと。社内 LAN（イントラネット）内に構築する方法のほか、Dropbox などのクラウドサービスも広く使われている。

スマートフォン実機検証サービス（例）ファイル共有サービス（例）Dropbox
Remote TestKit

https://www.dropbox.com/

https://appkitbox.com/testkit/
Chapter

プロジェクト管理ツール（例）7

タスク管理ツール（例）マーケティングWebBackloghttps://backlog.com/ja/

K E Y WORD

実機
実際の製品のこと。Web サイト制作では、実機でしか確認できない現象が発生するケースがあり、検証手段を用意しておくことが大切。オンラインサービスのほか、レンタルサービスを利用する方法もある。

Trellohttps://trello.com/

Dropbox
クラウド型のストレージ・ファイル共有サービス。オンライン上の専用フォルダにファイルをドラッグ＆ドロップするだけで、データを共有・同期できる。個人向けのプロプランのほか、法人向けのビジネ

スプランもある。

011

素材・ドキュメント管理の実際

素材・ドキュメント管理の工夫

素材の管理にあたっては、サイト設計書や素材管理表

写真、動画、イラストなどの素材ファイルは、数が多いなどで次のことを決めておき、プロジェクトメンバーに共点、元ファイルの管理が必要な点に注意を要する。スプ有する。

レッドシートで素材管理表を用意し、適切に管理するのが素材・ドキュメントの内容と形式理想である。ただし、数が膨大な場合は、フォルダ単位

素材・ドキュメントの提出・共有方法

での管理に留めたり、クラウドサービスの容量を圧迫しそ

近年、Webサイト制作に必要な素材は、共有前に関係うであれば、元データは制作会社のファイルサーバーで管者間でチャットツールやメールで個別にやりとりするケー

理するなどの工夫が必要である。

スはあるものの、基本的には、即、すべてのスタッフにまた、意外とおろそかにされがちなのが、各種サービ

共有するのが一般的である。例えば、課題やタスクの共スの管理者や閲覧権限、ログイン情報の管理である。例

有はプロジェクト管理ツール「Backlog」やタスク管理ツー

えば、アクセス解析ツールである「Googleアナリティクス」

ル「Trello」を、ドキュメントの共有は「Googleドライブ」、の管理者や他のユーザー構成、FTPツールでサーバーに画像などの素材ファイルの共有は「Dropbox」、HTML な接続する際の IDとパスワード、CMS の管理画面の IDとパ

どのソースコードの共有や共同編集（ソースコードリポジ

スワードなどである。これらは機密性の高い情報でもある

トリ）は「Git」などを利用する。

ので、わかりやすくまとめると同時に、プロジェクトメンバー

プロジェクトマネージャーやディレクターは、素材やドだけがアクセスできる状態にしておくことが大切である。

キュメントの共有状況を継続的にウォッチし、必要なケア

実際のケースで考えてみよう。クライアント担当者から、をすることが大切である。また、データのバックアップや

CMSテンプレート内の文字をすぐに修正したいという依頼

復元の観点からも、利用するツールを決めたいところでがあったとする。担当しているエンジニアが休暇中であある。

る場合、どのように対応すればよいだろうか。テンプレー

日ごろから同じ環境で働いている社内スタッフは、素材

トの全体構成や検索置換などの修正方法が他のメンバーの共有にあたって大きな問題はないだろう。一方、クライに事前に伝えられ、CMS の管理画面へのログインIDとパ

アント担当者や外部スタッフは、日ごろ使っているツール

スワードが共有されていたならば、デザイナーやディレクが異なる可能性があるが、実作業を担当する制作会社にターがすぐに対応できるだろう。もしこのような準備がな

あわせてもらうと、作業効率が高まることが多い。

されていなければ、会社にいるメンバーで試行錯誤して対応するか、休暇中のエンジニアに連絡を取り、対応し使うことは、学習コストがかかるかもしれないため、ミーてもらう必要があるだろう。プロジェクトの段階として、クティングの際に操作説明を実施するなどの工夫をする。まライアント担当者に修正方法が説明されていたならば、そた、大量のデータをやりとりするには有償プランや比較的もそもこのような依頼はなかったかもしれない。

高額なプランの契約が必要な場合があること、企業によっこのように、素材・ドキュメント管理に加えて、ID やパてはセキュリティの観点からクラウドサービスの利用を禁

スワードの適切な共有や、実現可能な範囲でスキルトラン

じている場合があることから、部分的に別のツール（例えスファーを行っておくことが、プロジェクトを円滑に進める

ばメールなど）でのケアが必要なケースがある。

一助となる。

K E Y WORD

Git

新しいスキルを習得するためのコストのこと。個人としてはスキルの（貯蔵庫）とも呼ばれる。従来の Subversion（SVN）に代わって、つながるため、単純なコストではなく将来への投資と考えたい。

広く利用されている。

W
e
b

学習コスト

HTML やプログラムのソースコードなどの変更履歴を記録し、追跡可能にするためのバージョン管理システム。ソースコードリポジトリ

7
マーケティング

クライアント担当者や外部スタッフが不慣れなツールを

Chapter向上や新たなスキルの獲得、法人としては業務の効率化や拡大に

012

ドキュメント共有サービス（例）ソースコードリポジトリ（例）Googleドライブ

Git

https://www.google.com/intl/ja_jp/drive/

https://git-scm.com/

素材・ドキュメント管理の実際
課題・タスク（プロジェクト管理ツール）

Chapter

ドキュメント7（ドキュメント共有サービス）

制作側

クライアント担当者

ファイル

W
e
b

マーケティング（ファイル共有サービス）

ソースコード（ソースコードリポジトリ）

K E Y WORD

元ファイル
加工していないファイルやアプリケーションで編集可能なファイルのこと。元データともいう。写真の RAW データ、Adobe Illustratorの .ai、Adobe Photoshop の .psd、Adobe XD の .xd など。

スキルトランスファー
技能移転。業務の共有や引き継ぎのこと。属人的で高度な業務以外で、ある程度のリテラシーや経験があればほぼ誰でも対応できる業務はできるだけ共有しておくことで、プロジェクトメンバーの対応力が総合的に高まる。

013

Chapter

7 CSS 設計

04
Point

CSS のセレクタやプロパティの種類が豊富になり、より複雑で高度なスタイリングができるようになったことから、作業の効率向上や負荷軽減が求められている。そのための仕組みが、CSS 設計や CSSプリ
プロセッサーである。

CSS 設計は規則性を保ってCSSを記述する考え方であり、
代表例は「 SMACSS」と「 FLOCSS」である。
CSSプリプロセッサーは、CSS にはない記述方法や機能を追加し、作業を効率化する仕組みである。
Webサイトを公開する前やファイルをサーバーにアップロードする前に、
gulp.js などのタスクランナーを利用して事前タスクを自動化する。

CSS 設計がなぜ必要か

FL O CSS
FLOCSS は、これまで の OOCSS、BEM、SMACSS など

HTML や CSS のコーディングの際、Webサイトや各ペーの設計手法のよいところをうまく取り入れたものである。

ジの構造を考えながら作業することになるが、設計的な

SMACSSと同様、CSS の記述にあたってプリフィックスを

アイデアは担当者の頭の中にしかない。これでは、複数付与する際のルールを定めている。

人で作業をする場合や、他の人に担当を引き継ぐ場合に支障が出てしまう。
このような問題を避けるために、規則性を保ってCSSをFLOCSSでは「レイヤー」という呼び方でトップレベルの・Layout

ス名にプリフィックス（接頭辞）を付けることで、そのクラ・Object
・Component

指定すべきかがわかりやすくなる。また、ソースコードの・ProjectWeb

マーケティング

ス名の UIとしての役割が明確になり、HTML 上のどこに突が少なく済む。

7

・Foundation

記述する考え方を「CSS 設計」という。具体的には、クラ見通しがよくなり、コーディングしていく上での混乱や衝Chapter

役割を定義しており、以下を基本構成としている。

・Utility
FLOCSS の Layoutレイヤー は ID セレクタを使 用する。

クラス名にプリフィックスを用いた CSS 設計の代表例とページ内で繰り返されない、ひとつしか出現しないコンテ

して「SMACSS」と「FLOCSS」が挙げられる（他に「BEM」やナーは Layout がふさわしく、一意なものであるならば ID「OOCSS」などがある）。

セレクタでよい、という考え方である。
FLOCSS の Objectレイヤーは、その中でさらに 3 つのレ

S MA CS S

イヤー（Component、Project、Utility）に分けられている。

SMACSS と は「Scalable and Modular Architecture for
CSS」の略で、CSS に拡張性と再利用性を導入することを目的とした設計手法である。SMACSSでは、CSS の記述に関する 5 つのルールとプリフィックスをあらかじめ定義している。

CSS 設計と運用性の向上
SMACSS や FLOCSSでは、Webサイトを構造的に分解し、それらの役割を分類する目的でクラス名にプリフィックスを設定する。

K E Y WORDSMACSSFLOCSS

Scalable and Modular Architecture for CSS の略。CSS にOOCSS、BEM、SMACSS などのよいところをうまく取り入れた記述に関する5つのルールとプリフィックスをあらかじめ定義していスを付与する際のルールを定めている。

拡張性と再利用性を導入することを目的とした設計手法。CSS のる。

設計手法。SMACSSと同様、CSS の記述にあたってプリフィック

014

構造に関する指定をクラスの命名規則としてルール化す

補い、文字どおり事前処理（preprocess）を施すことで、ることで、制作作業に新しくスタッフがアサインされたとき

CSSファイルを出力するものである。具体的には、本来のはもちろん、運用フェーズに入ってからもメリットを享受でCSS にはない機能を追加したり、変数や関数が使えるようきる。また、ルールに沿ったコーディングは、よりよい制にしたりする仕組みであり、「Sass」が広く利用されている

作フローを確立する手助けとなるだろう。

（他にも「LESS」「Stylus」などがある）。
プリプロセッサーはそれぞれ独自の記法を持つため、Webサイトとして公開する前に、ソースコードに「コンパCSSプリプロセッサー

イル」という処理を施し、従来の CSSファイルや JavaScript

すでに説明した CSS 設計の手法とあわせて、「CSSプリプ

ファイルとして出力する。コンパイルにはオンラインツー

ロセッサー」を取り入れるのが一般的な実務となっている。

ルを使う方法もあるが、ローカル環境で動作する「gulp.

CSSプリプロセッサーとは、CSS に不足している機能をjs」などのタスクランナーを使うのが一般的である。

SMACSS のルール
ルール

プリフィックス

例

意味

Base

なし

-

要素そのもののデフォルトスタイル。body への font-family や
リセットCSS が該当。

Layout-.l-header.l-footer

Web ページのレイアウト領域を作るもの。ヘッダーやフッター、サイドエリア、グリッドシステムなどが該当。

Moduleなし.modal.tab.globalnav

再利用可能なパーツが該当。モジュールは入れ子にできる。
記述が冗長にならないようにプリフィックスは設定されていない。

State

is-

.is-hidden.is-error

状態を表すものが該当。ページ単位や JavaScript によって状態が変わるものが対象。「要素 is 〜」が成立するクラス名とスタイルにする。

Theme

theme-.theme-border.theme-payment

デザインテーマを変更をするためのスタイルが該当。
テーマカラーやスキンカラーなど。

FLOCSS のルール
Objectレイヤー

プリフィックス

例

意味

Componentc-.c-button.c-media.c-grid

再利用できるパターンとして小さな単位のモジュール

Projectp-.p-articles.p-gallery

Component ほどは再利用性が高くないモジュールu-.u-mbs.u-inline.u-clearfix

Component や Project に含めると運用しづらくなる
スタイル調整のためのクラス

CSSプリプロセッサーの例

Ruby ベースの CSSプリプロセッサー。変数、関数、入れ子記法、ミック
スインなどの機能をCSSに取り入れ、作業効率を高めることができる。
https://sass-lang.com/

7
W
e
b

マーケティング

Utility

Chapter

タスクランナーの例

コマンドラインベースで操作するタスクランナー。ソースコードのコンパイルだけでなく、最小化（ minify）や画像の最適化にも対応しており、Webサイト制作で発生するこれらの事前タスクを自動処理してくれる。
https://gulpjs.com/

K E Y WORD

Sass

gulp.js

Syntactically Awesome Stylesheets の 略。Ruby ベ ー スのコマンドラインベースで操作するタスクランナー。ソースコードのコ

どの機能をCSS に取り入れ、作業効率を高めることができる。

ているものが多く、Web サイト制作で発生するこれらの事前タスク

CSSプリプロセッサー。変数、関数、入れ子記法、ミックスインなンパイルだけでなく、最小化（minify）や画像の最適化にも対応しを自動処理してくれる。

015

Chapter

7 オウンドメディアの活用

05
Point

近年、オウンドメディアを活用する企業やブランドが増えてきている。
どのような目的で、どのようなメリットを得ることを目指してオウンド
メディアを運用するのか、体制をどのように整備するのかを学ぼう。

実務的には、オウンドメディアは「自社で保有し、ある程度以上の規模で展開する
メディアサイト」を指す。
オウンドメディアのメリットは、クチコミでの情報の広がり、広告に依存しない集客、

ユーザー育成、新たなユーザーの獲得の 4 つ。
オウンドメディアの長期運用のためには、体制整備や実施計画が必要。

コンテンツカレンダーなどを用意する。

オウンドメディアとは
オウンドメディアは、定義としては「自社で保有するメディア」であり、
Webサイトだけでなくカタログやパンフレッ

オウンドメディアの特徴
オウンドメディアを活用するメリットとして、次の 4 点が挙げられる。

トなどの紙モノも含むが、実務的には「ある程度以上のクチコミでの 情 報 の 広 がり

規模で展開するメディアサイト」を指すことが多い。アーン

記事に適切な OGP や Twitter カードを設定し、Facebook

ドメディア、ペイドメディアとともに、マーケティングで活や Twitter などのソーシャルメディアに URLを投稿すること用するトリプルメディアの一角を占める。

で、多数のユーザーの閲覧やシェアが期待できる。
上記は記事単位では短期的な効果であるが、ソーシャに基づいて記事を集積するタイプが多く、特に複雑なシス

ルメディアへの投稿を継続することで、サイト全体の中長テムが必要とされるケースは少ない。ただし、コンテンツ期にわたるブランディングに貢献する。

マーケティングの文脈で語られるとおり、広報や広告と組

広 告 に依 存しな い 集 客

み合わせて高いマーケティング効果を目指すという特徴が充実したコンテンツをオウンドメディアに蓄積することある。そのため、すでに説明したコンテンツの流通促進で、そのコンテンツやサイト全体の資産価値が高まり、検が極めて重要である。

索エンジンなどからの中長期的な集客増につながる。

メディア全体でのページビュー数やユーザー数はもとよ

また、検索結果の上位表示が継続できれば、ユーザー

り、ソーシャルメディアでの反響、資料請求やダウンローが頻繁にアクセスする状態を作ることができ、広告費の削ドなどのコンバージョン数について、マーケティング視点

減にもつながる。

7Web

マーケティング

オウンドメディアの設計としては、ブログのように年月日

Chapter

での目標値を設定する。記事管理表などを用意し、計画的に運用することも大切である。

K E Y WORD

トリプルメディア

コンテンツマーケティング

マーケティングで重要な 3つのメディアのこと。自社保有のオウンド

マーケティング活動にWebコンテンツを利用する取り組みのこと。

ンドメディア（earned media）、広告などのペイドメディア（paidで、エンゲージメントやコンバージョンを高めることを目的とする。

メディア（owned media）、ソーシャルやクチコミサイトなどのアー
media）を指す。

潜在顧客や顕在顧客にとって価値のあるコンテンツを提供すること

016

ユーザー の 育 成

なお、副次的な効果として、オウンドメディアの記事を

製品やサービスによっては、ユーザーが長い期間をか社員が中心となって執筆する場合は、社内ノウハウの掘りけて購入や利用を検討する場合がある。オウンドメディア

起こし、社員のエンゲージメント強化などの「社内の活性で情報発信を継続し、ユーザーの知識を高めたり、需要化」につながることにも触れておきたい。

を喚起したり、信頼感やロイヤルティを高めたりすること

オウンドメディアには上記のようなメリットがある。
他方、で、顧客へと育成できる。

オウンドメディアは粘り強い運営が求められることを意識

新 た なユーザーの獲得

しておこう。つまり、広告のような即効性を求めるのは難コーポレートサイトや広告とは異なるアプローチで、製しいこと、記事の企画や入稿、公開、効果検証など、日々品やサービスの魅力を発信することで、これまでとは異なの地道な運用が不可欠なことに留意したい。

る層のユーザーにリーチできる。

トリプルメディア

オウンドメディアのメリットクチコミでの情報の広がり

広告に依存しない集客

ソーシャルメディアでの
ユーザーの閲覧やシェア

検索からの集客強化による
広告費の削減ユーザーの育成

新たなユーザーの獲得

継続的な情報発信による
顧客への育成異なるアプローチで製品やサービスの魅力を発信

Chapter

7
マーケティングWeb
オウンドメディアと他のメディアの違い
メディア

メリット

デメリット

オウンドメディア（自社メディア）• 豊富な情報量のコンテンツが可能• コンテンツの作り込みが可能• 運用コストが高い• 短期間でのユーザー訴求は困難• 業種によっては競合が多い

アーンドメディア（ソーシャルメディアなど）• 運用コストが比較的安い• 情報の伝達スピードが速い• ユ ーザー自身のクチコミで伝わるので信頼されやすい• コントロールがむずかしい• サービスによっては炎上リスクがある• 費用対効果の計算が困難

ペイドメディア
（広告など）• 意図したタイミングで広く消費者に届けられる• ここ数年でターゲティング手法が多様に• 運用コストが高い• 媒体の仕様に合った広告作成が必要

K E Y WORD

ユーザーの育成
ユーザーと接点を持ち続けることで、潜在顧客、見込み客、新規

ロイヤルティ
顧客のそのブランド、製品やサービスに対する忠誠心や愛着心のこ

顧客、リピーター、ロイヤルカスタマーという順序で段階を引き上と。特にロイヤルティが高い顧客を「ロイヤルカスタマー」という。

われることも多い。

の行動を行う。

げること。リードナーチャリング（見込み客の育成）という言葉が使

自分で商品を購入するだけでなく、周囲にもクチコミで広げるなど

017

オウンドメディアの企画
オウンドメディアの企画にあたっては、まず「なぜオウン

過去に起こったこと、祝日などの列を追加してもよい。これ
らは、特にソーシャルメディアへの投稿時、冒頭の文章を考えるのに役立つ。

ドメディアを活用するのか」を検討し、目的を明確にする

カレンダー全体として、最低でも3 か月程度の見通しがとよい。なぜならWebマーケティングにはさまざまな手法つけられるとよい。月に一度、編集会議（後述）を踏まえて、があり、目的によってはオウンドメディアが適さない場合

新たに 1 か月分を追加するイメージで継続運用していく。

もあるためである。

記 事ごとの ペルソナやキーワード

例えば、短期の集客効果を期待するのであれば、広告

オウンドメディアでは、記事ごとにペルソナやキーワーに予算を使ったほうがよいだろう。あるいは、SNS の投稿

ドを考えておこう。ペルソナは関係者が共通の読者像をキャンペーンの実施や、大手メディアに記事広告を出稿す

頭に描くためであり、時間をかけて作る必要はなく、メモるのもよい。

書き程度でよい。

したがって、すでに説明したオウンドメディアの特徴をキーワードには、その記事で扱いたい言葉をまとめてお踏まえて、他の取り組みに勝ること、組み合わせると効果

く。SEO が目的というよりも、盛り込む話題や広げる範囲

がいっそう高まる方法などを企画段階でまとめておくことを決めておく、という意味合いが強い。

が大切である。
また、
オウンドメディアのKPIについても考えておきたい。

上述のコンテンツカレンダーにこれらの列を用意するとよいだろう。

「メディア」という言葉から、ページビュー数やユーザー

ライター の 管 理

数を重要指標と捉えがちであるが、これらはプロセスを測

メディアの規模にもよるが、ライター（執筆者）が多くな定するための中間的な指標に過ぎないため、ユーザーのると、Webサイトに表示しているプロフィールの修正や更具体的なアクションをKPIとすることが大切である。

新が煩雑になってくる。プロフィールを記事ごとに入れる

例えば、製品やサービスのカタログやホワイトペーパーのではなく、CMS のユーザー管理機能と紐付けたり、あらのダウンロード数、製品サイトやサービスサイトへの遷移

かじめテンプレート化しておくなどの工夫が必要である。

数、企業（運営会社）への採用応募数などである。これら

また、運用上、人的リソースという意味でのライターのの KPI について、四半期、半期、年間の目標を立て、実管理が必要である。各自の状況に応じて執筆を依頼する

績値と比較しながら、継続的な PDCA サイクルの実施に分量を変える、といったことである。ライターが社内スタッ活かす。

フ中心の場合は、オウンドメディアへの貢献度が業績評

Chapter

7Web

価やインセンティブにも関わるため、所属部門の責任者や人事担当者との調整が必要となるだろう。
編集会議の実施

オウンドメディアの長期運用のためには、適切な体制

定期的に編集会議を行い、それまでの効果測定、新た整備や実施計画が必要となる。特に用意しておくとよいもな記事アイデアのブレーンストーミング、オペレーションの、取り組むとよいことは、次のとおりである。

の改善点などを話し合う。特に外部ライターを利用していコンテンツカレンダー
エディトリアルカレンダーとも呼ばれる。記事の執筆や公開について、日付をベースにまとめた表。記事タイトル、執筆者、校正者、公開者、カテゴリーやタグ、見出し項目、
概要文、OGP や Twitter カードなどを決めておく。
日付でまとめる利点を生かして、社会・経済の出来事、

K E Y WORD

ホワイトペーパー
本来、政府や自治体などが発行する「白書」を指すが、Webマーケ

ティング上は、製品やサービスの特徴やメリットをまとめたドキュメントを指す。PDF 形式で用意するケースが多い。

マーケティング

オウンドメディアの運用

る場合は、関係者間での状況把握も大切である。
以上がオウンドメディア運用のポイントであるが、最後に「デスク」という役割の必要性にも触れておきたい。
新聞や雑誌の編集では、デスクや編集長という責任者・取りまとめ役が存在する。オウンドメディアの発展的な運用のために、同様の役割を置くことが大切である。

コンテンツカレンダー
記事の執筆や公開について、日付をベースにまとめた表。記事タイ

トル、執筆者、校正者、公開者、カテゴリーやタグ、見出し項目、
概要文、OGP や Twitterカードなどを決めておく。

018

オウンドメディアの運用体制

社内

外部ライター
デスク

責任者・取りまとめ役

外部ライター
ライター

ライター

デザイナー

外部ライター
ライター

ライター

エンジニア
外部カメラマンオウンドメディアの例

オウンドメディアの例

Chapter7
サイボウズが運営するオウンドメディア「サイボウズ式」。
会社や組織のあり方、多様な働き方や生き方について発信。
https://cybozushiki.cybozu.co.jp/

K E Y WORD

編集会議

電通が運営するオウンドメディア「ウェブ電通報」。広告業界の最新トピック
ス、コーポレートコミュニケーションに関する話題を発信。
https://dentsu-ho.com/

デスク

KPIなど数値目標の効果測定、新たな記事アイデアのブレーンストー

新聞や雑誌などで、取材や編集を統括する責任者（新聞社では政を利用している場合は、関係者間での状況把握も大切。

同様に、編集長も責任者であるが、デスクとの役割の違いなどは各

ミング、オペレーションの改善点などを話し合う。特に外部ライター

マーケティングWeb

治部、経済部、社会部などの部単位の責任者を指すことが多い）。
社によって異なる。

019

Chapter

7 Google の

06
Point

各種サービスの活用

Webサイト制作や運用では、すでに解説した Googleアナリティクス
やSearch Console、タグマネージャ以外にも、Google のさまざまなサービスを利用する機会が多い。特に覚えておくと便利なサービスについて説明する。

Googleマイビジネスは、企業や店舗の無料登録サービスであり、

Google 検索や Googleマップ上に表示される情報に影響する。
YouTube は動画配信プラットフォームであり、チャンネルを無料で開設し、動画を配信できる。
Google の文書作成サービスのうち、ドキュメントやスプレッドシートは、

仕様書や設計書、管理表などを関係者で共有するのに適している。

Googleマイビジネスても、打ち合わせなどで来訪する人が社名で検索したときに、場所やルートが表示できるので、利便性が高まる。

Googleマイビジネスは、企業や店舗の無料登録サービ

なお、Googleマップにはレーティング機能がある（最大スである。登録している企業や店舗は、Google 検索や

星 5 つ）。特に店舗の場合は、集客に影響する場合があ

Googleマップ上に情報が表示される。

るので、たまに確認しておくとよい。

登録のメリットは次の 3 点である。

ユーザーとのコミュニケーション

正 確 な 情 報 の 伝達

Googleマイビジネスでは、ユーザーがその企業や店舗

インターネット上にはさまざまな情報があふれており、にレビューや写真を投稿できる。店舗運営者から、投稿

必ずしも正確ではない場合もある。また、Web サイトでに対するお礼を伝えるなどのコミュニケーションが可能で正確な情報を発信しているとしても、すべてのユーザーがある。

Chapter

7
マーケティングWeb

見てくれるわけではない。
多くのユーザーが利用する Google のサービス上で正確な情報を伝達することは、企業や店舗に大きなメリットをもたらす。

Googleマップ
Googleマイビジネスを通した Googleマップへの情報掲

新 規 顧 客 へ のアピール

載については上述した。Webサイトの制作や運営面では、住所や電話番号、営業時間はもちろん、ロゴや写真をアクセスマップや店舗所在地などのページに Googleマッ

登録でき、新規顧客に魅力を伝えられる。また、Google
ストリートビューで店内の 360 度画像（インドアビュー）を伝えることもできる。

プを埋め込むことができる。
マップの埋め込みには、共有の「地図の埋め込み」を選択した際に表示される HTMLコードを利用する。なお、

例えば、飲食店を考えた場合、Googleマップ上で「ランGoogle Maps Platform（API）に基づき、ピンのアイコン

チ」と検索すると、登録している店舗にピンが表示されるやマップのスタイルをカスタマイズできるが、現在では有ため、集客への貢献が期待できる。店舗ではなく企業であっ償となっている点に注意しよう。

K E Y WORD

Googleマイビジネスへの登録
登録にあたっては、「ビジネスのオーナー確認（実在性の確認）」が必要である。通常は確認用ハガキの郵送と返送によって完了する（ビ

ジネスによっては、電話、SMS、メールなどで完了する場合もある）。

Googleマップのレーティング機能
ユーザーは、Google マップ上の店舗に対して、星、レビューコメ

ント、写真や動画などが公開できる。また、Google マップ側から、

価格感、注文方法、車椅子対応の有無などを聞かれる場合がある。

020

YouTubeYouTube は Google の動画配信プラットフォームである

また、コンテンツとして、テキストや画像では伝えきれない魅力が、動画では伝えられる。広告という面でも、動画ならではの表現が可能である。

（2006 年 に Google が 買 収）。 企 業や店 舗 は、YouTube

なお、YouTubeチャンネルでカスタムURL（任意のわかにチャンネルを無料で開設し、動画を配信できる。コミュ

りやすいディレクトリ名）を設定するには、登録者数が 100

ニティ ガイドラインに基づき、適切に運営しよう。

人以上であること、チャンネルを作成してから30日以上

年々、消費者の動画の視聴時間、つまり、YouTube な

経過していること、アイコン写真やチャンネルアートをアッどに滞在する時間が長くなっているため、YouTubeチャン

プロード済みであること、という条件がある。また、ライネルを開設することで、より多くの消費者にリーチできるよ

ブ配信については、パソコン向けではチャンネル登録者うになる。

数の条件はないが、モバイル向けでは登録者数 1,000 人以上という条件がある。

Google 検索上での企業・店舗情報の表示

Googleマップ上での企業・店舗情報の表示

Chapter

7Web

YouTubeチャンネルの開設

マーケティング

Web サイトへの Googleマップの埋め込み

Web 検定（ウェブケン）公式チャンネル

https://www.youtube.com/channel/UC63qUkE2v9mT0Y-0R_3kNQw/

K E Y WORD

Google Maps Platform

YouTube のコミュニティ ガイドライン

旧 Google Maps API。Webブ ラウ ザ、iOS、Android などでYouTubeではユーザーに対して、ヌードや性的なコンテンツ、有Places の 3 つの API がある。使用量に応じた料金体系が用意されテンツ（差別にあたるものなど）、暴力的で生々しいコンテンツなど

Google マップを利 用するためのサ ービス。Maps、Routes、ている。

害で危険なコンテンツ（危険行為を助長するものなど）、不快なコンの投稿を禁止している。

021

Google ショッピング
商品を販売している企業であれば、Google Merchant

Webサイト制作では、複数の関係者で仕様書や設計書などを作成することがあり、Googleドキュメントを利用するのが共同作業に適している。

Center に商品情報を登録することで、Googleショッピング

Googleスプレッドシートは、表計算形式の文書を作成の検索対象にできる。インターネットショップなどの ECビするためのサービスである。サイトマップやコンテンツリス

ジネスだけでなく、実店舗の商品情報も登録可能である。

ト、素材管理表などを作成するのに適している。スクリプ

通常は次の手順で利用を開始する。

トやマクロを設定することで、高度な処理を加えることも

1 Merchant Centerでアカウントを設定するできる。

2 データフィード（一覧表）で商品情報をアップロードする
3 Google 広告でショッピング キャンペーンを作成する

Google ショッピングを活用するメリットは、「コンバーGoogleスライドは、プレゼンテーション用のスライドを作るのに適したサービスである。概念図やフローチャートをまとめるのにも利用できる。

ジョン率が高いこと」である。能動的なユーザーが多い検索結果画面に表示されるためである。「広告」というよりも「情報」という印象を与える見た目であることも、その理由のひとつである。

Googleフォーム
申し込みやアンケートなどを受け付けるための入力
フォームが簡単に作成できるサービスである。

Googleドライブ

入力フォームを頻繁に用意する場合、Web サイト内への設置作業が煩雑になりがちである。Googleフォームをオンラインのストレージサービスである。Webサイト制

利用すれば、短時間で高機能なフォームが用意できる。ま作で利用する文書や画像などの素材を関係者で共有する

た、送信内容が Googleスプレッドシートに自動保存されのに適している。また、後述する Googleドキュメントも、ること、集計機能が付いていることも優れた点である。

Googleドライブ上で一元管理できる。
容量は 15GBまでは無料であるが、それ以上は有償となる（2019 年 6月現在）。

Webサイト制作では、テストサイトへのフィードバックを
Chapter

Googleフォームで受け付ける、といった使い方ができる。

7

フィードバックはどうしても数が多くなりがちであり、単なる意見なのか、具体的な修正指示なのかを区別して収集

Googleドキュメント

したい。また、実施の適否や可否をひとつひとつ判断すWeb

る必要もある。
Googleフォームに適切な選択肢や入力欄を用意し、レッドシート、スライドが代表的である。共有設定には「編フィードバックを寄せてもらうことで、Googleスプレッド

集可」「コメント可」「閲覧可」の 3 段階があり、限られたシート上で上記のような検討作業がしやすくなる。

マーケティング

Google の文書作成サービスとしては、ドキュメント、スプ

メールアドレスに共有したり、URLを案内した人に共有したりできる。
Googleドキュメントは、文章中心の文書を作成するのGoogleデータポータルに適している。文書を直接編集するだけでなく、「提案」

BI（ビジネスインテリジェンス）やデータビジュアライゼーというモードに切り替えられる点が便利である。作成した

ションのためのサービスである（以前は「データスタジオ」と文書について、関係者に校正してもらう場合、直接編集いう名称だった）。例えば、Googleアナリティクス、Search

してしまうと誰がどの部分を書き換えたのかがわからなく

Console、Google 広告などの定型レポートをダッシュボー

なってしまう。「提案」モードにした上で校正してもらうこドに設定しておくことで、関係者が常に確認できる。

とで、誰がどの部分を書き換えたのかが一目でわかる。

K E Y WORD

Google Merchant Center

Google の各種サービスのデータと、他の任意のデータ

スクリプトやマクロ店舗と商品のデータをアップロードすることで、Googleショッピン

Google スプレッドシートがサポートしている機能。スクリプトは新の商品データをGoogle に送信する必要がある。

マクロは作業の自動化を直感的に行えるようにする機能であり、グや Google 広告で利用できるようにするサービス。30日ごとに最Google Apps Script（JavaScrpt ベース）に基づいて記述する。
一連の操作を記録することで設定できる。

022

との組み合わせも可能である。例えば、Googleアナリティ
クスのコンバージョンレポートに、天気や気温のデータを組み合わせることで相関関係を見出す、といった使い方ができる。

Google ショッピングの表示（ Google 検索の結果画面）

Google Drive

Google スプレッドシート

Google Data Studio

Chapter

7
マーケティングWeb

K E Y WORD

Googleフォームの集計機能

BI（ ビジネスインテリジェンス）

申し込みやアンケートについて、項目別に集計値を表示する機能。

膨大なデータを収集、蓄積、分析し、レポートとして表現することで、すい。

やすさ（ビジュアライズ）が求められる。

円グラフや棒グラフなどでグラフィカルに表示されるため、わかりや経営やビジネスの意思決定を支援すること。特に、見た目のわかり023