BLOG カテゴリー: CREATIVE

私たちWeb製作者の多くはクライアントにリニューアルを依頼されると、すぐに制作に取り掛かろうとしてしまいます。しかし、必ずしもリニューアルが最善の策ではない場合もあり、専門家であるWeb制作者にはクライアントに正しい助言を行う義務があります。

多くの企業にはWebサイトを定期的にリニューアルする文化が存在します。それは大抵何かに大きな不満を感じた経営者による「より先進的なWebサイト」の要求から始まります。多くの予算と時間を費やし、製作会社を選定し、古いWebサイトを完全に捨て去り、新しいものに置き換えます。しばらくは誰もが新しいWebサイトを評価しますが、コンテンツの更新が滞り、新たなテクノロジーが次々に登場し、Webサイトはまた古くなります。数年後、劣化したWebサイトがまた経営者の目に止まり、リニューアルが始まるのです。

リニューアルは無駄なのか？

次にリニューアルの依頼を受けたら、すぐに制作には取り掛からず、その理由や結果についてクライアントとしっかり話をしましょう。リニューアルではおそらく全ての要素を置き換えられ、問題なく機能している部分も作りなおされます。変更する要素が多ければ、有効性の検証も困難になります。ユーザーが慣れていた仕様が変更されれば、ネガティブな体験も生まれかねません。もちろん多額の投資を必要とするため、定期的に繰り返すことはビジネス上健全ではなく、いくら高額なリニューアルを行なってもコンテンツの更新や技術的なメンテナンスを怠れば直ぐに劣化してしまうのです。

リニューアルよりもリアラインメント

Webサイトをリニューアルせずに継続的に改善していく『リアラインメント』という考え方があります。Webサイトはビジネス課題の解決や、目標の達成にに向けて、継続的な改善施策を施せば数年おきに作り直す必要は無いのです。この考え方に賛同し、継続的なWebサイトのPDCAサイクルを推奨する制作会社は多く存在します。しかし、リアラインメントはWebサイトの継続的な改善を推奨するだけでなく、「完成したWebサイトを納品する」という考え方を否定します。Webサイトには完成は無く、ユーザーの行動から常に学び、より良い解決法をデザインに反映し続けなければならないのです。

Webサイトのデザインを継続的にテストし、改善し続けることには定期的なリニューアルを行うことよりもたくさんのメリットが存在します。しかし、全てのプロジェクトでリアラインメントをリニューアルに優先すべき、ということでもありません。

リニューアルされるべきWebサイト

FICCでもWebサイトの継続的な改善を推奨していますが、今も多くのリニューアル案件に関わっています。Webサイトのデザインを大きく変えない場合も、大抵ゼロから作り直すことになります。その理由は元のWebサイトが長期的な開発を視野に入れずに制作されているからです。リニューアルを行う主な理由は継続的な改善が行えないことにあります。

時には繰り返される改善施策自体がリニューアルの理由になることもあります。多くの追加や変更が加えられたWebサイトにはユーザーインターフェースの矛盾が蓄積され、新たな設計が必要となります。これは設計やデザインだけでなく、コードにも同じことが言えます。つまり、どのようなWebサイトにも、いずれリニューアルは必要になるということです。大切なことはその時期を正しく見極めることができるかです。

リニューアルのサイン

Webサイトがデザインやコードの矛盾を抱えきれなくなると、そのパフォーマンスの低さや運用のストレスからリニューアルの必要性が明確になります。Webサイトをゼロから作り直すことで、コードや動線などを最適化し、ナビゲーションやサイト構造などの設計を抜本的に見直す事が可能になります。しかし、正当なリニューアルの理由はWebサイトの機能に関係するものばかりではありません。企業やブランドのビジネスに関連した外的要因も多く存在します。

マーケティング戦略やポジショニングの見直しなど、ビジネスの大きな改革はWebサイトの目的・目標を変えてしまいます。ビジネスモデルの変更、ブランドのリポジショニング、市場動向の大きな変化に伴い、Webサイトのデザインやコンテンツの大幅な見直しが行われるのは当然です。また、多くの企業やブランドにとって象徴的な役割を担うWebサイトはインターナル・ブランディングにも大きな影響を与えるため、組織に変化を意識させることも正当な理由になります。

「見た目が古く、気に入らない」というビジュアルデザインやコンテンツに対する主観的な意見ではなく、Webサイトがビジネスのニーズをサポートできなくなったという事実こそがリニューアルのサインです。しかし、急速な対応が必要で、リニューアルに十分な時間が無い場合はもちろん部分的な改善施策を行うべきです。リニューアルは多くの費用だけでなく、時間も必要とし、新しいWebサイトを待つことが大きなリスクや機会損失につながることもあります。

