日々、ブログやサイトのリニューアル案件に関わっていると、
[speech_bubble type=”ln-flat” subtype=”L1″ icon=”1.jpg” name=””] ここをもう少しこうしたら、ユーザービリティがあがるのになぁ。 [/speech_bubble]
と感じることがあります。
ユーザーが使いやすいと感じるかどうかは、ほんの小さな思いやり、配慮がどれだけ積み上げられているかによると思うんです。
それは直感的な心地よさにもつながるもの。
で、職業柄、どうしても改善ポイントに目がいってしまいます。
今日は、小さなことだけど気を付けてあげると良い、リンクの貼り方についてお伝えしたいと思います。
[ad#co-1]外部のサイトに飛ぶときは、リンク先のページを別ウインドウで開く設定をしよう
これ、やっていますか？
基本的なことなんですが、ここ最近、同じウィンドウで開くパターンに連続して遭遇してしまい、ストレスだなーと思ったので取り上げました。
リンクを貼るときには、同じウィンドウで開くか、新しいウィンドウで開くかを設定することができます。
サイト内のリンクは同じウィンドウで開く
別のサイトに飛ぶ場合は新しいウィンドウで開く
というのが一般的です。
どんな感じかというと。
ここをクリックすると同じページが別ウィンドウで開きます
今見ているウィンドウで同じページが開きます
この使い分けがなぜ必要かというと、
外部のサイトを同じウィンドウで開いてしまうと、
他のサイトでいろいろ見て回ったあとに、元のサイトに戻りづらくなるからです。
戻るのにブラウザの「戻る」を何度もクリックしないといけません。
でも、別ウィンドウで開いていれば、「閉じる」をクリックするだけで戻ることができます。
ウィンドウを消したら、元々見ていたサイトも消えてしまって、もう一度履歴から遡ってみたり、検索して再訪問してみたり、、、という経験ありませんか？
あれ、結構ストレスですよね。
かといって、次々に新しいウィンドウが開いて増えていくのも鬱陶しい。
なので適切な使い分けが必要です。
htmlによるリンクタグの別ウィンドウ設定方法
新しいウィンドウでリンク先のページを表示させたい場合はhtmlソースの<a>タグ（アンカータグと呼びます）の部分を編集します。
aタグに「target=”_blank”」を追加してあげれば良いです。
<a href=”https://saitoumasami.com/link-another-window” target=”_blank”>ここをクリックすると同じページが別ウィンドウで開きます</a>
※入力は全て半角でしてください。
WordPressを使っている人は、編集画面をビジュアルモードではなくテキストモードにするとhtmlソースを直接編集できます。
WordPress向け別ウィンドウの設定方法
htmlソースを編集するのはちょっと不安。。。
という人でWordpressを使っている人は、次の方法でも別ウィンドウ設定が可能です。
まず、編集画面を開くと、アイコンが並んだ中に鎖のマークがあると思うので、リンクを貼りたいテキストを選択してこのアイコンをクリックします。
そうするとアドレスの入力フォームが表示されるので、リンク先のアドレスを入力して右端にあるアイコンをクリックします。
「リンクを新しいタブで開く」にチェックを入れて、「更新」ボタンを押します。
はい、これでOKです。
ナビゲーションメニューのリンクを別ウィンドウで開く方法
次に、Wordpressのナビゲーションメニューの別ウィンドウ設定について説明します。
WordPressのサイトでよく見るのが、ナビゲーションメニューにFacebookやTwitter、インスタなどSNSへのリンクを貼っていて、同じウィンドウで開いてしまうパターン。
これこそまさに、SNSに行ったらもう戻ってこない現象を引き起こします 笑。
SNSを閲覧したユーザーが元のサイトに戻って来やすいように、別ウィンドウで開く設定にしてあげましょう◎
まず、管理画面の「外観」→「メニュー」からメニュー設定ページに進みます。
試しに設定しているメニューをひとつ開いてみましょう。（▼マークをクリックすると下に開きます）
↓これがBeforeの状態です。
次に、画面上部にある、「表示オプション」をクリックしてください。
「リンクターゲット」にチェックを入れます。
さっきのメニューをもう一度見てみると、、、
「リンクを新しいタブで開く」というのが追加されているので、これにチェックを入れて「メニューを保存」を押すと完了です◎
この機能、分かりづらいので活用していない人多いと思います 笑。
知らなかった〜という方はぜひ。
[sp]
[ad#co-2]
[/sp]
おまけ：リンク設定に関するワンポイントデザインアドバイス
最後に、デザインについてのワンポイントアドバイスを。
わたしは外部のページにリンクを貼るときは、「別ウィンドウで開くよ〜」というのが伝わるアイコンを表示するようにしています。
これも、直感的に情報を伝えるためのちょっとした配慮です。
リンクはユーザーにアクションを起こしてもらうためのものなので、一目でリンクだと理解できることが求められます。
リンク箇所だけ色を変えたり、アンダーラインを表示したりといったことは基本ですし、リンクの前に矢印などのアイコンをつけて誘導してあげるのも親切です。
ひと目でリンクだと分かりますよね。
ちょっとした手間にはなりますが、そういう配慮が積み重なって、心地よいブログ、サイトというのは出来上がります。
特に意識してなかったなぁという人は、今後気をつけてみてください。
