【制作会社向け】Webサイト納品前に確認したいチェックリスト

WEB戦略に基づくサイトリニューアル成功事例集BeforeAfter比較
今すぐ無料ダウンロード

無料で資料をダウンロード

※フォーム送信後、メールにて資料をお送りいたします。

WEB戦略に基づくサイトリニューアル成功事例集BeforeAfter比較

サイトリニューアル実例を、Before/After比較でご紹介!
 
■こんな方におすすめ
・サイトリニューアルをしようか迷っている方
・どのようなWebサイトの課題がある際に、リニューアルすればいいか分からない方
・実際に、他社がどのようなサイトリニューアルを行っているのか知りたい方
 
■資料内容
・BtoC,BtoBにおける、それぞれのリニューアル実例5種
・各実例における、Webサイトの課題とリニューアル施策内容
 
自社のサイトリニューアルをご検討の方は、ぜひご活用ください!

※フォーム送信後、メールにて資料をお送りいたします。

STEP 1


フォームでの問い合わせが
完了いたしました。
メールにて資料をお送りいたします。

デザイン、コーディングが完了し、いざサイト納品!と、その前に大切な納品前チェックを行います。デザイン通りにコーディングできているか、リンク切れはないか、などサイト納品前のチェックは、特に注意深く行います。

ディレクターはもちろん、デザイナー・コーダーとともに行う厳しいPLAN-Bのチェック項目をご紹介します。納品データの精度を高めたいと考えておられるWebディレクターの方はぜひ参考にしてみてください。

デザイン周辺のチェック項目

デザインチェック

Fixしたデザインとコーディング後のキャプチャを重ね合わせて、デザインを忠実に再現できているか確認します。文字サイズ・太さはもちろん、文字間隔や余白など、隅々まで厳しくチェックします。

表記チェック

表記ゆれがないか、スペルミスがないかをチェックします。クライアント様ご指定の表記ルールがある場合は、特に注意深くチェックします。

ダミーチェック

制作過程にダミーとして入れていたテキストがないかチェックします。またご提案の際に、素材サイトから当てはめたダミー画像がないかどうかも再度確認します。


コーディング周辺のチェック項目

ブラウザチェック

ブラウザによって表示崩れや動作不良が起きることがあるため、ブラウザチェックもきっちり行います。近年ではスマートフォンやタブレットの普及に伴い、確認する端末の種類も年々増えています。

案件によってチェック項目は異なりますが、PLAN-BのPC、スマートフォンの動作環境基準の一例をご紹介します。

レスポンシブサイトの場合、スマートフォン実機での確認はもちろん、PCでブラウザ幅を縮めたり、広げたりして、レイアウト崩れがないか確認します。

バリデート

コーディングしたHTMLやCSSが要求された仕様にそって適切に記述されているのかをソフトウェアで確認します。

誤った記述がある場合、エラーが返ってくるため、修正して再度確認を行います。そうすることでW3C(※)に準拠したHTMLに近づきます。

※W3C:ティム・バーナーズ=リーによって創設された、HTMLやXMLをはじめとするWWW(World Wide Web)で利用される様々な技術の標準化を推進することを目的とした非営利団体の名称です。

リンクチェック

リンク切れがないか、ページ内リンクは意図した通りリンクしているかチェックします。全てのページで共通して読み込むヘッダーやフッターは1ページのみ、その他のページについては、ページごとにチェックします。

サイトのボリュームが多い場合、人的チェックだけでは漏れる恐れがあるため、リンク切れを確認するツールを利用することもあります。

404ページ

リンク切れなどで、アクセスしたページが存在しなかった場合に表示されるエラーページが正しく動作するのか確認します。


フォーム周辺のチェック項目

バリデーション

未入力項目があった場合に、正しくバリデーションが動作しているか、確認します。

フォーム

フォームの確認画面、完了画面に正常にページ遷移するか確認します。

自動返信メール

ユーザー宛て、管理者宛てそれぞれに、フォームからメールが正常に届いているかを確認します。

クライアント様テスト

クライアント様にもフォームのテスト送信を行っていただき、最終確認を行います。


SEO周辺のチェック項目

metaタグ情報

各ページに適したタイトル、ディスクリプション、キーワードが設定されているのか確認します。検索でヒットさせたいキーワードを必ず含めること、そして各ページに適したユニークな文言を入れることが必須となります。

