「WEBサイトリニューアル提案のプレゼンの質を高めたい」
「WEBサイトのリニューアル提案が通るような企画書を書きたい」
「説得力のあるWEBサイトリニューアル提案がしたい」
WEBサイトのリニューアル構想時には、規模の大小に関わらず企画書を書きプレゼンをすることがほとんどだと思います。社内ではもちろん、制作会社から提案する場合もあると思いますが、まずは「問題点があるからリニューアルしましょう」と伝えて了承を得ないと始まりません。
説得力のある提案には、数字や、問題点の可視化（見える化）、そして臨場感（リアルさ）が不可欠です。
現状のWEBサイトがどうなっているかを見せて納得してもらうわけですが、説得材料となる数字やビジュアルを準備するのはなかなか大変な作業です。
しかし、ツールを使えば、本当に一瞬で説得材料を増やせます。
そこで今回は「このような状態になっている」と伝わるプレゼンのために、使えるチェックツールをご紹介します。
ツールを選んだ基準は以下の通りです。
○無料
○インストールの必要なくブラウザで使える
○ログイン不要
○スクリーンショットしたときのビジュアルがよい
○プレゼン現場で使える
そのままスクリーンショットしたり、プレゼン現場で実際に動かしたりできれば、作業時間がかからないですし、提案にも客観的な視点とリアルさが生まれて説得力が増します。
英語のツールもありますが、この記事通りに操作していただければ、誰でも使えるものばかりですので、安心して使ってください。
１．ブラウザ対応状況がわかる「Can I use」
「Can I use」は、CSSプロパティのブラウザ対応が一覧で見られるツールです。
IE、Edge、Safari、Chromeなどの主要なブラウザはもちろん、スマホブラウザまでチェックできます。
古い記述があるWEBサイトであれば、「今の記述だと表示されていない人がいます」と提案できます。
https://caniuse.com/
調べたいプロパティ名を検索ボックスに入れると、すぐに下に結果が出てきます。
WEB制作の知識のない方にCSSのプロパティと口頭で話しても伝わりませんが、「これだけ見えていない人がいる」と言えば、すぐ理解してもらえます。
ちなみに、この表示結果の見方は以下のとおりです。
緑＝Supported＝［OK］
赤＝Not supported＝［サポートされていない］
黄緑＝Greenish yellow = Partial support＝［一部サポート］
Gray = Support unknown＝［不明］
同じ画面上で、どれくらいの人に影響が出ているかもわかります。
Globalと出ている部分ですが、緑で書かれた数字が影響を受けない人、このCSSプロパティが問題とならない人です。この割合を検討材料とすることができます。
提案時はもちろん、制作のタイミングで「この書き方、気をつけないといけないんだったかな」とちょっと思ったときに調べられて便利です。
2．デバイス毎の表示確認ができる「Screenfly」
主にレスポンシブのチェックに使えるツールです。
スマートフォン、タブレット、デスクトップPCなどさまざまなデバイスの表示が一度にチェックできます。レスポンシブ対応していないページが一目瞭然です。
https://bluetree.ai/screenfly/
URLを入れて、GOボタンを押せばOKです。
iPhoneだけでも5〜XRまで、そのほかのスマホも主要な機種はフォローされています。
提案時には出席者のタブレットやスマホの機種名を聞いて、それぞれの表示をリアルで見せるとより納得感が高まると思います。
機種名と同時に解像度も表示されます。
制作時には、例えば「私のタブレットから見たときに表示が変です」などと指摘を受けたときは、その機種名を聞いてチェックしてみると確認が取れます。
ちなみにタブレット表示は横にした時、縦にした時も1クリックで変えられるのですごく便利です。
プレゼンの場で「Screenfly」にアクセスし、ぜひ動かしながらプレゼンしてみてください。サクサク軽く動くので、流れを妨げることもありません。スクショではなく、リアルに動くとすごく臨場感があります。
３．リンク切れチェックができる「Dead-link-checker.com」
リンク切れは運営歴が長いWEBサイトほど自然発生するもの。
ただ提案時に一つひとつ手動で確認するのも大変なので、ツールを使って数字を出しましょう。
http://dead-link-checker.com/ja/
ページ数が多いと最終結果が出るまでに時間がかかりますが、URLを入力してチェックボタンを押した後にリンクの切れたURLがドンドン流れるように表示されるのは圧巻です。プレゼン時に数十秒見せるだけでも、説得力があるでしょう。
そのほか保守契約の提案のときも「こういったリンク切れチェックを必ず行い、お知らせします」と伝えるとよいですね。
４．ページの表示速度チェックができる「PageSpeed Insights」
近年ではSEO対策としても重要な施策であるWEBサイトの表示速度。
Googleが提供している「PageSpeed Insights」では速度チェックと、改善策が表示されます。
https://developers.google.com/speed/pagespeed/insights/?hl=JA
ブラウザで開き、URLを入れてチェックボタンを押すだけ。
すぐに結果が出ます。色分けされた結果が表示され、「何ができていないか」が明確に示されます。
SEO対策を強化するのであれば、今やページ速度の数値改善は必須。Googleの公式ツールを使うことで、リニューアルでは速度改善もしなければSEO対策上問題があることを伝えやすいです。
（※WordPressで構築したサイトであれば、プラグインの導入で速度改善が可能です。あまりコストがかけられないのであれば、この方法をお試しください。過去記事：WordPressのページ表示速度の改善に効果があったプラグイン3つ）
５．HTMLのマークアップチェックができる「Markup Validation Service」
HTMLのマークアップはGoogleなどのクローラーに対して、WEBページに記載している内容を正しく理解してもらうために必要な技術です。破損したページがないかチェックできます。
表示がおかしいWEBサイトのリニューアルの場合、「正しい記述ができていない」ことを客観的な分析結果からわかってもらい、「正しいマークアップをしてエラーのないWEBサイトへ作り変えましょう」と提案したいですね。
Addressの枠にURLを入れて、Checkをクリック。
ブラウザ上に結果が出てきます。
はっきりとError、warning、数字と赤色で表示されます。
Googleの検索結果の変動にはこの文法のエラーは関係がないとされていますが、SEO以外のメリットがありますので、チェックして改善したほうがよいです。正しい記述をすることでどのページもHTMLタグの書き間違いがないことが証明されますし、WEBサイト制作後に引き継ぐ場合にもきれいなソースで記述しておけばトラブルのリスクが少ないです。
６．SEO対策面からページを評価する「高評価」
WEBページのSEO対策について点数で評価が見えるツールです。
基本的な部分に抜け落ちがないかなど、足りない部分の発見にも使えます。
https://ko-hyo-ka.com/
URLと、順位チェックしたいキーワードを入れて「チェック」を押します。
数字の評価と、改善するべきポイントとアドバイスが表示されます。
できていないことが明確になるので、リニューアル着手時もこのチェックされた項目を直していけるので非常に役立ちます。
７．マルウェアなど感染セキュリティチェック「VirusTotal」
Googleの子会社が運営している、URLからマルウェア検査ができるツールです。スキャンするだけで除去できるわけではないですが、危険があるかないかが明確になります。
https://www.virustotal.com/gui/home/url
さまざまなウイルス対策ソフトでチェックされ、その結果が表示されます。
もし危険なページが見つかれば、「対応しましょう」と提案できます。
結果がClean（問題なし）であっても、「セキュリティ的には問題ないですね」と信頼感のある情報共有ができます。
このチェックツールはファイルをアップロードしてチェックもできますが、その場合、ファイルの内容を運営側から確認できるので個人情報や機密関連のページはアップしないようにしましょう。URLからチェックするのがオススメです。
８．まとめ
チェックツールはたくさんありますが、WEBサイトリニューアル提案時にはエラー箇所や数字がはっきり出てくるツールを使い、説得感をアップさせましょう。
ブラウザでサクサクと動くツールで実際に見せると臨場感が出て、説得力が増します。スマートなツールを使いこなして信頼感を得るとともに、的確な指摘をしてリニューアル提案をしっかり通して行きましょう！