人と人のコミュニケーションで、「伝えたいことと違う形で受け取られた…」ということはしばしばあると思います。

webサイトでは、そんな誤解が日常茶飯事で起こっています。その原因のひとつが、ボタンやタブ、ナビゲーションメニューといった機能性を持つパーツにあると思います。

それらを単なる機能と捉えず、ボタンやタブにもメッセージが含まれると捉えるほうが、誤解を避けて伝えたいことをユーザーに伝えられるのではないでしょうか。

ボタンやタブを、論理的な文脈のひとつと捉えて設置する

webページ（あるいはwebサイト）も、人と人とのコミュニケーション手段のひとつです。

ページ構成の考え方は、プレゼン資料とほぼ同じだと思います。何を伝えたいのか？を素直に考えればよいのです。

プレゼンを聞く人はちゃんと前から見てくれる人、パラパラと流し見する人、後ろから開いて確認する人などさまざまです。しかし、基本的には、プレゼン資料は前から見られることを前提に、伝えたい結論に向けて論理的に構成するはずです。

ボタンやタブも論理的な構成の一部として考えると、誤解なくコミュニケーションができ、ユーザーにアクション（CV）してもらいやすくなります。

ボタン・タブ設置の具体例

ここから、具体例を2つ挙げて説明します。

◆具体例1：商品の購入ボタンをページ内のどこに置くか？

まずは、そのページを見るユーザーが、商品を買うにあたって必要と思われる情報を提供します。

その上で、文脈に沿って「この商品は〇〇というメリットがあるので、購入しませんか？」と自然につながる場所に購入ボタンを置きましょう。

文脈に沿ったアクション提案として、購入ボタンを置けば良いのです。どこに何個置くかは、文脈次第です。

たとえば、情報をしっかり読んで購入を決めるユーザーが多いのに、ページの最上部にボタンを置いたら、違和感を持たれるかもしれません。逆に、事前に情報を得てからサイトに来訪するユーザーが多い場合は上部に配置するのもありでしょう。

「どこに置くか？」よりも、「ユーザーの購買プロセスに合ったタイミングで提案できているか？」を意識するほうが、誤解なく伝わるのです。

◆具体例2：タブ形式で情報を切り替える場合、どのように見せるか？

タブ形式は情報がスッキリ整理されますし、ユーザーにとってもなじみがあって使いやすいでしょう。

ただし、タブを採用すると必ず「どのタブを最初に表示するか？」が問題になります。

ユーザーは最初に表示しているタブをメイン情報と（無意識レベルかもしれませんが）捉え、それ以外は優先度が低いと感じます。

このメッセージが商品の購入検討に影響しないと思われる場合もありますが、影響すると思われる場合は、タブの順番をどうするか？そもそもタブ形式を採用するか？をしっかり考えましょう。

まずは「誤解を生んでいるかも？」と意識するところから

webサイト上のコミュニケーションは顔が見えないため、誤解が生まれやすいです。

特に、ボタンやタブといった機能性がある要素は誤解を生みやすく、しかもwebサイトの制作者が「誤解を生んでいる」と気付きづらいところでもあります。

それは、サイト回遊の導線を設けたい、情報を整理してみせたい、などの必要があって設置されるものだからです。

ここで、webサイトの構成要素を以下の4つに分けてみます。

• コンテンツ：伝えたい内容。テキスト、写真、動画など
• レイアウト：コンテンツをどの順番で伝えるか
• デザイン：コンテンツをどう見せるか（印象付け、見え方の強弱など）
• 機能：操作性に関わるもの。ボタン、タブ、ナビゲーションなど

機能的な要素は、コンテンツ、レイアウト、デザインに付随して検討されることがほとんどです。

（例：伝えたい情報が多いけどスッキリみせたい→タブ表示にしよう！）

つまり、webサイト制作者は「webサイト構成の必要上、機能的な要素を設置する」のに対し、ユーザーは「機能的な要素もコンテンツの一部と捉えている」という点で視点のズレが生じています。

その結果、制作者が気付かないままに、ユーザーの誤解を生んでいるかもしれないのです。

そこで、はじめから「ボタンやタブにも何らかのメッセージ性がある」と意識して設置すれば、ユーザーの誤解を避け、伝えたいことが伝わるのではないでしょうか。これが今回の記事での提案です。

おまけ：「CTA」に振り回されないために

「購入ボタン」や「資料請求ボタン」などを指す言葉として、「CTA（Call To Action, 行動喚起）」というマーケティング用語があります。

ただ、「CTAを適切に配置しよう！」という言い方をすると、まるでWeb特有の「正しい配置ルール」があるかのように錯覚しがちです。その結果、「上部がいい？下部がいい？」「スクロール率何%のところに置くのがいい？」などと、議論がずれてしまうことがあります。

しかし、「CTA」とは単に「購入ボタン」「資料請求ボタン」「問い合わせボタン」のことです。ボタンであれば、上述のように文脈に沿って「ユーザーが自然にアクションできる流れを作ること」が大事、というのが私の考えです。

以上、ボタンやタブといった機能的な要素をユーザー視点で設置しましょう、という話でした。お疲れ様でした。