UIデザイナー以外にも知って欲しいアプリヘッダーの正式名称

※2021/4月時点の情報です

名称を揃える意味

こんにちは、UIデザイナーの高橋ゆです。

タイトルを

「登場！アプリのヘッダー正式名称調べ男！」

と

「UIデザイナー以外にも知って欲しいアプリのヘッダーの正式名称」

で少し迷いました

突然ですが、アプリの"ヘッダー"はUIデザイナーにとって亜流な呼称であることをご存知でしょうか。

アプリの"ヘッダー"と呼ばれる部分には正式名称があります。

別に名称なんて違くてもいいじゃんと思われるかも知れませんが、例えばデザイナー、ディレクター、データ分析チームで該当の部分の呼び方がそれぞれ違ったりすると認識が違ってしまうトラブルが起きる可能性があります。

またデザインガイドラインを整備していて、デザインガイドライン等に載せる名称を合わせた方がUIデザイナー間でも認識齟齬が無くて良いと思い調べてみました。

因みにAndroidとiOSでも呼称が変わります。

AppleはHuman Interface guidelineというUIのガイドラインを公式ページで作っており、Google（Android）はGoogle Material Design guidelineというUIのガイドラインを作っていて、そこでの呼び方を正式名称として紹介したいと思います。

※2021/4時点の名称なので今後変わっていく可能性があります

アプリのヘッダーの正式名称

正式名称を一旦"ヘッダー"と"下のアイコン並んでるところ"として紹介します

--------------------------------------------------

■アプリの"ヘッダー"と呼ばれる部分の正式名称

・Android
　→App bars: top

引用：Google Material Design guideline
https://material.io/components/app-bars-top

・iOS
　→Navigation bar

引用：Navigation Bars - Bars - iOS - Human Interface Guidelines - Apple Developer
https://developer.apple.com/design/human-interface-guidelines/ios/bars/navigation-bars/

■アプリの下のアイコン並んでる部分の正式名称について

・Android
　→Bottom navigation

引用：Google Material Design guideline
https://material.io/components/bottom-navigation#usage

　

・iOS
　→Tab Bars

引用：Human Interface guideline
Tab Bars - Bars - iOS - Human Interface Guidelines - Apple Developer
https://developer.apple.com/design/human-interface-guidelines/ios/bars/tab-bars/

--------------------------------------------------

まとめ

調べてみると仕事での認知度が高いのはタブバー、ナビゲーションバーなどiOSの呼称が多い印象でした

Bottom navigationって呼んでいる人はあまり見かけないです

もしデザインガイドラインを作る上で自分のサービスがどちらの名称にするか？ということを決めたいときは、"自分の関わるサービスの作りはiOS、Androidのガイドラインどちらを参考にしているか？"で決めると自然でいいかと思います。

おわり