『ノンデザイナーでもわかるUX+理論で作るWebデザイン』を読みました

ノンデザイナーでもわかる UX+理論で作るWebデザイン

『ノンデザイナーでもわかるUX+理論で作るWebデザイン』のサマリと感想です。 

さて本書ではWebサイトをデザインするときに必要な考えや法則が説明されています。

個人的には第5章の「情報のデザイン」と第6章の「画面設計のデザイン」が面白く読めました。ざっと重要な部分をおさらいします。

そもそもデザイン思考とは

「デザイン思考」とは問題をデザインで解決させる思考やプロセスのことです。

デザイン思考のプロセスは下記の通り。

「①共通認識を持つ」

「②問題発見」

「③問題を解決するためのアイデアの想像」

「④問題解決のための原型であるプロトタイプを作成」

「⑤それらをテストし繰り返す」

（デザイン思考の「デザイン」とは見た目や雰囲気などの世界観を指すのではなく、ユーザーの思考・行動に関わる部分を指します。）

誰もが使えるUIはアフォーダンスを利用する

状況と物の形などによって操作を理解させることをアフォーダンスと言います。説明しなくてもユーザーが理解できるように、UIはアフォーダンスを利用して作成することが重要。直感的に利用できないUIはユーザーを迷わせるだけです。

Webデザインの工程

1.UX設計…ユーザーの行動も含めた利用シーンを想定

2.ストーリーボード…利用シーンをストーリーボードで描写

3.情報設計…情報をどのような言葉で、どのように配置するのかを設計

4.ワイヤーフレーム…コンテンツの優先順位を明確化

5.ユーザービリティテスト

6.実装

こういう流れだよ、というのは覚えておいた方がいいかも。

UXの解釈・定義

UX（ユーザー体験）=「ユーザーのタスク」+「コンテキスト」

どのような利用シーンでどういうタスクを行うかを想定するのが大事。

情報を5つの分類方法で表現する

1.ロケーション（情報を位置で表す）

2.アルファベット（あいうえお順）

3.時間（TwitterやFBのタイムライン）

4.カテゴリ（種類、色、大きさなど）

5.ヒエラルキー（よく使う順、ランキング順など）

ユーザーの利用シーンに合わせて使い分けできるといいですね。

デザインの基本原則「近接」

人は距離が近い情報に「関係があるもの」と認識する習性があります（例：男女の距離が近い=カップル、離れている=友人）。関連している情報は、距離を近づけてグループ化することで情報が整理できます。

デザインの基本原則「反復」

反復は同じデザインの要素やグループを繰り返すこと。反復することによりユーザーはパターンを予期できるため情報を認識しやすくなります。ページをまたいでも一貫性が保たれ、ユーザーは共通性を見出します。

ミラーの法則

人間は情報をいくつかのかたまりにして記憶します。人間が短期的に記憶できる量には限りがあり、その量は「7±2」である（認知心理学者のミラー氏によると）そうです。例えば電話番号。「0312345678」だと記憶しにくく「03-1234-5678」だと覚えやすいですよね。

ヒックの法則

選択肢の数が多いほど、ユーザーの意思決定に要する時間は長くなり、さらには選択することを放棄してしまいます。選択肢が多い場合は段階的に選択肢を提示することを検討すべし。

視線の流れからUIを考える

・ユーザーが全てのテキストをじっくりと読むことはない。

・重要な情報は、冒頭の二つ目までに記載する。

・見出し、箇条書きは端的に内容が伝わるような表現にする。

『データ・ドリブン・マーケティング 最低限知っておくべき15の指標』を読みました

データ・ドリブン・マーケティング―――最低限知っておくべき15の指標

 本書はアメリカ・マーケティング協会の最優秀マーケティングブック(2011)に選ばれると共に、アマゾン・ドットコムのCEOであるジェフ・ベゾスが選ぶビジネス書12タイトルのうちの1冊になったことでも有名です。

知っておくべき15の指標

非財務系指標

①ブランド認知率 

②試乗（お試し）

③解約（離反）率

④顧客満足度（CSAT）

⑤オファー応諾率

財務系指標

⑥利益

⑦正味現在価値（NPV）

⑧内部収益率（IRR）

⑨投資回収期間

顧客重要度

⑩顧客生涯価値（CLTV）

ネットマーケティング重要指標

⑪クリック単価（CPC）

⑫トランザクションコンバージョン率（TCR）

⑬広告費用対効果（ROAS）

⑭直帰率

⑮口コミ増幅係数

①〜⑩については、いわゆる伝統的なマーケティング指標として、⑪〜⑮については「新世代マーケティング指標」とし、インターネットマーケティングの効果測定に使われると解説されています。