解決すべき課題によってWebサイトに加えるべき変更は異なります。簡単なテキストの変更で対応できるものもあれば、全面的なリニューアルが必要なものもあります。変更の規模やタイミングはビジネス課題に基づき、その後の継続的な改善施策を視野に入れなければなりません。私たちWeb製作者にはリニューアルの正しい時期を見極め、その後のリアラインメントを通じたWebサイトの成長を可能にする義務があるのです。

私たちは日々インスピレーションを得るために多くのリニューアルされたサイトを目にしています。
しかし、それらのサイトはなぜリニューアルを行ったのでしょうか？『バックエンドのシステムが古い』『ブランドのコミュニケーションが変わった』など色々な理由は考えられますが、その一因に『期待した成果をWebサイトが上げられていない』ということが考えられます。

本来、Webサイトは広告とは違い、一度の投資に対して長期間にわたり効果を発揮するものです。私たちはクライアントに対し有効性の高いソリューションを提案・実行し、投資に対する効果を証明出来なければ、ビジネスの成長や、自身のWebマーケティングに対するスキルも成長すらも見込めないでしょう。

そこで、Webデザイナーも知るべきROI（Return on Investment : 投資対効果）とPDCAの6つのポイントをご紹介します。

PDCAによるチューニングポイントを明確化する

緻密なリサーチやストラテジーに基づいたWebサイトでも、公開しただけでは本来のパフォーマンス発揮できず、PDCA（Plan Do Check Act : 分析と改修）を迅速に行わなければ、投資に対し得られるはずの多くの効果を無駄にしてしまうことになります。
しかし、複数のマーケティング施策が同時に行われ、アウェアネスレベルの異なるユーザーがWebサイトに訪れるなか、コンテンツやデザイン要素の最適化を行うのは非常に困難です。効果的かつ効率的なPDCAを実施するためにはビジネスゴールに基づき、その目標の達成度合をKGI（Key Goal Indicator : 重要目標達成指標）と目標到達プロセスの実施状況を観測するKPI（Key Performance Indicator : 重要業績評価指標）を、予測される成功要因に基づき数値化しモニタリングを行いながら実行に移しましょう。

KGIを設定しゴール達成へのプランニングを行う

Webサイトの目的によってKGIは様々です。例えば、弊社が運営するデザイナー向けポートフォリオサイト「JAYPEG」を例にすると、「新規クリエイターの登録」がビジネスゴール、KGIは「月間◯◯人のユーザー登録（コンバージョン）」となります。しかし、達成状況が予測を下回る場合、KGIの数値だけではその原因を特定する事が難しく、結果無駄な時間を多く費やしてしまったという事態になりかねません。

成功要因を明確にしチューニングすべき的を絞る

Webサイトのコンバージョンが『会員登録』など１つしか存在しない場合、複数の成功要因とコンバージョンとの因果関係を明確にできなければ、チューニングすべきポイントを定めることができません。そこで、KGIに対して大きく影響を及ぼす主要な成功要因を予めリスト化することで的を絞っていきます。

成功要因のパフォーマンスを観測する

パフォーマンスを定点的に観測するためにKPIを設定しましょう。コンバージョンとは別の中間観測ポイントを設けることで、個々の成功要因のパフォーマンスを出来るだけ正確に把握し観測することができます。大抵の場合、KPIが上がればKGIが上がるという風に、数値は互いに関係しながら変化するはずです。KPIが変化してもコンバージョンに影響を及ぼさないか、影響度合が他の指標より低い場合はKPIを見直す必要があるでしょう。

改善施策はより早く確実に成果を出す

KPI数値を改善するコンテンツやデザイン要素の調整を行い、その結果を見るには約１週間程度の期間が必要です。そのため、改善施策にはA/Bテストを行いより少ない回数で実施することが重要です。
また、KPI設定後の十分な観測データを得たら、KGIとKPIの影響度合いからチューニングすべきポイントに対しプライオリティをつけ調整を行いましょう。更に素早く結果を出すことが可能になり、またその結果、コストパフォーマンスの合わないプロモーションや広告の出稿などは見なおす良い契機を見つけ出すことが可能になります。

Webデザイナーのブランドやストラテジーに対する理解が成功の鍵

