• このエントリーをはてなブックマークに追加

目次

共通

ヘッダー

ロゴやナビゲーション、ヘルプメニューなどを配置する上部の共通メニューコンテンツ部分。

サイドバー

側面に配置する共通メニュー配置ブロック。主に下層ページへの中間リンクやおすすめリンクなどを設置する。

サブ

メインがそのページの主となるコンテンツであるならば、こちらはサブという名称となる。主にサイドバーやレフトナビ、ライトナビを指す。レフト・ライトどちらでもサブと言う。またはサイドバーとも呼ぶ。案件により呼び方は様々。

レフトナビ

左側に主に表示される、メインコンテンツにたどり着く際に道標となるメニューが表示される。サイドバーの具体的な位置を指定した呼び方。

ライトナビ

レフトに対し、反対側である右側に表示される共通メニュー。

フッター

ページ下部に共通コンテンツとして表示されるパーツ。コピーライト表記やサイトマップリストリンク、サイトの使い方を案内するものや、ECサイトであれば店舗の案内を行うために配置。主に注意深くサイトを利用する人向けに発信するパーツであるため、目的に応じて中身を決定する。

多くは小さな文字をたくさん配置する。またはまったくフッターの中身はなく、コピーライトのみやフッターそのものがないケースも。カテゴリーの一覧やプロフィールを表示させるというのも一つのアイデア。

メイン

そのページ内で最も利用者に伝えるべき内容が配置されている領域。中身はページの目的によって様々。見出し・段落・画像などが規則正しく配置されたコンテンツもあれば、読み物のページのように文章が大部分を締めているもの、画像が何枚か配置されているものや、動画とその関連の内容を表示させると言ったケースも。

ユーザビリティを重要視するのであれば、配置のバランス・大きさ・色・形状・ボリュームを考え、他のページでも同様のパーツは同じ見た目になるよう、レイアウトすることに努める。

ナビゲーション関連

ナビゲーション

他のページへの行き来を手助けするためのリンクが配置されたメニュー。ページが多いWebサイトは主に中間のページに当たる、カテゴリーやコンテンツの親ページなどにリンクされる。

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

グローバルナビゲーションは、共通ヘッダーなどに配置されるナビゲーションメニューの一つで、ローカルナビゲーションよりも広範囲・親要素の強い分類ページにリンクする。メニューの数はサイトに寄って様々だが、初めて訪れた人がすぐに全体像を把握するために、リンクの数は制限したほうが良い。

メニューをホバーしたときや、クリックした時にサブメニューが表示されるといううまく収納されたコンテンツとして表現することも、数が多いサイトであればよく見られる。

ローカルナビゲーション

グローバルナビゲーションに対してその下層のページへのリンクリストを表示するための領域。開いたページが親ページであるならば、その下層の子ページへのリンクが表示される。ナビゲーションの設置目的としては、トップページに最下層までのリンクを設置しない。あるいは、親ページから目的のページへ徐々にカテゴリー、分類を絞り込みながらたどり着くことで最も早く求めている情報を表示できるようにすること。ナビゲーションに多くを表示させることにより、全体像が把握できなくなるとナビゲーション本来の目的が果たせなくなるため、階層構造をうまく構築し、表現することに努める。

ヘルプナビゲーション

利用者向けのヘルプメニュー。リストなどで表示する。使い方、ヘルプへのリンク、ご利用ガイド、はじめての方へなど。

エクストラナビゲーション

ヘルプナビゲーションと似ている。各ページへの行き来を行うためのリンクではなく、サイトの使い方や困ったときにどうすれば良いのかガイドしてくれるようなリンク類。

コンテンツパーツ

コンテンツ

そのページのメイン内容。段落などのテキスト文字。画像、商品ページならばサムネイル画像、カートボタンなど。見出しも重要な要素。見出しだけではダメで、見出しに対してその中身が詳細に理解できる内容が必要。

テキスト

文字情報。リストや文字の羅列ではなく、自然の文章に近いものが評価される。

パンくずリスト

現在表示しているページのツリー構造上の現在位置の表示と、ホームページへのリンク、中ページ、分類・カテゴリーページへのリンクをリスト上、記号上でわかりやすく表示する。

ヘンデルとグレーテルのパンくず。もとに戻るためのリンクという意味のナビゲーションの類。

メガメニュー

大きなコンテンツメニュー。そのまま表示しておくこともあるが、ボタン一つで表示非表示を切り替えるということも。主に、目がメニュー内にはカテゴリーリストリンクやおすすめバナーなどを表示させる。

サイトマップリスト

カテゴリーの一覧、ショップ情報、サイトの情報、この記事を執筆した人などの情報をフッターなどのあまり目立たない場所に大きくリスト上にして表示させる。

カード

誰が執筆したのかがわかるようにサムネイルとその人の氏名、簡単なプロフィールの載ったカード上の補足説明、執筆者情報。他に、関連する記事へリンクする際、サムネイルやタイトル、概要が載ったカード上の記事一覧などを指す。

補足

そのページのメインコンテンツの補足内容。または、段落内で出てくる専門用語などの補足説明。

画像・ビジュアル関連

画像

写真/イラスト/ぐらふなど、文章や何かを説明したりぱっとイメージを抱かせるために活用するファイル・メディアは画像と言う。

バナー

画像の中で、クリックを促すための文言やキャッチな目を引く写真・イラストが印象的な画像。大きいもの・小さいもの・長いもの、小さいもの、正方形のものまで様々。

サムネイル