これらの指標は、マーケティング活動に合ったものを選択するのが重要で、認知・比較検討と評価・トライアル・ロイヤリティの４つで構成されるマーケティングサイクルの各段階に応じて効果的に使います。

施策には必ず効果測定を行うことの重要さが前半で説かれており、後半は具体的な計測方法が体系的に説明されていました。海外の本であること、2010年の本であることから実例はあまりピンとこないことが多かったのですが、マーケティングキャンペーンの効果指標について幅広く学ぶには良書だと感じました。

『アドテクノロジーの教科書 デジタルマーケティング実践指南』を読みました

アドテクノロジーの教科書 デジタルマーケティング実践指南

 今回は『アドテクノロジーの教科書 デジタルマーケティング実践指南』を読んで勉強になった点、覚えたい用語をかいつまんでまとめていきたいと思います。

本書はアドテク業界を「歴史・技術」「クリエイティブ」「効果測定」「プレーヤー」「市場」5つの軸で説明しています。一見難しそうなテーマですが、知識のない人も読み進められるように噛み砕いた説明が多く、広告側・メディア側どちらの人間も知っておいた方が良い内容が満載です。

そもそもアドテクノロジーとは

アドテクノロジー（以下アドテク）とは「アドネットワーク」「RTB」「ディスプレイ広告」などインターネット広告に関連するシステムのこと全般を指します。

アドネットワークとは

アドネットワークとは「広告配信ネットワーク」に入稿することで広告主が多数のWebサイトに一括で広告を配信することができるシステムです。

アドネットワークの登場以前のネット広告は個別媒体への純広告が主流でしたが、アドネットワークの登場により圧倒的に低いコストでの複数出稿や一律の効果測定が可能になりました。

BATとは

広告効果を高めるためにCookieを使用しユーザー行動を分析して配信を行う「行動ターゲティング広告」をBAT（Behavaiorl Targeting Advertising）と呼びます。リターゲティング広告もこのひとつです。

アドエクスチェンジとは

アドエクスチェンジとは簡単に言うとアドネットワークを管理する仕組みのことです。

アドネットワークの数が増えてきて、それぞれに取り扱っているメディアも違い管理が大変になったところ、アドエクスチェンジが登場しました。

アドエクスチェンジは広告枠をインプレッションベースで取引する市場であり、広告主側とメディア側のバランスから広告枠の価値を評価して価格を決定します。これにより広告枠単位で価格が決まるようになり、アドネットワークも横断的に一元管理できるようになりました。

RTBとは

「RTB（Real-Time Bidding）」とは、アドエクスチェンジにおけるリアルタイム入札のことを指し、広告枠のインプレッションが発生するたびに競争入札が開始され、もっとも高い金額をつけた購入者の広告を表示する方法のことです。

広告インベントリ（広告在庫）とは

広告のインプレッションのことです。メディアにとって広告のインプレッションは収益に影響することから、インプレッションのことを「広告インベントリ（広告在庫）」と呼ぶそうです。

DSPとは

「DSP（Demand-Side Platform）」とは複数のアドエクスチェンジやネットワークを一元管理する広告配信プラットフォームです。広告主のためのプラットフォームと覚えておくと良いと思います。

SSPとは

「SSP（Supply-Side Platform）」は広告収益の最大化を目的としたメディア側のプラットフォームです。DSPと対になる存在ですね。

DSP/SSPでの広告取引の流れ

ユーザーが広告枠のあるWebサイトを訪れたら、まずSSPが広告リクエストを受けて各DSPにオークションをリクエストします。各DSPはそのDSP内でオークションを行い、そこで勝利したクリエイティブらが最終的にSSP内でオークションにかけられ、その勝者が広告として表示される仕組みです。

プレイヤーの多さならではというか、ここまで複雑だったんですね。

3PAS（第三者配信アドサーバー）とは

広告主はDSPなどのプログラマティックな広告以外にも、リスティング広告、純広告、アフィリエイト広告など多くのWeb広告を出稿しますよね。それらを横断して管理・効果測定したいというニーズを持っていました。これに応えることができるのが3PASです。

DSPやアドエクスチェンジと違って、3PASには広告枠の買い付けや配信のオプティマイズ機能などはありません。

まとめると、メディアを横断して広告全体の効果測定・管理を行うサーバーが3PASということです。

展開している事業者として日本で有名なのは下記。

・Sizmec社　(旧Media Mind)　⇒ Sizmec

・Fringe81社⇒Digitalice

・Google社 ⇒ Double Click for Advertiser

DMP（データマネジメントプラットフォーム）

