読書記録12：服部雄樹『HTML&CSSとWebデザインが1冊できちんと身につく本』（技術評論社出版、2017年）
服部雄樹『HTML&CSSとWebデザインが1冊できちんと身につく本』（技術評論社出版、2017年）を読了しました。ここでは、印象に残った部分の記述に関して紹介していきます。
閲覧者の環境によって変化するWebデザイン
雑誌、ポスターなどのグラフィックデザイン（＝紙のデザイン）と異なるのが、Webデザインでは閲覧者の環境によって表示が変化する現象が起こります。MacとWindows間での表示変化、コンピューターの画面サイズや使用OSなどによる表示変化があったりとそれぞれの場面に応じて最適化が必須条件となってきます。なかでもスマホへの対応が現状重要であると言えるでしょう。
しかし、閲覧者の環境ごとに別々のWebサイトを用意する必要があるわけではなく、CSSを使用しHTMLファイルに記述されたコードを変えずに閲覧環境に合わせて表示変化が可能になります。これをレスポンシブデザインと呼ぶそうで、レスポンシブデザインの実装方法についても本書に記載されていました。メインエリアの横幅と余白に関するものから画像の幅調節など、詳細な項目に関して解説されていて、理解しやすかったです。
服部雄樹『HTML&CSSとWebデザインが1冊できちんと身につく本』（技術評論社出版、2017年）を読了してみて、CSSについてもっと詳しくなりたくなったのでサイトなどを活用して実際にどんなものが使用されているのか見てみようと思います。
読書記録11：中尾豊『Google AdWordsで集客・売上をアップする方法』（ソーテック社出版、2014年）
中尾豊『Google AdWordsで集客・売上をアップする方法』（ソーテック社出版、2014年）を読了しました。GoogleアドワーズはGoogleが提供するインターネット広告サービスです。Googleは検索エンジンとして世界最大のシェアを誇っていますが、収益のほとんどはGoogleアドワーズを中心とした広告によって稼ぎだされているのです。広告から高収益を得ているのは、表示広告の効果が高いからだと言われています。
検索エンジンの検索結果やアクセスが多く集まる人気サイトというのは、人目につきやすい・広告に関心を持ってもらえる確率が高い場所と考えられます。そういった場所
に広告を出せるということは利用確率が上がると予測できます。Googleアドワーズの広告はクリックされない限り広告主への広告費用は発生しません。また、Googleアドワーズを使ってリスティング広告を打てば、KW選択をして必要料金を支払えば簡単に検索上位に表示させられるため、時間をかけられない場合においては早い段階で成果を得られると考えられます。
KW選定において無視できないのが、競合分析です。検索KWごとの競合分析は、3C分析が効果的だと書かれていました。
3C分析
①Customer（市場・顧客）
②Competitor（競合）
③Company（自社）
抽出した検索KWで検索結果を調べることにより、どんな競合が存在しているかを知ることが可能です。ここでの競合とは、広告表示・オーガニック検索すべてを含みます。競合分析をする際に、以下項目を調査する必要性があると書かれていました。
１、広告文
２、ランディングページ
３、コンテンツ分析
４、オーガニック検索結果に関しての分析
５、title
６、meta keyword
７、meta description
８、コンテンツ分析
ユーザー目線で捉えると、検索結果の文字表示や画像情報でクリックするかどうかの意思決定を行います。企業側からすれば、例えば何らかの商品だったとしたら、そこから購入するという意思決定にまで誘導するという対策が必要になってきます。
中尾豊『Google AdWordsで集客・売上をアップする方法』（ソーテック社出版、2014年）を読了してみて、Googleアドワーズの活用に至るまでの経緯や実際の運用での対策に関しても知ることができ、すごく面白かったです。本書の内容すべてをここに紹介することはできませんが、読みやすく理解しやすかったので、今後も手元に置いて振り返りたい内容でした。
読書記録10：筒井美希『なるほどデザイン』（インプレス社出版、2015年）
筒井美希『なるほどデザイン』（インプレス社出版、2015年）を読了しました。実はこの本は以前、近所のブックカフェでさらっと読んで気になっていて、実際に手元でじっくりと読みたいと思っていたものなので本当に楽しく読み進めることができました。
本書は「目で見て楽しめる」形にデザインに関する物事がまとめられているため、とにかく”面白い！”です。文字ばかりの本と比較するのは少し違うかもしれませんが、多くの人が読みやすいと感じる構成にまとめられています。きっとこの本自体の製作の背景にも本書に書いてあるようなテクニックが駆使されているからここに辿り着いたのだろうと感じてしまうほど感動しました。
デザインをする前に、整理をしてみよう。
というワードから始まり、ページを進めていくと、
どんな人に（伝えたい？）
何を（伝えたい？）
なぜ（伝えたい？）
いつ・どこで（伝えたい？）
のように一見当たり前で、しかし重要な事実にはっとさせられます。デザインをするとき、私（デザイナーではない初心者）はまずデザインのイメージをぼんやりと浮かべてしまっていることに気づきました。ゼミでのポスター製作の際の自分はどんなフローで進めていったのだろうかと思い出すとここに欠けていた要素が見つかったのです。依頼によるデザインもそうでないデザインも、最初は「誰に何をなぜ伝えたいのか、それはいつどこで伝えたいのか」を明確にしておく必要があるのです。それによって、どの写真を大きく配置するだとか文字フォントの雰囲気はこうするだとか、デザイン全体が左右されます。
上の◎イイネの誌面デザインのようにターゲットが明確化されるとすごくいいデザインになりますね。
また、データを表したグラフも写真やフォントにこだわって配置すればビジュアルデザインにもなり得ると書かれていました。白黒やカラーだけのグラフが工夫次第で、素敵なビジュアルデザインとして変化できる可能性があるとの発見に私も感動しました。
筒井美希『なるほどデザイン』（インプレス社出版、2015年）を読了して、デザインに関する印象が少し明るくなりました。時間も労力もかかるデザインだからこそ、基本の姿勢に戻ってフローを見直すことは重要であると思いました。今後、何か製作する機会があれば本書を参考に取り組んでみたいと思います。
読書記録9：木田和廣『できる逆引き Googleアナリティクス Web解析の現場で使える実践ワザ240』（インプレス社出版、2015年）
木田和廣『できる逆引き Googleアナリティクス Web解析の現場で使える実践ワザ240』（インプレス社出版、2015年）を読了しました。本書を手にしたきっかけは以前Googleアナリティクス活用しており、まだトライしたことのない詳細な活用方法について勉強したいという思いからです。
本書では、タイトルの通り240テーマについて詳細な記述がありますが今回はその中でも特に興味を持った”PV”に関して取り上げていこうと思います。
・「ページビュー数」
ページビュー数 ＝ PV は、サイト内のページが表示された”のべ数”のことを表しています。ただ、気をつけなければならないのは異なるページが表示された場合はもちろん、ブラウザーの「戻る」ボタンを押してクリックして再度ページを表示した場合もカウントされることです。リロード（更新）し場合も1ページビューとしてカウントされます。
・ 「直帰率」
「直帰」とは、1セッションで1ページビューしかない訪問を指し、ユーザーの立場からすると「あるサイトを訪問し1ページ表示した、しかし他のページは表示しなかった」というセッションのことです。
「直帰率」は、直帰数を全体のセッション数で割った数値をパーセントで表したものです。
・「離脱率」
「離脱」とは、ユーザーがサイトの閲覧をやめる（＝セッションが終了する）ことを指し、「離脱率」はそのページで離脱した数をそのページのページビュー数で割った数値をパーセントで表しています。
上記に3点取り上げましたが、直帰率と離脱率に関して以前少し触れていたと思うのでここで詳しく書いてみました。しかし、注意しなければならないのが、直帰率と離脱率に関しての区別です。
直帰率 ＝ セッションに対する指標
離脱率 ＝ ページに対する指標
直帰率と離脱率は指標が上記のように異なっています。こうした違いの把握は、Googleアナリティクスを上手に活用するために必要になってくると思いました。
木田和廣『できる逆引き Googleアナリティクス Web解析の現場で使える実践ワザ240』（インプレス社出版、2015年）を読了してみて、Googleアナリティクスに関しての知識が少し増えた気がします。本書は逆引きもでき辞書のように使えるものなので、今後も活用する機会が増えると思いました。
できる逆引き Googleアナリティクス Web解析の現場で使える実践ワザ240 ユニバーサルアナリティクス&Googleタグマネージャ対応
- 作者: 木田和廣,できるシリーズ編集部
- 出版社/メーカー: インプレス
- 発売日: 2015/03/19
- メディア: 単行本（ソフトカバー）
- この商品を含むブログ (1件) を見る
読書記録8：北村崇、浅野桜『Webデザイン必携。 プロにまなぶ現場の制作ルール84』（エムディエヌコーポレーション出版、2016年）
北村崇、浅野桜『Webデザイン必携。 プロにまなぶ現場の制作ルール84』（エムディエヌコーポレーション出版、2016年）を読了しました。この本では、Webデザインにおける必須知識を基本的な考え方から正しいデータの作り方、コーディング担当者に納品する際の注意点、アプリケーションの操作方法といったルールが84項目に分けられて書かれています。
今回は、タップする際のボタンサイズについてのページが面白かったので、そちらについて紹介します。
▶︎ボタンのサイズが小さすぎると使えない
→最近ではスマホ以外にもsurfaceなどPCであっても指で操作できるデバイスが増えている
→UI設計でもPC表示サイトでタップされる可能性を想定しておく必要がある
タップ操作を考慮してデザインする際に大切になるのは、画面のタッチ可能範囲（タップエリア）を適切にとることだと本書では書かれています。実際にそのサイズ感を把握してみたいので、以下に記述します。
＜＜ボタンサイズ基準＞＞
→ポイントはGoogleやAppleが策定しているデザインガイドラインを参考にすること
→タップエリアの最小サイズは44ピクセル以上
ペーパープロトタイプなど、実際の紙などに印刷してサイズ確認をするような場合は10mm前後をとるようにすれば画面上の44ピクセルと同等かそれ以上のサイズになるようです。また、ボタンの間隔についても、できるだけ間隔を設けた方が誤タップも減りいい効果が得られるようです。
北村崇、浅野桜『Webデザイン必携。 プロにまなぶ現場の制作ルール84』（エムディエヌコーポレーション出版、2016年）を読了して、タップボタンのサイズだけでもこんなルールがあったのかと気付かされたので本書を読んでよかったなと感じました。ボタンサイズ以外のルールに関しても詳細に書かれているので、おすすめしたい本です。
読書記録7： 柘植 ヒロポン、上原 ゼンジ、吉田 浩章、大西 すみこ、坂本 可南子『世界一わかりやすいPhotoshop 操作とデザインの教科書 CC/CS6対応版』（技術評論社出版、2017年）
柘植 ヒロポン、上原 ゼンジ、吉田 浩章、大西 すみこ、坂本 可南子『世界一わかりやすいPhotoshop 操作とデザインの教科書 CC/CS6対応版』（技術評論社出版、2017年）を読了しました。Photoshopに関しては、遊び程度で使用したことはあったのですが本格的にバナーやサイト、画像加工に至るまで勉強したいと思ったので今回この本を選びました。
「Photoshopという道具を知る」という項目からスタートし、選択範囲に関してや色設定、レイヤー、グラデーション、マスクと切り抜き、フィルター、写真の色補正に関するまでの情報がプレビュー写真と共に書かれていてとてもわかりやすくまとまっている、まさに教科書という内容の本でした。
現在、大学の制作活動でもポスター制作にてIllustratorやPhotoshopを使用して行なっていたので、本書は心強い味方となってくれました。実際に制作したポスターなどここに載せたいのですが、展覧会前でまだ発表ができないため終わり次第、掲載を検討したいと思います。
Photoshopは使いこなせば結構なんでもできてしまうので、今後もどんどん使用していきたいと思います。
世界一わかりやすいPhotoshop 操作とデザインの教科書 CC/CS6対応版 (世界一わかりやすい教科書)
- 作者: 柘植ヒロポン,上原ゼンジ,吉田浩章,大西すみこ,坂本可南子
- 出版社/メーカー: 技術評論社
- 発売日: 2017/02/01
- メディア: 大型本
- この商品を含むブログを見る
読書記録6： 野口 竜司『A/Bテストの教科書』（マイナビ出版、2015年）
野口 竜司『A/Bテストの教科書』（マイナビ出版、2015年）を読了しました。ABテストに関してマーケのお手伝いをしていた際に触れたことから興味を持ち、今回はこの本を選びました。
（↑クッキーA）
（↑クッキーB）
例えば上の写真を2パターン用意してブログの画像にそれぞれ設定したとします。その時、クッキーAとクッキーBはどちらの画像に設定した方がより多くクリックされたかを調査する、簡単に言えばこれがABテストですね。
サイトだったら、サイト自体のリニューアルなど本体そのものを全て変更するのは大変な労力と費用がかかります。しかし、リニューアルという考え方自体を変えてしまえば費用対効果が十分に見込めるのです。オバマ前大統領もABテストの恩恵を少なからず受けて成功したと言ってもいいとこの本は語っています。オバマ氏は、大統領選挙の際にwebで寄付の支援を募っておりましたが、その際にGoogleでプロダクトマネージャーをやっていた方がオバマ氏のウェブマスターを務め、ABテストの手法を利用して追加寄付を劇的に増やしたとして知られています。ABテストを行うだけで、新たな可能性を見込めるかもしれないと期待が大きいです。現状すごくスタンダードな方法として活用されていますよね。
ABテストの仕組みについては様々な本やサイトに紹介されているのでここでは触れませんが、印象に残ったものについて記述していきます。
ヒートマップ調査に関してです。ユーザーのマウスクリックやページスクロールの状況を可視化することが可能な分析方法の一つです。詳細は以下サイトにあるのでリンクを貼っておきます。
ユーザーがページのどの部分までスクロールして読んだのかの把握や、どの部分が多くクリックされたのかなどを簡単に見つけることができます。またどのあたりでページを離脱したのかさえも可視化されているため、すごく便利な分析ツールだなと思いました。ヒートマップで分析して、離脱率が高かった場所について手直しする余地が残っているかどうかを検討してさらにはその部分を手直しすることが改善に繋がるのですが、ここでABテストが登場するわけですね。
今回は、野口 竜司『A/Bテストの教科書』（マイナビ出版、2015年）を読んでみて、ABテストの実践的な分野に触れられて良かったと感じています。この本は今後も長く使えそうなので、実際にABテストする機会があれば再び本書を読み込みたいと思っています。