商品一覧に表示させる、商品のページへのリンクするための画像。商品画像を小さくリサイズしたもの、そのページのメインビジュアルなどを小さくしたものをサムネイルと呼ぶ。

メインビジュアル

そのページを表す内容として目を引きつけたり、内容をぱっと印象づけるために利用する画像のこと。

メインバナー

看板画像などとも呼ばれることもある。またメインビジュアルとも。バナーと言うので、おおよそは文字が大きく入っていたり、そのページの内容がテキストで細かく記載されているものを指す。

看板画像

そのページの内容がわかるように使われるもので、

カテゴリーページのイメージと関連性がわかりやすいもの、まとめられたページの内容であれば、
そのまとめの内容がわかるような看板となる画像。

サインボード

看板の英語読み。横長の印象が強い。サイト全体の看板としてロゴよりも大きなものもサインボードということも。

ロゴ

そのサイトを表すアイデンティティマークのこと。企業のロゴを使ったり、サイトのブランドとなるアイコンが利用される。さらに、小さなテキストキャッチコピーなどが記載されることも。

アイコン

リスト状のメニューリンクのリストマークとして利用される時に、そのリンク先の情報がぱっとみてわかるような単純な形状をしたもの。イラスト、色数が少ない・ピクトグラムに近いもの・シルエット状のものが多い。

ブランドロゴ

実際の店舗や企業などで利用されているブランドを表すロゴ。

CI

コーポレート・アイデンティティ。おもにコーポレートを表すアイデンティティ・シンボルなどを指すが、画像を指して言うことも。

アイコン

アイコン

マーク。そのリストやテキスト・ワード、さらに文章などの頭や近くに表示させることでそれは何を表しているのかということが端的にわかるようにするための小さい画像。

タグ

商品タグのような装飾がされたマーク。アイキャッチ画像。

付箋・ポストイット

付箋状のアイコンで、タグがこのような形状をしているものもある。

バッジ

手順の番号、ランキングの例えばNo1~10などその部品が何を示しているのか、どういった立ち位置なのかということがわかるもの。あるいは、どういった特製のあるものか、たとえば商品価格が下がっているものであれば、OFF・SALEなどの文字を装飾してバッジ状にしたもの。

マーク

エクスクラメーションマーク(!)やピクトグラム、シルエットなどを使って、その範囲の文章やリストなどに注意を引きつけるために利用する画像。注意以外にも、文章内などでリンク先に飛んでほしい時にパッと目を引くマークを付与することで、どういった特性・どういった動作の機能をもっているのかがわかる。

★★★インタラクティブパーツ

スライダー

カルーセル

フェードイン・フェードアウト

プログレスバー

モーダルウィンドウ

ライトボックス

★★★ユーティリティパーツ

ハンバーガーメニュー

ステップバー

フローアイコン

ポップアップ

ポップオーバー

フローティーングバナー

常に同じ位置、近い位置に固定されて浮かんで表示される前面レイヤーのバナー。イチオシのバナーやそのWebサイトの共通コンテンツとして訴求する時に設置する。

ツールチップ

マウスカーソルを当てた時に表示されるポップアップ型の補足情報文章や、簡単な吹き出しの補足内容など。

スプリングボード

画面に整然と並べられるソフトウェア・アプリケーションのようなアイコンボタン。限られた画面面積内に目的のページに移動するためのリンクとして利用される。

スライドダウン

通常はメニューを閉じておいて、マウスオーバーやクリックした時あるいはボタンを押した時にそれらの動作を条件として指定されたところに隠してあるメニューなどを上から下にアニメーション付きで表示させる。プルダウンとも。

プルダウン

セレクトボックスなどに隠されている選択肢を表示させる機能・セレクトボックスそのもの。または、それに似た動きのものや、閉じられているメニューなどを押すことで下にメニューが表示されるもの。

ドロワーメニュー

主に画面外に隠されているメニューを右から左へ、あるいは左から右へアニメーション付きで表示させる。

★★★形状・ボックス

カラム(列)

1カラム(1列)

2カラム(2列:サイドバーとメイン)

3カラム(3列:サイドバー左・サイドバー右・メイン)

シングルカラム

マルチカラム

ボックス(項目)

アーティクル(機能をまとめたボックス)

セクション(各項目)

★★★レイアウト

グリッドレイアウト

カードレイアウト

タイルレイアウト

カラムレイアウト

リキッドレイアウト

フリーレイアウト

★★★HTML(コンテンツ表現)

見出し

段落

画像

リスト

番号付きリスト

テーブル・表

★★★HTML(フォーム関連)

テキストボックス

シングルライン

複数行ボックス

マルチライン

ラジオボタン

チェックボックス

セレクトボックス

送信ボタン

リセットボタン

画像参照

ファイル参照

★★★システム・プログラム

お問い合わせ

フォーム

アンケート

ログイン

ログアウト

レビュー

コメント

ランキング

閲覧履歴

おすすめ・レコメンド

★★★補助機能

アラート

エラー表示

関連記事

コンテンツリンク

文章内リンク

ページング・ページネーション

コールトゥアクション

★★★ページ名称・種別

トップページ・ホームページ・フロントページ

詳細ページ

記事詳細ページ

カテゴリーアーカイブ

日付アーカイブ

アーカイブ

一覧ページ

検索結果

サブページ

マイページ

親ページ

子ページ

孫ページ

★★★画面名称

登録画面

変更画面

削除画面

完了画面

★★★ユーザー動作

マウスカーソル

マウスオーバー

ホバー

アクティブ

フォーカス