自社サイトに訪れた顧客の行動や属性情報など、別々で管理されているデータをまとめ、分析し、顧客とのコミュニケーションを最適化するためのプラットフォームを指します。

例えば、DMPを活用すると、Webサイトで３か月前に商品を購入し、それ以降サイトに訪問していない顧客に対してネット広告やメルマガの配信ができます。

フリークエンシーとは

ユーザーが広告に接触した回数のこと。

アトリビューション分析とは

アトリビューション分析とは、CVに関与したメディアの貢献度をスコアリングする分析のこと。分析結果を元にリアロケーション（再分配）を行い広告効果を最大化させることが目的です。

GDN

Googleディスプレイネットワークのこと。（こんな略し方だったんですね）

インストリーム広告

Youtubeなどの動画サイトで配信される従来のバナー広告よりも大画面で表示できるタイプの広告。Youtubeでよくある、動画再生前に表示される広告のことですね！5秒以上待つとスキップできるものがほとんどです。

CPV課金（広告視聴単価課金）方式が取られる場合が多く、たとえばYoutubeでは広告が最後まで再生された場合のみ課金されます。

インバナー（インディスプレイ）広告

従来のバナー枠に配信されるタイプの動画広告。インディスプレイ広告とも呼びます。

インリード広告

Webページをスクロールし、広告枠が画面に表示されたタイミングで動画が再生される仕様の広告。広告枠がコンテンツ内にあることが前提です。スマホ向けプロモーション向き。

以上は第3章までの内容がメインです。

本書では他にも第4章で各領域のプレイヤー紹介があり、海外プレーヤーから国内プレーヤーまで概要とソリューションが解説されています（フリークアウトやサイバーエージェントなど）。

第5章ではインターネット広告や運用型広告（純広告など除くアドテク広告のことですね）、動画広告の市場規模も（2014年時点なので古いですが）。 

『Webデザイン必携。プロにまなぶ現場の制作ルール84』を読みました

Webデザイン必携。　プロにまなぶ現場の制作ルール84

目次

CHAPTER1：Webデザインの基本的なルール

CHAPTER2：コーディングに困るデザインデータとは

CHAPTER3：わかりやすい納品データの作り方

CHAPTER4：Photoshopの上手な使い方

CHAPTER5：Illustratorの上手な使い方

 今回はデザインの勉強のために『Webデザイン必携。プロにまなぶ現場の制作ルール84』を読みました。

「Webデザイナーとして"やるべきこと"と"やってはいけないこと"をまとめたWebデザインのルールブック」として、データの正しい作り方や納品するときのルールを学ぶことができます。

デザインがWebページとして公開される際は、必ずHTML・CSSによるコーディングを経る必要があります。端末によって画面幅も異なりますし、コンテンツの量が更新によって変わるかもしれません。このようなWebの特性を理解していないと、そもそも実現不可能だったり、ユーザーが使いにくかったり、更新で崩れてしまうようなデザインになってしまうということですね。

それでは、今回はノンデザイナーの人も必ず知っておいた方がいいwebデザインの超基本的なルール・知識だけを、用語ごとに自分なりに噛み砕いてまとめていきたいと思います。

レスポンシブイメージとは

横幅により適切な画像に切り替えて表示すること。ウィンドウサイズによって画像そのものを別画像に差し替えるのが適切。ただ縮めるのではダメ！可変サイズの画像は「リキッド画像」とも呼ばれます。

WebはRGBで指定する

Webでは紙のCMYKではなくRGBで指定することがルールとなっています。

画像以外の文字や色表示の指定はカラーコードで行います。

Webサイトをデザインするときの推奨サイズ

PC用webデザインは横幅1000ピクセル前後を目安にします。最大1200ピクセルとして調整すればいいでしょう。

スマートフォンサイトのサイズはシェアの大きいiPhoneに基本合わせて作成します。

推奨される解像度

画面サイズの2倍の解像度（デザインサイズ）で用意することが多いです。

2倍や3倍で書き出した画像は「image@2x.png」のようにサイズをわかりやすくすると良いそうです。

Webサイトで表示されるフォントの指定について

フォントは環境に依存するためWebのフォント指定は優先順位で指定します。WindowsやMacで対応するフォントが違うため複数を指定するのが主流です。

文字の書式設定でフォントの加工処理をしてはいけない

PhotoshopやIllustratorには太字や斜体など、文字加工の機能がありますが、アプリケーションに依存する文字加工はWebサイト上では実装することができません。

10ピクセル以下の文字サイズは注意

Chromeブラウザでは最小文字サイズが10ピクセルまでとなっています。どうしても小さくしたい場合はCSSのtransformプロパティを指定する方法があるそうです。

