スポットインタビュー
Webブラウザ「Sleipnir」開発デザイナーに聞く
UIデザイン秘話（前編）
インターネットの発展とともにその歴史を刻んできたWebブラウザ。Internet ExplorerやFirefox、Safariといったメジャーブラウザに対して、第3勢力と呼ばれるさまざまなWebブラウザが現在も生み出されている。そんな第3勢力において純国産のWebブラウザとして人気を誇るのが、フェンリルのSleipnirである。今回はSleipnirのモバイル版およびMac版のUI（ユーザーインターフェイス）デザインを担当された松野紘明さんに、WebブラウザのUIデザインに関してお話を伺った。
>>> 後編：「Sleipnir 3 for MacのUIデザイン」
[プロフィール]
生産課 デザイン主任
松野紘明さん
もともとはグラフィックデザイナーとして活動する一方、ユーザーインターフェイスデザインにも関心を寄せる。その後フェンリルに入社し、現在はSleipnir MobileやMac版Sleipnir 3のユーザーインターフェイスデザインを担当している。
Interview
──iOS版Sleipnirの開発コンセプトは？
松野●iOSにはデフォルトブラウザとしてSafariがあり、それを変えることはできない。そのためSafariにはできないことを押さえる必要があると考えました。そこで企画当初はSafariの「タブが切り替えにくい」という欠点を突いて、サクサクと小気味よく操作でき、パワフルに扱えるタブブラウザをつくることにフォーカスしました。
──タブ操作に関しては、どのような工夫を？
松野●当初は、まず限られた画面スペースにいかに必要な情報のみを配置するかを検討しました。その結果、タブは画面下部にサムネイルで表現することにしたのです。サムネイルのサイズも細かく検討し、指先で操作しやすいボリュームを保ちながら左右幅を押さえて省スペース化を図っています。また、サムネイルをタップして画面を切り替えるだけでなく、長押しすることでドラッグによる並び替えを可能にしています。さらに下方向にスワイプするだけでタブ画面を閉じるなど、ユーザーのストレスを軽減するスピーディな操作を実現しています。
（▼クリックで拡大）
タブはサムネイルとして画面下部に表示。最新バージョンでは、半透明化することでタブ領域の背面にコンテンツが透けて見える。これにより、コンテンツ領域の狭さを感じさせることなく快適なブラウジングを実現している
──タブはグルーピングもできますね
松野●iPhoneではあまり多くのグループは必要ないと考え、タブグループは6個固定にしています。それぞれ6色に色分けし、いちいちグループ名を付けなくても識別できるようにしています。ただ、当初は画面下部のサムネイル表示領域によって、どうしてもコンテンツ領域が狭く見えるといったご意見をいただきました。そこで、サムネイル表示領域を半透明化して背面にコンテンツが薄く見えるようにしたところ、コンテンツ領域が狭いというご意見はなくなりました。
（▼クリックで拡大）
あらかじめ6個のタブグループを用意。6色に色分けすることで、タブグループを直感的に識別できるようにしている。タブサムネイルは、下にフリックすれば素早く閉じることができ、長押ししてからドラッグすることで配置の入れ替えも可能だ
──UIを考えるうえで、そういった体感的なポイントがあるのですね
松野●体験をデザインすることは重要ですね。たとえばiOSではApp Storeの制約により、Webページの読み込みの進捗を取得することは許されていません。したがってプログレスバーを表示することができず、ユーザーはいつまで待てばよいのかわからないことで読み込みが遅いと感じてしまいます。そこで、疑似的にアニメーションするプログレスバーを実装しました。しかも、最初はバーをスピーディに伸ばし、その後縞々のアニメーションにする。さらに数秒経ったらアニメーションをほんの少しゆっくりにするようにしたところ、心理的に時間感覚がごまかされて、読み込み時間は遅く感じにくくなりました。
（▼クリックで拡大）
アクセスしてすぐ一気に伸び、縞々のアニメーションに切り替わったのち、アニメーションをゆっくりな動きに変えるという疑似的なプログレスバーを実装。実装以前には、Webページの読み込み速度を遅いと感じていたユーザーも、実装後は体感速度が上がったという
──操作性を考えるうえでのポイントは？
松野●できるだけ手順を少なくすることと、操作自体をシンプルに保つことでしょうか。SleipnirにはHold And Goという、リンクを長押しして背面で開く機能があります。たとえば検索結果画面などで複数のリンクを開きたいとき、検索結果画面を表示したまま次々に開くことができるわけです。また、TouchPagingという機能では、コンテンツ領域をただフリックするだけでタブを切り替えることができます。いずれも、ブラウザにはスクロールやズームなど標準的なジェスチャ機能が搭載されていて、新しい操作はそれらの標準操作を阻害することなく、共存させる必要があります。しかも、特に説明することなく操作できることが重要で、TouchPagingなどはページ上を触っているうちに気づける機能として実装することができたと考えています。
──視覚的デザインのポイントは？
松野●デザインは機能が形を成したものです。機能を正しく伝え、実現することが大切です。そのために、表現としての豊かさにも注目しています。特にiOSアプリは、リッチな表現による操作の楽しさやリアルなモノに例えたわかりやすさの演出が望まれます。たとえばタブをドラッグする際は、指にくっついて浮かび上がるような演出をし、移動先のタブは横に退くことで移動中のタブをそこに置けることが分かるような視覚的効果を実装しています。あとはタブを指より上に表示し、掴んでいるタブを見失わないようにしています。また、0.0x秒単位でアニメーションを微調整するなど、きめ細かな試行錯誤を繰り返すことで、よりよいUIデザインへとたどり着けると考えています。
（▼クリックで拡大）
タブのサムネイルはドラッグして移動する際、半透明化することで下のタブが見えるようにしている。また、移動先のサムネイルが横に退く動きをすることで、そこに移動中のタブを設置できることを直感的に理解させる
Sleipnir Mobile for iPhone / iPad（iPhone/iPod touch/iPad互換iOS4.0以降、無料）
>>> 後編：「Sleipnir 3 for MacのUIデザイン」
Webブラウザ「Sleipnir」開発デザイナーに聞く
UIデザイン秘話（前編）
インターネットの発展とともにその歴史を刻んできたWebブラウザ。Internet ExplorerやFirefox、Safariといったメジャーブラウザに対して、第3勢力と呼ばれるさまざまなWebブラウザが現在も生み出されている。そんな第3勢力において純国産のWebブラウザとして人気を誇るのが、フェンリルのSleipnirである。今回はSleipnirのモバイル版およびMac版のUI（ユーザーインターフェイス）デザインを担当された松野紘明さんに、WebブラウザのUIデザインに関してお話を伺った。
>>> 後編：「Sleipnir 3 for MacのUIデザイン」
[プロフィール]生産課 デザイン主任
松野紘明さん
もともとはグラフィックデザイナーとして活動する一方、ユーザーインターフェイスデザインにも関心を寄せる。その後フェンリルに入社し、現在はSleipnir MobileやMac版Sleipnir 3のユーザーインターフェイスデザインを担当している。
Sleipnirとは
柏木泰幸氏の個人的なソフトウエア開発活動の中で、2002年に生み出されたのが「Sleipnir」。2ちゃんねるなどのコミュニティを中心としてユーザーの声を積極的に取り込む開発スタイルにより、早い段階からタブ機能を搭載するなど、一歩先を行く進化を続けている国産Webブラウザである。2005年にはフェンリル株式会社を設立し、同年10月にはSleipnir 2を発表。その後、Portable Sleipnirやデザイン性の高いGraniといったブラウザを世に送り出す。そして2010年、スマートフォン元年とも呼ばれる年において、Sleipnir Mobileを発表。2011年にはPC版Sleipnir 3を発表した後、タッチインターフェイスに対応した最新のMac版Sleipnir 3も公開されている。
オフィシャルサイト：http://www.fenrir-inc.com/jp/
Interview
Sleipnir Mobile for iPhone / iPadのUIデザイン
──iOS版Sleipnirの開発コンセプトは？
松野●iOSにはデフォルトブラウザとしてSafariがあり、それを変えることはできない。そのためSafariにはできないことを押さえる必要があると考えました。そこで企画当初はSafariの「タブが切り替えにくい」という欠点を突いて、サクサクと小気味よく操作でき、パワフルに扱えるタブブラウザをつくることにフォーカスしました。
──タブ操作に関しては、どのような工夫を？
松野●当初は、まず限られた画面スペースにいかに必要な情報のみを配置するかを検討しました。その結果、タブは画面下部にサムネイルで表現することにしたのです。サムネイルのサイズも細かく検討し、指先で操作しやすいボリュームを保ちながら左右幅を押さえて省スペース化を図っています。また、サムネイルをタップして画面を切り替えるだけでなく、長押しすることでドラッグによる並び替えを可能にしています。さらに下方向にスワイプするだけでタブ画面を閉じるなど、ユーザーのストレスを軽減するスピーディな操作を実現しています。
（▼クリックで拡大）
タブはサムネイルとして画面下部に表示。最新バージョンでは、半透明化することでタブ領域の背面にコンテンツが透けて見える。これにより、コンテンツ領域の狭さを感じさせることなく快適なブラウジングを実現している
──タブはグルーピングもできますね
松野●iPhoneではあまり多くのグループは必要ないと考え、タブグループは6個固定にしています。それぞれ6色に色分けし、いちいちグループ名を付けなくても識別できるようにしています。ただ、当初は画面下部のサムネイル表示領域によって、どうしてもコンテンツ領域が狭く見えるといったご意見をいただきました。そこで、サムネイル表示領域を半透明化して背面にコンテンツが薄く見えるようにしたところ、コンテンツ領域が狭いというご意見はなくなりました。
（▼クリックで拡大）
あらかじめ6個のタブグループを用意。6色に色分けすることで、タブグループを直感的に識別できるようにしている。タブサムネイルは、下にフリックすれば素早く閉じることができ、長押ししてからドラッグすることで配置の入れ替えも可能だ
──UIを考えるうえで、そういった体感的なポイントがあるのですね
松野●体験をデザインすることは重要ですね。たとえばiOSではApp Storeの制約により、Webページの読み込みの進捗を取得することは許されていません。したがってプログレスバーを表示することができず、ユーザーはいつまで待てばよいのかわからないことで読み込みが遅いと感じてしまいます。そこで、疑似的にアニメーションするプログレスバーを実装しました。しかも、最初はバーをスピーディに伸ばし、その後縞々のアニメーションにする。さらに数秒経ったらアニメーションをほんの少しゆっくりにするようにしたところ、心理的に時間感覚がごまかされて、読み込み時間は遅く感じにくくなりました。
（▼クリックで拡大）
アクセスしてすぐ一気に伸び、縞々のアニメーションに切り替わったのち、アニメーションをゆっくりな動きに変えるという疑似的なプログレスバーを実装。実装以前には、Webページの読み込み速度を遅いと感じていたユーザーも、実装後は体感速度が上がったという
──操作性を考えるうえでのポイントは？
松野●できるだけ手順を少なくすることと、操作自体をシンプルに保つことでしょうか。SleipnirにはHold And Goという、リンクを長押しして背面で開く機能があります。たとえば検索結果画面などで複数のリンクを開きたいとき、検索結果画面を表示したまま次々に開くことができるわけです。また、TouchPagingという機能では、コンテンツ領域をただフリックするだけでタブを切り替えることができます。いずれも、ブラウザにはスクロールやズームなど標準的なジェスチャ機能が搭載されていて、新しい操作はそれらの標準操作を阻害することなく、共存させる必要があります。しかも、特に説明することなく操作できることが重要で、TouchPagingなどはページ上を触っているうちに気づける機能として実装することができたと考えています。
──視覚的デザインのポイントは？
松野●デザインは機能が形を成したものです。機能を正しく伝え、実現することが大切です。そのために、表現としての豊かさにも注目しています。特にiOSアプリは、リッチな表現による操作の楽しさやリアルなモノに例えたわかりやすさの演出が望まれます。たとえばタブをドラッグする際は、指にくっついて浮かび上がるような演出をし、移動先のタブは横に退くことで移動中のタブをそこに置けることが分かるような視覚的効果を実装しています。あとはタブを指より上に表示し、掴んでいるタブを見失わないようにしています。また、0.0x秒単位でアニメーションを微調整するなど、きめ細かな試行錯誤を繰り返すことで、よりよいUIデザインへとたどり着けると考えています。
（▼クリックで拡大）
タブのサムネイルはドラッグして移動する際、半透明化することで下のタブが見えるようにしている。また、移動先のサムネイルが横に退く動きをすることで、そこに移動中のタブを設置できることを直感的に理解させる
Sleipnir Mobile for iPhone / iPad（iPhone/iPod touch/iPad互換iOS4.0以降、無料）
（取材・文：久保靖資）
>>> 後編：「Sleipnir 3 for MacのUIデザイン」