現在行っているプロモーション施策のほか、CRMを通じた顧客リレーションや、口コミ、ソーシャルメディアやコミュニティサイトでのバイラルなど、環境や時期によって変化する要因もあり、それらは必ずしもアクセス解析だけで見つかるとは限りません。

ブランドやストラテジーに対する理解を持ち最適なクリエイティブを提案できるWebデザイナーがPDCAやROIのノウハウを身につけ蓄積することが、プロジェクトが成功させるための大きな要因となるでしょう。

全てのプロジェクトで上記の取り組みを行うことは難しいかもしれません。しかし、Google Analyticsであなたが作ったWebサイトは本当に機能しているのか？ それを確認することは可能なはずです。
まずはそこから学び蓄積していくことで、次のクリエイティブへと活かしてみてください。

Jakob Nielsenは、「How Long Do Users Stay on Web Pages?」の記事にて「ページごとの平均滞在時間は1分弱となっており、実際に訪問しているページのテキストの4分の1しか読む時間がない」と述べています。もちろん、サイトの性質や使われ方にもよりますが、私達が制作しているページのうちの75%はほとんどのユーザーに読まれていないことになります。あなたもブログ記事のイントロを読み、途中をざっと流し読みして、最後のまとめだけを読んだ経験はありませんか？

私達がサイトを閲覧する時の殆どは明確な目的を持っています。 必要とする情報以外のテキストをじっくり読むことはなく、自分が求めている情報を探すためにざっと斜め読みし、目当てとなる情報を探していることが殆どです。早急に答えを求めるユーザーにとって、あれもこれもと次々と情報を訴求するウェブサイトは、斜め読みされ、離脱されてしまい、ユーザーを効果的に誘導できていないのではないでしょうか。

一方で、効果的にユーザーを導き、成果を上げているウェブサイトも数多く存在します。 そのようなサイトを分析し、共通項となる原則を見つけ出し活用することができれば、読まれていなかった75%の領域までユーザーを導くことができるのではないでしょうか？それでは、ユーザーを効果的に導くためには、Webデザイナーは具体的にどのようなアプローチをすべきでしょうか。

1. ユーザーを考えさせない

ウェブサイトのデザインは、そのページがどんなページであるかを明確に説明している必要があります。 ページを見てすぐに、何をするためのページかが理解できることはユーザーの離脱を防ぐために非常に重要な要素となり、ページ見て疑問を抱かれてしまうようなサイトではそれ以上読み進められることはありません。ナビゲーションが直感的でない場合にも、ユーザーがサイトの構造を理解するのは難しく、同様に離脱の原因となります。自分の居場所がわかり、別のページに移動することが明確なリンクを設けることでこの問題を解消できるでしょう。

ネットショップ作成サービスのBASEの場合、ファーストビューに記載された「ネットショップの作成が、今までで一番簡単に。」というキャッチコピーが、そのままサイトで出来ることを明確に伝えています。さらに、登録のためのフォームを並列で配置することで、ユーザーに次のアクションを提示し、ECサイトの運営を検討するユーザーを登録へ促すことが出来ていると言えます。ウェブサイトが提供できるメリットがユーザーに理解されない限り、そのサイトが使われることはありません。

2. ユーザーを強制しない

あなたが制作しているサービスやツールは、ユーザーが最小限のアクションで試すことができるものになっているでしょうか？ 新規のユーザーは、自分が見つけたサービスやツールを体験しようとする気持ちはありますが、1つのアカウントを作るために延々と続く長いフォームを埋めてまで利用するということは稀です。また、一度アカウント作成に負担に感じたサービスはそれ以降使われることはないでしょう。そのため、ユーザーがアカウントを作成する際に必要とされないような情報まで一度に取得しようとすることは妥当ではなく、最小限の項目で登録を完了させることが重要になってきます。

Ruby on RailsやBasecampの開発元として知られる37signalsのRyan Singerは「ユーザーは、彼らが実際にサービスやツールを体験し、そのサービスを自分が求めていると感じる場合、必要とされる情報を提供してくれるだろう。彼らは自分が得たことに対しリターンをする考えを持っている」と述べています。実際、Basecampのトライアルのために必要とされる情報は自身の名前とログインのためのID/PWのみとなっており、ユーザーが気軽にサービスを体験できる配慮がされています。

不要な必須項目を削り、ユーザーに登録までのハードルを感じさせないフローになっているか確認しましょう。

3. ユーザーの興味を惹くものを明確化する

