『Arc Search』：スピーディなWeb検索体験を実現させているUIデザイン
こんにちは、ちょっと株式会社の久保田です。
今回はスマホアプリの『Arc Search』のUIデザインを取り上げてみます。すでに使用されている方も多いと思います。
私自身も知人から薦められて半ば渋々インストール・・・って流れで使ってみたのですが、使ってみるうちにスマホ検索は『Arc Search』がメインになりました。
アプリの使用感みたいなレビューは他の記事にお願いするとして、今回はデザインの部分にフォーカスしてみます。
明快なコンセプトを実現させるためのデザインの割り切り方とアイデア、そして随所に感じられるUXへのこだわり。
ディティールからも趣意がしっかり感じ取れるUIデザインになっています。
まずはコンセプトに触れておきます
開発しているThe Browser Company社のコメントを大雑把にまとめるとこんな感じ。
スマホでブラウザを立ち上げる時って検索／リサーチがほとんどだよね
検索に特化させて効率よく作業時間を削減できるブラウザ
軽快に操作できることも重要だ！
余計なものは徹底的に排除だ！
これらがコンセプトの根幹を担っていることは、実際にアプリを使ってみれば分かると思います。
そしてコンセプトを実現させるための中心機能が「Browse For Me」。
検索結果をAIが見やすくまとめてくれるもので、Arc Searchの代名詞的な機能です。
この機能を使えば複数のサイトを見回っていく作業が減るので、検索作業の時間を劇的に短縮できます。
当然のことですが、このコンセプトを実現するためにUIはデザインされていて、機能性とデザインが組み合わさって迅速軽快な検索体験を提供してくれています。
ワンアクションで検索
アプリを触った誰もが最初に気付くことなんですが、いきなり初手から検索窓とソフトウェアキーボードが表示されます。
さらにカーソルは検索窓に当たっているので、すぐにテキスト入力ができる状態でアプリが立ち上がります。
iOSデフォルトの『Safari』ではフッターエリアの検索窓をタップしてソフトウェアキーボードを表示させる動作が必要です。
『Chrome』ではフッターの「+」ボタンを推して新しいタブを表示させ、そこから検索窓をタップさせてキーボードを表示させます。（画面上部の検索窓タップでもいいけどタブが残りません）
ごくわずかな手順差ですが、すぐ検索したい状況においてタップ数が1〜2回増えることは大きい。
スマホで何かを検索することだけに絞り、余計な機能導線は割り切って省くことで実現している手軽さだと思います。
お店に入ったら席についてメニューを広げてオーダー・・・じゃなくて、入店した途端に「へいらっしゃい！なにしましょ？」って聞かれるくらいの爆速感！
めちゃくちゃ時間が無いけどランチは食べたいときに最高！ってイメージに近いかも？？
表示されている情報量にも注目です。
『Arc Search』のハーフモーダルエリアに表示される情報も直近の検索履歴のみ。急上昇ワードやお気に入りサイトなどの情報は表示されません。
アプリを起動させたユーザーにはハッキリした動機／目的（＝ワード検索）があり、それに必要ないものは余計な情報として割り切り、少しでも早く検索結果にアクセスするためのデザインになっています。
ユーザーの目的のド真ん中に豪速球を投げ込んでいるようなUIデザインです。
直感的なジェスチャーで起動する要約機能
表示しているページをAIが要約してくれることも『Arc Search』の特徴的な機能です。
この機能使い道が色々あると思いますが、目的の情報に辿り着けているのかを確認するための機能としてかなり便利です。
検索アクセスしたページを読み始めてから「これじゃない！」って気付くことって珍しくありません。もっと言うと、それを読み込んでいくうちに違う興味が湧いてしまって本来の目的から外れてしまうパターンまであります。
そうならないために、まずはページを要約しちゃってサラッと確認してから読み始めることで迷子状態を防ぐことができます。この使い方は結構便利です。
そんな要約機能は、ページを小さく折りたたむような動作を彷彿させるように、ピンチで画面をつまむジェスチャーで起動します。
この操作、一度味わったら忘れられないくらい直感的、ユーザーアクションと機能・挙動のイメージが見事に一致しています。
動画では伝わりにくいかもしれませんが、画面を親指と人差し指でつまんでいます。
そしてジェスチャーだけじゃなく、この一連の挙動と画面で注目したい点がたくさんあります。
■ 折り畳まれた画面イメージがフワフワ動く
AI要約している待ち時間、折り畳んだ画面イメージをフワフワと浮遊しているアニメーションになります。
背景アニメーションも含めて、画面がフリーズしていないことをユーザーに伝えて安心させるデザインです。これはセオリーですね。
無機質で事務的な表示（プログレスバーやスピナーなど）ではなく、イメージをやさしく動かしてワクワク感を演出している気がします。
待ち時間に演出を入れてストレスを軽減させているグッドデザインです。ワクワク気持ちいい。
■ ページタイトルとファビコンも表示
ちゃんと要約したページのタイトルも表示させています。ファビコンもつけてます。
今や一般的になったWebブラウザのタブと同じく表示する情報量を必要最小限にしています。
細かいところですが、これが無い場合はかなり不便だと思います。
■ 要約項目にアイコン
あまり目立ちませんが、要約してくれた項目の文頭にアイコンが生成されています。
要約した内容に沿ったアイコンを表示させてるっぽい。あまり目立ちませんが・・・。
■ 閉じる／キャンセルの「×」ボタンの位置
左下の「×」ボタンで要約ページから離脱できます。要約中の待ち時間ではキャンセルボタンとして機能してくれます。
そこまで特筆すべきボタンじゃありませんが、最も押しやすい左下に配置されているので使いやすい。
あと折り畳まれたイメージ、ちゃんと裏側までしっかり表示されているなど芸が細かい！
この要約機能周りに関してはスピードよりも遊び心が感じられたセクションでした。この機能は楽しい。
検索窓に予測ワードをスライドできる
文字を打つと予測変換されて候補ワードが提案されるサジェスト変換も導入されています。
この便利機能がさらに使いやすくブラッシュアップされています。
サジェストキーワードを検索窓にスライドさせることができます。
ただそれだけのことなんですが、『Safari』や『Chrome』で比較すると、かなり使い勝手がいいUIデザインだということが分かると思います。
『Safari』と『Chrome』では、表示されるサジェストワードのリストを見ようとするとソフトウェアキーボードが隠れてしまいます。
これはリスト全体を表示させるためにキーボードを非表示にして表示エリアを拡げないと表示できないから。キーボードが邪魔なんです。
そして、そこからまた別のキーワードを入力するには邪魔だったキーボードを再表示させないといけません。
この極めて煩わしい一連のアクションを解消してくれています。使ってみると便利さが体感できるはず。
この利便性以外にも履歴面でもメリットがあります。
リスト表示されているワードをタップで目的のキーワードを検索した場合、検索履歴には残りません。
サンプルの動画のように「ち」を入力するとサジェストワードのリストが表示されます。
ここで「チャットgpt」をタップすると「チャットgpt」の検索結果ページが表示されますが、検索履歴には「ち」で登録されてしまいます。
対して検索窓に「チャットgpt」をスライドさせて検索することで検索履歴を残すことができます。
伝わりにくいかもしれませんが、これもかなりデカいです。
個人的には一番嬉しい機能でした。
このサーチウィンドウにサジェストワードをスライドさせるアイデアは目から鱗でした。
馴染みあるデザインをタブ一覧ビューに採用
画面左下のボタンをタップすることで表示されるタブ一覧ビューは、iOSユーザーなら馴染みあるデザインを採用しています。
タブが立体的に並んで表示されるアレ。
使い慣れているインターフェースなので説明も学習コストもゼロ！
上にスワイプさせてタブを消去（アーカイブ化）するジェスチャーも全く同じ。中心エリアにあるタブウインドウのみ、タイトルとファビコンを表示させるデザインまで同じです。
新規性や独自性にこだわらず、ユーザーが使いやすいデザインを選択した結果なんだと思います。
まとめ
『Arc Search』の便利すぎる機能面や使い勝手レビューはいろんなところで紹介されているので、今回はデザイン面にフォーカスしてみました。
デザインだけを見てみても、スマホでの検索に特化したUIデザインになっていることが分かります。
他にも注目ポイントはあります。
例えば読み込み時のローディングアニメーション。
単純なぐるぐるスピナーとかではなく、さりげない存在感の美しい波線アニメーションを使っています。これもおそらく体感スピードを速めるためのデザイン。
フッターメニューを拡げて表示させるハーフモーダル内のサーチウィンドウ内に進む・戻るボタンが入っていたりするのも面白いです。（使いにくいですが）
などなど、まだまだ使っていくうちに新たな発見がありそうです。
AIをうまく活用したユーザーライクな検索機能が注目されていますが、それを支えているUIデザインも注目したいアプリだと思います。
それでは。