【ネットショップ 「売れる」デザイン・演出テクニック】連載35 ウェブフォントの活用

  • 定期購読する
  • 業界データ購入
  • デジタル版で読む
長山衛氏

長山衛氏

デザインを行う上でイメージを大きく左右するのがフォント。中でも苦労するのがテキストフォントの互換性です。
 今まではOSにインストールされたフォントを使用するのが主流でしたが、ユーザーの環境によって見栄えが変わってしまうことが難点。そこで、ユーザー環境に左右されないウェブフォントを使ってデザインの統一化を図りましょう。


メリットとデメリット

 例えば、デザイナーが意図したフォントをユーザーごとに統一して表現しようとする場合、画像としてデザインを行うことが主流ですが、それゆえにSEOに不利だったり、加筆や修正が加わった際、編集の手間がかかっていました。
 しかし、テキスト化することでこれらの点が大幅に改善できます。データ量の膨大さから日本語対応しているフォントが少ないことや、バイト数の大きいウェブフォントの場合は読み込みに時間がかかることが指摘されていますが、これらの問題も徐々にクリアになりつつあるため、デザイナーとしては、ぜひ使用してみることをお勧めします。


活用するには?

 一見すると難しいと思われがちですが、使用方法はいたってシンプル。
 手順は次の通り。
 (1)使いたいフォントを見つける(2)CSS3の@font―faceでフォントファイルを指定(3)CSSでWEBフォントを適用させる─という流れです。
 さらにグーグルが提供している「Google Web Fonts」を使えば、前述の利用方法とほぼ同様かつ、フォントファイルをアップロードする手間が省け直感的に使用が可能です。
 テキスト化することで作業効率アップにつながり、本来のデザイン意図がユーザーに伝わることでデザイナーのモチベーションも高まります。
 さらにページを閲覧したユーザーも統一感のあるデザインは気分が良いものです。
 海外のECサイトでは、アイコンのウェブフォントを作成するサービス「Symbolset」などは、ウェブフォント提供サービスだけにサイト上がウェブフォントを活用しています。
 また、読み込み速度が向上するのでスマートフォンなどモバイルデバイスの需要が大きいECサイトでは、徐々に日本語ウェブフォントが充実してくるため、今後検討してみるといいでしょう。
 ウェブフォントを積極的に活用してデザイナーとしての表現の幅を広げていきましょう。(月1回掲載)


〈著者プロフィール〉
 長山衛(ながやま・まもる)氏
 某大手食品ECサイトで運営を手掛けた後、08年10月にECサイトの運営代行などを手掛ける株式会社ネットショップ総研を設立。
 11年11月に「食品ネットショップ『10倍』売るための教科書 リピーターを確実に増やす商品プレゼン77のテクニック」(日本実業出版社)を上梓。

記事は取材・執筆時の情報で、現在は異なる場合があります。

「売れる」デザイン・演出テクニック 連載記事
List

Page Topへ