サイトを構成する要素にはいくつかの側面があります。画像はテキストより目を引きやすく、太字がプレーンテキストより目立つように、それぞれの要素が固有の誘目性を持っています。どんなビジュアル要素が、ユーザーの興味に影響を与えられるのかを知ることで、ページのゴールを達成するデザインに近づけることができるでしょう。例えば、人間の目は、ページ上で動いている要素を瞬時に認識することができます。現在では、映像や動きのあるバナー広告は非常に目に付くため迷惑がられていますが、マーケティングの観点からすると、それらはユーザーの関心を引くことを達成していると言えるでしょう。

アスリートのためのメガネを開発したパリミキのスペシャルサイトでは、この原理を利用しています。中央に向かって放射状にブラーがかかった写真によって、視線は自ずと中央のエリアに向けられます。エリア中央の再生ボタンを押すことで、製品のベネフィットを伝える動画が再生され、ユーザーは閲覧して1分もしないうちにこの製品の魅力を理解することが可能になります。

特定のエリアにユーザーの注意を誘導するためにビジュアル要素を活用する事は、あなたのサイトを閲覧するユーザーを点AからBに移動させることをサポートすることができるでしょう。

4. ぱっと見て機能がわかる

ひと目見ただけで明確に機能が分かる構造やデザインは非常にユーザーフレンドリーです。

ベビー用品を扱うグレコのサイトでは、ページ上部のグローバルナビゲーションと、ページ下部の製品カテゴリへのナビゲーションという、ひと目見ただけで明確に9つのナビゲーションと2つの入力フィールドがあることがわかります。この、見ただけでそれが機能を持ったものだとユーザーに理解されることがUI設計の基本原則となります。これらのUIがひと目見て機能が理解でき、操作するのが快適だと感じさせることが良いユーザー体験へ繋がります。

5. 効果的なライティングをする

ウェブは印刷とは違い、ユーザーの好みやブランドが形成すべき人格にあわせ文体を変える必要があります。また、広告的なテキストは読まれることはなく、画像や太字や斜体でキーワードを指定していない長い段落はスキップされ、誇張された内容は無視されます。さらに、気取った、または巧妙な言い回しや会社固有の言葉、馴染みのない技術的な言葉は避けられる傾向にあります。もし、あなたがサービスを説明し、ユーザーにアカウントを作成させたい場合は、「我々のサービスを知る」よりも「今すぐはじめる」のほうが優れています。

開発者向けホスティングサービスのSQALEでは、これらの要点を踏まえたライティングがされています。気取った言葉や誇張された表現もなく、代わりに開発者がまず知りたい特徴、手間、運用にかかる費用が端的に書かれています。また、実際に始めるために押すべきボタンも明確にされています。

効果的なライティングのための最適な方法としては、

• 短く、簡潔なフレーズを使うこと（できるだけ早く本題に入る）
• 斜め読み可能なレイアウトを使う（コンテンツを分類し、複数の見出しレベルを使用し、均一な段落ではなくポイントとなる画像や箇条書きを使う）
• 飾らなく、客観的な言葉であること（広告的な印象や説得を含む言葉は広告のように思われます）

を心がけるべきでしょう。

6. 簡潔にする

サイトデザインの第１の目標であるべき原則として、Keep It Simple（KIS）というものがあります。ユーザーがサイトのデザインそのものを楽しむということはめったにありません。さらに、ほとんどの場合、デザインがあったとしても、ユーザーは自分が必要とする情報を探してサイトを訪れています。余計な要素、装飾などでページを複雑にする代わりに、簡潔になるよう努めましょう。

シンプルさは構造の把握にとても役立ちます。上記で紹介したこれらのサイトはどちらも日本語ではなく、意味は読み取れませんが、直感的にナビゲーションやヘッダー、コンテンツエリアやフッターを認識することができるでしょう。簡潔さを保つには、不要なコンテンツを持たず、詰め込みすぎずにユーザーに選択肢を提示できることが必要です。

7. 空白を恐れない

行間や文字間、要素間などに適度な空白（ホワイトスペース）を設けることにより、ユーザーが読む際の負担を減らすことに繋がります。実際の所、前述の要因だけを大きく評価することは難しく、空白を設ける事は、ユーザーが読む際の負担を減らすのに役立つ反面、一度に見える情報量を制限することにもなります。

しかし、複雑な情報は、流し読み、分析する作業が困難になります。初めてページを見るユーザーは、デザインされたレイアウトに対し、ページを流し読みして、コンテンツ領域を区分して情報のグループを把握しようとします。そこで、2つの要素間のスペースを、線または空白で区切ることでグループの把握をサポートできますが、空白で区切ることにより、構造が複雑になるのを防ぐことができます。更に、インデントなどで視覚的に階層構造を持たせることで、コンテンツ同士の関係性を認識しやすくすることができます。

