• 最低限知っておきたい!Webサイトを外注したときに登場する基本的なWeb用語とは?

    こんにちは。松島まりこです。
    Webサイト(ホームページ)は自社や個人で制作すればコスト削減につながりますが、閲覧者であるお客様(ユーザー)の方々に見やすく設計されたデザインと構造のWebサイトを用意しようとすると、技術面やクオリティでかなり不安がよぎりますよね?

    そんな時は「やっぱり知り尽くしたプロ(制作会社)に依頼(外注)しようかしら・・」と考えるのが一般的です。

    そして、“せっかく外注するのなら・・”と理想形をイメージしますが、聞きなれない専門用語が出てきて「何を言っているのかしら。意味がわからないわ??」など困惑するケースがあるかもしれません。

    当たり前のように使われてしまうと聞きにくい空気になって、わからないまま話を進めてしまって余計複雑になってしまった・・なんてことにならない為にも基本的なWeb用語について解りやすくご説明していきますね。

    なぜ基本的な用語を押さえる必要があるの?

    インターネットに詳しくなかったり、どのようなデザインがよいのか分からない場合、制作会社に一切お任せになりがちです。しかし、Webサイトはお客様との架け橋になる営業マンのようなものですから、要望をしっかりと制作会社に伝えることがとても大事でなのです。

    その意味でも基本的な用語がわからないと「認識にズレがあって、コストも時間もかかった…」という事態になりかねませんので、しっかりとご自身や会社の意向を反映したWebサイトを作り上げるためにも、基本的な用語は抑えておきましょう。

    もっとも重要な押さえておきたい5つとは?

    関連用語はいろいろありますが、何から覚えればいいのか…と悩んでしまいますよね。そこで、まずは最初に知っておきたいWeb用語を5つご紹介します。

    タイトル

    タイトルとは、検索結果に表示される部分です。検索順位だけでなく、ユーザーを流入させるための重要なポイント(キーワード)なので、クリック率を左右するともいわれています。「わからないからお任せしますよ!」ではなく、じっくりと考えて最適なタイトルをつけましょう。

    ユーザビリティ

    使い勝手の良さを表す言葉ですが、ユーザーに見やすく設計されたデザインと構造に最適化されたWebサイトのことを表す意味で使われ、ストレスなく目的地へたどり着けること“ユーザビリティが良い”と表現されています。

    ファーストビュー

    ファーストビューとは、スクロールせず最初に画面いっぱいに見える部分のことです。初めて目に飛び込んでくる情報や画像(メインビジュアル)が大きなカギを握ると言われるファーストビューは大きなインパクトを与える大切な部分なのです。

    UI(ユーザーインターフェース)

    パソコンでホームページを見る時は、無意識にマウスを移動させながらクリックしたり、スクロールしたりしますよね?その操作そのものがいわゆる人とパソコン(機械)をつなぐインターフェイスと呼ばれています。

    その“無意識”という概念でストレスなく閲覧できる環境を整えたWebサイトのことを“ユーザーインターフェースが優れている”と表現します。ユーザーが利用してこそ存在価値が生まれる事を理解し、伝わりやすく使いやすいWebサイトを構築することが大切ですね。

    SEO

    「search engine optimization」の頭文字をとったSEOとは、よく見聞きするキーワードのひとつですが、ユーザーが検索した時に自分のホームページが検索サイトの上位に表示させる仕組みのことで、掲載内容を検索エンジンといわれる“ロボット”に適正な評価をしてもらえるよう最適化(検索エンジン最適化)させるための技術のことを言います。

    「レイアウトや構成」における基本用語4つ

    ヘッダー?、フッター?

    ヘッダーとはhead、頭の部分、つまり“上”であり、フッターはfoot、足の部分、つまり“下”という領域の場所を示しています。サイドバーも同じです。

    ヘッダーページ最上部の領域で、ロゴやタイトル、グローバルナビゲーションなどが設置されているケースが主です。
    フッターページ最下部の領域で、コピーライトに加え、サイトマップのリンクを設置しているケースが多く見られます。
    サイドバーページの左右両側またはどちらか一方の片側の領域で、縦長に配置されるのが一般的です。Webページは左から右に読まれることが多いため、左側にあるとクリックされやすい傾向にあります。

    カラム(段組)とは

    前記にもありますが、サイドバーなどを配置した「縦の列」のことです。

    • 1カラム=サイドバーを無くし、メインコンテンツだけを表示させる形。
    • 2カラム=1画面の中に縦で区切られた列が左右に別れ、主に狭い方にメニューボタンを置く形。
    • 3カラム=メニューボタンとバナーを左右に置き、真ん中にコンテンツを設置する形。

    最近は、スタイリッシュさが際立つ平面的な1カラムのフラットデザインが多いですね。

    階層(下層ページ)について

    例えば、家電販売店サイトでノートパソコン購入する場合、第1階層のトップページを表示させます。次に複数(パソコン・テレビ・洗濯機など)のカテゴリーからパソコンを選択し、パソコン一覧を表示させます。その画面が第2階層になります。次にお目当てのノートパソコンを選んで購入することになりますが、そのページが第3階層となります。

    階層構造の違いによるメリットとデメリットについて

    階層が浅い目的ページにたどり着きやすいため、ストレスが少なく有利といわれており、シンプルな構造にすることがとても重要です。ただ、情報をたくさん扱う大きなサイトでは第2階層目のカテゴリーが多すぎると、目的ページとの関連性がわかりづらく、ユーザーが迷ってしまうので不向きとなります。
    階層が深い階層を掘り下げていくことで目的ページにたどり着きやすいのですが、クリックする回数が増えることで途中で離脱してしまう可能性が高まりますので、情報があまりないサイトにはオススメできません。

    リンクと種類

    “連結”や“つなぎ”といった意味をもつ「link」は、名前の通りサイト同士をつなぐものです。Webサイトを表示させるためには、URL(インターネット上の住所。サイトアドレスとも言う)が必要になります。でも、設置されたリンクをクリックすることでURLを知らなくても目的ページに移動(ジャンプ)できます。

    内部リンク同じサイト内にあるリンクのことす。わかりやすく言うと、トップページからカテゴリーや商品ページなどへの移動のことです。また、1つのページに情報がたくさん入っていて、スクロールするのが大変な場合アンカーリンクと言って同じページの中で簡単に移動できるリンクのことを指します。またページを移動することなく画像を大きく表示させたり、詳細内容を表示させるリンクのことをライトボックスと呼びます。
    外部リンク言葉通り外部に移動するためのリンクです。“被リンク”や“バックリンク”ともいわれることがあります。

    Webサイトの「デザイン」における基本用語4つ

    マルチデバイス対応

    インターネットを閲覧するためのデバイス(スマートフォン・タブレット・パソコンなどの端末)は様々ありますが、マルチデバイス対応とは、その様々な端末に対応したデザインのことで、最近主流なのが“レスポンシブウェブデザイン”と呼ばれるリサイズやスクロールを最小限にし、読みやすく、ナビゲーションしやすいサイトです。

    画像について

    「左にある小さな画像を修正したいのですが・・」といわれても場所がざっくり過ぎて伝わりにくいですよね。どの画像のことか、どんな風に見せたいのかなどをしっかりと伝えるためにも、次の用語は押さえておきましょう!

    ヒーロー画像ページ上部のファーストビューで表示されるメイン画像のことで、訪れた人の興味を惹きつける重要な画像です。サイトの印象が大きくかわります。
    アイキャッチ画像ブログページなどでよく使われる言葉で、記事を読む前にタイトルと一緒に目に入る画像です。クリック率にも大きく影響するといわれています。
    サムネイル画像ページをわざわざ開いて中身を見なくても概要や内容を把握できる縮小された画像のことです。
    ライトボックス“画像ポップアップ”ともいわれるライトボックスは、画像をお洒落に拡大表示させる機能のことです。

    ナビゲーション

    Webサイトで「ホーム>カテゴリ>詳細」のような表示を見たことはありませんか?
    これは、“パンくずリスト”といわれるナビゲーションのひとつです。

    初めて訪れたWebサイトだと、目的のページにたどり着くまでに迷うことがありますよね。そんな時に役立つのが“ナビゲーション”です。簡単にいうと、同じWebサイト内の移動など、目的のページへの経路を示して誘導する道しるべのようなものです。

    CTAボタン

    “無料会員登録”や“カートに入れる”など、最終的な申し込みや購買にいたる行動(アクション)を起こさせるボタンがWebサイトには複数存在しますよね。それを「CTA(Click to action)ボタン」といいます。

    単なるボタンに過ぎないと思うかもしれませんが、ボタンを工夫することで最終的なアクションを増やすこともできる重要な要素のひとつとされていますが、次のような種類があります。

    • ラジオボタン→「○」をポチッとクリックするタイプ
    • セレクトボックス→「ここから選択してください▼」といったボックス型のタイプ
    • チェックボックス→「□」を複数チェックすることができるのがこのタイプ

    ただ「ボタンをつけてください」と依頼するだけでは、「チェックボックスを依頼したつもりなのに、ラジオボタンだった…」なんてことになりかねません!どんなボタンにしたいのかを正しく伝えるためにもこの3つは覚えておきましょう。

    まとめ

    第一印象が肝心となってくるWebサイト。「外注して、よりよいものを…!」と思うのであれば、制作会社との意思疎通は欠かせませんよね。

    ニュアンスが違ってうまく伝えられないケースもありますから、不明なら遠慮なく制作会社に尋ねることがとても大事なのです。

    Web用語を正しく理解していれば誤解を招くケースは格段に減りますし、効率よく作業を進めてもらうことが出来るので“外注が確定”したら、いざという時に困らないためにも、基本的な用語はなるべく覚えましょう!