#📱 ユーザーインターフェース

#上部バー

#アドレスバー

• 検索語句や URL はここに入力します。
• ドメインは白、そのほかの URL 部分はグレーで表示されます。
• URL 左側の小さなアイコンはページ情報ボタンで、閲覧履歴や権限設定などを確認できます。

#拡張機能ボタン

• インストール済みの拡張機能をここで確認できます。
• ローカル拡張機能のインストールにも対応しています。

#タブ切り替え

• 長押しするとホーム画面に移動し、最近のタブやおすすめタブを確認できます。
• タブグループにも対応していて、整理しやすくなっています。

#メニューボタン

• 便利な機能にまとめてアクセスできます。
• 上段: ページ操作（更新、ブックマークなど）
• 下段: 移動先（設定、ヘルプなど）

#下部バー

#タブバー

#上向き矢印アイコン

• 現在のグループ にあるタブを一覧で確認できます。

#タブアイコン

• 1 タップでタブを切り替えられます。
• x アイコンをタップするとタブを閉じられます。

#➕ 新規タブアイコン

• タップすると「新しいタブ」ページが開き、最近見たサイトや保存したサイトを表示します。

#新規タブアイコンを長押し

• 長押しすると、新しいタブでコピー済みのテキストを検索できます。
• URL をコピーしていた場合は、その URL を直接開きます。

#🔍 検索アイコン

• 指は画面下側にあることが多いので、上のアドレスバーまで指を伸ばさなくても、検索アイコンからすぐに検索や URL 入力ができます。

#検索アイコンを長押し

• 長押しすると「Dynamic Bookmarks」を開けて、何千もの操作にすばやくアクセスできます。
• 詳しくは Dynamic Bookmarks をご覧ください。

#🦜 Assistant アイコン

• Parrot Assistant を開いて、提案やサポートを受けられます。
• 詳しくは Parrot Assistant をご覧ください。

#モバイルの戻るボタン

• 戻るボタンを押したときは
  • システムのポップアップが出ていれば、そのポップアップを閉じます。
  • ポップアップがなければ 前のページに戻ります。

#Web ページの移動

• 進む: 画面 右端 から中央へスワイプします。
• 戻る: 画面 左端 から中央へスワイプします。

#設定メニュー

• カスタマイズ項目が豊富です 🎨
• 設定メニューを見ていくと、HuBrowser を自分好みに調整できるポイントがたくさん見つかります。

---

#💡 デザインの考え方

#Chrome に近づけて学習コストを下げる

• HuBrowser は技術的には Chrome と異なる構造を持つ OS ですが、UI を Chrome に近づけることで、すぐに使い始めやすくしています。

#上部バー

#なぜアドレスバーを下に置かないのか？

• アドレスバーを下に置くと、キーボード表示のたびに下部バーを二重に描画する必要があり、レンダーキャッシュの利点が薄れてしまいます。
• 長いアドレスバーは主に表示のためのものなので、操作に使いたい貴重な下部スペースを圧迫してしまいます。
• 小さな画面では上部のボタンは押しにくく、下部の操作エリアのほうが指に自然です。

#なぜボタンをもっと増やさないのか？

• 長いアドレスバーは、URL や検索語句を正しく表示するために重要です。
  • 完全なドメインを見せることで、hubrowser.com.hugle.com を hubrowser.com に見せかけるような詐欺的 URL を見抜きやすくなります。

#なぜタブ切り替えアイコンを固定表示にしているのか？

• アイコンを固定すると、HuBrowser は上部バー全体をキャッシュしやすくなり、性能面で有利です。
• タブ数の表示は、不要な心理的プレッシャーにつながることがあります。HuBrowser はデスクトップ級のメモリ管理を備えているので、タブ数を過度に気にする必要はありません。
• タブの数はタブバーを見ればだいたい把握でき、正確な数はタブ切り替えを開けば確認できます。

#下部バー

• 下部バーは、操作を置く場所として最適です。👍
• キーボード表示時には下部バーが再描画されるため、変化しやすい要素はここに置くほうが合理的です。🔄

#Parrot Assistant ボタン

• UI 上の位置と役割の両面で、メニューボタンと対になる存在です。
  • メニューボタンは、業界で一般的な定型オプションを階層的に提供します。
  • Parrot Assistant は、メディア操作、買い物時の価格比較、ページ内容を理解した AI の呼び出しなど、より動的で個別最適な体験を提供します。

#モバイルの戻るボタン

• なぜ HuBrowser の戻るボタンは、他のアプリと挙動が違うのでしょうか？
  • 他のアプリでは、戻るボタンがページ戻りになったり、現在のページを閉じたり、アプリ自体を閉じたりと挙動が一定せず、混乱の原因になります。
  • 戻るボタンは大きくて画面下にあるため、誤って押しやすいです。動画視聴中、フォーム入力中、決済中、ゲーム中などに間違って触れると、最初からやり直しになってかなりつらい場面があります 😂。
  • ページを戻る操作は左スワイプで同じくらい簡単にでき、誤操作も起こしにくくなります。

#まとめ

• 上下のバーはどちらも「1 本のバーに 3 つのボタン」という設計で、対称性と一貫性を持たせています。
• ボタンが窮屈に見えない範囲で、画面スペースを効率よく使っています。
• ちょうどいいバランスを狙った設計です 😊