ポイントが解れば説得力が増す！「Google アナリティクスのレポートの書き方」
Googleアナリティクスのレポートの重要性
サイトを運営するのであれば、Googleアナリティクスのレポートはとても重要です。
Googleアナリティクスは、一般的なサイトであれば、無料で導入する事が出来ますが、
そのアクセス解析の数値から見て取れる分析は、とても重要な内容です。
Googleアナリティクスのアクセス解析に現れる数字は、全てサイト上のコンテンツや、
そのサイトを取り巻く環境が今どうなっているのか？が全て反映された数字なのです。
Googleアナリティクスの数字は人間の健康診断と一緒
Googleアナリティクスの数字は、人間で言えば、健康診断で得られる数字と同じです。
全ての生活習慣、生活環境等から、その数字が弾き出される為、どのような生活を行い、
その結果、どの様になったのか、そして今の健康状態はどうなっているのか？
全て追うことが出来ます。Googleアナリティクスで得られる数値を追っていけば、
今、サイトの健康状態はどうなっているのか？細かく把握する事が出来ます。
しかし、我々一般人は、健康診断のレポートを見ても、どの項目の数値がどうであれば
良いのか？何故悪くなってしまったのかが、詳しくは分かりません。具体的にどの項目
のどの数字の正常値はどれくらいなのか？そしてそれによって何処が病気なのか？
改善する為には、どうすれば良いのか？主治医の説明と指示が必要です。
Googleアナリティクスも同じで、画面の数字だけを見ても、その項目が何を意味して、
その数字が良いのか？悪いのか？一般的には、どれくらいなのか？その数字が悪いと、
何処がどういう状態になっているのか？それを改善する為には、どうすれば良いのか？
レポートはいわば、検査に対する主治医のアドバイスなのです。
先ずは現状を理解する
期間を設定し、サイトのアクセス状況の全体の大まかな推移を見てみます。
先ずは大きい期間で設定し、次に小さい期間へ推移を見ていきます。
そうする事で、全体の流れと詳細を把握する事が出来るはずです。
例えば全体の推移としては、右肩下がりだが、イベントがあった月より以降は、
再び数値を戻している、といった変動の関係性や理由が見えてきます。
レポートのストーリーを組み立てる
レポートを何のために使用するのか？提案したい、改善したい内容に合わせて、
ストーリーを設計していく必要があります。
例えば、リニューアルの提案であれば、リニューアルする事の目的に合わせて、
その目的達成の為の施策が何なのか？その施策を行う上で参考とするべき指標は
何なのか？を定めて、その定めた指標に対する分析を中心に行う必要があります。
指標に必ず解説を記入する
Googleアナリティクスの指標をスクリーンショットで貼り付けたら、必ずその指標の
解説を入れるようにします。間違っても、スクリーンショットを貼っただけのレポートを
作ってはいけません。また、使用する言葉や単語は、なるべく素人の人でも分かりやすい
内容にする必要があります。
Googleアナリティクスでは、独特な単語がいくつもあります。例えば「セッション」や
「ページビュー」「直帰率」等、殆どの言葉は、馴染みのない人にとっては、正確には
分からない専門用語です。言い換える事が難しい場合には、なるべくその言葉の説明を
入れるようにしましょう。
口頭で説明すれば良いと思うかもしれませんが、担当者が後日、そのレポートを確認
した時、果たして言葉の意味を覚えているでしょうか？また、その資料を使用して、
同じ部署の別の担当者や、上司や部下へ説明する必要があるかもしれません。
または、メールで添付送信して、別の部署や協力会社が目を通す場合もあります。
後々、資料が一人歩きしても、意味が分かる内容にする必要があるのです。
どこが悪いのか？改善ポイントを明確にする
どの指標のどの数字が悪い為、どういった事が起きているのか？
具体的に提示する事で、その指標をどの様に改善すれば良いのか？
その指標がどうなれば、目的が達成出来るのか？明確な答えが見えて来ます。
具体的な数字の提案が無ければ、説得力に欠ける資料となってしまいますので、
出来る限り、目標数値や目安となる数値を提案する事がベストです。
ビジュアルで見やすく工夫する
可能であれば、指標上で重要な変化があった場所には目印等を付けて、それが何を意味
するのか、コメントを入れると良いでしょう。そうする事で、説明する必要も無く、
何故そうなったのか？がスムーズに伝わりやすくなります。
あくまで、資料が一人歩きした場合の事を考えて、分かりやすい工夫を行う事が大切です。
目次を入れる
どのページに、どのような内容のレポートがあるのか、目次を作りましょう。
ここで、分かりやすくストーリーが繋がるように、全体の構成、ページの順序等の調整や
見直しを入れていきましょう。そうする事で、つじつまが合うようになり、
全体のクォリティがまして、レポートの信ぴょう性を高める事が出来ます。
誤字等のチェックも忘れないように、ここで一気に済ませてしまいましょう。
最後に締めを入れる
連絡先や締めの文章等を入れて、レポートを終了しましょう。そうする事で、
次回へのお仕事の依頼を受けやすくなりますし、レポート全体が引き締まります。
印象も良くなる事でしょうから、不要な場合を除いて、簡単でも入れるようにしましょう。
LPのレスポンシブ化とEFO（エントリーフォーム最適化）
LP（ランディングページ）もレスポンシブ対応が必要か？
申し込み専用サイトを作成する場合には、LP（Landing Page）でサイトをデザインする事が多いと思います。
ユーザがスマホやタブレットでアクセスする事が予測される場合には、LPサイトでも一般のサイトと同様に、レスポンシブ化を行い、スマホやタブレットの表示に最適化を行う必要があるはずです。特に申し込みフォームには、より一層の配慮が必要になります。
スマホやタブレットでは、画面やキーボードがPCと異なる為、PCと同じままのレイアウトで表示してしまうと、入力エリアや文字が小さく表示されてしまい、入力し難くなります。
表示の最適化
フォームのレイアウトに関しては、一般的にはdlやul、table等のタグでレイアウトしている場合が多いかと思います。レスポンシブでスマホ表示に最適化を行う場合、それらのタグに対して、cssで「display:block」に設定し、ブロック要素にしてしまいえば、スマホ用にレイアウトを調整しやすくなります。スマホ等の横幅の狭い画面でテーブルレイアウトを使用すると、極端に狭くユーザの操作性を損ねる可能性があります。
EFO エントリーフォームの最適化
LPの目的が、お問い合わせや申し込みであれば、入力フォームが必ずあるかと思います。複数ある入力フォームに、ユーザが自身で入力する必要がある為、入力する手間や時間等といった負担がユーザ側に生じます。あまりに負担が大きかった場合、ユーザが途中で入力を止めてしまい、お問い合わせや申し込みに至らないケースが多くなってしまいます。少しでも、その負担を軽減する必要があります。それがEFO（Entry Form Optimization）、つまり「エントリーフォームの最適化」になります。
■必須入力の項目を見直す
EFOの基本は、必須入力の項目を極力少なくする事です。必須入力の項目が多すぎると、ユーザは入力が嫌になり、入力を途中で止めてしまいます。また、取得しようとする個人情報の内容にも配慮しなければなりません。初対面の相手から根掘り葉掘り個人の情報を聞くのは、相手からすれば気持ち良いものではありません。ユーザの立場になり、入力してもらう情報は、出来る限り必要最小限にします。
■jQueryによるバリデーションの実装
通常、入力フォームには、入力した内容に誤りがあるか、プログラムでチェックを行い、エラーを表示する、といった仕組みが実装されているはずです。php等のフォームで、一度情報をサーバーに送信し、画面のリロードを行ってエラー箇所を表示するタイプのバリデーションですと、読み込みに時間が掛かったり、何度も画面を読み込んでしまい、ユーザに不快感を与える可能性があります。また、一度入力した内容がクリアされてしまう様な仕様では、かなりの確立で、ユーザは入力を止めてしまう事が予想出来ます。
このような場合には、jQueryによる入力バリデーションを実装し、入力ミスがあるまま、送信ボタンを押すと、即座に入力ミス箇所を表示する仕組みを実現出来るようにします。こうする事で、何度も画面を読み込んだり、フォームがクリアされるようなストレスの要因を少なくします。
HTML5で新たに追加されたinput属性でUXを向上させる
HTML5による新しいinput属性は、スマートフォンやタブレット等といったモバイル端末で非常に有効です。HTML5で新たに追加された、「tel」や「email」等の新しいinput typeを使用すれば、スマホから入力した場合に、自動的に電話番号入力用のテンキーになり、UX（User Experience）を向上する事が出来ます。
■HTML5で追加されたinput属性
HTML5で追加されたInput属性は、search、tel、url、email、datetime、date、month、week、time、datetime-local、number、range、color等、多数追加されましたが、telやemail以外のInput typeに関しては、対応していないPCブラウザも多数存在している為、無理に使用する必要は現時点では、ないかと思います。
UXを常に考えて設計する
ユーザからお問い合わせを得る為には、ユーザを突き動かす体験や工夫が必要になります。ユーザの気持ちになる事で、その施策が見えてきます。直接会って会話が出来ないウェブでは、出来る事が限られてきます。限られた中で、最大の努力が出来れば、必然的にUXも向上し、ユーザが申し込みたい、と思えるようなサイトに仕上がるのではないでしょうか。今日も明日も、PDCAで頑張りましょう！
ウェブサイトの新規・リニューアル提案方法
フレームワークを活用したウェブサイトの提案方法
既存のウェブ改善提案でも、新規提案でも、クライアントへ説得力のある提案を行う必要があります。ここでありがちなのが、新規でもリニューアルでも、デザインカンプだけ見せる、ビジュアルだけの提案です。私も以前はそうしてました。デザイン画像を見せて、その良さを一生懸命アピールするのです。
しかし、見た目だけのデザインは、サイト構築の本質ではないはずです。前回の記事でお伝えした通り、サイトには、大きな目標と施策があって、初めて機能するのです。
その為には、「マーケティングフレームワーク」を活用した、提案を行います。
ウェブ解析士では、先ずはじめに、「3C4P5F分析」を学びます。3C4P5Fに関しては、ウェブ解析士協会のサイトにも、詳細が掲載されていますので、ご参照ください。
3C4P5F分析
3C4P5F分析は、下記の内容です。
■3C分析
「市場（Customer）」「競合（Competitor）」「自社（Company）」の3Cです。この3C分析を行う事で、サイトや施策で重要なKSFを導いていきます。KSFについては、前回の記事を参考にしてみてください。
■4P分析
「製品（Product）」「価格（Price）」「流通（Place）」「プロモーション（Promotion）」の4Pの事です。自社の強みや弱み等を理解し、製品や収益の改善の必要性や課題を確認し、戦略を立てていきます。
■5F分析
「既存競合」「新規参入の脅威」「代替サービスの脅威」「買い手の交渉力」「売り手の支配力」の5つの脅威の事です。市場や業界の実態を理解し、外的要因による脅威から、備えや施策に対する戦略を考えていきます。
このフレームワークを使うことで、ウェブだけに囚われない、事業全体としての広い視野で戦略を考える事が出来ます。
競合他社のサイト分析
提案する内容はあくまでウェブですから、競合他社のサイト分析が必要です。競合と思われる会社のサイトを探し出し、そのサイトの特に良い部分に注目します。そして、それがどのように作用するのか？スクリーンショットを交えて、詳細に解説していきます。そうする事で、現状の自社サイトに足りていない部分、差別化するべきポイントが見えてくるはずです。
新規サイト・リニューアルの提案内容
提案書に盛り込む内容は、主に下記の様な内容になります。
■分析データの掲載
先ず、事前に調べた3C4P5Fの分析データを掲載します。その上で、これから行う施策の方向性の確認と決定を行っていきます。提案書には、ストーリー性を持たせる事で、説得力も高まるはずです。分析している途中で、クライアントでなければ分からない要素に関しては、可能であれば、事前にクライアントへ確認を行います。不明な要素は、なるべく一番最初に確認を行う事で、間違えたまま提案してしまう事を防ぐ事が出来ます。
■競合他社のサイト分析結果
競合他社のサイトが、どのような取り組みを行っているか？その良さは何か、分析を行います。競合のサイトにはあって、自社サイトにはない独自の取り組みやコンテンツを確認し、サイト改善に必要な施策を決定していきます。
■自社サイトの分析結果
リニューアル提案等で、自社サイトが既にある場合、自社サイトの分析結果を掲載し、サイトの問題点を提示します。また、競合他社の良い所との比較を徹底的に行い、どの様にするべきなのか、施策の方向性を決めていきます。Googleアナリティクス等のデータをクライアントから事前にもらう事ができれば、その課題も掲載していきます。
■KSF、KGI、KPIの設定
前回の記事で掲載した、KSF、KGI、KPIを設定していきます。既にサイトがあり、Googleアナリティクスによってデータが取得出来ているようであれば、そのデータの、どの部分の改善が必要か、提案する施策が、どの指標にどの様に影響するのか、詳しく説明を行います。そうする事で、提案内容への説得性が高まります。
■SEO対策の提案
Google検索で出てこなければユーザがサイトに辿り着く事が出来ません。また、想定したユーザでない人がアクセスした場合には、直帰率の上昇を招く可能性があります。現状のサイトではSEO対策が出来ているか？コンテンツ内のキーワードやhtmlの内部構造を見直し、流入の改善を提案します。
■プロモーションの提案
例えばリスティング広告を出稿し、サイトへの流入を増やす手法や、紙媒体とLPによるクロスメディアでの誘導、あるいはキャンペーンを行い、イベントへの参加者を募る等、KPI改善の為の施策を考えていきます。
■技術導入の提案
KPI改善の為に、必要な技術の導入を行います。例えば、モバイルからのアクセスが多く、離脱率が高い場合には、レスポンシブ対応を行い、直帰率や離脱率改善を目指します。サーバーのレスポンスが悪い場合には、ホスティングサービスの変更提案も行います。その他、ターゲットとするユーザの利用環境を意識した技術導入を提案します。
■サイトデザインの提案
利用者にとって、サイトを見やすく、フロー改善に繋がるレイアウト等を考えます。利用者の身体的能力に合わせたUIを意識し、例えば年齢層が高めであれば、文字やボタン類の大きさ、レイアウトの間隔、コントラストを調整し、視認性を高め、難なく利用出来るサイトデザインを作る事が重要です。
■コンテンツの提案
各コンテンツの内容を見直し、離脱率等の改善を狙います。SEOにも影響しますので、お知らせやブログ等、Google検索にインデックスされるコンテンツ数を増やす工夫や、キーワードに反映された文脈等、しっかりとしたコンテンツ作りを提案します。
■サイト運営の提案
施策ばかりに目が行きがちですが、実際には、運営を行わなくてはなりません。サイトの運営方法を考え、クライアントにとって負担の低い方法を提案します。例えば、記事の更新をクライアントにお願いする場合には、Wordpress等のCMSの導入を技術導入の提案に盛り込みます。メルマガが必要であれば、メルマガ配信方法やサービスの案内を行います。また、脆弱性や万が一に備えたバックアップ等の保守的な提案も必要に応じて行います。
サイト提案で重要な事
フレームワークは様々あり、案件によっては、分析に必要なフレームワークが異なる場合があると思います。しかし、ウェブ解析で重要なのは、サイトデザインだけに偏った提案ではなく、事業としてのサイトの提案が行えるかどうかです。ウェブの導入には一定のコストが掛かりますから、これを経費とすれば、費用対効果も一緒に考える必要があります。具体的に数値に結びつかなくとも、ウェブサイトがある以上、最低限、カスタマーに対するフォローに繋がったり、お問い合わせや申し込みの窓口になる等、サイトには目的や役割があるはずです。それをゴールと考えた、施策を盛り込んだ、提案書づくりを目指す事が重要です。
ウェブ解析とは
Googleアナリティクスに頼った誤ったウェブ解析
ウェブ解析士として、既存サイトの改善提案を行う事は良くあります。
ここで、良くありがちなのが、Googleアナリティクスのデータをそのままシートに貼り付け、改善提案を行ってしまう事です。
Googleアナリティクスのデータはあくまでデータですので、データをそのままクライアントへ見せるだけでは、サイトの問題点を見つけ、それに対する改善提案をした事には、なりません。
クライアントも知識のある人であれば、Googleアナリティクスの見るべきデータを理解し、どうすれば良いかわかるかもしれません。しかし、大抵の人は、Googleアナリティクスのどのデータを見れば良いかすらわからず、そのデータを見ても、何をすれば良いのか？分かるという事は殆どないでしょう。
サイトの改善提案のポイント
サイトの改善提案や施策を行う為には、下記の3つを考える必要があります。
1. 目標の見直しと設定を行う
2. GA等のアクセス解析によるデータから、1.に対する問題点と改善案を考える
3. 2.を実行し改善する為の施策を行う
これに加えて、運営の段階では、上記のPDCAサイクルを回す事が必要になります。
PDCAについては、後ほど記述します。
サイト改善の為の目標を設定する
先ほど述べた様に、Googleアナリティクスで得られるのは、ただのデータですから、それだけでは何も出来ません。先ずは、サイトの具体的な目標を決定し、その目標達成に必要な指標を選定します。指標とは、下記に示す具体的な数字です。更に、その指標の数値を改善する為に必要な施策を決めていきます。
■KGIの設定
KGI（Key Goal Indicator）は重要目標達成指標です。
事業としてサイトを運営する為の、具体的な目標を設定しなければなりません。例えば、お問い合わせから何件の申し込みを獲得する、通販で幾らの売上を上げる、等です。
サイトのKGIが正しく設定されているか見直し、その達成に向けて運営を行います。
■KPIの設定
KPI（Key Performance Indicator）は、KGIに対する進捗の、定量的な指標です。
具体的にはPVやUU、直帰率やコンバージョン率といった、Googleアナリティクスによって得られる定量的なデータを確認し、KGIに繋がる改善ポイントを探っていきます。
直帰率が高ければ、それを改善する為にはどうすれば良いか？KPIの細かい問題を改善する事で、KGIの達成に向かっていきます。
■KSFの設定
KSF（Key Success Factor）は、KGIやKPIを達成する為に必要な施策などです。
お問い合わせを得る為のLPを作成する、申し込みキャンペーンを行う等、KPIを達成する為に必要な施策を考えていきます。
PDCAサイクルを回す
上記でサイトの目標とそれに対する指標と施策が決まったら、それを実際に行動に移していきます。これを繰り返し行う事で、サイトの問題を改善し、事業の成果につなげて行きます。
具体的には、PDCA（Plan Do Check Action）サイクルを行う事で、改善の改善を重ね、KGIを達成していくのです。大切なのは、「繰り返し」継続していく事です。
例えば、お問い合わせを増やす事がKGIだった場合、KPIはPVとUU、そしてお問い合わせフォームの離脱率だっとします。PVとUUを増やす為に、リスティング広告を掲載し、PVとUUを改善します。更にお問い合わせフォームの離脱率を改善する為にEFOを行い、実際のお問い合わせ数を増やしていきます。
具体的な改善が得られない場合には、再度KPIとKSFの見直しを行います。このサイクルを繰り返し行う事で、KGIを達成していきます。
ウェブ解析で重要な事
Googleアナリティクスをただ導入すれば良いという事はありません。先ずサイトの明確な目標を設定し、その上でGoogleアナリティクスのどの指標が必要か？その数字をどの様に改善していくか、その為には、どのような施策が必要か？それを考えるのが我々ウェブ解析士やサイト改善を行う者の仕事です。これは、WebディレクターやWebデザイナー等その立場に制限はありません。改善提案を行う全ての人に当てはまる事です。
他の仕事でも一緒ですが、何事も、目標を持つという事が重要になってきます。
行き過ぎたフラットデザイン
フラットデザインの普及
Windows8がMetroデザインになり、AppleのiOSが、これまでのスキューモーフィズムデザインから、フラットデザインに方向転換すると、その波はWebのデザインにおいても、爆発的な影響を与えました。
モバイルファーストの考え方が一般化し、それに合わせて、Webのデザインまでもフラットデザイン化が一気に進みました。
レスポンシブにとって、フラットデザインは、CSSだけで定義出来る為、都合が良いのも、要因の一つかもしれません。
フラットデザインの失敗例
しかし、行き過ぎたフラットデザインも増え、見難く使いにくいWebサイトが増えました。
例として、日清グループのサイトを見てみてください。
日清食品グループ
何でもかんでも赤いレクタングルの上に白い文字が乗り、ボタンなのか、ただのアイコンなのか区別が付きません。
ナビゲーションは、赤いレクタングルに白い文字が重なっているだけの、ただの帯に見えます。
これはもはや、デザインではありません。
また、情報量が多いのにもかかわらず、無理に1カラムレイアウトにした為、動線が悪化。
どこになんの情報があるのか？わかりにくくなりました。
試しに、日清グループのサイトから、「明星食品」のオフィシャルサイトへ、リンクを辿って、アクセスしてみてください。なかなか辿りつけず、イライラするはずです。
これは、ナビゲーションなのか？ボタンなのか？リンクなのか？それらは、大きさ、色、目印等によってコントラストの強弱を明確にする必要があるにもかかわらず、全てが同じ色と大きさで強調されてしまい、違いがなくなってしまっている事が大きな要因です。
これは、フラットデザインのやり過ぎの良い例です。時代の流れに合わせて使いやすくUIを改良する事や、意欲的な事はとても良い事です。
しかし、トレンドと捉えているのであれば、それは大きな間違いです。
一方で、非常に上手くフラットデザインを取り入れているサイトもあります。
インテルのサイトでは、全体的にはフラットデザインになっていますが、押せるもの、押せないものの区別を明確にし、また、動きも取り入れており、マテリアルデザインの良い見本になっています。テキストや写真も見やすく調整されているのもわかります。
Webデザインとは何か？
そもそも、Webにおいてデザインとは何か？原点に帰ってみる必要があるようです。
その、シンプルな答えは「情報伝達」のはずです。
閲覧者に情報が正しく伝わるか？一つ一つの要素にそれが求められるはずです。
ではWebの要素とは何か？htmlの構造上、テキスト、画像（メディア）、リンクの3つになるはずです。
ですから、これはテキスト、これは動画が再生される、これはリンク、それらが正しく伝わらないと、Webの定義が崩壊してしまう訳です。
逆を言えば、たった3つの要素しかない訳ですから、この3つが明確になってさえいれば、Webの定義が守られ、閲覧者にとって自然と使いやすいサイトになるはずです。フラットデザインを取り入れた場合でも、同じです。
デザインにエフェクトは必要か？
基本的には、必要だと考えます。それは、人間の目から伝達された情報を脳で理解する限り、その認識とマッチする様に、合わせる必要があるからです。影が付いていれば、立体的に見え、他の平面上の物とは違った物体であると、認識する訳です。この脳の仕組みを使わないほうが不自然で手間なのです。
この事は、スキューモーフィズムデザインにも言える事です。現実世界に存在する物体の形状を再現する事で、それがそのように動作する、具体的には、影の付いた四角い描写が、押す事が出来そうな「ボタン」に見える訳です。これはアフォーダンスとも言えます。下の図を見て、押せそうなもの、そうではないものはどれか？ひと目で明白だと思います。
この事はGoogleがフラットデザインを取り入れつつも、WebやアプリのUIをマテリアルデザインに移行している事実を見れば、明らかです。
また、クライアントの要望や、事業、コンセプト等にデザインのテイストに合わせた時に、フラットデザインだけで合わせる事は難しいと言えます。かっこ良くとか、可愛くとか、技術思考的なデザインとは全く異なる、クライアントがWebで表現したい要望というものが出てくるものです。その場合には、表現力の低いフラットデザインが必ずしも正解とはならないはずです。閲覧者だけでなく、クライアントのニーズも満たす必要があるわけです。
いつの時代も、トレンドに左右されず、全ての人にとって、使いやすい恒久的なサイトにする。それが我々の使命なのです。
サイトの表示速度を向上し、Google PageSpeed Insightsで高得点を獲得する
サイトの表示速度は重要か？
サイトの表示速度速度は、早ければ早いほうが良いです。
特に、初めて訪れるサイトの場合、何分も待たされる事ほど、イライラするものはありません。
また、表示速度が遅い場合、Googleアナリティクスの直帰率の増加にも繋がります。
通 信データ量を減らし、表示速度の改善に貢献する事は、スマホ等のモバイルデータ回線でも、サイトを早く表示する事ができる訳ですから、モバイルユーザに とっても、優しいサイトになります。もっとかっこいい事を言えば、データ通信の量が減る訳ですから、ISP業者のルーターやホスティングのサーバー等と いった通信機器に関わる部分の電力エネルギー削減にも繋がりますから、地球環境にも優しい、という事にもなります。
表示速度の測定方法
サイトの表示速度の測定方法には、Googleが提供する「PageSpeed Insights」があります。
サイトのURLを入力して測定を行えば、数秒でその結果を100点満点中何点という指標で表示してくれます。また、改善が必要なポイントと、その解決方法を提案してくれますから、何度も測定しながら、表示速度の改善を行う事が出来ます。
表示速度を改善する方法
具体的な、表示速度の改善方法は、下記の通りです。
1. 画像を圧縮する。
多くの場合は、画像のファイルサイズが無駄に大きい事が、サイトの表示速度を遅くしている原因になっています。画像を適正に圧縮し、ファイルサイズを小さ くすれば、データ通信量が減りますので、表示速度の改善に繋がります。jpg等の非可逆圧縮の場合、圧縮する事でファイルサイズが軽くなる分、画質が劣化 していきますから、画質を確認しながら、適正値を探す必要があります。Photoshop等の画像加工ソフトを使用している場合、Web用に保存オプショ ンを使い、画質は80～96の間で調整します。解像度は必ず、72か96dpiに設定します。pngの場合には、ロスレス圧縮を行います。無償のアプリ ケーションがありますので、それらを活用します。
2. htmlやCSSのソースを綺麗にする
不要なコメントが、沢山入っていないか？確認します。
ま た、改行やインデントも、人間の目からは見やすくなりますが、多くなればなるほど、単純にデータ量が増えます。ブラウザやクローラーからすれば、全て不要 なものです。不要なコメントや改行は削除し（ミニファイ化）、出来る限りシンプルなコードに直します。また、CSSに関しては、メニュー等、スプライト表示できるものはス プライトを積極的に使用し、画像のリクエスト数を減らす努力を行います。
3. エラーが出ていないか調べる
画像やCSS等の、外部ファイルの読み込みエラーがないか、調べます。
また、jQuery等のフレームワークを使う機会が増えましたが、JavaScriptエラーは、サイトの表示速度の低下ばかりでなく、ブラウザクラッシュの原因や、信頼性の低下にも繋がりますので、なるべくエラーがなくなるように修正します。エラーが出ているかどうか確認するには、FirefoxやChromeブラウザに搭載されている、デバッガ等を使用します。
4. サーバー圧縮を有効に設定する。
サーバー側からブラウザへデータを送信する際に、データの圧縮を行い、データ量を減らす事が出来ます。具体的には、Apacheのmod_deflateオプションを「.htaccess」で設定し、gzip圧縮を有効にします。ブラウザがサーバー圧縮に対応している必要がありますが、現在リリースされている、最新のブラウザであれば、対応しています。
mod_deflate - Apache HTTP サーバ バージョン 2.2
上記のページを参考にしながら、.htaccessへ、追記していきます。上記に記載した、Apache公式サイトの記述を参考に、下記のように追記すれば問題ありません。
SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \
\.(?:gif|jpe?g|png)$ no-gzip dont-vary
Header append Vary User-Agent env=!dont-vary
5.ブラウザキャッシュを設定する
ブラウザのキャッシュ機能を有効にし、更新頻度の少ない画像等のファイルに関しては、ブラウザでキャッシュしているデータを使用し、通信データ量を減らします。Apacheのmod_expiresを使用します。
mod_expires - Apache HTTP サーバ バージョン 2.2
上記のページを参考に、mod_deflateと同様、.htaccessへ追記します。
ExpiresActive On
ExpiresByType text/html "access plus 1 hours"
ExpiresByType text/css "access plus 1 hours"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
6. サーバーのスペックやプランを見直す
大体の場合、サーバーはホスティング会社の共有サーバーを使用していると思います。サイトの表示速度は、サーバーのスペックに大きく左右されます。どんなに画像の圧縮や設定を細かく行っても、サーバーからの応答が遅ければ、意味がありません。サーバーのスペックやプランを見直し、より上位のプランがあれば、それに変更します。場合によっては、ホスティング会社そのものを変更するのも良いと思います。プランを変更するより、ホスティング会社を変更する事で、同じ料金、同等のプランでも差が出る場合があります。
サイトの表示を早くする事のまとめ
これらの設定を行う事で、Google PageSpeed Insightsで90点台の高得点を出す事も可能です。
サイトの表示を早くする事は、サイト提案時やリニューアルする時、余り話題には上がりませんが、サイトの表示速度が早ければ、ユーザビリティが改善され、またSEOにも有利になる為、可能な限り早くする努力は必要です。
実際に私が施策を行い、ページの冒頭で掲載している画像の、Google PageSpeed Insightsで90点をマークしたサイトのURLを掲載しておきます。実際にアクセスすれば、サイトの表示速度の早さが確認できるかと思います。
Google PageSpeed Insightsで、90点を目指しましょう！
既存サイトのレスポンシブ化について
既存のPC表示デザインはそのままに、レスポンシブを追記する
様々なサイトのレスポンシブ化を今やっています。
勿論、Googleモバイルフレンドリーへの対応の為です。
既存のサイトのPC表示のデザインはそのままに、CSSにブレイクポイントを追記、スマホ表示で調整して、レスポンシブ用のレイアウトを追加している感じです。
Htmlのマークアップが最初から綺麗に書けていれば、基本的には追記だけで済みますから、既存のサイトをレスポンシブ対応にする事自体は、さほど難しくありません。
ただ、マークアップが上手に出来ていないサイトでは、事前の手直しに、かなりの手間が、掛かります。
例えば、下記のような要因があります。
レイアウトに使用するブロックタグの定義がきちんと出来ていない
例 えば、一番外側のDivには「wrapper」、ヘッダには「header」、コンテンツ部分は「content」、メインカラムには「main」、フッターには「footer」ですよね？
これ、常識だと思っていたのですが、色々なサイトを手直ししていると、これが 全く異なっていたり、ひどい場合、定義ができておらず、ページ毎に独自のクラスを使ってしまっている事があります。
これは、事前に統一し、CSSを調整する必要があります。
不要なセレクタが多すぎる
ページ毎にセレクタを増やしてしまい、CSS上は同じ定義なのに、微妙にクラスが異なるセレクタがいくつも存在していたり。
無駄なコードは通信の浪費になり、サイトの表示速度の低下の原因になりますので、全部綺麗にまとめて、不要なものは取っ払ってしまう必要があります。
もし、ページごとに同じクラス名を使用して、少しだけデザインを変えたい場合、むやみにセレクタを増やさず、きちんとbodyタグやcontentタグに、セレクタを追加して、スマートに分岐させましょう。
レイアウトにテーブルを使いまくり
これは、言語道断ですね。
テーブルは、必要な部分に、必要最小限で使えば、使ってはいけない、というものではありません。
しかし、未だにレイアウトの為に使用していたり、全体のサイズをピクセルの固定値で指定したり、スペースを空ける為に、不要なtdを入れまくる、これは本当に良くないですね。
基 本テーブルのwidthは100%に。不要なtdは使わずCSSで調整。そうしておけば、レスポンシブ化した際に、trやtdをブロック化して横一列に表 示させたり、cssでtable-layoutをfixedにすれば、綺麗に均等にスマホの画面でも、テーブルが表示されます。
そもそも正しいマークアップやコーディングが出来ていない
テキストと画像は普段から、ちゃんとpタグ（ブロックタグ）で囲みましょう！
ヘッダ付近には、ちゃんとリンク付きで、h1を入れましょう！
見出しタグを順序良く、正しく設定しましょう。
メニューにはliタグを使用し、CSSスプライトでボタンを作りましょう！
基本レイアウト（構造）にはid、入れ子になる子要素にはクラスです！
brでスペースや段落調整するのは、直ぐに止めましょう！
サイドバーの内容は、ソースの最後に、CSSでmainの左右にfloatさせましょう！
フッターにはちゃんとリンク入れましょう！キーワードも大切です！
コンテンツ内の文章中（テキスト）に不要な改行コード（brではない）は入れない！一行で書く！
インデントは規則性を持たせて、綺麗にしましょう。
画像には、キーワードを意識した文章をaltに入れましょう。
大切なのは何事も、結局「基本」です！
誰が見ても解りやすく、綺麗なマークアップは、間違いなく情報も整理されているはずです。
また、Googleのクローラーからみても、情報の収集がしやすくなるはずです。
統一性がなく、不要なコメントだらけ、インデントがバラバラの汚いソースでは、表示速度のパフォーマンスが落ちますし、何より、自分が編集する際に一番、困りますよね？
一部参考ですが、下記のサイトで綺麗に調整したので、ソースを見てください。
ブライズガーデンさんは、デザインも僕が手掛けています。
レスポンシブといっても、幅の狭いブラウザで表示した場合のデザインを記述するだけの事ですから、難しく考えず、基本を押さえて、コーディングしていきましょう。
