ライトボックスってなに?WEBのパーツに関するデザイン用語

20年以上の実績があるシステム開発会社の視点で、システム開発会社の選び方や費用について解説しています。
「システム会社が多すぎて、何を基準に選べばいいのかわからない!」という方は、こちらの記事をご参考ください。

それでも「よくわからない……」という場合は、弊社セルバまでご相談ください。

サイト制作を外注するなら、ある程度Web用語を理解しておくと、制作会社とのコミュニケーションがスムーズに進みます。

今回は、WEBのパーツに関する用語を紹介していきます。

目次

ヘッダー/フッター/メイン/サイドバー

ヘッダーは、サイト上部に表示される部分パーツであることに対して、フッターは、サイト下部に表示される共通パーツです。
ヘッダーとフッターの間に位置するのが、メインメニューであり、その左右に表示されるのがサイドバーです。

カラム

ページのレイアウトのことをカラムと言います。
カラムには、メインとなるコンテンツが、文字や画像、動画によって配置・表示されています。
カラムには、Webサイトの内容や量によって、1カラム、2カラム、3カラムの種類があります。

「LINE バイト」のように、メインページのみを表示させる方法を、1カラムと言います。またメインとサイドバーにコンテンツが分かれている「ホリエモンドットコム」のようなサイトが2カラム、株式会社バンダイの公式通販サイト「プレミアムバンダイ」のようにサイドバーが2つある情報量の多いサイトが、3カラムです。

<1カラムのWebサイト例>

【引用:http://baito.line.me/

<2カラムのWebサイト例>

【引用:http://horiemon.com/

<3カラムのWebサイト例>

【引用:http://p-bandai.jp/

グローバルナビゲーション

【引用:https://www.selva-i.co.jp/

サイトの主要なコンテンツへ誘導するためのメニューであり、もっとも重要とされるメインのナビゲーション。弊社のサイトでみると、赤線で囲っている部分が、該当箇所です。

パンくずリスト(パンくずナビゲーション)

【引用:https://www.selva-i.co.jp/service/site_produce.html

今、サイト内で、自分がどのページにいるかを表示するナビゲーションです。グリム童話「ヘンデルとグレーテル」で、迷子にならない様に目印として、森に置かれたパンくずから、付けられた名称です。弊社サイトメニューの赤線部分のように、パンくずを辿っていくと、トップページに戻ることができます。

アコーディオンメニュー(プルダウンメニュー)

リンクをクリックすると、アコーディオンのように、メニューが開いたり、閉じたりするメニュー。とくにスマートフォンでは欠かせないUIです。

CTAメニュー

【引用:https://www.selva-i.co.jp/recruit/

CTAとは、「Click To Action」の略であり、直訳すると行動喚起という意味になります。上図にある「ご相談・お見積りフォーム」のように、サイト訪問者に対して、「商品を購入する」「資料を請求する」「お問い合せをする」など、起こしてほしい行動を誘導するボタンが、CTAメニューです。

ライトボックス

ライトボックスを設置すると、サムネイル画像をクリックした際、イメージを拡大表示してくれます。画像ポップアップとも言い、ECサイトで商品アイテムやサービスの一覧を表示する際に、効果的な使い方をすることが可能です。

画像ギャラリー

多数の画像を表示する際に、ウィンドウのサイズに応じて、最適なサイズで表示してくれる手法です。ただ縮小するだけではなく、Webページに最適化されるようになっています。

サムネイル画像

【引用:http://hokuohkurashi.com/

多数の画像や印刷物ページを一覧表示する際、ユーザーが見やすくなるように、縮小して表示させる画像のことを言います。上の画像は、株式会社クラシコムが運営するネットショップ「北欧、暮らしの道具店」のアイテムが、カテゴリ別に一覧となっているサムネイル画像です。

モーダル

モーダルとは、モーダルダイアログ、またはモーダルウィンドウと呼ばれており、開いているダイアログボックス、ウィンドウを閉じるまで、他の操作が出来なくなります。