Appleのウェブサイトはホワイトスペースを効果的に用いている優れた例です。テキストブロックの周囲にゆったりと設けられたスペースと、メリハリのある文字サイズがコンテンツの構造を把握しやすくし、斜め読み可能なレイアウトを実現しています。

8. ビジュアルコミュニケーションを効果的に使う

ビジュアルコミュニケーションとは、メッセージまたは文脈を伝えるために使われるグラフィカルな要素の全てを指しており、主にレイアウト（フォーマット、構成、グリッド）、タイポグラフィ（書体の選定、文字の扱い）、色とテクスチャ、アニメーション等が該当します。Aaron Marcusは論文で、効果的なビジュアルコミュニケーションに必要とされる3原則について述べています。

ビジュアルコミュニケーションを整理する
明確で一貫した構造の考え方をユーザーに提供します。画面のレイアウト、情報の関係性、導線は、整理するために重要な要素で、同じ規則やルールは、全ての要素に適用されるべきです。

ビジュアルコミュニケーションを効率よく利用する

• 効率よく利用するために、4つの考慮すべき点があります：シンプルさ、明快さ、独自性、強調
• シンプルさ：コミュニケーションのための最も重要な要素だけが含まれているか
• 明快さ：意味があいまいなコンポーネントはないか
• コントラスト：重要な機能は他と区別できる要素になっているか
• 強調：最も重要な要素は簡単に認識できるか、一番目立っているか

ビジュアルコミュニケーションを伝える
UIが正常に機能するために、見やすさ、読みやすさ、タイポグラフィ、シンボル、multiple views、色や質感のバランスを整える必要があります。場合に寄りますが、使用する書体は3種類以内、サイズのバリエーションは3サイズ、1行に18単語、50〜80文字のテキストにしましょう。

9. 慣習を活用する

昔からの慣習に沿ったからといってつまらないサイトになることはありません。実際には、そのルールがあることで、サイト設計に関する動作、学習コストを減らすことに貢献することができます。例えば全てのサイトで、RSSフィードのアイコンが全く別のものだったら、わかりにくく、フィード登録の際の手間が嵩んでしまうことが予測できます。

私達の普段の行動と同じように、データを整理したり、ページを見たりするという行動は慣習化されるものです。慣習に基づいたルールを利用することで、ユーザーの信頼、信用を獲得でき、サイトの信頼性を証明することができます。

全く違う言語のサイトだとしても、UIのルールが適用されている場合、ユーザーは、言葉が理解できないとしても、その要素が何の機能を持っているのかを想像することができ、目的達成までのステップを短くすることができます。もちろん、既存の設計を覆せるような革新的なアイデアがある場合はこの限りではありませんが、そうでなければ、慣習に基づいたルールに則ることでサイトの信頼性を向上させましょう。

10. 早期に、そして頻繁にテストする

ユーザーテストと聞くと専門の検証会社が実施する敷居の高いものを想像するかもしれませんが、ここでお伝えするテストの原理は、高度な機材を必要とせずに実施することが可能です。ワイヤーフレームを被験者に渡すか、画面上で表示してもらい、行なって欲しい事を伝え、達成できるかを見ることで、意図したアクションを行なっているかを知ることができます。

また、デザインが意図したバーソナリティを感じさせるものになっているかを検証するためにもテストは有効です。「クラシック／モダン」「慎重／積極的」「簡潔／複雑」「女性的／男性的」のような対となる印象のキーワードを設定し、制作しているデザインがどのような印象を与えたいかを予め決めておきます。その上で、テスト対象の方にデザインを見てもらい、自分が感じた印象が前述のキーワードのどちらに近いかを、最もあてはまる／ややあてはまる／どちらとも言えないのような段階を付けた表をもとにチェックをつけてもらうことで、意図した印象を感じさせることが出来ているかの検証をすることが可能です。

テストは常に有益な結果をもたらします。良かった時はあなたの洞察が証明されたこととなり、悪かったとしたら構造上の問題を理解することができます。1人のテストをすることは、テストをしなかったプロジェクトより100%良い物になり、プロジェクト早期に1人のテストをすることは、プロジェクト後期に50人のテストを行うことと同じくらいの効果があります。可能な限り早い段階で実施するべきでしょう。早期に実施することで、実装フェーズでのロスを減らすことが出来、最終的なアウトプット品質の向上に繋がります。

