開発者が明かす、Sleipnir 4 for Macに隠された“こだわり”20選（前編）
開発者が明かす、Sleipnir 4 for Macに隠された“こだわり”20選（前編）
2013年04月02日
TEXT：松野紘明（フェンリル株式会社）
2013年3月、Mac向けWebブラウザ「Sleipnir 4 for Mac (4.1)」が提供開始となりました。独自の特徴的なデザインなど、並々ならぬこだわりを感じます。そこで今回は、フェンリル株式会社のユーザーインターフェイスデザイナー・松野紘明さんに、開発者ならではの“こだわり”を中心に聞いてみました。
【後編はこちら】http://www.mdn.co.jp/di/newstopics/29141/
#01 4文字打てば見つかる！と感じさせるデザイン
ポータルフィールドは、おおよそ4文字入力するだけで開きたいページが見つかる機能です。そのことを、触れただけで感じられるデザインにしたいと考えました。そこでまず、3文字入力すると有力候補にオレンジのランプが点くようにしました。さらに4文字まで打つと、ランプが大きくなります。ランプの点灯と候補の出現が、無意識につながるようにデザインしました。あと、入力によってランプが大きくなるアニメーション効果もポイントです。
TEXT：松野紘明（フェンリル株式会社）
2013年3月、Mac向けWebブラウザ「Sleipnir 4 for Mac (4.1)」が提供開始となりました。独自の特徴的なデザインなど、並々ならぬこだわりを感じます。そこで今回は、フェンリル株式会社のユーザーインターフェイスデザイナー・松野紘明さんに、開発者ならではの“こだわり”を中心に聞いてみました。
【後編はこちら】http://www.mdn.co.jp/di/newstopics/29141/
#01 4文字打てば見つかる！と感じさせるデザイン
ポータルフィールドは、おおよそ4文字入力するだけで開きたいページが見つかる機能です。そのことを、触れただけで感じられるデザインにしたいと考えました。そこでまず、3文字入力すると有力候補にオレンジのランプが点くようにしました。さらに4文字まで打つと、ランプが大きくなります。ランプの点灯と候補の出現が、無意識につながるようにデザインしました。あと、入力によってランプが大きくなるアニメーション効果もポイントです。
ランプが点いたのは、探しているページの有力候補。実際の入力時には候補がパパパッと絞られるので、ランプがアニメーションのように見えます。
#02 ポータルフィールドの元ネタ？ブルーとオレンジの2色を使った理由
テキスト入力するとページがすぐに開ける「ポータルフィールド」。開きたいページがどこにあっても、基点になって見つけられることから名づけました。ポータルという言葉で思わず連想したのが、洋ゲー好きにはおなじみの「Portal」（※）。視認性がよかったこともあり、もうキーカラーにPortalと同様のブルーとオレンジを使わずにはいられませんでした。そういえば「空間をつなげてあり得ない近道をつくりだす」ところも、ポータルフィールドのイメージにぴったりですね。
※Portal：Valve Software 社が販売する一人称視点のアクションパズルゲーム。ブルーとオレンジの弾を壁や天井に撃つと、2点間の空間がつながる“ポータルガン” を使い、出口を目指す。
テキスト入力するとページがすぐに開ける「ポータルフィールド」。開きたいページがどこにあっても、基点になって見つけられることから名づけました。ポータルという言葉で思わず連想したのが、洋ゲー好きにはおなじみの「Portal」（※）。視認性がよかったこともあり、もうキーカラーにPortalと同様のブルーとオレンジを使わずにはいられませんでした。そういえば「空間をつなげてあり得ない近道をつくりだす」ところも、ポータルフィールドのイメージにぴったりですね。
※Portal：Valve Software 社が販売する一人称視点のアクションパズルゲーム。ブルーとオレンジの弾を壁や天井に撃つと、2点間の空間がつながる“ポータルガン” を使い、出口を目指す。
ブルーに光るポータルフィールドに開きたいページを入力すると、オレンジに光る候補が表示されます。元ネタをご存知の方はニヤリとしてください。
#03 実はあった！Sleipnirのタイトルバー
ページの中身がそのままわかるサムネイルのタブは、Sleipnir for Macの特長のひとつ。一方で、サムネイルがもっとも見やすくなるようにタイトルバーを省きました。でも、実はあるんです。Sleipnir for Macを非アクティブにすると、タブバーは隠れてページタイトルが表示されます。Sleipnir for Macから少し離れたあとに「なんのページを見ていたっけ？」とはなりません。ツールバーのスペースを最大限に生かすには、状況やタイミングまでデザインすることが大切なのです。
ページの中身がそのままわかるサムネイルのタブは、Sleipnir for Macの特長のひとつ。一方で、サムネイルがもっとも見やすくなるようにタイトルバーを省きました。でも、実はあるんです。Sleipnir for Macを非アクティブにすると、タブバーは隠れてページタイトルが表示されます。Sleipnir for Macから少し離れたあとに「なんのページを見ていたっけ？」とはなりません。ツールバーのスペースを最大限に生かすには、状況やタイミングまでデザインすることが大切なのです。
背面になるとツールバーがそのままタイトルバーのようになります。ページタイトルが見たいと思うタイミングに合わせてデザインしています。
#04 タブ上部の細いスペースは、なぜあるの？
タブの上には、極細のスペースがあります。「ツールバーいっぱいにサムネイルを表示してしまえばいいのに」と思う人がいるかもしれません。しかし、サムネイルにはさまざまな画像が入るので、現在のタブをあらわす三角形のインジケータが溶け込まないようにする必要があるのです。なのでタブ上部に細いスペースを設けて、三角形とツールバーを一体化することで実現しています。また、ツールバーがタブで分断されて、視覚的にウインドウが歪んで見えることも防いでいます。
タブの上には、極細のスペースがあります。「ツールバーいっぱいにサムネイルを表示してしまえばいいのに」と思う人がいるかもしれません。しかし、サムネイルにはさまざまな画像が入るので、現在のタブをあらわす三角形のインジケータが溶け込まないようにする必要があるのです。なのでタブ上部に細いスペースを設けて、三角形とツールバーを一体化することで実現しています。また、ツールバーがタブで分断されて、視覚的にウインドウが歪んで見えることも防いでいます。
ちなみに制作時には0～10ピクセルまでひと通り試して、現在の5ピクセルに仕上げました。
#05 どんなサムネイルが来ても見やすいハイライトの秘密
Sleipnir for Macのタブは、ドラッグしてほかのタブとくっつけることができます。くっつけるときにタブが青くハイライトしますが、サムネイルの色はページ次第でさまざま。そこで、どんなサムネイルでも見やすいハイライトにするために、下辺が青く光りつつ全体がやや白くなるようにしました。白っぽいページでは青が、青が見えにくい濃い色のページでは白が目立つので、ハイライトが認識できます。
Sleipnir for Macのタブは、ドラッグしてほかのタブとくっつけることができます。くっつけるときにタブが青くハイライトしますが、サムネイルの色はページ次第でさまざま。そこで、どんなサムネイルでも見やすいハイライトにするために、下辺が青く光りつつ全体がやや白くなるようにしました。白っぽいページでは青が、青が見えにくい濃い色のページでは白が目立つので、ハイライトが認識できます。
どんなサムネイルでも見やすいハイライトも、試行錯誤の末にたどり着きました。
#06 ブックマークバーに重なるタイトル表示が邪魔にならないワケ
Sleipnir for Macではタブを切り替えたときなど、いちばんページタイトルが見たいタイミングでタイトルが表示されます。しかしブックマークバーを出している場合、そのままではブックマークバーと重なって邪魔に感じることも。この問題を解決するために、ブックマークバーにカーソルが来たら即タイトルが消えるようにしました。かなり細かい工夫ですが、ユーザーがストレスなく自然に使えるように、たくさんのアイデアと調整を加えているんです。
Sleipnir for Macではタブを切り替えたときなど、いちばんページタイトルが見たいタイミングでタイトルが表示されます。しかしブックマークバーを出している場合、そのままではブックマークバーと重なって邪魔に感じることも。この問題を解決するために、ブックマークバーにカーソルが来たら即タイトルが消えるようにしました。かなり細かい工夫ですが、ユーザーがストレスなく自然に使えるように、たくさんのアイデアと調整を加えているんです。
あまりに自然すぎて、私自身もこの工夫のことを忘れていました。でも、これがなければすぐにストレスを感じる部分なのです。自然すぎて気づかないこともデザインにとって重要ですよね。
#07 脳の錯覚を使ったアニメーション
ポータルフィールドは普段は小さく、使うときにスパッと伸びます。開発当初は伸縮をアニメーション表示していましたが、使うたびに伸びるのを待つのはめんどうです。そこで思い切ってアニメーションを止めてみたところ、なんと動きがなくても伸びるように見えたのです。一度動作を理解すれば、たとえ実際には伸びなくても脳の錯覚で補完されるわけです。さらに縮むときにはアニメーションさせて、この錯覚を補っています。
ポータルフィールドは普段は小さく、使うときにスパッと伸びます。開発当初は伸縮をアニメーション表示していましたが、使うたびに伸びるのを待つのはめんどうです。そこで思い切ってアニメーションを止めてみたところ、なんと動きがなくても伸びるように見えたのです。一度動作を理解すれば、たとえ実際には伸びなくても脳の錯覚で補完されるわけです。さらに縮むときにはアニメーションさせて、この錯覚を補っています。
アニメーションを使うと、どうしてもタイムラグがあります。しかし脳内の錯覚をうまく使えば、実際にアニメーションさせる必要はなかったのです。
#08 タブを閉じようとしたら“ぽよん”
[⌘]＋[F1]キーを押すことで、タブを表示した順に辿ることができるタブスイッチ機能。[W]キーを押せば、タブを閉じることもできます。ここで注目していただきたいのは、保護されたタブを閉じようとしたときの挙動です。当然閉じないのですが、無反応では手応えがなく不安になります。そこで、ひと目でわかるフィードバックとして“ぽよん”と跳ね返るようにしました。閉じようとしたけど閉じなかった、ということをアニメーションで伝えています。
[⌘]＋[F1]キーを押すことで、タブを表示した順に辿ることができるタブスイッチ機能。[W]キーを押せば、タブを閉じることもできます。ここで注目していただきたいのは、保護されたタブを閉じようとしたときの挙動です。当然閉じないのですが、無反応では手応えがなく不安になります。そこで、ひと目でわかるフィードバックとして“ぽよん”と跳ね返るようにしました。閉じようとしたけど閉じなかった、ということをアニメーションで伝えています。
![OS Xの[⌘]＋[Tab]キー（アプリ切り替え）のような感覚で使えます。“ぽよん”の挙動は画像では伝えられないので、ぜひ実際にお試しください。](attach/images/ne0_201304/1-08_130402101211.jpg)
OS Xの[⌘]＋[Tab]キー（アプリ切り替え）のような感覚で使えます。“ぽよん”の挙動は画像では伝えられないので、ぜひ実際にお試しください。
#09 共有やあとで読むサービスのアニメーションも個別に用意
さまざまな外部サービスをシングルサインオンで利用できるようにするFenrir Passアカウント（無料）を使えば、見ているページを手軽にPocketやReadabilityへ送れます。このとき、カード風のダイアログやリボンをかけるアニメーションで、操作の完了を伝えています。また、Facebookでの共有やDropboxへの保存、iPhoneに送ったりするときも、それぞれのアクションに合わせた個別のアニメーションを用意しました。毎日使うWebブラウザには、つい押したくなるような演出が大切なのです。
さまざまな外部サービスをシングルサインオンで利用できるようにするFenrir Passアカウント（無料）を使えば、見ているページを手軽にPocketやReadabilityへ送れます。このとき、カード風のダイアログやリボンをかけるアニメーションで、操作の完了を伝えています。また、Facebookでの共有やDropboxへの保存、iPhoneに送ったりするときも、それぞれのアクションに合わせた個別のアニメーションを用意しました。毎日使うWebブラウザには、つい押したくなるような演出が大切なのです。
「あとで読む」からリボンだったり、「クラウドに保存」するから荷物タグの外観に（左）。Site Updates（後述）から送信する際は、通常のページとは別に用意しています（右）。
#10 興味のあるWebサイトが不思議と出てくるSite Updatesの仕組みとは？
Sleipnir for Mac独自の新規タブページ「Site Updates」は、毎日チェックするほどでもないけど興味はある、というWebサイトの更新情報を教えてくれます。情報収集するよりカジュアルに情報をお届けしたいという想いからデザインしたSite Updates。その中身は、じつはRSSです。ユーザーがよく見るWebサイトのフィードをもとに、数を絞って毎回入れ替わるようにしています。ともすれば膨大な新着数に追われることがあるRSSも、デザイン次第で気軽な喜びや驚きに変えることができるんです。
Sleipnir for Mac独自の新規タブページ「Site Updates」は、毎日チェックするほどでもないけど興味はある、というWebサイトの更新情報を教えてくれます。情報収集するよりカジュアルに情報をお届けしたいという想いからデザインしたSite Updates。その中身は、じつはRSSです。ユーザーがよく見るWebサイトのフィードをもとに、数を絞って毎回入れ替わるようにしています。ともすれば膨大な新着数に追われることがあるRSSも、デザイン次第で気軽な喜びや驚きに変えることができるんです。
Site Updatesは、おもしろそうな最新記事が不思議と出てくると好評です。
［筆者プロフィール］
まつのひろあき●Sleipnir for Mac のユーザーインターフェイスデザイナー。コンセプトから機能のディテール、Webページに至るまで、おおよそユーザー体験に関わるものすべてをデザインしている。また、Sleipnir Mobile for iPhone／iPad も手がける。
まつのひろあき●Sleipnir for Mac のユーザーインターフェイスデザイナー。コンセプトから機能のディテール、Webページに至るまで、おおよそユーザー体験に関わるものすべてをデザインしている。また、Sleipnir Mobile for iPhone／iPad も手がける。
