ティーエスフォートブログ

【デザイン解説付】弊社サイトの半リニューアルを行いました

リニューアルイメージ

皆さん、ご無沙汰しております。
今回の記事を担当しますティーエスフォートの橋本です。

最近はpokemon Goで個体値の厳選しかしていないのですが、結構田舎の方に住んでいるのでポッポとコラッタしか出ません。
先日、ガーディの良個体を見つけたので進化を楽しみにしています。
話を戻しますと・・・。
先日弊社のサイトを半リニューアル致しました。
今回の記事ではリニューアルの内容やデザインの解説などしていきます。

 

リニューアルの経緯

今回、弊社のサイトをリニューアルしたのにはいくつかの理由がありますが、最も大きな要因が「適切な導線」です。ヒートマップというツールを弊社のサイトに導入し数ヶ月データを取得したところ、私達が思ったようなユーザー導線になっていなかったのです。ということで、導線の改善を含めデザインのみをガラッとリニューアル致しました。

ヒートマッフ-2

今回のリニューアルでは、ヒートマップから取得したデータやABテストした結果を元に作成しました。
リニューアル前にトップページに存在した豆知識的なコンテンツもスパッと無くしました。導線を改善したことによってリニューアル後すぐに反響があり、複数のお問い合わせを頂きました。ありがとうございました。

 

デザインの解説

リニューアルに伴い、トップページを含むいくつかの下層ページを改修しました。トップページはスマートフォンの解像度から1920X1080フルHDに対応するよう設計しています。
最近は解像度の大きいディスプレイが大きいのでサイト全体の幅もパーセント指定しています。

また、以前に執筆した「WEBデザインで気をつけていること8選」でも書きましたが、今回もいくつかの要素を8の倍数で指定しています。
パソコンなどの機器において8という数字は特別な意味を持つことが多いです。ディスプレイの解像度や一般的なバナーのサイズ・グリッドシステムの基本サイズ等々を考えると、1.2.4の倍数を除き8の倍数が多く存在します。

8の倍数

上記の画像で色分けしているのが8の倍数です。中央部分が可変なので、ほぼそれ以外が8の倍数で余白をとっています。レスポンシブデザインなので、タブレットやスマホ閲覧時も8の倍数を沢山使用しています。

 

まとめ

デザイナーが良いと思って作ったものでも、それが確実なデザインとは言えないものです。
実際にはユーザーが起こしたリアクションや行動などを分析し、それを反映させることでデザインとして完成に近づくものだと思っています。
先日、リニューアルを行ったばかりですが早速ヒートマップでの解析を行い、次回のリニューアルに向けてより良い施策を考えています。

長くなりましたが、今後とも弊社のサイト共々よろしくお願い致します。
以上、ティーエスフォートの橋本でした。

投稿日:2016.08.29
ページ先頭へ