ユーザーの行動を制限したい際には、効果的ですが、ユーザーにとっては、操作に不便さ感じさせる場合もあります。ユーザーのユーザビリティのためにも、ウィンドウを閉じなくても、他の操作ができるダイアログボックスを、モードレスと言います。

タブ

【引用:http://goope.jp/

タブをクリックすると、複数の画面を、1つのウィンドウ内で切り替え表示できるようになります。
上図は、ホームページ作成サービス「Goope」のサイト上で、表示されているタブです。

またグラフィカルユーザーインターフェイスの1つ、Webページを制作する上でも、重要視されているヴィジュアルデザインです。

プログレスバー

行っているタスクの進捗状況を、横長の棒グラフによって表示してくれるインターフェイスです。
例えば、ファイルをダウンロードする場合や、ソフトウェアをインストールする場合など、実際の処理がどれだけ進んでいるのかがわかります。

ソーシャルボタン

【引用:http://www.cocacola.co.jp/

SNSボタンとも言い、Facebookの「いいね!」ボタンや、Twitterの「ツイート」ボタン、ほかにも、はてなブックマークや、Google+などのSNSと連携させるボタンのことです。情報が外部にシェアされることで、情報に注文が集まりやすくなります。事例の1つとして、日本コカ・コーラ株式会社のWebサイトに表示されているソーシャルボタンを上げています。

ページング

ページングとは、長い文章になってしまった記事を、複数のページに分割をして、各ページのリンクを並べて、高いアクセス性を実現してくる機能です。

ページネーション

1つのWebページにある長い文章を分割して、切り替え表示させる機能をページネーションと言います。

WEBのパーツに関するデザイン用語まとめ

ヘッダー/フッター/メイン/サイドバーサイト上部に表示される部分パーツ/サイト下部に表示される共通パーツなど
カラムページのレイアウトで、メインとなるコンテンツが、文字や画像、動画によって配置・表示される。
グローバルナビゲーションサイトの主要なコンテンツへ誘導するためのメニュー。
パンくずリスト今、サイト内で、自分がどのページにいるかを表示するナビゲーション。
アコーディオンメニューメニューが開いたり、閉じたりするメニュー。
CTAサイト訪問者に対して、起こしてほしい行動を誘導するボタン。
ライトボックスサムネイル画像をクリックした際、イメージを拡大表示する。
画像ギャラリー多数の画像を表示する際に、ウィンドウのサイズに応じて、最適なサイズで表示してくれる手法。
サムネイル画像多数の画像や印刷物ページを一覧表示する際、縮小して表示させる。
モーダル開いているダイアログボックス、ウィンドウを閉じるまで、他の操作が出来なくなります。
タブ複数の画面を、1つのウィンドウ内で切り替え表示する。
プログレスバータスクの進捗状況を、横長の棒グラフによって表示してくれるインターフェイス。
ソーシャルボタンSNSボタンとも言い、SNSと連携させるボタン。
ページング長い文章の記事を、複数のページに分割をして、各ページのリンクを並べる。
ページネーション1つのWebページにある長い文章を分割して、切り替え表示させる機能。

WEB事業でお困りではありませんか?

サイトのアクセスが増えない……集客って何をすればいいの?

システムを作るなら損したくない!

新規事業を立ち上げたい!補助金は使える?

WEB業界・人材業界で創業20年以上、経営支援を行ってきました。
システムの開発のほか、補助金の申請支援や集客代行も承っております。
お気軽にご相談ください。

\ 小さなことでもお気軽に /

会社情報 | 実績 | サービス

  • URLをコピーしました!
  • URLをコピーしました!

株式会社セルバのアバター 株式会社セルバ WEBシステム開発会社

2003年創業。大阪・東京を拠点にWEBシステム開発、WEB集客支援、人材事業、補助金コンサル等を行っています。
ただシステムを作るだけではなく『売れる仕組み』を創ることを意識して、クライアントの利益向上を追求します。
開発会社の選定代行やレベニューシェアでの開発も積極的に行っているので、まずはお気軽にお問い合わせください。

目次