考慮する点として、テストの被験者となるメンバーは、プロジェクトに携わっていない人である必要があります。プロジェクトメンバーは数週間そのサイトに従事しており、実際にどのように動くかや、全体の構造も知っていて、新鮮な気持ちで接することは不可能となり、有効なテストができません。プロジェクトの背景や事情を知らない第三者に行なってもらうことが理想でしょう。

Webデザイナーになりたての時期は、ビジュアルの作り込みや技術を少しでも早く習得してスキルアップを図りたいと感じるかもしれません。しかし、見栄えだけがいいデザインではユーザーを効果的に導くことができず、せっかく作りこんだビジュアルも、見られない、機能しない無駄なものになってしまいます。そのようなことを避けるために、上記のような原則を念頭に置いておくことで、デザインをする際の指針ができ、より説得力のあるアウトプットができるのではないでしょうか。

また、10の原則については全て考慮すればいいというわけではなく、状況に応じて判断していく必要があると思います。デザインを制作していく中で、どの原則があてはまり、どのように改善することができるかを判断し、クオリティを上げていくことで、自分のデザインについてロジカルに判断をすることができるようになり、Webデザイナーとしての能力も向上させることに繋がります。

すぐに実践できるプロジェクトが無いのであれば、普段使っているサイトで上記の原則に当てはまるものがないか探してみましょう。それらのサイトが、原則をどのように活用しているのか考えてみたり、今回の原則を使うことで改善できる点を探したり、今すぐ取り組める事から実践してみることが重要です。

Webサイトを制作しているうちに、様々なしがらみによって、そのクオリティを劣化させてしまった経験があなたにもあるのではないでしょうか。クライアントの要望を取り入れたためにデザインの統合性が取れなくなったり、ディレクターとデザイナーで意見が衝突した末に納得のいかない修正をすることになってしまったり…。その原因は様々ですが、客観的な視点を持ってWebサイトを制作しなければ、ユーザーの心を掴むことはできません。Webサイトにおけるユーザーの使いやすさを表す指標として「ユーザビリティ」という言葉が用いられます。ユーザーを離脱させないためにユーザビリティを向上させることは必要不可欠ですが、悲しいことに、Webサイトのクオリティを向上させていたはずが却ってユーザビリティを悪くさせてしまったということは、往々にして起こりがちです。

ここで大切なのは、「ユーザーの視点」を常に忘れないようにすることです。あなたが担当しているWebサイトは、初めて訪れたユーザーにとって、使いにくいところやわかりにくいところがないでしょうか。少し視点を変えるだけで、気付くことのできなかった問題に改めて気付くことができると思います。制作に夢中になってしまうと客観的な視点がどんどん薄れていってしまいがちなので、適度なタイミングで自身のクリエイティブから距離を置いてみるようにしましょう。 次の項目では、特に気をつけて確認したいポイントをご紹介します。

1. 情報に優先順位がついていない

Webサイトの隅から隅までをユーザーが閲覧することはほぼありません。そのため、情報に優先順位がついていないWebサイトでは、訴求すべきだったポイントが簡単に読み飛ばされてしまいます。特にクライアントとのやり取りの中で起こりがちなのは、全ての情報を強調しすぎて、結果的に情報の差がなくなってしまうということです。1つ1つの情報のプライオリティーを考え、ときには引き算のデザインをして、重要な情報だけが強調されるようにしましょう。

2. コンバージョンを強要している

購入や申込みなどに代表されるKPIを達成するためのコンバージョンボタンは、Webサイトにとって非常に重要な要素です。しかし、ただ闇雲にボタンを目立たせたり数を多く設置するだけでは、ユーザーはボタンをクリックしてくれません。まずは商材を知らなかったり、不安に思っているユーザーに対して、安心・信頼を提供するようなコンテンツを制作するところから始めましょう。その上で、適切な位置・強調でコンバージョンボタンを配置することが、成果につなげるための第一歩になります。

3. ローディング時間が長い

回線速度の向上によって、リッチなコンテンツを提供するWebサイトが増えてきました。しかし、ユーザーからしてみれば、ローディング時間は苦痛を感じるものでしかありません。「オンライン動画において、再生開始までの時間が2秒を超えるとユーザーは離脱し始める」という研究結果も報告されています（出典:http://web-tan.forum.impressrd.jp/e/2012/11/20/14177）。画像の容量を可能な限り圧縮したり、過度なアニメーションは避けるなどして、ローディングの時間を少しでも削減できるように心がけましょう。

