UI考察：slack
巷で大人気のチャットツール、slackのUIを舐めてみた。あまり詳細な部分は見れてない。
明快なレイアウトとコントラスト
・コンテンツ部分と操作部分を徹底的にはっきりと分けている。
・操作部分はコントラストを抑え、あくまでコンテンツ部分を浮かしている。
・文字群のまとまりがわかりやすい。
・タイトル表示が明快。リズム感が心地よい。
・ローコントラストとハイコンとラストの部分がはっきり分かれている。
・ただしハイコントラストの方がはるかに分量がすくない。重要な情報を絞ってこれでもか、と強調している。
・選択可能部分は選択前には薄すぎるくらいのローコントラスト。
・そのため選択後の反応が強く見え、とてもわかりやすい。
オフィスツールっぽくない雰囲気
・仕事を楽しく感じさせる色々な工夫がなされている。
・slackを使う自分の仕事はクールだ とさえ思わされるかもしれない。
・例えばカラーの組み合わせ。でもこれはデザイナーのテイストだと思う。
・例えば効果音。
・例えばフォント。調べるとgoogleのLatoフォントだった。アプリからサービスプロモーションのぺーじまで全てこのフォントで統一している。部分的に丸みがあるため主張せず、背景になじむのでツールアプリには向いているかもしれない。
細やかな機能
・コマンンド入力時に補完が出てきて感動。やはり補完は重要。
・メンションやスターつきのフィルタがメイン画面を表示したままで出るのは安心感がある。ただし開閉にはアニメーションがほしい。
その他情報
デザインの担当はmetalabという会社。インハウスではないのか。意外。ここでmetalabのAndrew Wilkinsonが開発秘話を語っている。かなり面白い。ざっくり以下のような内容。3点に集約されている。
It Looks Different
従来のエンタープライズ向けのツールから離れることを目指したことが語られてる。他のアプリのような暗いブルーではなく、紙吹雪のようなカラースキームにかわいいロゴ。これらのカラーはエンタープライズカラーではなく、ゲーム業界にヒントを得ているらしい。
It Feel Different
ユーザを楽しませるための細かいアニメーションのこだわりについて語られている。ロゴの回転やモーダルアニメーションなど。プロではないユーザはこういった細部に明確に気づくことはない。ただし小さなこだわりの集積を確実に感じると。
It Sounds Different
slackの中で使われるあらゆる言葉について語られている。アプリ内のアラートからツイートまで。ただ必要なことを伝えるだけでなく、ユーモアを踏まえた内容にこだわってるらしい。従来のツールが2001年宇宙の旅のHAL9000ならslackはInterStellerのTARSだと。
感想
細部のこだわりの集積であることが実感できた。その工夫は全てPlayfulというようなコンセプトに向かっていて明快。コンセプトは重要だ。ただこうしたコンセプトは生活圏の文化の影響が大きいと思う。彼らは楽しむのが本当にうまい。同じことをやろうと思っても絶対にできないと思う。よそはよそ、うちはうち。
RELATED POSTS
- 2015-05-12
普段使っているRSSリーダアプリfeedlyのUIを検証してみた。普段はデスクトップアプリをメインに使っている。
- 2015-04-22
AlfredやFlashlightが便利なのでUIを考察してみた。Alfredは以前からよく使われているMac用のランチャーアプリ。FlashlightはYosemite用Spotlightのプラグインで最近評判がいい。
- 2015-04-19
WebおよびモバイルアプリのUIデザインをやることになりそうなので、モックアップツールを調べた。どうやらUI用のモックツールは以下の2種に大別されるらしい。ここにシンプルにまとまってた。
- 2015-05-28
自分はwebデザインの素人だ。とはいえ、今後はプロダクトのwebデザインに手をつける必要がありそうだ。なので最近のwebページのレイアウトをざっくりトレースしてみた。トップページのみ。
- 2015-05-24
プロトタイプツールのHype3が超便利なの感想をメモ。
- 2013-08-06
友人が運営するイベントに誘われ面白そうなので参加してきた。36時間で新しい照明を作り出すハッカソン、Design Loves Engineering。面識のないデザイナーとエンジニアがその場でチームを編成し、その後2日間で照明を作り出そうというイベントだ。開催場所のFabLab Kitakagayaはレーザーカッターや3Dプリンターを備えた実験工房。
- 2018-11-18
Bootstrapのフォームのバリデーションについてメモ。
- 2018-11-09
iOSのふらっとデザインがなぜうまく作用するのかを考えた。出てきた当初は使いづらかった。今はうまく使える。
- 2015-04-18
テレビでフォーリーアーティストとやらの特集をやっていた。フォーリーアーティストは映画の音を作る人たちのこと。驚いたことに映画の音の80%くらいは別途作成されて後で追加されるらしい。その製作方法がとても面白くてハマってしまった。
- 2018-11-21
理論的を詰めて作ったデザインが魅力的にならないことがある。どんなに「正しいもの」を作ったとしても、最終的に「良い印象」がなければゴールに辿りつくこはない。
- 2017-01-27
以前作った海外向けの新幹線の予約サービスを大幅に更新してみた。デザインを更新し、サイト内での支払いを可能にした。
- 2014-04-18
グランフロント大阪のイノベーションハブにて催されたTechCrunch主催のハッカソン。テーマがIoTだったので興味を惹かれて参加。良いチームにも恵まれ色々と発見ができたイベントだったので内容を記録。
POPULAR POSTS
- 2013-08-06
友人が運営するイベントに誘われ面白そうなので参加してきた。36時間で新しい照明を作り出すハッカソン、Design Loves Engineering。面識のないデザイナーとエンジニアがその場でチームを編成し、その後2日間で照明を作り出そうというイベントだ。開催場所のFabLab Kitakagayaはレーザーカッターや3Dプリンターを備えた実験工房。
- 2012-05-11
最近「STARTUP WEEKEND」なるイベントがある事を知った。面白そうなので、ミーハーな自分は本日5/11からの東京でのイベントに参加してみる事にしました！
- 2015-04-25
- 2014-07-12
UIkeyboardの動きに合わせてビューも移動させたい。以下の動画ではピンクの部分が対象のビュー。
- 2014-05-26
UIImageの画像をリサイズ、回転、反転したい場合がある。こんなときにはQuartz 2D APIを使用する。Quartz 2D APIはCore Graphicsフレームワークの一部。
- 2015-04-22
AlfredやFlashlightが便利なのでUIを考察してみた。Alfredは以前からよく使われているMac用のランチャーアプリ。FlashlightはYosemite用Spotlightのプラグインで最近評判がいい。
- 2015-04-19
WebおよびモバイルアプリのUIデザインをやることになりそうなので、モックアップツールを調べた。どうやらUI用のモックツールは以下の2種に大別されるらしい。ここにシンプルにまとまってた。
- 2015-05-28
自分はwebデザインの素人だ。とはいえ、今後はプロダクトのwebデザインに手をつける必要がありそうだ。なので最近のwebページのレイアウトをざっくりトレースしてみた。トップページのみ。
- 2015-05-12
普段使っているRSSリーダアプリfeedlyのUIを検証してみた。普段はデスクトップアプリをメインに使っている。
- 2014-03-02
23andmeの検査キットをつかって唾液を送って一ヶ月後、DNA検査の結果が閲覧可能になった旨を知らせるメールが届いた。 結果を順に紹介してみる。
- 2015-04-23
Xcode6でのローカライズの流れを調べた。ローカライズが必要なのは以下のもの。
- 2014-12-07
モバイルアプリでAmazonの商品を扱うためのAPIについて調べてみた。アプリ内で購入まで完結させる機能もある。商品が売れればアプリの開発者は最大6%のマージンを受け取ることができる。この内容を見るとすごく魅力的。