2023.09.19cocoブログ

ホームページ制作に役立つ！WEB専門用語をわかりやすく解説！

工務店・建設業のホームページ制作会社webcoco(ウェブココ)です。
ホームページを外注した際に、Webデザイナーやディレクターからカタカナの専門用語が飛んできて、「何を言っているのかよく分からなかった」という経験はありませんか？
もちろんデザイナー側が専門用語を使わずに分かりやすい言葉に置き換えて説明すべきです。
ですが、万が一このような場面に立ってしまった時、分かったフリをして十分な意思疎通が出来ていないままプロジェクトが進んでしまうと、あとから修正による余計なコストや時間が掛かってしまう恐れもあります。

今回は、当サイトを参考例として、Webサイトの基本的な専門用語についてのご説明します。
満足のいくホームページができるように、ぜひ参考にしてみてください。

 

Webページの構成に関する用語

ヘッダー

header・「head（頭）」を意味する通り、ページ最上部に表示される部分をさします。
ロゴマークやページタイトル、メニュー、検索窓などが表示されます。
ヘッダーはどのページの時でも常に表示される部分。情報を分かりやすく設計することで、見せたいページへの動線として活用できます。

 

今、皆さまが見てくださっている当サイトのヘッダーもぜひ実際に見てみてください。
「サービス」をマウスをかざすと下に出てくる「ドロップダウンメニュー」を活用しているので、ユーザーがいち早く目的のページにダイレクトにアクセスできます。
また、画像を用いることでパッと見てすぐに分かる、ユーザビリティを意識したデザインになっています。

 

スマホ表示の際は二本線のナビゲーションメニューが表示されます。
タップするとメニューがスライド形式で展開されます。このように、コンテンツが多い場合はスライドメニューにすることをおすすめします。

 

ファーストビュー

ユーザーがWebサイトに訪れた際に最初に目に入るエリア全体のことをさします。
多くのユーザーはファーストビューを見て滞在するか離脱するかを決めます。なので、Webサイト制作の際に特に注力するところでもあります。
ちなみに「メインビジュアル」と同義されることもありますが、「メインビジュアル」とはファーストビュー内に配置される画像などの視覚的なコンテンツのことをさします。

 

当サイトのファーストビューは、制作実績が2画面に分けて配置されているスプリッドレイアウトになっています。
サイトに訪れてすぐに制作実績がユーザーの目に入るようになったので、ファーストビューを見ただけでも弊社がどんな制作をしているのかがわかります。
また、気になった制作実績があれば、その画像をクリックすると詳細ページに直接アクセスすることができるので、ユーザーにより興味を持っていただけると思います。

 

フッター

footer・「foot（足）」を意味する通り、ページ最下部に表示される部分をさします。
ロゴマークや企業概要、ナビゲーション、コピーライトなどが表示されます。最近ではInstagramやX（旧Twitter）などのSNSのリンクが配置されていることもあります。
最下部でユーザーの目に触れづらいからといって侮ってはいけません。ページを最後まで読んで、フッターに辿り着いたユーザーに対して次のアクションへ誘導することも重要です。当サイトでは、フッターに「無料お見積り」と「電話問い合わせ」のボタンを大きく配置しています。

 

サイトデザインに関する用語

パンくずリスト

パンくず・・・何だか面白い名前ですよね。
パンくずリストという名前は童話の「ヘンゼルとグレーテル」に由来しています。主人公の兄妹が森の中で帰り道を見失わないようにパンくずを落としながら進んでいったという場面があります。
その由来の通り、パンくずリストはWebサイトを訪問したユーザーが現在どこのページにアクセスしているのかを知るための道しるべです。

当サイトではホームページの雰囲気に合わせて横線「ー」になっていますが、一般的には「>」や「/」などを用いて表示されることが多いです。また、ほとんどの場合はヘッダーの下部付近に設置されますが、フッターに設置されていることもあります。

 

パララックスデザイン

直訳すると「視差」を意味するパララックス。背景画像や要素をスクロールなどの動きに合わせて、スピード感を変えたりアニメーションを加えたり配置を変化させたりすることができます。
Webサイトに遠近感や立体感を持たせることができ、先進的でデザイン性のあるWebサイトにしたいという方におすすめの表現方法です。
ただ、あまり複雑なものにし過ぎると、ページの表示速度が遅くなったり、複雑すぎてどこを見れば良いのか分からなくなってしまったり、とユーザーがサイトから離脱する原因となるので注意が必要です。

当サイトでは、トップページにパララックスデザインを用いています。ページをスクロールしても背景画像が動かないようになっており、奥行きのある印象を与えます。是非見に行ってみてください。

 

動きに関する用語

マウスオーバー・ホバー

マウスカーソルを、ボタンやリンクなどの対象物の上に重ねた時に起こる動きのことをいいます。
例えば、Webサイト上のリンクボタンにカーソルを合わせた際に、ボタンの色や形、大きさが変わったという経験はありませんか？
そうすることで、「これはクリック可能なボタンなんだ」とユーザーが直感的にわかるようにしています。
また、動きのあるものはユーザーの興味をそそり、ページ離脱を防ぐことにも繋がります。

当サイトでも様々なところで、様々なマウスオーバー・ホバーが見られます。是非実際にサイト内にあるボタンにカーソルを重ねてみてください。

 

アコーディオン

アコーディオンは、クリック（タップ）をすることで非表示だった要素を展開表示させることができます。
長いテキストやスマホ表示の場合に効果的に使われることが多いです。
当サイトでは「よくある質問」のページで使用しています。クリック（タップ）をすると質問の答えが出てくるようになっています。

 

カルーセル

複数の画像やコンテンツが、横方向にスライドしていく仕組みのことをいいます。
どちらも1画面内では収まらない情報量の場合や、項目を分けて表示させたい場合に便利です。
もちろん縦に情報を羅列することもできますが、あまりにも長くなってしまっては、縦スクロールしていく内にお客様にストレスがかかってしまい、ホームページから離脱してしまう要因に繋がります。

当サイトでは「制作実績」の紹介でカルーセルを用いています。
カルーセルを用いることでスマホの小さな画面の中でもたくさんの制作実績を見ることができます。

 

モーダルウィンドウ・ポップアップ

当サイトではどちらも用いられてはいないのですが、よく使われる用語なのでご紹介します。

モーダルウィンドウとは、特定の操作を行わないと画面上の他の要素や領域の操作ができないウィンドウのことをいいます。「特定の操作」の例としてよくあるのは、「×印」や「閉じる」「CLOSE」などのボタンを押すことでウィンドウを閉じることができます。
ユーザーの興味をひくことができるので、必ず読んでほしいお知らせや警告など重要性が高い内容を掲載する際に用いられることが多いです。

ポップアップはWebサイトを開いたときに最前面に飛び出してくるかのように表示される要素のことです。
また、ポップアップして表示される広告のことを「ポップアップ広告」といいます。工務店ですと、見学会やイベント情報の最新情報をポップアップで出すこともできるのでアピールになります。

 

 

まとめ

今回ご紹介したのはほんの一部ですが、WEB専門用語の中でも多く使われる用語です。
知っておくと、ホームページ制作の際にお役に立てると思います。
今回は当サイトを参考例としましたが、ぜひwebcocoの制作実績もご覧いただければと思います！
気になるコンテンツやデザインがありましたら、まずは簡単なご相談からでも大歓迎ですので、お気軽にお問い合わせください！