WD Online

課題解決のためのUI実装講座 Web Designing 2016年2月号

Webフォントが普及しても、まだ手放せない画像テキスト(1/2) 画像テキストとWebフォントのメリットとデメリット

近年、日本語フォントでの表示スピードの向上やフォントの種類の増加により、Webフォントを使用するケースが増えてきた。とはいえ、まだまだ画像テキストを使用するケースは少なくない。今回は、Webフォントと画像テキストのメリット・デメリットを説明し、さらに画像テキストを用いたメニューを効率よく実装する方法を解説する。

サンプルファイルダウンロードのご案内
このコーナーで紹介しているサンプルファイルは、こちらからダウンロードできます。ぜひ、サンプルを動かしたりカスタマイズしながら読み進めてください。

製品パンフレットや冊子などの紙媒体をデザインする際、どのようなフォントを使用すれば、製品の印象やサービスのメリットが読者により魅力的に伝わるのか熟考するだろう。ところが、Webサイトのデザインにおけるフォントの選択肢は少なく、デザインをイメージ通り実現するのは難しい。

そこで、Webサイトでも意図したフォントでデザインする手法として考えられるのが、画像テキストを使用したテキスト置換や、Webフォントだ。

Webフォントが普及する以前は、画像テキストを用いていたが、グラフィックソフトで書き出した画像を、HTMLに挿入し、altタグを設定するなど、実装するのに多くの作業時間を必要としていた。

一方、Webフォントでは、フォントベンダーのサーバにあるフォントファイルを閲覧者のブラウザにダウンロードさせて表示しており、実装の手間はそれほどかからない。

514754eb20e418705ee3fa725d80141f.jpg
日本語のWebフォントサービスとしては、「TypeSquare」や「FONTPLUS」がある。筆者が所属するLIGのサイトでは、Webフォントの使い方やサービスを紹介しているので参考にしていただきたい http://liginc.co.jp/web/design/font/15639

その他の両者の主な特徴を下図にまとめている。Webフォントは画像テキストのデメリットを解消してくれるだけに、近年ではWebフォントを使用したサイトが多く見られるようになった。画像テキストは不要の存在となっていくのだろうか?

732cb77810aec5190ece7377c8a6ed09.jpg

[Case Study]今も画像テキストが制作現場で使われているワケ

両者を比較すると、Webフォントの方が実装コストの削減やアクセシビリティの確保といった面で優っている。しかし、制作現場では、画像テキストをデザイン手法としていまだに手放せない。それはなぜだろうか。

十分なコントラストを生み出せる

欧文と比べて、日本語にはイタリック体や大文字がないため、文字を視覚的に強調させる技法が限られている。そのため、文字の入力だけで生まれるコントラスト(対比)ではデザイン的に十分ではなく、多くの制作者は文字自体に装飾を加えることで他の要素とのコントラストをつけている。

たとえば、訴求対象者が女性や若年層の場合、手書き風のフォントを使ったり、マーカーで引いたような下線をつけるなど、文字を強調するエディトリアルデザインの要素を取り入れることで十分なコントラストを生み出し、ターゲットへ意図した印象を与えようとする。

このようなフォントへの強調・装飾は、デザイナーの自己満足というわけではなく、実際にクリック率、滞在時間、SNSでのシェアなどに影響してくるだけに重要なデザイン要素となる。そのため、Webフォントよりも画像テキストを使用することになる。

883b797121b006c46ceac5d19ee58e14.jpg
画像フォントを効果的に使用したサイト事例01
1日からでも始められる! おけいこで女子力UP  Webマガジン「マイ・フェイバリット関西」の特集記事。メニューや見出しにエディトリアルデザインの要素を取り入れることによって、訴求対象者である女性に親和性の高いデザインになっている
2ff01cc8777fee7604c1351bad288fb8.jpg
画像フォントを効果的に使用したサイト事例02
BooFooWoo  木のおもちゃと絵本のお店のサイト。手書き風のフォントを使用することで、一目で子供向けのサービスを行っていることがうかがえる
ac792abf5af791f32535b26622208287.jpg
画像フォントを効果的に使用したサイト事例03
一朶 ICHIDA  名古屋市にある和菓子屋のサイト。縦書きの見出しを採用し、和のテイストや誘目性(人目を引きつけること)を高めている。CSS+Webフォントでは、すべてのブラウザに対してこのような縦書き表現を行うのは難しい

画像テキストの注意点

画像テキストを多用すると、ページの表示速度が遅くなったり、更新に手間がかかったり、アクセシビリティが失われたりすることを念頭に置いてデザインを考えなければならない。

「どこを画像テキストにするか」「どこをWebフォントにするか」についての正解はない。デザイン段階で閲覧者の環境や文字の更新頻度、与えたい印象などをトータルで考えた上で、サイト全体のルールを作っておくとよいだろう。

 

64f6d4d9973cb69f740814fd82cfe0af.jpg
藤田遼
インターネット・アカデミーにてHTML・CSSを学ぶ。2013年より(株)LIGに入社。現在はWebデザイナーとして主にコーポレートサイトのリニューアルやキャンペーンサイトのデザイン業務に従事している。
9df82bcd1ce9f98150a4559fcec415a3.jpg
堀祐磨
多摩美術大学を中退後、デザイナーとしてグラフィックデザイン・Webデザインを経験。デザイン業務のかたわらプログラミングを行うようになり、Webフロントエンドへ関心を持つ。2015年に(株)LIGに入社。 http://liginc.co.jp/

