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

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


メリットとデメリット

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


活用するには？

　一見すると難しいと思われがちですが、使用方法はいたってシンプル。
　手順は次の通り。
　（１）使いたいフォントを見つける（２）ＣＳＳ３の＠ｆｏｎｔ―ｆａｃｅでフォントファイルを指定（３）ＣＳＳでＷＥＢフォントを適用させる─という流れです。
　さらにグーグルが提供している「Ｇｏｏｇｌｅ　Ｗｅｂ　Ｆｏｎｔｓ」を使えば、前述の利用方法とほぼ同様かつ、フォントファイルをアップロードする手間が省け直感的に使用が可能です。
　テキスト化することで作業効率アップにつながり、本来のデザイン意図がユーザーに伝わることでデザイナーのモチベーションも高まります。
　さらにページを閲覧したユーザーも統一感のあるデザインは気分が良いものです。
　海外のＥＣサイトでは、アイコンのウェブフォントを作成するサービス「Ｓｙｍｂｏｌｓｅｔ」などは、ウェブフォント提供サービスだけにサイト上がウェブフォントを活用しています。
　また、読み込み速度が向上するのでスマートフォンなどモバイルデバイスの需要が大きいＥＣサイトでは、徐々に日本語ウェブフォントが充実してくるため、今後検討してみるといいでしょう。
　ウェブフォントを積極的に活用してデザイナーとしての表現の幅を広げていきましょう。（月１回掲載）


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