h1

大見出しh1は、検索順位に比較的強く影響するため、SEOを考慮した見出しをSEOチームと連携して進めます。

alt属性

alt属性には、各画像の説明を記述します。画像が表示されない場合、alt属性の記述内容が表示されます。ただし、あまりにもキーワードを詰め込みすぎず、その画像のポイントを抑えながら記述するようにします。

またalt属性にわかりやすいキーワードを入れておくことで、Googleの画像検索のような検索エンジンからの流入も期待できます。

XMLサイトマップ

検索エンジンがサイト内のURLを集めやすくするため、URLを一覧で記述したxml形式のファイルをサーバーに設置できているか確認します。

robots.txt

サーバーに設置した、XMLサイトマップのファイルの場所をクローラーに明示します。そうすることで、クローラーのサイト全体の巡回速度の向上と、最新の状態の評価が検索結果に反映されやすくなります。

canonicalの設定

「www.」の有り無し、「/index.html」などの有り無しなどで重複コンテンツとみなされないように、canonicalタグの設定を行います。 ※htaccessによるURLの正規化を行う場合もあります。

また、レスポンシブサイトではなく、PCサイトとスマートフォンサイトを別々に制作する場合、canonicalタグを正しく設定できているか確認します。


導入タグ周辺のチェック項目

解析ツール系タグ

GoogleAnalyticsなど、クライアント様指定のタグが埋め込まれているか確認します。問い合わせ数・資料請求数などを計測する場合は、コンバージョンの目標設定が正しく行えているのかも確認します。

コンバージョン計測系タグ

問い合わせフォームのサンクスページなど、コンバージョンページにタグが埋め込まれているか確認します。

例:Google Adwords コンバージョンタグ、Yahoo! プロモーション広告 スポンサードサーチ コンバージョンタグ、Yahoo! プロモーション広告 YDNコンバージョンタグなど

リマーケティング系タグ

リマーケティングのリストを集めるためのタグで、全ページにタグが埋め込まれているか確認します。

 例:Google Adwords リマーケティングタグ、Yahoo! プロモーション広告 YDNリターゲティングタグなど

また、タグを一元管理できるツールとしてGoogleタグマネージャとYahoo!タグマネージャがありますが、Googleタグマネージャの場合、2016年11月にコードの設置場所が変わったため、特に注意して設置します。

以前はscriptタグとnoscript タグを<body>直下に設置していましたが、新しいコードの設置場所は、scriptタグを<head>内に、noscriptタグを<body>直下に設置します。


リダイレクト周辺のチェック項目

リダイレクト

Webサイトのリニューアルの場合に、古いURLから新しいURLに自動的に移動させる処理を行い、正しく動作するのか確認します。


その他

favicon

ブラウザのタブに表示される小さいアイコン(favicon)が設定されているか確認します。

Open Graph Protocol(OGP)

SNSでコンテンツがシェアされた時に、そのページのタイトル・概要・アイキャッチ画像が表示されるか確認します。サイトリニューアルの際は、新しいOGPが認識されるよう各ページにデバッカーを通していきます。


ホームページを制作する方法には様々なものがある

ホームページを制作する方法には様々なものがあり、どの方法を活用すれば良いかわからないと悩む方もいらっしゃるかもしれません。ここでは、ホームページを制作する方法について詳しく紹介します。

有料ソフトを使用して制作する

まずは、有料のホームページ制作ソフトを活用する方法です。ホームページ制作ソフトは制作にまつわる機能に特化しているため、直感的に制作できます。導入には費用がかかってしまいますが、自社の運用に最適なソフトを導入することで、効率的にホームページを制作できるでしょう。ここでは、代表的なホームページ制作ソフトであるホームページビルダーについて詳しく解説します。

ホームページビルダー

ホームページビルダーは、ウェブサイトやホームページを簡単に作成できるツールです。プログラミングやデザインの知識がない初心者でも、直感的なインターフェースを通じてテンプレートを選択し、テキストや画像を追加・編集することができます。

ホームページビルダーは、ドラッグ&ドロップで、リアルタイムでコンテンツを配置・編集することができます。多くのホームページビルダーはレスポンシブデザインに対応しており、異なるデバイス(スマートフォン、タブレット、PC)で自動的に適切な表示を行います。これにより、素早く見栄えの良いウェブサイトを作成できるため、個人ブログからビジネスサイトまで幅広く利用されています。

