このページのトップへ

ガイド

カスタムコードでウェブサイトを作成する

Wixブログ

ウェブサイトのUXを改善する方法

Wixブログ

ウェブサイトのナビゲーション:ベストプラクティス、ヒントと例

ステータスバー


 



ステータスバーとは何ですか?


ステータスバーとは、ユーザーが使用しているアプリケーションやデバイスの現在の状態に関連する情報をユーザーに提供する、細い横長のバーのことです。ステータスバーの最小限のデザインにより、ユーザーはワープロのようなアプリケーションやスマートフォンのようなデバイスを使用している間、ステータス関連の情報に常に簡単にアクセスできる。



ステータスバーはどこにありますか?


アプリケーション・ウィンドウでは、ステータス・バーは開いているウィンドウの下部に表示される。ステータスインジケータ、アイコン、または通知の数に応じて、提供される情報の種類に応じてさまざまなセクションに整理されます。


デバイスの画面では、ステータスバーが一番上に表示されます。さまざまなステータス・インジケータは1列に表示されるが、中央にあるデバイスのカメラやマイクのスペースを確保するため、2つのセクションに分かれている。


ステータスバーの位置についてもうひとつ注意すべき点は、開いているアプリケーションの邪魔にならないことだ。例えば ウェブサイトを作ろうと思ったとき、それはブラウザのアプリケーションの中にある。ステータスバーがブラウザの邪魔になることはないし、画面の上部、アプリケーションのウィンドウの外側にあるため、サイトのコンテンツが隠れてしまうこともない。



ステータスバーの目的は何ですか?


ステータスバーの目的は、デバイスやアプリケーションの上部や下部にある他の水平バーとは大きく異なる:

  • メニューバー メニューバーには、ファイル、編集、ヘルプなどのドロップダウンメニューがあり、ユーザーはアプリケーション内のさまざまな機能にアクセスできます。

  • アドレスバー アドレスバーはブラウザ・アプリケーションに特有のもので、現在のウェブアドレス、セキュリティ、ブックマーク、戻る、進む、ホームに戻るなどのナビゲーション・アイコンに関連する情報をユーザーに提供する。

  • ツールバーのツールバーは通常、ユーザーが作業中のアプリケーションやデバイスの設定をコントロールできるようにするアイコンとドロップダウンが並んだものです。


ステータスバー内の要素をクリックして探索することはできますが、その主な目的は通常、ユーザーが画面上で見ているものをコントロールすることではありません。ユーザーが見ているものについてもっと知るためなのだ。


アプリケーションのステータスバーは、アプリで選択されているコンテンツや、ユーザーが作業しているコンテンツに関連する詳細を表示します。このため、ステータス情報はユーザーがアプリを操作するたびに変化します。

  • コンピュータのファイルマネージャーを開き、ゴミ箱に移動するファイルを3つ選択します。下部のステータスバーには「3つのアイテムが選択されました」と表示されます。


デバイスのステータスバー は、デバイスの動作状態に関連する詳細を表示します。ステータスバーに含まれる情報の種類は常に同じです。しかし、状態が変化すると、詳細も更新されます。

  • あなたは電車の中でスマートフォンを使って映画を見ます。動画を開始したとき、時刻は午後12時35分、バッテリーは99%です。終了時、時刻は午後2時5分、電池残量は48%。


 

ご興味のある方はこちらもご覧ください:



 


ステータスバーの使い方と例


ステータスバーは、UXデザインに欠かせない要素となっている。 UXデザインステータスバーは、ほとんどのアプリケーションや人々が日常的に使用するデバイスのUXデザインに不可欠な部分となっています。ユーザーが同時にデバイスやアプリを使用している間、ステータスバーは素早い参照ポイントを提供します。


デスクトップブラウザ


数年前まで、デスクトップ・ブラウザのウィンドウには、ウェブ・アドレスやそのセキュリティなどに関連する情報を表示するステータス・バーがあった。ステータス・バーはなくなったものの、ユーザーがハイパーリンクにカーソルを合わせたりクリックしたりすると、ページの左下にフローティング情報が表示されるブラウザもある。


ファイル・マネージャー


デスクトップファイルマネージャーの下部にあるステータスバーには、ファイルが選択された時のみ情報が表示されます。以下のような詳細が表示されます:

  • 選択された1つのファイル名

  • 選択された1つのファイルのファイルパス

  • 選択されたファイル数

  • ファイルの合計サイズ


グラフィック・エディター


ファイルマネージャーと同様に、グラフィックエディターアプリケーションは、アクティブなファイルに関連する詳細のみを表示します。具体的には、ステータスバーには現在の画像に関する詳細が表示されます:

  • ファイル名

  • ファイルサイズ

  • 寸法

  • 決議

  • カラープロファイル

  • パーセントズーム


ワープロ


Microsoft Wordのようなワープロの下部には、いくつかの異なるタイプの情報が表示されます。文書の設定に関する詳細が表示されます。例えば

  • 言語

  • 編集モード

  • 閲覧

  • パーセントズーム

  • キャップ、数字、スクロールロックの状態

また、ドキュメント内でユーザーが作業している内容の詳細も表示される。例えば

  • 総語数

  • 選択語数

  • 文字数

  • ページ __ of __


表計算プログラム


表計算プログラムには一般に2種類の情報が含まれている。1つ目は、パーセンテージ・ズームや列の書式に関連する情報である。もう1つは、スプレッドシートで選択されたセルに関連する数学的計算である:

  • 細胞の数(カウント

  • 合計

  • 平均値

  • 最大値または最小値

表計算ソフトの中には、セルを1つだけ選択すると、そのセルにあるテキストを表示するものがある。


メールサービス

Gmailのようないくつかのメールサービスには、受信トレイの下にステータスバーがあります。ユーザーは関連する情報を見つけることができます:

  • 電子メールストレージの使用率

  • アプリで最後に活動した日時

  • 現在アプリを開いているデバイスの数


デバイス画面

デバイスの上部にあるステータスバーには、デバイスの種類や空き容量によって異なる詳細が表示されます。 以下はその一部です:

  • 現在の日付と時刻

  • インターネット接続

  • 無線LAN強度

  • バッテリー寿命

  • ブルートゥースの有効/無効

  • ナイトモードの有効/無効

  • サウンドのオン/オフ


ビデオゲーム


多くのビデオゲームでは、画面上部にステータスバーが表示される。ユーザーは、ゲームの進行状況や現在の状態を確認するために、ゲーム中にこのステータスバーを参照します。一般的な要素としては、以下のようなものがあります:

  • 生命数

  • 健康残存率

  • 試合経過

  • 累積ポイント

  • 経過時間または残り時間


関連用語

ユーザーインターフェース(UI)

関連用語

ワイヤーフレーム

あなた自身のウェブサイトを作成する準備はできていますか?

ビジネス、マーケティング、ウェブデザインの最新トレンド。あなたの受信箱に直接お届けします。

ご応募ありがとう!

ページ下