開発者が明かす、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 タブ上部の細いスペースは、なぜあるの？
タブの上には、極細のスペースがあります。「ツールバーいっぱいにサムネイルを表示してしまえばいいのに」と思う人がいるかもしれません。しかし、サムネイルにはさまざまな画像が入るので、現在のタブをあらわす三角形のインジケータが溶け込まないようにする必要があるのです。なのでタブ上部に細いスペースを設けて、三角形とツールバーを一体化することで実現しています。また、ツールバーがタブで分断されて、視覚的にウインドウが歪んで見えることも防いでいます。
タブの上には、極細のスペースがあります。「ツールバーいっぱいにサムネイルを表示してしまえばいいのに」と思う人がいるかもしれません。しかし、サムネイルにはさまざまな画像が入るので、現在のタブをあらわす三角形のインジケータが溶け込まないようにする必要があるのです。なのでタブ上部に細いスペースを設けて、三角形とツールバーを一体化することで実現しています。また、ツールバーがタブで分断されて、視覚的にウインドウが歪んで見えることも防いでいます。
#05 どんなサムネイルが来ても見やすいハイライトの秘密
Sleipnir for Macのタブは、ドラッグしてほかのタブとくっつけることができます。くっつけるときにタブが青くハイライトしますが、サムネイルの色はページ次第でさまざま。そこで、どんなサムネイルでも見やすいハイライトにするために、下辺が青く光りつつ全体がやや白くなるようにしました。白っぽいページでは青が、青が見えにくい濃い色のページでは白が目立つので、ハイライトが認識できます。
Sleipnir for Macのタブは、ドラッグしてほかのタブとくっつけることができます。くっつけるときにタブが青くハイライトしますが、サムネイルの色はページ次第でさまざま。そこで、どんなサムネイルでも見やすいハイライトにするために、下辺が青く光りつつ全体がやや白くなるようにしました。白っぽいページでは青が、青が見えにくい濃い色のページでは白が目立つので、ハイライトが認識できます。
#06 ブックマークバーに重なるタイトル表示が邪魔にならないワケ
Sleipnir for Macではタブを切り替えたときなど、いちばんページタイトルが見たいタイミングでタイトルが表示されます。しかしブックマークバーを出している場合、そのままではブックマークバーと重なって邪魔に感じることも。この問題を解決するために、ブックマークバーにカーソルが来たら即タイトルが消えるようにしました。かなり細かい工夫ですが、ユーザーがストレスなく自然に使えるように、たくさんのアイデアと調整を加えているんです。
Sleipnir for Macではタブを切り替えたときなど、いちばんページタイトルが見たいタイミングでタイトルが表示されます。しかしブックマークバーを出している場合、そのままではブックマークバーと重なって邪魔に感じることも。この問題を解決するために、ブックマークバーにカーソルが来たら即タイトルが消えるようにしました。かなり細かい工夫ですが、ユーザーがストレスなく自然に使えるように、たくさんのアイデアと調整を加えているんです。
#07 脳の錯覚を使ったアニメーション
ポータルフィールドは普段は小さく、使うときにスパッと伸びます。開発当初は伸縮をアニメーション表示していましたが、使うたびに伸びるのを待つのはめんどうです。そこで思い切ってアニメーションを止めてみたところ、なんと動きがなくても伸びるように見えたのです。一度動作を理解すれば、たとえ実際には伸びなくても脳の錯覚で補完されるわけです。さらに縮むときにはアニメーションさせて、この錯覚を補っています。
ポータルフィールドは普段は小さく、使うときにスパッと伸びます。開発当初は伸縮をアニメーション表示していましたが、使うたびに伸びるのを待つのはめんどうです。そこで思い切ってアニメーションを止めてみたところ、なんと動きがなくても伸びるように見えたのです。一度動作を理解すれば、たとえ実際には伸びなくても脳の錯覚で補完されるわけです。さらに縮むときにはアニメーションさせて、この錯覚を補っています。
#08 タブを閉じようとしたら“ぽよん”
[⌘]＋[F1]キーを押すことで、タブを表示した順に辿ることができるタブスイッチ機能。[W]キーを押せば、タブを閉じることもできます。ここで注目していただきたいのは、保護されたタブを閉じようとしたときの挙動です。当然閉じないのですが、無反応では手応えがなく不安になります。そこで、ひと目でわかるフィードバックとして“ぽよん”と跳ね返るようにしました。閉じようとしたけど閉じなかった、ということをアニメーションで伝えています。
[⌘]＋[F1]キーを押すことで、タブを表示した順に辿ることができるタブスイッチ機能。[W]キーを押せば、タブを閉じることもできます。ここで注目していただきたいのは、保護されたタブを閉じようとしたときの挙動です。当然閉じないのですが、無反応では手応えがなく不安になります。そこで、ひと目でわかるフィードバックとして“ぽよん”と跳ね返るようにしました。閉じようとしたけど閉じなかった、ということをアニメーションで伝えています。
#09 共有やあとで読むサービスのアニメーションも個別に用意
さまざまな外部サービスをシングルサインオンで利用できるようにするFenrir Passアカウント（無料）を使えば、見ているページを手軽にPocketやReadabilityへ送れます。このとき、カード風のダイアログやリボンをかけるアニメーションで、操作の完了を伝えています。また、Facebookでの共有やDropboxへの保存、iPhoneに送ったりするときも、それぞれのアクションに合わせた個別のアニメーションを用意しました。毎日使うWebブラウザには、つい押したくなるような演出が大切なのです。
さまざまな外部サービスをシングルサインオンで利用できるようにするFenrir Passアカウント（無料）を使えば、見ているページを手軽にPocketやReadabilityへ送れます。このとき、カード風のダイアログやリボンをかけるアニメーションで、操作の完了を伝えています。また、Facebookでの共有やDropboxへの保存、iPhoneに送ったりするときも、それぞれのアクションに合わせた個別のアニメーションを用意しました。毎日使うWebブラウザには、つい押したくなるような演出が大切なのです。
#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も、デザイン次第で気軽な喜びや驚きに変えることができるんです。
［筆者プロフィール］
まつのひろあき●Sleipnir for Mac のユーザーインターフェイスデザイナー。コンセプトから機能のディテール、Webページに至るまで、おおよそユーザー体験に関わるものすべてをデザインしている。また、Sleipnir Mobile for iPhone／iPad も手がける。
まつのひろあき●Sleipnir for Mac のユーザーインターフェイスデザイナー。コンセプトから機能のディテール、Webページに至るまで、おおよそユーザー体験に関わるものすべてをデザインしている。また、Sleipnir Mobile for iPhone／iPad も手がける。