4.フォームの項目が多い

ユーザーの潜在的な情報を取得できるフォームではつい多くの設問を設けてしまいがちですが、項目が増えれば増えるほどユーザーが離脱する可能性は上がってしまいます。回答を必須としていない項目については、本当に必要なのかどうか改めて検討してみてください。また、郵便番号や電話番号などの項目で入力フィールドを分割することは、ユーザーの操作を増やしてしまう原因となってしまうため、なるべく1つのフィールドにまとめるようにしましょう。

もし、あなたが現在Webサイトを制作中なのであれば、まずはクリエイターの視点を一度捨ててみましょう。そして、Webサイトを利用する側――つまりユーザーの視点に立ち、改めてそのWebサイトを閲覧してみましょう。そうすることで、真に改善すべき問題点が見えてくるはずです。 また、可能であれば、そのWebサイトを閲覧したことがないユーザーに実際に使ってみてもらう、ユーザビリティテストを実行することも有効でしょう。

「ユーザビリティ」というような専門用語を聞くとつい身構えてしまいがちですが、ユーザーの視点を持ち、自身のWebサイトを客観的に見ることができれば、おのずと使いやすさは向上します。 実際の店舗とは違い、Webサイトではユーザーと対面することができません。だからこそ、ユーザーのことを真摯に考え、思いやる心を忘れないことが、ユーザビリティを向上させる第一歩なのです。

Webサイトを閲覧していて、文字を読まないということは滅多にありません。情報アーキテクチャの先駆者として世界的に有名なInformation Architectsは、「Web Design is 95% Typograpy」という記事で、「Webデザインの95%はタイポグラフィである」と述べています。 私たちの行動は文字によって喚起されます。例えば、オンラインショッピングをするときに、商品のイメージだけで購入することはほとんどないのではないでしょうか。価格をはじめ、特徴や仕様、レビューなど、文字が伝える情報を咀嚼して購買を決定しているはずです。オンラインショップは実店舗とは違い、商品を手にとって確認することができませんから、文字から伝わる情報がより重要性を増すのです。 これらは、タイポグラフィのデザインがWebデザインにとって無くてはならない役割を担っている証拠だと言えるでしょう。

それでは、Webデザイナーがタイポグラフィを用いて最適なコミュニケーションをするためには、どのようにすればよいのでしょうか？

Webタイポグラフィの役割

タイポグラフィによって情報を伝える方法は、「文字を見せる」ことと「文字を読ませる」ことの2つに大別されます。

文字を見せる

タイポグラフィには、サイズ、カラー、フォント、ウェイト（文字の太さ）など、デザインすべき要素が数多く含まれています。 例えば、線の太いゴシック体は男性的な印象を与え、逆に線の細い明朝体は女性的な印象を与えるなど、たとえ同じ文言を用いたとしても伝えられるイメージは千差万別です。

このような「見せる文字」は、しばしばキャッチコピーやロゴテキストに用いられ、ブランドイメージを伝えるための重要な役割を担ってきました。 これらの要素をうまく組み合わせることが、デザインクオリティを研ぎ澄ませ、ひいてはブランドイメージを向上させることに繋がります。

文字を読ませる

イメージを伝える「見せる文字」とは逆に、本文や脚注などの文章に用いられる「読ませる文字」は、情報を正確に伝える必要があるため、可読性・視認性に優れていなければなりません。 WebデザインではDTPとは違い、OSが出力するデバイスフォントを用います。これらのフォントはカーニングなどによる可読性の調整こそ困難ですが、CSSを用いた簡単な指定だけでも、文章の読みやすさを大幅に向上させることが可能です。 このような「読ませる文字」は、情報の受け取りやすさに大きく影響します。それはすなわち、ユーザビリティ・アクセシビリティに配慮することと同義なのです。

「見せる文字」なのか、それとも「読ませる文字」なのか、タイポグラフィの役割を考え、それぞれに最適なデザインをすることは、Webデザイナーにとって必要不可欠なスキルです。では、具体的にどのようにしてタイポグラフィをデザインすればよいのでしょうか？もちろんデザインに正解はありませんが、タイポグラフィにはルールとも言えるいくつかのセオリーが存在します。次の項目では、Webデザイナーが必ず身に付けたい、基本的なTipsをご紹介します。

Webタイポグラフィのクオリティを上げる基本的な5つのTips

これらのTipsは文字を見せる場合にも、文字を読ませる場合にも使える重要なテクニックです。タイポグラフィのセオリーはこの他にも数多く存在しますが、ここでは代表的な例をご紹介します。

