今回は、ほぼ全てのWebページで使われている要素「リンク」について学習していきましょう。
リンクはUIとも結び付きが強く、分かりにくい・使いにくいサイトはユーザーが去って行ってしまう可能性が高いので注意が必要です。
予約や購入、関連ページなどへのリンクも「リンクだ」と認識出来なければ、誰もクリックしてくれません。どこに何があるか、それが一目で分かるデザインをする必要があります。
リンクについて
リンクとは「クリックすると他ページやファイルを開く」という仕組みのことです。正式にはハイパーリンクと言いますが、省略して「リンク」と呼ばれることが多いですね。
どちらを使ってリンクを設定するにしろ、リンク要素はターゲットとするユーザーが明確に「リンクである」と認識できるようにデザインする必要があります。
テキストリンクについて
詳しくはこちら リンク
詳しくはこちら リンク
上記のどちらも「クリック」の文字がテキストリンクであるとしましょう。
下は、様々なwebサイトのテキストリンクで採用されている「青」と「下線」を使用しています。一目でリンクであると認識してもらえそうですね。
しかし、上はリンクなのか只のテキストなのかわかりにくいです。
- テキスト部分をリンクと勘違いし、クリックしてしまう
- リンクだと思わず触れてしまい、別のページが開いてしまう
- どこをクリック/タップすると移動できるかわからない
このようなことが起これば、ユーザーは不快感を感じ、サイトから離脱してしまいます。
テキストリンクは、ターゲットとするユーザーが明確にリンクである」と認識できるようにデザインする必要があります。 主に以下のような手法があり、webサイト全体のトンマナや夕ーゲットユーザーがリンクを把握できるかを考慮してデザインしましょう。
③のようにアイコンを使用する場合は、アイコンの役割を統一しましょう。 また、「新しいタブを開く」などよく使われているアイコンは、ほとんどのユーザーが意味を把握しているので初見でも戸惑いが少ないというメリットもあります。
作成時の注意
- 文章中のテキストリンク設置は出来るだけ避けましょう。文章の終わりに改めてリンクを設置することを検討します。文章の終わりにリンクが設置されている方が、本文を読み進めるのを中断せずに済みます。
- テキストリンク表現はサイト内で一貫性を保つ必要があります。
2.ボタン/ボタン風リンク
呼び名の通りボタンのように見えるリンク箇所を指します。
buttonタグやinput type="button"を使ってコーディングするもののみをボタンリンクと呼部こともありますが、本講座ではボタン風デザインのリンクを含めてボタンリンクと呼びます。
例えば、ヘアサロンサイト作成課題で作った「Learn More」はボタン風リンクです。
こうしたデザインにすることで、ユーザーに「クリックすると何かが起こる」ことを伝えやすくなります。テキストリンクよりも大きく目立つので、見落とされにくいというメリットもあるでしょう。
3.リンクの明示
最初からリンクであると分かりやすくする以外にも、たとえば、「ホバー」などで普通のテキストとの差をつけるというのがあります。マウスを動かし、ポインタを対象に載せるとリンクである要素のデザインが変化します。以下は「トヨタ自動車」のサイトです。
上のテキストリンクは、マウスオーバーで色が変化します。 下の画像リンクは、画像が白っぽくなることで選択状態を表しています。
このようにマウスオーバーでリンク要素が変化すると、ユーザーは「ここはリンクになっている」と認識しやすくなりますね。
スマートフォンのリンク
上ではでは、マウスオーバーでデザインを変化させ「リンクである事をユーザーに伝える」という方法を紹介しました。しかし、スマートフォンの場合はどうでしょうか。スマホは、パソコンと違いマウスオーバーというものがありません。
つまり、他の方法でリンクである事を伝えなくてはいけないという事です。 「リンク」のように青文字+下線も、そのひとつですね。
以下は、リンクを示す方法の一覧です。
本文との色を明確に変える(テキストリンク)
上図は文章の中にリンクがある例です。「特別割引券」という文言のみ、明確に本文と色を変えています。しかし、①の場合はリンクであるとは気づいてもらえないかもしれません。
②では「下線」を加えています。しかし、文章の中だと下線をつけても分かりにくいですね。やはり、文章の中のリンクであればパソコン、スマホなどの閲覧デバイスに関係なく③「青文字+下線」が１番分かりやすいでしょう。
ボタン型にする
指でタップするスマートフォンの場合、文中のテキストリンクは面積が狭いので使いにくいです。ユーザーを誘導したい部分であれば、ボタンタイプのリンクを設置した方が良いでしょう。
シャドウなどをつけると、より分かりやすくなるのではないでしょうか。ただし、こうしたボタン型リンクを使うのであれば、他の部分でボタンを多用しないようにしましょう。
案内テキストをつける
画像リンクは、ホバーがなければリンクだと認識されずらいでしょう。 案内テキストがあれば、リンクであると分かりますね。 また、枠内に画像とテキストを置く「カード型」にしてしまうのも良いかもしれません。
◆実習1.リンクの形を決める
今までに作ってきたワイヤーフレームでは、リンクになる予定の箇所が多くあります。 PC,スマートフォンどちらでも使いやすいように「お問い合わせはこちら」「Learn More」などの部分に、囲いを付けてボタン(風)のリンクとして設定しておきましょう。
枠線色や背景色等はデザイン時に決定します。 現段階では単なるテキストリンクではないということが伝わればOKです。
【ホーム】
【カテゴリー】
◆実習2.スマホレイアウトの作成
ホーム・カテゴリ・詳細３ページ分の、スマートフォン用のワイヤーフレームを作成します。 見出しのフォントサイズはパソコンレイアウトそのままでは同じだと大きすぎるので、再設定しています。
※下記では要点のみを紹介しています。
【ホーム】
基本的にはカラム落ちタイプを意識して、それぞれの要素を配置していきます。 カルーセルと重なっているテキストは非表示にしました。
【クロージング】
上下配置に変更。 １つ出来たら複製して他のページ分にも追加します。
【カテゴリ】
見出し→画像→説明文→詳細ページへのリンク という順序で統一して配置します。
【詳細】
左右横並びの要素を全て縦配置に変更。 お客様の声はテキストの位置を下げることで読みやすさを維持します。
まとめ
他のページへと誘導するリンクは分かりやすさが重要です。 リンクだと認識して貰えないと、当然ながら先のページには進んでもらえませんよね。
見た目のオシャレさだけではなく、ユーザーの使い勝手も考えたリンクを設計しましょう。