Webデザインのサイズ指定は整数で行う

PhotoshopやIllustratorを使ったことがある人ならわかると思いますが、フリーハンドで拡大・縮小を行うと小数点を含めたサイズになってしまいがちです。バウンディングボックスは使わず、ダイアログやパネルを開いて数値で入力するようにしましょう。

Photoshopのラスタライズ化とIllustratorのアウトライン化

ラスタライズ化とアウトライン化をすると文字のコピー&ペーストができなくなってしまいます。アウトライン化前にテキストを別のレイヤーにまとめ非表示にするなど、コピー&ペーストができるデータを意識すること。（迅速なコーディングのために必要）

※画像は全て本書『Webデザイン必携。プロにまなぶ現場の制作ルール84』より引用しています。

『デジタルマーケターとWeb担当者のためのGoogle&Yahoo!タグマネージャーの教科書』を読んで、タグマネの設定をしてみました

 はじめに

デジタルマーケターとWeb担当者のためのGoogle&Yahoo!タグマネージャーの教科書

本書ではタグとは何か？という基礎的な説明から、実践的なGoogleタグマネージャーの設定方法まで説明されています。

タグマネージャーで出来ることは数え切れないほどありますが、今回は研修で並行して行っているFB広告運用にあたり「LP内のリンククリック数の計測」を目的に、Googleタグマネージャーの使い方を習得したいと思います。

タグとは何か

HTMLのタグを使って、Webサーバとは異なるサーバにアクセスの履歴を送信して行うアクセス解析手法を「タグ方式」と呼びます。主要なアクセス解禁ツール（もちろんGAも）はタグ方式を採用していることもあり、アクセス解析手法のスタンダードになっているものです。

タグマネージメントとは何か

しかしタグの増加や不適切なタグ実装により不具合や様々なリスクが引き起こされることがあります。それらを解決するために生まれたのが「タグマネージメント」という考え方とツール・サービスです。

Webサイト内に書かれている複数のタグを一括で管理し、全体像を把握することができます。そのほかにもユーザーのコンバージョン（「リンクをクリック」「PDFをダウンロード」等）でタグを実行したり、サイトの滞在時間などに応じてタグを使い分けしたりすることが可能になります。こうした条件指定によるタグ管理ができるのもタグマネージメントツールの特徴です。

早速Googleタグマネージャーを導入してみた

Googleアナリティクスとも親和性が高いとして、タグマネージメントツールの中でも一番有名なGoogleタグマネージャーを導入します。本書には導入の手順が記載されており、スムーズに進めることができます。

タグマネージャーのアカウントを作成し、コンテナを作成しタグマネージャーのタグをwebサイトのHTMLに埋め込むと準備完了です。

管理画面が表示されます。

タグが動作していることは、管理画面でプレビューを押すとwebサイト上のデバックコンソールで確認できます。

トリガーの設定

次に今回の目的であるリンククリック計測に必要なトリガーを設定していきます。

Googleマネージャーにおけるトリガーとは「購入完了のページだけコンバージョンタグを実行」といったように「タグの実行条件を定義したもの」を示します。

「リンククリック」といったイベントの発生を検知してタグを実行できるんですね。

早速トリガーの設定をしてみました。

新規で「リンククリック」というトリガーを追加します。

プレビューでデバックコンソールを確認してみます。

「gtm.linkClick」という文字が表示されました。これがリンクをクリックしたことで発生したイベントです。

次にリンククリックを計測するGoogleアナリティクスのテンプレートタグを設定します。

さて、今回は「どのページからどのリンクがクリックされたか」を計測するためトラッキングタイプはイベント、カテゴリは任意の名前をつけて、アクションを変数の{{Click URL}}、ラベルを{{Page URL}}に設定しました。 

タグの設定が完了したら、今回は外部リンクのクリックを計測したいため、トリガーを「すべてのリンククリック」から「一部のリンククリック」に変更し、Click URLで自分のサイトのドメインを含まないよう指定します。

これで、Facebook広告を回したページから何回外部リンクのクリックが発生したかをGAで確認できるようになりました。

最後にワークスペースでの変更を保存することをお忘れなく。

今度はページスクロールも取得してみようと思います。終わります！

『ちゃんと使える力を身につける Webとプログラミングのきほんのきほん』を読みました

『ちゃんと使える力を身につける Webとプログラミングのきほんのきほん』を読みました。

ちゃんと使える力を身につける Webとプログラミングのきほんのきほん

 今回は本書を読んで出てきた事柄の中で、自分が覚えておきたいと思った知識・要点をサマリしてみました。

