失敗しないためのサイトリニューアルのいろは

サイトをリニューアルするにあたり色々手直しする部分は多々あるかと思いますが、時間をかけて行うからにはアクセス数なりコンバージョン(CV)なり、今よりも成果を上げたいですよね。今回はリニューアルで気をつけていることや考え方についてまとめてみたいと思います。

リニューアル目的の確認

まず最初にするべきことは、リニューアルする目的の明確化です。

サイトをリニューアルするからには例えば、「問い合わせを増やしたい」「情報が読みづらい」「デザインを刷新したい」など・・・やはり何かしら理由があると思いますが、やりたいことが沢山出てきた場合、本当に必要なことがぶれてしまいがちなので、より効果的な取捨選択をするためにもまずはここを明確にしましょう。

失敗しないためのサイトリニューアルのいろは

問題点の洗い出し

リニューアルの目的が立てられたとしても、何をどう改善したら良いかふわっとした感じでイメージが掴みにくいことがあるでしょう。その場合は課題をさらに深掘りして、具体的に要素をリスト化するのがおすすめです。

課題例:問い合わせが少ない
  • 導線がメニューにしかない → 導線の追加
  • 目立たない → 色・デザイン・配置の変更
  • 問い合わせまでのフローが遠い → スムーズにたどり着ける様な設計

イメージ作り・類似サイトの調査

課題が浮き彫りになったら、それらの課題が解決できるようにイメージを具体化して行きましょう。0から考えても良いですが以下の様なWebデザインギャラリーサイトを利用して、リニューアル後をどのような印象のサイトにしたいのか他のサイトから勉強することも重要です。
単純に競合サービスのサイトを参考にするのでもいいですし、目的に見合う色味や雰囲気から参考サイトを絞っていくのも良いと思います。

ギャラリーサイトの検索

ギャラリーサイトではカテゴリや色で絞り込めるようになっているためイメージのものが探しやすい

おすすめのWebデザインギャラリー

I/O 3000
失敗しないためのサイトリニューアルのいろは

81-web.com
失敗しないためのサイトリニューアルのいろは

Webデザインに参考になるギャラリーサイトをまとめた記事はこちら

構成・WF(ワイヤフレーム)の用意

一通り要点が見えてきたら、サイト全体のイメージを作りましょう。
具体的にはワイヤーフレーム(WF)と呼ばれるサイトの設計図のようなものを作っていきます。前述の課題点の見直しを踏まえたサイト全体のページ構成を図として用意することでサイトの作成がスムーズになります。

ここで注意したいのは、WFをデザインラフ案として作らないことです。
あくまで情報の配置や強弱、ボリューム感を確認するために用意するものなので、以下の様に、極力デザイン要素は入れず簡素に作る場合がほとんどです。

WFで確認したい要素
  • 情報の配置・構成
  • 情報量(テキスト量や画像の数など)
  • サイズ感(文字サイズ・画像のサイズなど)

失敗しないためのサイトリニューアルのいろは
WFを見る
ワイヤーフレームを用意するのが難しい場合は、BiNDupのブロックテンプレートを使ってレイアウトを組んでいくだけでも良いと思います。

デザインの作成

WFが用意できたところでより細かいデザインを作って行きます。
何をどこに置くかはWFで整理できているので、それに沿って画像などのパーツや素材を配置していきます。

失敗しないためのサイトリニューアルのいろは
デザインを見る

リニューアルに迷ったら?

以上の様な流れでリニューアルを行いますが、思ったように出来上がらない場合、良いと思ったサイトと比べ自分のサイトがどう違うのかよく分析してみましょう。これに尽きます。
同じ様な内容なのであれば、どのように情報を伝えているのか?一度に見せる情報量はどのくらいのか、どういう構成なのか・・・。他のサイトも今お伝えした流れを経て完成されているかと思いますので、良いところと自身のサイトとを比較しうまく落とし込んでみてください。

リニューアルしても、当然ながらすぐに成果に結び付くわけではありません。リニューアル後のサイトをデータ分析して改善を重ねていくことも忘れずに。ホームページ作成サービス「BiNDup」にはサイトを分析できるマーケティング機能「SmoothGrow」があるので、改善のヒントになると思います。

BiNDupでサイトをリニューアルするBiNDの制作事例を見る

[デザイナー厳選] 覚えておきたい おすすめWebフォント30選

見た目や可読性に大きく影響するホントに使える30のWebフォントを、本文から見出し、日本語から欧文まで用途ごとにデザイナーが厳選しました。

今すぐ資料をダウンロード
  • POINT

  • リニューアルの目的と課題を明確にして効果的な取捨選択をする
  • デザインをする前にWFを用意して情報の配置や強弱をチェック
  • 他の良いサイトを手本にして自分が作ったものを何度も分析する

あわせて読みたい