本編では「サイトリニューアルの流れ」が分かるよう解説しています。
このページが皆さまの一助になれると嬉しいです。
【はじめに】サイトリニューアルの目的
サイトのリニューアルにおいて重要なことは、現サイトより良いサイトを作ることです。
サイトリニューアルの目的には、
- サイトで果たしたい目的を達成する
- 今ある課題を改善する
- サイトのクオリティやデザイン性を高める
などがあります。
リニューアルをするのに、今のサイトよりも使い勝手が悪いサイトになってしまったり、クオリティや成果が下がってしまっては、リニューアルをする意味がありません。そこで、“ 現在の課題を解決し、成果に繋がる・サイトリニューアルを流れ “ は、以下となります。
【サイト改善】クライアントの要望をヒアリング
サイトをリニューアルする際、まず重要となるのは「的を得たヒアリング」です。ヒアリングする内容には、以下などがあります。
リニューアルの目的
リニューアルの目的を確認します。
ターゲット・ペルソナ
クライアントの顧客について確認します。
競合・他社
競合（ベンチマーク）を確認します。
サイトの目的・役割
サイトで果たしたい目的や、サイトの役割をヒアリングします。
現サイトの良い点・課題
現存しているサイトがある場合は、現在のサイトの課題をヒアリングします。
現サイトで気に入っている、コンテンツや機能・デザインをヒアリングします。
また、日々のサイト運用で困っている点や現サイトでよく使っている機能などを確認します。
配色
拘りの配色（ロゴやサイトのテーマカラーなど）や、必ず使用したい色などがないかヒアリングをします
【サイト改善】競合サイトの調査・他社サイトの調査
サイトをリニューアルする際、重要なのは「入念な事前調査」です。競合サイトの調査・他社サイトの調査を行う際は、以下などを調べます。
全体構造
- サイトの全体構造（サイトマップ）
- 階層構造
- カテゴリ
- 使用している技術 など
ページ構造
- meta（title、description）
- URL
- パンくず
- H1
- サイトコピー
- コンテンツ幅
- ヘッダー（カテゴリ）
- メインビジュアル
- ラベリング（H2～）
- コンテンツ
- フッター
- サイトの特徴（固有の部分） など
【サイト改善】現サイトの調査
現行サイトの調査を行う際は、競合サイトや他社サイトの調査と同じような調査を行っていきます。
全体構造
※競合サイトや他社サイトの調査と同様
ページ構造
※競合サイトや他社サイトの調査と同様
現サイトの良い点を洗い出す
現存しているサイトがある場合は、現在のサイトの良い点を洗い出します。
良いものは、リニューアル後にも実装します。
現サイトの課題を洗い出す
現存しているサイトがある場合は、現在のサイトの課題を洗い出します。
サイトの改善する上で、とても重要な作業です。
【サイト改善】推奨ブラウザ・対象機種の確認
ユーザーやクライアントの閲覧環境やブラウザを確認します。
推奨ブラウザ
以下は、端末ごとの動作が保証されるブラウザの一例です。
| 端末・環境 | ブラウザ |
|---|---|
| PC / Windows | Internet Explorer11、Microsoft Edge、Google Chrome（最新版）、Mozilla Firefox（最新版） |
| PC / Macintosh | Safari（最新版）、Google Chrome（最新版）、Mozilla Firefox（最新版） |
| SP / iOS | Safari（最新版）、Google Chrome（最新版）、Mozilla Firefox（最新版） |
| SP / Android | ※Androidの標準ブラウザは機種によって仕様が異なる為、動作保証対象外。 （機種によっては動作するもの有） |
※対象のブラウザを増やすと、その分費用が増えます。
対象環境（OS / 機種）について
以下は、 対応機種や環境の一例です。
| 環境 | バージョン |
|---|---|
| Windows | Windows 10 以降 |
| Macintosh | MacOS 10.9 以降 |
| iOS | iOS 10.0 以降 |
| Android | Android 5.0 以降 |
各ブラウザのダウンロードページ
今回掲出した各ブラウザのダウンロードページは、以下となります。
以下以外にも多数ブラウザはありますが、メジャーどころを纏めました。
【引用】Microsoft Edge は、Microsoft の推奨ブラウザー。Internet Explorer 11 は廃止、2022年6月15日にサポート終了。 現在使用している Internet Explorer 11 のアプリやサイトと同コンテンツは、Microsoft Edge の Internet Explorer モードで開くことが可能。
Internet Explorer のダウンロード画面より
参考ページ／動作環境・推奨環境について
動作環境や推奨環境について掲出しているページを探してみました。
以下などが参考になるかと思います。
参考ページ／環境やブラウザのバージョンの確認方法
クライアントから時々、環境やブラウザ（バージョン）の確認方法について質問が届くのですが、そんな時に参考になるのは以下のページです。
【サイト改善】デザインの制作前に注意しておくこと
レスポンシブデザインが主流の昨今では、PC・SPのコンテンツサイズやブレイクポイントを制作前に確定しておく必要があります。
コンテンツサイズ・画面サイズ
制作前に予め調査しておくと良いサイズには、以下などがあります。
- 既存サイトのコンテンツ幅
- トレンドのコンテンツ幅・画面サイズ
- 競合他社のコンテンツ幅 など
これらを調査＆参考に、各制作サイズを予め決めておくと、クライアントからのフィードバック（修正指示）が少なくて済みます。
トレンドだからと、1280pxでコンテンツ幅を制作したところ・・・
紙をメインで制作しているデザイナーへデザイン制作の依頼をしたところ・・・
ブレイクポイント
レスポンシブというと、全ての端末で綺麗に見えるものを皆さん想像されますが、実際はブレイクポイントの数でその見え方は変わっていきます。
例えば、PCのデザインサイズが 1366 px・PCのコンテンツ幅 1,000 px・SPのコンテンツ幅 375 px（ 650 px ）のような場合、サイト閲覧時に画面幅を手動で変えると
- 1366 px 以上にすると画像の劣化を起こす
- 999 px ～ 651 px の間でコンテンツが見切れる
などの事象がしばしば起きます。
このような表示崩れを起こさない為には、ブレイクポイント以外のサイズでの動きを予め考慮しておく必要があります。今回の場合では、最低限以下のレイアウトを想定する必要があります。
- 1366 px 以上
- 999 px ～ 651 px
※ブレイクポイントを増やすと、、その分費用が増えます。
※この辺のレイアウト設計は、やや難易度が高いので、別の機会に改めてご紹介します。
フォントサイズ
コンテンツ幅と同様に重要なのは、フォントサイズです。制作前に予め調査しておくと良いサイズ、以下などです。
- 既存サイトのフォントサイズ
- トレンドのフォントサイズ
- 競合他社のフォントサイズ など
フォントサイズは、拘りを持たれているクライアントも多く、後々まで修正に響いてきてしまいます。その為、TOPと下層1頁の段階で、実際のサイズ（実機でフォントサイズ）を確認してもらうと、戻しが少なくて進行もスムーズです。
少し小さめのフォントがトレンドだからと 14 px で制作したところ・・・
【ポイント】サイトリニューアルに向けて「入念な下準備」が必要
よくありがちな「失敗リニューアル」は、デザインにだけトレンドを取り入れたサイトリニューアル…。そのような失敗リニューアルをしない為には、サイトリニューアルに向けての「入念な下準備」が必要です。
入念な下準備とは、制作前にクライアントニーズをヒアリングし、競合・他社の調査を行い、その上で現在のサイトの調査を行うことです。これらの確認が必要理由は、下準備せぬまま制作をするとサイトリニューアルの本当の目的を把握することなく、ただリニューアルするだけとなり、結果「成果の出るサイト」へリニューアルできないからです。
ブランディングの場合は、デザイン性の高さが重要視されますが、そうでない通常のサイトリニューアルの場合は、サイトが果たす役割や目的があるはずなので、その役割や目的をきちんと理解した上でサイト改善を施していかなければ、成果へ繋がるサイトリニューアルは行えません。
より良いサイトリニューアルを行うために、今回ご紹介した流れを参考にサイト改善を図っていくことをお薦めします。
【まとめ／サイトリニューアルの流れ】
サイトリニューアルの流れをご紹介しましたが、いかがでしたか？
不明な点などございましたら、頁下部のコメント欄よりお気軽にお問い合わせください。
サイトリニューアルをお考えの企業様へ
サイトで何かしらの成果を求めるのであれば、以下の流れをきちんと踏んでくれる制作会社を選ぶことをお薦めします。安い制作会社は多数あれど、結局のところは「安かろう悪かろう」です。また、サイトを作って終わりの会社へ依頼すると、残念ながら「見た目だけそれっぽいサイト」が作られるだけでサイトからの成果を望めません…。
成果を求めるのであれば、費用はかかりますが、「サイト公開後、自分化して、運用も一緒に取り組んでくれるような制作会社」へ依頼することが1番です。
新米WEBディレクター＆WEBデザイナーの方へ
これらを参考に、サイトのリニューアル業務を進めると、結果へ繋がるサイトのリニューアルができるかと思います。制作の際に重要なのは、1にも2にも事前準備、手を動かすのはその後です。
