開発者が明かす、Sleipnir 4 for Macに隠された“こだわり”20選（後編）
開発者が明かす、Sleipnir 4 for Macに隠された“こだわり”20選（後編）
2013年04月09日
TEXT：松野紘明（フェンリル株式会社）
2013年3月、Mac向けWebブラウザ「Sleipnir 4 for Mac (4.1)」が提供開始となりました。独自の特徴的なデザインなど、並々ならぬこだわりを感じます。そこで今回は、フェンリル株式会社のユーザーインターフェイスデザイナー・松野紘明さんに、開発者ならではの“こだわり”を中心に聞いてみました。
【前編はこちら】http://www.mdn.co.jp/di/newstopics/29045/
#11 進捗から通知まで―27ピクセルで描かれたダウンロードアイコンの世界
Sleipnir for Macのツールバーの端に現れるダウンロードアイコンは、ただのツールボタンではありません。27ピクセルで描かれたアイコンの中には、ダウンロードに関するさまざまな機能が含まれています。たとえばファイルのダウンロード中、小さなプログレスバーが表示され、複数のファイルを同時ダウンロードしているときは二重になって示します。さらにダウンロードが完了すると青く光り、未確認ファイルがあることも伝えます。小さなスペースに必要な機能を無理なく組み込んだデザインに仕上げることができました。
TEXT：松野紘明（フェンリル株式会社）
2013年3月、Mac向けWebブラウザ「Sleipnir 4 for Mac (4.1)」が提供開始となりました。独自の特徴的なデザインなど、並々ならぬこだわりを感じます。そこで今回は、フェンリル株式会社のユーザーインターフェイスデザイナー・松野紘明さんに、開発者ならではの“こだわり”を中心に聞いてみました。
【前編はこちら】http://www.mdn.co.jp/di/newstopics/29045/
#11 進捗から通知まで―27ピクセルで描かれたダウンロードアイコンの世界
Sleipnir for Macのツールバーの端に現れるダウンロードアイコンは、ただのツールボタンではありません。27ピクセルで描かれたアイコンの中には、ダウンロードに関するさまざまな機能が含まれています。たとえばファイルのダウンロード中、小さなプログレスバーが表示され、複数のファイルを同時ダウンロードしているときは二重になって示します。さらにダウンロードが完了すると青く光り、未確認ファイルがあることも伝えます。小さなスペースに必要な機能を無理なく組み込んだデザインに仕上げることができました。
わずか27ピクセルのダウンロードアイコンですが、必要な情報が伝えられるようにデザインしています。
#12 解像度ではなく表現力を2倍にする、Retinaディスプレイ対応
Sleipnir for MacはRetinaディスプレイに対応しています。といっても、たんに解像度が2倍のリソースを用意しただけではありません。高精細なRetinaディスプレイを活かし切るために、隅々まで描き直しています。たとえば、通常なら1ピクセルの線でしかないボタンのふちも、金属に刻んだ細い溝のように表現しています。このとき、あえて1.4ピクセルのような端数の線を使うなど、高解像度ならではの手法も盛り込んでいます。高精細だからこそ、わずかにぼかした縁や陰影が活きるんです。ぜひ一度、顔を近づけて見てください。
Sleipnir for MacはRetinaディスプレイに対応しています。といっても、たんに解像度が2倍のリソースを用意しただけではありません。高精細なRetinaディスプレイを活かし切るために、隅々まで描き直しています。たとえば、通常なら1ピクセルの線でしかないボタンのふちも、金属に刻んだ細い溝のように表現しています。このとき、あえて1.4ピクセルのような端数の線を使うなど、高解像度ならではの手法も盛り込んでいます。高精細だからこそ、わずかにぼかした縁や陰影が活きるんです。ぜひ一度、顔を近づけて見てください。
Retinaディスプレイならではの高解像度で細部まで表現してこそ、真のRetinaディスプレイ対応と言えるでしょう。
#13 “今日のヒント”に次のヒントを見るボタンをつけなかった理由
新規タブページ左下に表示される“今日のヒント”。ここではSleipnir for Macのおすすめ機能や使いこなすコツを毎日お届けしています。内容が入れ替わるのは1日に1回のみなので、まさに日替わりです。最初は次のヒントを見るボタンを用意することも検討しましたが、あくまで日替わりにこだわりました。ひと通り一気に読んだらもう見ない、というものではなく、ふだんは気にならないけどなんとなく見てしまうようなものにしたかったのです。表示の仕方も、きちんと目に入るけど目障りにならないように、位置や配色を調整しています。
新規タブページ左下に表示される“今日のヒント”。ここではSleipnir for Macのおすすめ機能や使いこなすコツを毎日お届けしています。内容が入れ替わるのは1日に1回のみなので、まさに日替わりです。最初は次のヒントを見るボタンを用意することも検討しましたが、あくまで日替わりにこだわりました。ひと通り一気に読んだらもう見ない、というものではなく、ふだんは気にならないけどなんとなく見てしまうようなものにしたかったのです。表示の仕方も、きちんと目に入るけど目障りにならないように、位置や配色を調整しています。
しれっと思いがけない裏情報が見つかるかもしれません。「おっ！」と思えるヒントが出た日は、気分よく過ごせるかも。
#14 余白を“余裕”として魅せるデザイン
サムネイルのタブをもっとも美しくデザインするために、最初に考えたのはタブバーそのものを省くことでした。一般的なタブバーは、タブが少なくてもツールバーを占有しています。むだに枠だけがあって、なんだか野暮ったいと思っていたのです。そこでSleipnir for Macでは、金属調のツールバーをわずかにくぼませて、そこへタブを収めました。タブが少なければくぼんだ領域も最小限になり、残ったスペースには継ぎ目のないそのままのツールバーがすらり。タブが少ないときの余白を“余裕”として魅せるデザインなのです。
サムネイルのタブをもっとも美しくデザインするために、最初に考えたのはタブバーそのものを省くことでした。一般的なタブバーは、タブが少なくてもツールバーを占有しています。むだに枠だけがあって、なんだか野暮ったいと思っていたのです。そこでSleipnir for Macでは、金属調のツールバーをわずかにくぼませて、そこへタブを収めました。タブが少なければくぼんだ領域も最小限になり、残ったスペースには継ぎ目のないそのままのツールバーがすらり。タブが少ないときの余白を“余裕”として魅せるデザインなのです。
Sleipnir for Macの先端的ですっきりとした印象をいっそう強めています。
#15 溢れても美しいタブのデザイン
Sleipnir for Macは、たとえタブが100個あっても目的のタブがすぐに見つかるWebブラウザとしてデザインしました。となれば、タブがツールバーに収まり切らなくなっても、つねに探しやすくすることは必須。さらに、すっきりとした美しさはそのままに。これを実現するために、スクロールするとタブが左右に隠れるのではなく、両端で重なるようにしました。全体がつねにツールバーに収まって見え、タブがいくつあってもすっきりとした美しさは変わりません。また、現在のタブは見失わないように、端に引っかかって留まるようにしています。
Sleipnir for Macは、たとえタブが100個あっても目的のタブがすぐに見つかるWebブラウザとしてデザインしました。となれば、タブがツールバーに収まり切らなくなっても、つねに探しやすくすることは必須。さらに、すっきりとした美しさはそのままに。これを実現するために、スクロールするとタブが左右に隠れるのではなく、両端で重なるようにしました。全体がつねにツールバーに収まって見え、タブがいくつあってもすっきりとした美しさは変わりません。また、現在のタブは見失わないように、端に引っかかって留まるようにしています。
両端で重なったタブは、スクロールすると少しずつ順番に現れて、継ぎ目なく動きます。この小さなアニメーションもポイント。単純に見えて、凝った動きをしています。
#16 画像リソースを数えたら1600ほどありました
Sleipnir for Macにはボタンや背景のために数多くの画像が使われています。いったいいくつの画像リソースがあるのか、ふと気になったので、プロジェクト内のPNGファイルを数えてみました。すると…その数なんと1600！ 美しく先端的なWebブラウザを実現するためには、細部まで疎かにはできません。ちなみに、画像リソースはアプリアイコンからボタンまで99.9％を、Adobe Illustratorのみで制作しています。ベクターグラフィックなので、パーツの共通化や再編集によって効率よく品質を高められます。
Sleipnir for Macにはボタンや背景のために数多くの画像が使われています。いったいいくつの画像リソースがあるのか、ふと気になったので、プロジェクト内のPNGファイルを数えてみました。すると…その数なんと1600！ 美しく先端的なWebブラウザを実現するためには、細部まで疎かにはできません。ちなみに、画像リソースはアプリアイコンからボタンまで99.9％を、Adobe Illustratorのみで制作しています。ベクターグラフィックなので、パーツの共通化や再編集によって効率よく品質を高められます。
ボタンの各状態もひとつひとつ手づくりです。
#17 TiledTab画面のタブをあえてくっつきにくく調整したワケ
すべてのタブを大きく並べて見渡せるTiledTab画面では、タブをすばやく整理できます。その際にタブをドラッグしてほかのタブにくっつけたり並べ替えたりできるのですが、じつはタブがくっつく当たり判定をややシビアに調整しています。タブがくっつきやすいと、ほかのタブをまたいで並べ替えるのが困難になってしまうからです。また、まちがえてくっつけてしまうほうが操作に失敗した感覚をより強く感じます。そのため、狙ってタブを重ねたときにだけくっつくようにしています。
すべてのタブを大きく並べて見渡せるTiledTab画面では、タブをすばやく整理できます。その際にタブをドラッグしてほかのタブにくっつけたり並べ替えたりできるのですが、じつはタブがくっつく当たり判定をややシビアに調整しています。タブがくっつきやすいと、ほかのタブをまたいで並べ替えるのが困難になってしまうからです。また、まちがえてくっつけてしまうほうが操作に失敗した感覚をより強く感じます。そのため、狙ってタブを重ねたときにだけくっつくようにしています。
思い通りに動くと感じさせるデザインのためには、あえて操作を難しくすることも必要です。
#18 ドラッグ先のサイズに合わせて、放り込める感じを演出
TiledTab画面では、たくさんのタブを分類できるフォルダのような“タブグループ”で管理できます。いま開いているタブを残したまま、すぐに別の用事をこなす際に活用できる機能です。さて、画面の下に小さく並んだタブグループに、タブをドラッグして入れるのですが…このままでは入れにくい印象があります。なぜならドラッグするタブが大きすぎ、ドロップ先を覆い隠すからです。そこで、タブをタブグループに近づけると、スルッと小さくなるようにしました。これならタブグループがよく見えて、入れられることもひと目で伝えられます。
TiledTab画面では、たくさんのタブを分類できるフォルダのような“タブグループ”で管理できます。いま開いているタブを残したまま、すぐに別の用事をこなす際に活用できる機能です。さて、画面の下に小さく並んだタブグループに、タブをドラッグして入れるのですが…このままでは入れにくい印象があります。なぜならドラッグするタブが大きすぎ、ドロップ先を覆い隠すからです。そこで、タブをタブグループに近づけると、スルッと小さくなるようにしました。これならタブグループがよく見えて、入れられることもひと目で伝えられます。
近づけると小さくなって、離すとまた大きくなります。なめらかでシームレスなアニメーションも見どころです。
#19 右側のタブをすべて閉じる、なら左側は？もちろんあります
タブを右クリックすると、まとまったタブを閉じたり、右側にあるタブをすべて閉じることができます。しかも、すべて閉じられるのは右側だけではありません。[option]キーを押すとメニュー項目が変化して、“左側をすべて閉じる” が現れます。すべての機能を並べてしまうと、よく使う機能が見えづらくなるので、ふだんは省いています。けれど、ちゃんとできるようにしておく、というのは、Sleipnir for Macの色々なところに共通して見られる思想でもあります。これも、先端的なデザインの形です。
タブを右クリックすると、まとまったタブを閉じたり、右側にあるタブをすべて閉じることができます。しかも、すべて閉じられるのは右側だけではありません。[option]キーを押すとメニュー項目が変化して、“左側をすべて閉じる” が現れます。すべての機能を並べてしまうと、よく使う機能が見えづらくなるので、ふだんは省いています。けれど、ちゃんとできるようにしておく、というのは、Sleipnir for Macの色々なところに共通して見られる思想でもあります。これも、先端的なデザインの形です。
![ほかにも[option]キーを押すとを押すと変化するメニュー項目があります。ぜひ色々探してみてください。](attach/images/ne0_201304/2-09_130408140608.jpg)
ほかにも[option]キーを押すとを押すと変化するメニュー項目があります。ぜひ色々探してみてください。
#20 フリックするときの減速処理には、独自のベジェ曲線を用意
Sleipnir for Macでは、横にフリックするだけでタブを次々に切り替えられます。ページをたくさん開いて使いこなせるように全体がデザインされているので、どんどん開いて、フリックしながらさくさく読み進められるのです。この体験のキーになるのが、つい触ってしまうほどのフリックの気持ちよさ。実現するには、フリックしたページが緩やかに止まるところが大切だと考えました。そこで、この部分の減速処理には独自のベジェ曲線を指定して、時間をかけて調整しています。その結果は…ぜひ触れて感じてください。
Sleipnir for Macでは、横にフリックするだけでタブを次々に切り替えられます。ページをたくさん開いて使いこなせるように全体がデザインされているので、どんどん開いて、フリックしながらさくさく読み進められるのです。この体験のキーになるのが、つい触ってしまうほどのフリックの気持ちよさ。実現するには、フリックしたページが緩やかに止まるところが大切だと考えました。そこで、この部分の減速処理には独自のベジェ曲線を指定して、時間をかけて調整しています。その結果は…ぜひ触れて感じてください。
OS Xで用意されている一般的な減速処理は使わず、手作業でベジェ曲線を指定しています。
［筆者プロフィール］
まつのひろあき●Sleipnir for Mac のユーザーインターフェイスデザイナー。コンセプトから機能のディテール、Webページに至るまで、おおよそユーザー体験に関わるものすべてをデザインしている。また、Sleipnir Mobile for iPhone／iPad も手がける。
まつのひろあき●Sleipnir for Mac のユーザーインターフェイスデザイナー。コンセプトから機能のディテール、Webページに至るまで、おおよそユーザー体験に関わるものすべてをデザインしている。また、Sleipnir Mobile for iPhone／iPad も手がける。