掲載号

Web Designing 2016年2月号

Web Designing 2016年2月号

2016年1月18日発売 本誌:1,530円(税込) / PDF版:1,200円(税込)

IoTの現在――その先にあるビジネスのヒント

サンプルデータはこちらから

■ 特集:IoTの現在
 その先にあるビジネスの「ヒント」

2015年、「モノのインターネット」と訳される「IoT(Internet Of Things)」が急速に広まりました。「モノの価値が変わる」「ビジネスが変わる」「生活が変わる」など、さらなる期待が寄せられています。けれども、「IoT」というコトバだけが先行しつつあるのもまた事実。IoTが指し示すこと、そして本当の価値をあなたは理解していますか? ネットとモノ、ヒトとモノ、そしてモノとモノがつながることで生まれる新たな価値とはなんでしょうか。その恩恵を最大限に享受するためにも、いま知っておきたいIoTについて学んでいきます。

 第一人者に聞く基礎知識「「坂村 健先生、IoTってなんですか?」
 6つのキーワードから理解する「さまざまなIoTのカタチ」
 IoTによる課題解決と価値創造「ビジネスのIoT事例」
  e-kakashiが変える農業の姿/「ともだち家電」が提示する新たな価値
 「ユカイ工学」の青木俊介さんに聞く「作り手から見るIoTの未来」

■ WD SELECTION
 WDが選ぶ注目のデジタルコンテンツ
有馬記念でさがせ!/早押しクイズ連動ドラマ「脱線刑事」/Slay Your Next Giant/おもてなでしこ伝承中/Bj?rk「Mouth Mantra」/Because Recollection/ztokyo/The Standing March/にこにこ小児歯科/Sagakeen 佐賀県×スプラトゥーン 公式サイト/OKINAWA: The Secret is Out

■ ビジネス・EC
 □ ECサイト業界研究
 AI/FinTech/配送 ――5年後を見据えた2016年のキーワード

 □ 月刊店舗設計
 和座本舗:複数店舗展開で石川県から全国・全世界へ届ける

 □ モバイルビジネス最前線
 アオイゼミ:「無料+ライブ動画+α」で急成長を遂げるオンライン学習塾アプリ

 □ 知的財産権にまつわるエトセトラ
 映画の著作権は誰のもの?

 □ Bay Area Startup News
 SNSメッセージ感覚で送金できる「Venmo」

■ マーケティング・プロモーション
 □ サイト改善基礎講座
 コンバージョン率改善の近道は意思決定ボタンにあり

 □ ハギハラ総研
 国境を越えたECは日本でも定着するか

 □ デジタルプロモーションの舞台裏
 日本全国にブランド認知を拡げた、福岡発のバス施策

 □ 行動デザイン塾
 初めての行為がなぜ習慣化していくのか?

 □ 課題解決のためのUI実装講座
 Webフォントが普及しても、まだ手放せない画像テキスト

 □ 解析ツールの読み方・活かし方
 サイトの改善ポイントを見つけるための現状把握

■ クリエイティブ・コラム
 □ ナビゲーターが選ぶ注目のデジタルコンテンツ
 [バズ施策]「 リアル」と「リアリティ」:Volvo Trucks 眞鍋海里
 [デジタルプロモーション]歯の健康をリンゴで診断:Dentapple 築地 Roy 良
 [Webサービス]指先で創作する時代:Adobe Post 仲暁子
 [IoT]インターネット的体験:Amazon Dash Button 神谷憲司

 □ モノを生むカイシャ
 NAKED Inc.:異次元空間を生み出す魔法の仕掛け人

 □ 清水幹太の「Question the World」
 Jamie Carreiro:芸人根性がつくり出したハイブリッドモンスター

 □ ツクルヒト
 宮本卯之助(神輿師):義を重んずる神輿ディレクター

 □ 最果タヒの「詩句ハック」
 第20回 今日は何の詩?

 □ デザインにできることMonologue
 Vol.145 物理的デジタル

 □ エキソニモのドーン・オブ・ザ・ボット
 人間のソースコードが編集可能に! 遺伝子操作による“デザイン”は是か否か?

■ インフォメーション
 □ Topics
 オトコ心をくすぐる、自走式&可変ロボット「Tipron」/VR ヘッドセット「Oculus Rift」今春発売/10年目のクリエイティブアワード。グランプリは踊る折り紙「DANCING PAPER」と「ちゃんりおメーカー」に

 □ Special
 クリエイターのためのプラットフォーム「DemoDay.Tokyo」レポート

 □ Movement&News
 第8回恵比寿映像祭「動いている庭」/ホキ美術館5周年記念展/宇宙から見たオーロラ展2016/祖父江慎+コズフィッシュ展/「YouFab Global Creative Awards 2015」受賞作品展 ほか
 2015年も続くPC→スマホの消費者動向、アプリは利用者数を大きく伸ばすものも/ITエンジニアが注目する、2016年世間を賑わすキーワードとは?/日本の労働人口の49%が人工知能やロボット等で代替可能に/IoT普及を強力に後押しする無線技術! 実用化に向け開発中 ほか

編集部からのおすすめ記事

この記事を見た人はこんな記事も見ています