【紙→Webデザイン】Webサイトを構成する要素の名称と役割［パーツ編］
こんにちは。
都内の制作会社、NO DEZAINでデザインをしているnaoです。
紙→Webの違いについて気づいたこと、学んだことのアウトプット。
今回は、Webサイトの構成要素の名称と役割についてです。
まずはページ内の基本となるパーツについて。
メインビジュアル=キービジュアル？
Web沼へきて最初のころ、打ち合わせ時におや？となった部分。
同じような要素の呼び名が、紙とWebで違う…
例えば…
紙の場合：メインビジュアル（略してメイン）
Webの場合：キービジュアル（略してKV）
さらに、ヒーローイメージもキービジュアルのことだとしばらく思い込んでいたのですが、それは間違いで。
ヒーローイメージ=キービジュアルに写真を使用した場合を指すらしい…🫠
紙では、『このページのメインは「写真で」「イラストで」』ーーーといった感じで、写真を使用する際にも別の呼び方はしません。そんなベースもあり、写真に別の呼び名が存在するとは知らず、思い込みの原因に。
また、紙の場合にサムネイル（略してサムネ）といえば、詳細な構成ラフに進む前の「媒体全体の流れや仕上がりをイメージ/共有するための、小さなざっくり構成」を指すけど、Webでは「サムネ画像」のこと。
同じ呼び方で違うものを指すパターンはサムネだけかもしれませんが、これも知らないと戸惑うことに。
スムーズな進行のために
「キービジュアル」は紙媒体のメインビジュアルとの差分で、「サムネイル」は特殊パターン。だけどそれだけでなく、Webならではの初めて聞くパーツもたくさん。
上の方にあるアレ…
じゃなくって、ハンバーガーメニュー？パンくずリスト？
それらの名称も最初は分からなくて、後でググることがたくさんありました…がんばった…🥺
ちゃんと名称を知っているか知ってないかで、やりとりのスムーズさが全然違うのは、言うまでもないですよね！
もちろん名称だけじゃなく、その役割も。
というわけで、当時調べてメモしたパーツの名前と役割をまとめたいと思います。
パーツ一覧まとめ
▽紙媒体との差異
パーツとは違うけれど、制作スタート時点での専門用語も。
ワイヤーフレームも最初は聞きなれない言葉でした💦
左がWeb用語、右が紙用語。
サイトマップ = 台割
ワイヤーフレーム = 構成案
-----
メインビジュアル = キービジュアル
TOPページ = 表紙と目次
下層ページ = 中面
H1 = メインコピー
H2,H3… = 見出し,小見出し,…
▽Web制作ならでは
ヘッダーやフッターのように、Web沼に来る前でも知っていたものは、大事なパーツだけどここでは省略。
あくまでも、紙から来て🧐？となったものをまとめています。
ファーストビュー
サイトを訪れた際、スクロールせずに表示される画面
ディスプレイによって表示サイズ異なる
短時間で伝えたいことが伝えられるような構成に（離脱防止）
グローバルナビゲーション/グローバルメニュー
略してグロナビ
サイトの全ページに共通表示されるメニュー（リンク）
メガメニュー/メガドロップダウン
クリックorホバーで表示されるドロップダウン（下に出てくる）メニューの内容が多い（スペースが広い）もの
画像やアイコンを含んで、わかりやすく案内できる
メニューの階層が深くなるときなどに◎
ハンバーガーメニュー🍔
3本線がハンバーガーに見えることから名前がついた（見えるか…？）
クリックすると開くメニュー
メニューの項目が多いときや、PC版では通常のメニューを載せてスマホ版のデザインだけに使う場合も
パンくずリスト🥐
「ヘンゼルとグレーテル」でヘンゼルが森の中で迷わないよう道しるべとして落としたパンのかけらから、道しるべの役割という意味でこの名前に
ユーザがサイト内のどこにいるか、サイトがどんな構造かをわかりやすくするナビゲーションの役割
アンカーリンク⚓️
別名ページ内リンク
ページの中の指定した場所へ移動させるリンク
アンカー=いかりを下ろす、の意味で、なんとなくいかりのカタチでひっかけてロープで伸ばす…みたいなイメージだったけど、いかりを下ろして固定するみたいな意味からきてるそう
ハイパーリンク
リンクの正式名称
セクション
コンテンツごとのかたまり
カラム
エリアをわける縦の列
ファビコン
favicon=favorite icon の略
ブラウザのアドレスバーやタブ、ブックマークの頭につくアイコン
何のサイトか認識しやすくなる
OGP/OGP画像
Open Graph Protocol の略
SNSなどでURLがシェアされたときに表示されるサイトの情報（タイトル、概要、URL、画像）→画像＝OGP画像
設定しないと、自動で情報が抽出される（意図しない情報が出ることもあるので、設定しよう）
パーツもたくさんあるけど、名称も役割ももっと複雑なインタラクティブな動きについても覚えるのが大変だったので、後日別記事でまとめたいと思います。
今はもちろん覚えているので心配ご無用！
打ち合わせもバッチリです←
ここまで読んでいただきありがとうございました☕
NO DEZAINはWebサイト制作を中心としたデザイン会社です。
Webサイト制作/グラフィックデザインのご相談がございましたら、お気軽にお問い合わせください☺
▼NO DEZAIN