デザインテンプレートを使ってるのにデザインが崩れがちな人が注意すべきこと

EC構築サービスのほとんどがデザインテンプレートを多数提供していて、ユーザーはテンプレートを選択することで簡単にデザインが変えられるようになっています。なかには有料のものもありますがだいたいどこのサービスでも無料版テンプレートがあります。

好みのテンプレートを選んだにも関わらず、サイトを作り込んでいくとテンプレートサンプルで見たイメージと全く異なるものになってしまっていることがあります。そういった人が注意すべきポイントがあるのでご紹介します。ECでは特に崩れた印象を与えやすい 商品一覧 を例にお話します。

画像の大きさや縦横比を統一する

商品画像を手配した際、大きさや縦横比がバラバラになっていたとします。その画像たちをそのまま登録してしまうと、それだけで商品一覧の統一感が損なわれ、全体的に崩れた印象を与えてしまうことがあります。画像の大きさや縦横比はテンプレートサンプルで使われているものと同様のサイズに統一して登録するのが無難です。画像加工ツールを持っていない場合は↓こういったウェブサービスを利用したりして統一しましょう。

Web Resizer - Making Photos Faster - Optimize pictures for websites and email

画像のスタイルを統一する

画像内の商品の背景を統一したり、画像のサイズに対する商品の位置やサイズを統一するのも重要です。これがバラバラなだけでかなりくずれた印象を与えてしまいます。よくわからない場合はテンプレートにはめられている画像のスタイル（背景、商品レイアウト、商品サイズ）を真似て統一しましょう。最低限同一カテゴリーの商品は画像のスタイルを揃えておいたほうがお客様に商品比較がしやすい印象を与えられるのでやっておくべきです。

↓画像のスタイルが統一されている例

↓画像のスタイルが統一されていない例

文字のスタイルを統一する

テンプレートで使用されている文字のスタイルを変更すると途端に印象が悪くなったりします。フォントを変更したり、太字にしたり、文字間・行間を調整したり。テンプレートの印象を形作る重要なポイントなので極力変更しないことをおすすめします。

もし、テンプレートサンプルが英字で構成されていた場合は要注意です。日本語を入れただけで雰囲気が変わってしまいます。その場合はせめて文字の太さや大きさを元々の英字の雰囲気に合わせて調整しましょう。

社内のデザイナーに聞いてみたところ、 漢字を使うと英字と比べて空間が埋まってしまって重たい印象になってしまう とのこと。そのため日本語を入れるにしても極力文字をひらいて ひらなが にしたり、文字サイズを落としたり（英字のほうが同じフォントサイズでも小さいそうです。）、細めのフォントを使用したりするとよいようです。

↓テンプレート上は英字をメインに構成されている

↓日本語にするとかなり印象が変わってしまう

文字数をテンプレートに合わせる

サイト内に配置する文字の文字数を極力テンプレートと合わせた方が雰囲気がくずれにくいです。テンプレートによっては複数行のレイアウトが考慮されていないものもあるので、自身で調整が難しい場合には文字数もテンプレートに合わせておいたほうがいいでしょう。

↓商品名が２行になった結果中央寄せレイアウトの関係でおかしな印象に。

可能であればテンプレートのデモサイトをいじって確認

Google Chromeなど、最近のブラウザは表示しているページの文字や画像を置き換えてみることができます。可能であればテンプレートを採用する前にテンプレートのデモサイトをいじって試してみるとあとあと困ることが少なくなるかなと思います。

初心者向け！Chromeの検証機能（デベロッパーツール）の使い方

まとめ

・画像の大きさや縦横比を統一する
・画像のスタイルを統一する
・文字のスタイルを統一する
・文字数をテンプレートに合わせる

面倒かもしれませんが サイトの顔 を保つためには大事なことなのでがんばって実践してみてください。