うちの会社のホームページ制作手順を公開 #04 公開編

ホームページの制作で最もテンションが上がるのが、公開するタイミングです。 同時に、「うまく表示できるかな？」という緊張も走ります。 うまく行かなかったときの事も考えて、色々と事前準備は重要です。 また、公開後にドタバタとしたくないのは、誰でもそうだと思うので、公開（ロンチ）前の確認事項などをまとめてみました。

公開（ロンチ）までの確認事項

公開前の段階は、基本的に全ての作業は終わっていて、チェックやテストを行うのが一般的です。 この時に、開発者のみだけじゃなく、クライアントさんや、ホームページ制作に関係している人全てを巻き込んでチェックを行うほうが良いです。 できるだけ多い人数で実際に確認することで、重箱の隅をつっつくような意見が出てくるかもしれませんが、それが目的でもあります。

• サーバーチェック
• 表示テスト
• テキストチェック
• モーションチェック
• 各種機能のチェック

サーバーチェック

サーバーチェックは、公開前だけじゃなく、公開後も頻繁に行うのが好ましいのですが、不具合を見つけるのは公開前に済ませておきたいですね。 公開後のサーバートラブルは出来る限り無いほうがいいはずです。

DNSが行き届いて公開サーバーにアクセス出来る状態になっているか？

DNSは設定を行ってから、浸透するまで時間がかかる為、計画的な設定を行う必要があります。

サーバーのログは正常に取得できているか？