Chapter1：WebブラウザでWebページが表示される仕組み

・リファレンスマニュアル

プログラミング言語の機能がまとめられた仕様書のこと。機能別やアルファベット順などで、プログラミング言語がもつ機能の一覧が記載されている。

・フレームワーク

フレームワークとは、プログラミングにおいて、一般的な機能をもつ共通コードをユーザーが選択的に上書きしたり特化させたりすることで、ある特定の機能をもたせようとする抽象概念である。あらかじめ用意された環境のこと。

PHPのフレームワークはCakePHP、RubyのフレームワークはRuby on Railsが有名。

 ・ライブラリ

プログラミング言語において、よく利用すると思われる関数や機能、データなどをまとめたファイルのこと。無償で使えるフリーのライブラリも多い。

RubyGems.org | your community gem host（Rubyのライブラリ）

・Webクライアント

情報を取得する端末（Webブラウザが動作しているパソコンやスマートフォンのこと）

・URLの構造

URLにはプロトコルの名前、サーバーの名前、パスの名前が含まれる。

http://www.mynaviaqua.co.jp/index.html

↑プロトコル名 ↑サーバー名    ↑パス名

・静的ページと動的ページ

静的ページ：アクセスしたときに同じ内容が表示されるページ。

サーバーにあらかじめファイルとしてページを置いておく。（動画やアニメーションで動くコンテンツがあっても静的ページ！）

動的ページ：サーバー上のプログラムが毎回ページを生成している。ユーザーの入力や現在の状態を見てコンテンツを生成（例：Google検索結果などのページ、掲示板、通販サイト）

・レンダリング

WebブラウザがHTMLを解釈して整形すること。（Fetch as Googleの「取得してレンダリング」はそういう意味だったのか）

・文字コードのトレンド

日本独自の「JIS」「シフトJIS」という文字コードから「UTF-8」という世界共通の文字コードが標準になりつつある。世界共通の文字コードであり、多言語に対応するため。

 ・CSSにもライブラリがある

オープンソースのCSS「Bootstrap」が有名。Twitter社が開発

getbootstrap.com

Chapter2:WebサーバからWebブラウザにコンテンツが届くまで

・IPアドレスで個人は特定できない

IPアドレスは「地域」「国」「プロパイダ」「企業」ごとに割り振られる。

クライアントのIPアドレスはプールされているIPアドレスの中から適当なものが割り当てられるため、接続のたびにIPアドレスは異なる。（動的IPアドレス）

（ユーザーBANだったり二重ログイン禁止をIPアドレスで処理してはいけない理由がわかりました。）

・TLD（トップレベルドメイン）

「.com」や「.jp」のこと。「co.jp」であれば「co」は第2レベルドメインである。

・DNSサーバ

ドメイン名とIPアドレスを相互変換するサーバのこと。

wwwの部分はホスト名という。

Chapter3:Webプログラムがコンテンツを作る仕組み

Webプログラムはブラウザ上で実行される「クライアントサイド」とWebサーバー上で実行される「サーバーサイド」に分かれる。

①サーバーサイドのプログラム

PHP,Perl,Rubyなど

クライアントから要求があった時に実行される

②クライアントサイドのプログラム

JavaScriptなど

「マウスが動かされた」など「○○した時」のタイミングで実行される

プログラムを見られたり改変されたりする恐れがある

ブラウザによって実行されないこともある

・インタプリンタとコンパイラの違い

プログラミング言語には「インタプリンタ形式」と「コンパイラ形式」がある

インタプリンタ形式

「ソースコード」と呼ばれるプログラマが記述したテキスト形式のプログラムを実行

実行速度はコンパイラ形式に比べて遅いが実装後に不具合があってもすぐ修正できる

コンパイラ形式

「コンパイラ」というプログラムを使い「バイナリコード」に変換したものを実行

ソースコードを秘匿できるが修正する場合もう一度コンパイルし直さなければならない 

※バイナリコードは機械的に処理しやすいよう変換した形式

※インタプリンタ型の言語は「スクリプト言語」と呼ばれることもある

コンパイルする作業のことを「ビルド」と呼ぶこともある。 

・CGIとは

Webサーバでプログラムを実行する仕組み。

Webサイトで、掲示板やアンケートのフォーム、アクセスカウンターのように、Webページの内容を動的に変化させたい場面で使われる。

Webブラウザーからの要求により、Webサーバー上でPerlなどの言語で記述されたプログラムが動作し、その結果がHTTPを介してWebブラウザーに返されてWebページとして表示される。

様々なプログラミング言語で書かれたプログラムを実行できる