1. 文字間を詰める

漢字、カタカナ、ひらがな、アルファベットなど、全ての文字はそれぞれの左右に異なる空白を持っています。そのため、グラフィックソフトでテキストを打ち込んだだけでは、文字間の空白がバラバラなため、乱雑な印象を与えてしまいます。このような場合は「文字詰め（カーニング）」を行い、それぞれの空白を調整しましょう。例えば、「クレジットカード」という文言の場合、「ッ」の左右や「ト」の左が大きく空いているため、これらを調整すると整った印象を与えることができます。

2. 大きさ・位置を揃える

同じフォント・同じ種類のテキストでも、文字の種類によって大きさや位置は大きく異なります。一般的に、漢字はひらがな・カタカナよりも大きく、逆にアルファベットはひらがな・カタカナよりも小さいとされています。特に和文と欧文で違ったフォントを用いる「混植」を行う際は、それぞれの大きさ・位置がバラバラにならないように、バランスを整えるようにしましょう。 上記の例では、欧文のサイズを大きくする他に、「！」のような「約物」と呼ばれる記号のバランスも整えています。

3. 動きを持たせる

上記で紹介した文字を揃えるテクニックとは逆に、大きさや位置を不揃いにして動きを出すことによって、特定の情報を強調する方法もあります。例えば、「円」や「年・月・日」などといった単位を表す文字については、サイズを小さくすることで、より重要な情報である数値の部分を強調することができます。同様に「を」や「から」といった助詞となる文字を小さくする方法も、情報の意味を強調する有効な手法として、広く用いられています。

4. 文字を変形させる

文字の縦横比を変えることで、本来持っていた印象を大きく変えることができます。例えば、「長体」と呼ばれる横幅を狭くした文字はすっきりとした印象を与え、逆に「平体」と呼ばれる縦幅を狭くした文字はどっしりとした印象を与えます。これらのテクニックは文字の印象を変えるだけでなく、限られたスペースに多くの情報を掲載するためにも有効です。また、「斜体」と呼ばれる文字を傾ける手法も、スタイリッシュな印象を与えるためにしばしば用いられます。

5. 行間と行長を調整する

複数行にわたる文章については、行間と行長を調整することが、文章の読みやすさを大きく左右します。一般的に、行間については150〜190％の値が読みやすいとされ、行長については最長で30〜40文字、最短で13〜15文字程度が読みやすいとされています。これらの基準値は、サイズやフォントといった様々な条件によって最適な値が変わるため、状況に応じた判断が必要となるでしょう。例えば、行長が長い場合は行間を広めに、逆に行長が短い場合は行間を狭めにすると読みやすくなります。

これらのセオリーを知っていると知っていないとでは、Webデザインのクオリティに大きな隔たりが生じます。Webデザイナーのプロとアマチュアの違いは、ここにあると言っても過言ではありません。逆を言えば、たったこれだけのセオリーを意識するだけで、一定以上のクオリティを保ったタイポグラフィをデザインをすることが可能だということです。

Webタイポグラフィのスキルを向上させるために今すぐできること

まずは様々な事例を見て、タイポグラフィから得られる情報に違いがあることを学びましょう。例えば、FICCのベストプラクティスであるシックとレリッシュのブランドサイトでは、「ゴシックMB101」という同じフォントを用いているにも関わらず、ウェイトやカーニングが大きく異なるため、全く違った印象を与えていることがわかります。 このように、ターゲットユーザーの違うWebサイトを見比べてもいいですし、straightline bookmarkやS5-StyleのようなWebデザインギャラリーサイトのタグ機能を利用して、同じジャンルのWebサイトを見比べてみても面白いでしょう。 そのときは、上記で紹介したTipsを意識するようにしてみてください。そこで気付いたことがあれば、忘れないうちにメモを取ってください。これらを繰り返し行うことで、デザインの引き出しが増え、タイポグラフィを見る目が養われるはずです。

普段Webサイトを閲覧する際に、少し意識を変えてみるだけでも構いません。たくさんの優れたタイポグラフィに触れることが、あなたのタイポグラフィスキルを向上させる第一歩となるのです。

□ ターゲットユーザーの違うWebサイトを見比べて、タイポグラフィの違いをメモにまとめる
□ 同じジャンルのWebサイトを見比べて、タイポグラフィの違いをメモにまとめる
□ 普段Webサイトを閲覧するときにも、タイポグラフィを意識して見るようにする