無料ツールを使用して制作する

昨今は、オンライン上で無料で利用できるツールも多数存在します。そちらを活用すれば、有料ツールを活用するよりもコストを削減できます。ただし、有料ツールよりも操作性が落ちてしまうケースがあるため、有料・無料に関わらず、自社にとってどのツールが最適かを選択する必要があるでしょう。ここでは、代表的な無料ツールを3つ紹介します。

Wix

Wixは、ユーザーフレンドリーなクラウドベースのウェブサイトビルダーサービスです。プログラミング知識がない人でも簡単にウェブサイトを作成できます。また、豊富なテンプレートを選択し、ドラッグ&ドロップでコンテンツや要素をカスタマイズできます。

そして、Wix App Marketからアプリを追加してウェブサイトの機能を拡張することも可能です。レスポンシブデザインに対応しており、スマートフォンやタブレットからも見栄えが良く表示されます。

Wixは無料プランがありますが、広告表示やドメインなどの制限があります。追加機能を利用したり、カスタムドメインを使いたい場合は有料プランの利用も検討しましょう。

引用:WIX

ペライチ

ペライチは、ユーザーフレンドリーなインターフェースで簡単にウェブページを作成できるプラットフォームです。専門知識やプログラミングの必要性がなく、ドラッグ&ドロップでコンテンツを配置し、テンプレートをカスタマイズすることができます。

豊富なテンプレートやデザインオプションが提供されており、レスポンシブデザインに対応しているため、スマートフォンやタブレットでも見栄えが良いサイトを作成できます。SEO対策やGoogle Analytics連携など、ビジネスの拡大に必要な機能も提供されており、 ウェブサイト制作で機能不足に困ることはないでしょう。

引用:ペライチ

Google Sites

Google Sitesは、Googleが提供するウェブサイト作成ツールです。ドラッグアンドドロップでウェブサイトを制作できるため、プログラミングの知識がなくても誰でも簡単にウェブサイトを構築できます。

また、Googleとのシームレスな統合があり、Googleドライブやカレンダー、マップ、YouTubeなどのコンテンツを簡単に埋め込むことができます。モバイルフレンドリーなデザインで、スマートフォンやタブレットからも視覚的に魅力的なサイトを表示できます。Google Sitesは非常に便利で、アクセス数などにこだわりがないのであれば、Google Sitesを活用するのがおすすめです。

引用:Google Sites

HTML・CSSを使って制作する

HTMLとCSSを使用してウェブサイトを制作する方法は、ウェブサイトを制作するうえで最も基本的な方法です。HTMLでタイトル、段落、画像、リンクなどの要素を配置しし、CSSでデザインやレイアウトをカスタマイズします。

例えば、<div>要素に背景色やフォントを指定したり、<a>要素にホバー時のエフェクトを付けたりして、ウェブサイトを制作している企業は多いです。制作方法は、テキストエディタを活用してコードを入力するだけなので、専用アプリはほとんど必要ありません。ただし、コーディングにおいては豊富な知識が必要なため、ツールを活用するよりも難易度は高くなります。

WordPressで制作する

WordPressは、世界中の多くの人が活用しているCMSで、ウェブサイトを制作するために必要なシステムがオールインワンで組み込まれているプラットフォームです。まずWordPressをホスティングサーバーにインストールし、テーマを選択して外観を決定し、必要なプラグインを追加して機能を拡張することで自分の求めるデザインのウェブサイトを制作できます。

投稿やページの作成は、直感的に利用できるエディタで作れるため、専門的な知識も必要ありません。WordPressの強みは、拡張性と使いやすさにあり、ビジネスサイト、ブログ、eコマースなどさまざまなタイプのウェブサイトを簡単に制作できます。

まとめ

以上が納品前に行う基本的なチェック項目です。プロジェクトに応じては、上記に追加してチェックすることもあります。

PLAN-Bでは、ミスや不具合のないWebサイトをクライアント様に納品するため、ディレクター、デザイナー、コーダー複数名でのチェック体制を徹底しています。

このように、チェック体制を強化し、精度の高い納品物を治めることで、クライアント様から信頼していただくことにも繋がっています。これらの納品前のチェック項目を、是非、参考にして頂ければと思います。