正常ログ(accessログ)だけじゃなく、エラーログ(errorログ）を、どちらも確認しておくことがいいですね。 想定できるエラーを準備するのも非常にいいですよ。

サーバーのエラーは出ていないか？（ログ確認）

エラーログの内容で、想定外のモノが出ている場合は、事前に必ず調査しておいたほうが良いですね。 後々大きなサーバー負荷になりえるかもしれませんから。

アクセスがない状態の時のLA値を事前に把握しておく。

LAはロードアベレージというサーバー負荷を計測する一つの目安になります。 まだ公開していないサーバーのLAの値を覚えておくことで、公開してその値からどのくらい増えているかの基準がわかるようになります。 ちなみに、LAの値は、そのサーバーのCPUの数を超えると、ホームページの表示も遅くなるという事を認識しておきましょう。

SSL/TLSは正常に動作しているか？

sslアクセスをしっかりしておかないと、GoogleのSEOなどで有効に働いてくればいケースがあります。 SSLへのリダイレクト処理なども含めてしっかりと事前設計して、その挙動を確認しておきましょう。

表示テスト

実際のホームページの表示は、ローカル環境からサーバー環境にアップしてみると、思わぬところに落とし穴がある場合があります。 ローカルでは動いていたはずなのに、本番サーバーでは動かないというような事って、意外とアルアルですからね。 絶対パス、相対パスなどのコーディングミスで、画像が正常に表示されないとか、 localhostから実際のドメインアクセスになった時に、ブラウザのセキュリティレベルが上がってしまうので、思いも寄らないアクセスエラーが出る場合もあります。 しっかりと、ブラウザコンソールでエラーが出ていないことを確認しておきましょう。

Stage環境などで公開テストを行う。

stage環境が用意デキない場合は、本番サーバーの中で/stageというフォルダを作って、そこでチェックをするというのも悪くないです。 ファイルだけで構築されているホームページであればいいのですが、wordpress等の場合は、こういう作業ができないのが痛いですね。

画面サイズを確認するために、できるだけたくさんのデバイスで見てみる。

デバイスというのは、パソコンであれば、WindowsやMac、スマートフォンのiPhone、Andwoid、そしてそれらのOSの少しだけ古いバージョンも確認できるとかなりしっかりとしたチェックになります。

特定の状態で正常に表示できるかチェック（ブラウザのナイトモード、シークレットモードなど）

シークレットモードは以外の見逃してしまいがちな確認なので、忘れないようにチェックしましょう。 知らないうちにシークレットモードで使っているユーザーって意外と多いみたいです。

タブレットや、マニアックなデバイスでのチェックもやってみたほうが良い。プレステやswitchなどにもwebブラウザがあるので、見た時に崩れている箇所がないか確認してみたほうが良い。

最近の家庭用ゲーム機などには、インターネットブラウザが付いていて、そこでyoutubeなどを見ることもできてしまいます。 もちろん、いろいろなホームページもURLを入力すれば見ることができるので、見れる環境があれば、見てみることをオススメします。

ブラウザコンソールでエラーが出ていないかチェックする。

ブラウザコンソールエラーは、意外と無視できません。 とにかく、赤字でエラーが出ている状態は無いようにするのが、一般的ですね。

テキストチェック

この段階でテキストチェックを行う必要があるのか？と思う人も多いかもしれませんが、何人かのプロジェクトで行っている場合や、クライアントなどは、この段階で初めて手元のインターネットブラウザで表示するケースも多い場合があります。 そうすると何が起きるかと言うと、事前に内容チェックを行ってもらっているはずが、何となくでしか確認されておらず、この段階で初めて詳細チェックが始まるケースがあります。 そうなると、ここから修正依頼が入ることもあるので、その点も覚悟しておきましょう。

誤字脱字のチェック

公開後に、誤字脱字を見つけられると、自分で書いた文章ではないけど、チェック漏れという風に見られて恥ずかしく感じる場合があります。 誤字脱字を見つけた人は、鬼の首を取ったような感じで騒ぎ立てる場合もあるので、事前に確実になくしておきたいですよね。

改めて全体バランスとしての並んでいる文字を俯瞰してみる。

文字を大きい画面で見渡してみると、なんとなくバランスが悪いことに気がつく場合があります。 できればデザインの段階で気が付きたいのですが、最終チェックとして確認しておきましょう。 cssのエラーの場合もありますからね。

モーションチェック

静的で、あまりアクションのないホームページであれば、問題ないのですが、実際に公開サーバー（stageサーバー）にアップしてみると、スマートフォンなどでチェックができる状態になる場合があります。 ※開発環境でもスマホチェックできますけどね。 その時に、モバイルブラウザで想定していた動きにならないというケースは意外と多くあります。

cssなどで動きをつけた箇所などを、いろいろなデバイスのチェックで見てみて行う。

複数人でホームページ開発をする場合、cssのコンフリクトが発生する場合があります。 設計でしっかりとクラス名ルールなどを決めれば良いのですが、追加機能などでルールが煩雑になってしまう場合があり、結果的に結合した際におかしな表示になる場合もあります。 細かくcssによる見栄えのチェックを行いましょう。

レスポンシブデザインなどの場合はスマホの縦横などの切替もチェックしておきましょう。

レスポンシブデザインは、PCブラウザのサイズをマウスで変更して確認するだけでも効果がありますが、めんどくさがらずに本番でもチェックしておきましょう。

各種機能のチェック

最後に、機能として搭載している内容を一通りチェックしておきましょう。 開発環境のホストアクセスしか受け付けなくなっているAPIなどは、本番でエラーになってしまいます。 一通りの動作チェックは、めんどくさがらずにやらないと、後で自分が困ることになりますからね。

外部APIなどと連携している場合に、正常に動作しているかどうかチェックする。

外部APIのチェックは、一筋縄では行かないものもあるので、チェック方法などはその都度構築する必要がありますので、しっかりとテスト計画を立てておきましょう。

お問い合わせページは、一度送信してみる

お問い合わせページは、もし仮にしっかりと送信されない不具合があった場合に、サイトの機会損失に繋がる可能性もあります。 これは確実にチェックしておきましょうね。

各種機能は一度必ず正常動作を確認するために、登録などをしてみる。

その他の機能に関しても、一度使ってみて正常動作することは最低限確認しておくことで、その後の安心に繋がります。

チェックリスト

サーバーチェック

1. DNSが行き届いて公開サーバーにアクセス出来る状態になっているか？
2. サーバーのログは正常に取得できているか？
3. サーバーのエラーは出ていないか？（ログ確認）
4. アクセスがない状態の時のLA値を事前に把握しておく。
5. SSL/TLSは正常に動作しているか？

表示テスト

1. できれば、stage環境などで公開テストを行う。
2. 画面サイズを確認するために、できるだけたくさんのデバイスで見てみる。
3. 特定の状態で正常に表示できるかチェック（ブラウザのナイトモード、シークレットモードなど）
4. タブレットや、マニアックなデバイスでのチェックもやってみたほうが良い。プレステやswitchなどにもwebブラウザがあるので、見た時に崩れている箇所がないか確認してみたほうが良い。
5. ブラウザコンソールでエラーが出ていないかチェックする。

テキストチェック

1. 公開した直後でいいのだが、書かれている文字に誤字脱字などが無いか際改めてチェックする。
2. 改めて全体バランスとしての並んでいる文字を俯瞰してみる。

モーションチェック

1. cssなどで動きをつけた箇所などを、いろいろなデバイスのチェックで見てみて行う。
2. レスポンシブデザインなどの場合はスマホの縦横などの切替もチェックしておきましょう。

各種機能のチェック

1. 外部APIなどと連携している場合に、正常に動作しているかどうかチェックする。
2. おしらせは、一度送信してみる
3. 各種機能は一度必ず正常動作を確認するために、登録などをしてみる。