WEBデザイナーなら知っておきたい！ インターネット上の文法とは？
Webデザインには「文法」とでも言うべきものがあります。一口にデザインと言っても、表面的な見た目の良さを追求するだけではなく、ユーザーが使いやすくしたり、迷いや誤操作のリスクを減らしたりする機能性の向上という面もあり、この側面はインターネット上の文法と呼べるでしょう。そこでこの記事では、Webデザインを行ううえで知っておくべき文法を解説します。
インターネットにおける「基本的な文法」
文法に準拠することで理解可能な言語を成立させられるように、ものごとを理解可能にする約束を比ゆ的に「文法」といいます。Webページのデザインにおいても、ユーザーをページ内で迷わせないために注意すべきことがあり、それらがWebデザインにおける文法になります。
ボタンのデザイン
Webページ上にはさまざまなボタンが配置されます。そうしたボタンにもユーザーにとって分かりやすく迷いを生まないデザインの仕方があります。
人間工学的な色彩設計
Webページやサイト全体のカラースキームとは別にボタンの色に意味を持たせるデザインの仕方があり、「登録」「許可する」を緑、「キャンセル」「許可しない」を赤にする、という例があります。色が人に与える影響は一定のパターンがあることが人間工学では知られており、日本産業規格においても安全や危険を示す色づかいとして例示されています。
直感的な操作性
ボタンの操作性も重要です。クリックすると「へこん」だり、押した瞬間だけボタンが暗くなったりするように見せると、ボタンを押せたのかどうかユーザーに戸惑いを与えません。
視覚的な反応だけでなく、聴覚や触覚によるフィードバックもよいでしょう。これらは、人間はオブジェクトを動かしたら何らかのフィードバックを期待する、という特性を利用しています。
ボタンの配置
ボタンの配置も考慮すべき点です。ボタンの色をその周辺の色と対比する「補色」を選ぶことで目立たせたり、コンテンツに埋もれないようにサイズを調整することで、クリックできることをわかりやすく伝えられます。また、よくある配置では、OKを左に、キャンセルを右に配置するというのが一般的です。しかし、ボタンが複数配置されているのを見たとき、人間は全てのボタンを見てどんな意味があるのか確認するまでは押そうとしないものです。
Webページで一般的な横書きで左から右に読む場合、まずOKを見てキャンセルを見て、もう一度OKを見てからはじめてOKをクリックすることになります。そのため、やや直感に反しますが、キャンセルを左、OKを右に配置した方がユーザーはOKボタンのクリックによりはやくたどり着きます。
色覚に頼りすぎない
Webアクセシビリティという概念ははやくは1990年代半ばから提唱されていましたが、現在ではW3Cの勧告をもとにしたISO標準が定められており、色覚のみに依存しないよう勧告しています。色覚だけでなく、ボタン上に適切なアイコンを配置するなど、ボタンの機能を分かりやすく示す工夫と配慮が必要です。
ボタンの文章は具体的に分かりやすく
「メールの削除を取り消しますか？」というポップアップについているボタンが、「取り消し」「キャンセル」だと混乱する人がでてくるのではないでしょうか。ユーザーに判断を迷わせ、負担をかけないように、ボタンの文章は次になにが起こるか具体的に分かるようにしましょう。
押して欲しいボタンは目立たせる
Webページの訪問者に押してもらいたいボタンは、周りの色とのコントラストがはっきりした色を選び、ベタ塗りにするだけでも際立たせる効果があることが知られています。単純に大きさに差をつけるとか、目につきやすいところに設置することも有効です。
また、多すぎる選択肢を目の前にすると、かえって迷いが生じてなにもできなくなるので、ユーザーに取ってほしい行動を考え抜いて、設置するボタンを少数に絞ることも検討しましょう。
リンクテキストのデザイン
リンクのテキストとそうでない通常のテキストを、一目でわかるようにするということは、再確認したい基本的な文法です。
最も無難な設定は、大半のブラウザのデフォルト設定である青色文字にアンダーラインです。しかし、サイトによっては青色文字がミスマッチという場合もあります。そうした場合には、文字色は変えてもアンダーラインは残す、青色系統でも違和感のない色にする、青色もアンダーラインもなしでそれ以外の動作で知らせる、など分かりやすくするために柔軟に対応しましょう。
色やアンダーライン以外では、マウスカーソルがリンクテキストの上にある時、文字色が変わったり、アンダーラインが現れたり（消えたり）、背景色を変えたり、これら複数を組み合わる、といったやり方があります。
文字のデザイン
Webページの90%以上は文字です。そして文字にもデザインとして考えるべきことが多くあります。ここでは文字にまつわるインターネット上の文法について解説します。
レディング、カーニング、トラッキング
読みやすさや美観を気にするのであれば、文字の調整を行う必要があります。調整の技法として良く知られているのがレディング、カーニング、トラッキングの3つです。
レディングは、行間のスペースを調整することです。
カーニングは、1つ1つの文字同士の間隔を調整することです。文字には直線やカーブ、斜線、角などの形状があるので、人間の視覚上で見た時の均等さのために、文字間を詰めたり広げたりすると、文字の視認性が向上します。
トラッキングは、文字グループ間の調整です。例えば「This is a pen」とある時、個々の単語に含まれる文字の間隔の調節はカーニングですが、単語同士の間隔を調節することはトラッキングに当たります。
文字数
一行が長すぎたり短すぎたりすると読みづらくなり、読む箇所を見失ったり、読み疲れたりしてしまいます。
明確な決まりがあるわけではありませんが、和文横書きで1行35～40字程度が適切と言われています。媒体によって全体のデザインとのバランスもあるので、35～40字を目安に色々試行錯誤してみて、読みやすい文字数を探してみましょう。
フォントの比率
文字間の調節や孤立行の回避のために、フォントの比率を変えるのは間違いです。フォントは縦横比率までふくめて読みやすいよう最適化されているので、比率は変えるべきではありません。文字間のスペースに問題があるのであれば、カーニングによって対処しましょう。
フォント選び
フォントはデザインの一要素ですが、複数の種類が混在するのは読みづらくなります。コンテンツやページの制作目的と合ったフォントを、多くても2～3種類程度に抑えて使いましょう。
また、ユーザーの閲覧環境によっては、フォントを指定しても、閲覧デバイスのフォントに置き換えられてしまって、デザイナーの意図とは異なる雰囲気になることがあります。場合によってはユーザーの閲覧環境に左右されにくいフォントの導入も検討しましょう。
色彩のデザイン
色彩のデザインにも理論があります。ここでは、インターネット上の文法に即したデザインのやり方を解説します。
色彩の選び方
色彩はすぐ目に飛び込んでくるので、影響が大きく、慎重な選択が必要です。色によってある程度一定のイメージを喚起するので、色に関する理論を踏まえて選択します。例えば、法律や学校などでは誠実な印象を与える「青」、飲食店では食欲増進する「赤」、病院では爽やかなイメージの「緑」や清潔なイメージの「白」、などがよく利用されます。
色彩を組み合わせる
色彩学では2色以上の色の組み合わせが見る人に好感を与えるときに配色が調和している、と言います。そうした色彩の調和の仕方は、アメリカの色彩学者が提唱した「色彩調和の一般原理」にまとめられています。
・秩序の原理：規則的に選ばれた色同士は調和する
・なじみの原理：いつも見慣れている色の配列は調和している
・類似性の原理（共通性の原理）：色の感じに何らかの共通性がある色同士は調和する
・明瞭性の原理：明度や色相などの差が大きく、明瞭な配色は調和しやすい
この原理を手がかりに色彩を組み合わせれば、配色が調和していないといった事態を回避できるでしょう。
可読性・明瞭性を意識する
背景色と文字色のコントラストが低いといった、テキストを読みづらくしたり背景に埋没させたりしてしまうような配色は避けましょう。また、配色でない要素でも、不適当なフォントサイズ、英文で大文字ばかり使う、日本語文で漢字とかなの比率に配慮がない、なども可読性を下げる要因です。
情報のデザイン
色彩や文字のデザインを配慮するのは、スムーズに情報を伝えるためです。そのため、情報を構造に沿って伝わりやすい配置にすることもデザインの一環です。
情報を構造化する
製作・公開する側にはどう読んで欲しいか、読ませたいか、という望ましい情報の伝え方があります。これもユーザー任せではなく、情報の配置によって構造を可視化してコントロールするテクニックがあります。
ビジュアルヒエラルキーを取り入れる
もっともシンプルなのは、ページ内のテキストを異なるフォントサイズや色調で階層化するビジュアルヒエラルキーです。これにより、ユーザーが情報を取得する順序を整理するだけでなく、どう読ませて情報を伝えたいかに応じてリードしながら提示できるようになります。
孤立行を避ける
段落の最初や最後の1行だけ別のページにはみ出しているものを孤立行といい、欧文では禁則です。日本語でも、行頭に1文字と句点がはみ出るのは好まれません。
孤立行は、文章の構造上のまとまりを視覚的に崩してしまいます。また、読み手がミスリードするのを防いだり、読解スキルの低い読み手に対して配慮したり、といった観点からも孤立行は極力避けるべきでしょう。
目立つCTAを設置する
集客を意図してWebサイトを作成する場合は、CTAを目立つように設置しましょう。CTAとは、購入・制約・問い合わせなどコンバージョンにつながるユーザーのアクションを喚起するメッセージやボタンのことです。
ユーザーにしてもらいたい反応を喚起するためにも、CTAは位置や色彩を目立つものにすることが重要です。
問い合わせ先を表示する
企業のサイトを訪問するユーザーの心理としては、企業にコンタクトを取ることを望んでいると考えられます。そして、Webサイトを訪問したユーザーは、滞在するか否かを数秒程度の時間で決めるため、コンタクトにつながる情報がすぐ見つからなければ離脱してしまうでしょう。
まず、電話番号・会社の所在地・メールアドレスを分かりやすいところに明記しましょう。また、問い合わせフォームの設置も有効です。ただし、ユーザー層によって好まれる問い合わせ方法は異なるので、無理のない範囲で問い合わせしやすい環境を幅広く整えると、ユーザーへのアプローチとしてより望ましいでしょう。
メディアの自動再生機能を設定しない
Webページに動画や音声のようなメディアを設置すると動きのあるページを作れます。しかし、ユーザーがどのようなタイミングでそのページを開くかは分かりません。開いたページから突然大音量が発せられたり、動画の再生が始まったりすれば、困惑したり通信料金が気になったりして不快に感じるでしょう。メディアを設置するとしても再生はユーザーに任せ、自動再生は設定しないことをおすすめします。
*
まとめ
機能性の向上としてインターネット上の文法に従うことは、よりユーザーにリーチするWebページを作るという意味で必要なことです。機能としてのデザインに関心があり、挑戦したいという方は、ぜひわたしたちの仲間に加わってください。ご応募をお待ちしています。
