UIがエロいMac App集
UIがとてもイケている『エロい』Macアプリを適当に挙げようと思う。
私が考えるエロいUIの条件：
- AppKitを利用したCocoa App
- デスクトップアプリ
- WebView, Electron, Flash, Javaなどの技術で構築しない
- HIGを守る／Apple純正アプリをリスペクトする
- WindowsのUIを基準にしない
- ドラッグアンドドロップなど機能的にもMac OSの仕組みに従う
- 独自UIで汚染しすぎない
- Mac OSらしい色使い
- Mac OSらしいアニメーション／インタラクション
- Mac OSらしい言語表現（例えば「ウインドウ」「環境設定...」など）
- Mac OSらしいフォント（San Francisco, Helvetica Neue, Lucida Grande, Hiragino Sans, Menlo, Monaco...）
- 標準的なメニューバーおよびキーボードショートカット
よって例えば次のようなアプリのUIは『エロい』とは言えない。
- Chrome
- Adobe Creative Cloud
- Microsoft Office
- Slack
Chrome は機能的には優れているが、Mac OSのHIGを無視してしまっているため、条件に当てはまらない。
Adobe CC はWebの技術でUIが構築されていると思われ、Mac OSらしいUIからは程遠くWindowsとの共通化が図られている。メニューバーの内容にもMac OSらしさはないため、条件に当てはまらない。
Microsoft Office はMac OSらしいUIからは程遠く、条件に当てはまらない。
Slack はWebの技術でUIが構築されているので、条件に当てはまらない。
Twitter は独自のUIがHIGから逸脱しすぎているのと、インタラクションがMac OSらしくないことから、条件に当てはまらない。
Paw 3
HTTPクライアント。一目見て、この設計者はMacのUIはどうするべきかをちゃんと分かっていると感じた。色の選び方も素敵。全体的にXcodeから影響を受けていると思われる。
Sketch
Sketch gives you the power, flexibility and speed you always wanted in a lightweight and easy-to-use package. Finally…www.sketchapp.com
言わずと知れたGUI設計ツール。我々もお世話になっていて頭が上がらない。そのSketch自体もMacのツールはどうあるべきかをちゃんと分かっている。
左サイドバーにレイヤー要素、中央にエディタ、右サイドバーにインスペクター、そして上ツールバーというスタイル。もちろんドキュメントベースドアプリなのでマルチウインドウにも対応している。
全体的な感じからKeynoteから影響を受けていると思われる。
Sequel Pro
Sequel Pro is open source and built by people like you. We'd love your input - whether you've found a bug, have a…www.sequelpro.com
MySQLデータベースを構築するためのMac App。普段使っていないので細かいところまではわからないが、このウインドウを一目見れば『分かっている』のが伝わってくる。黄色と紫色を使い分けるのはMacユーザー、特にXcodeユーザーには馴染みがあって良い。
ツールバーの感じからスタイルが3〜4年ほど古い印象はある。
Tower 2
Tower - the most powerful Git client for Mac and Windowswww.git-tower.com
割と良いお値段のGitクライアント。スクショを眺めるだけでもほぼ完璧である。Data Sourceスタイルのサイドバーを備えた3ペイン構造はMail.appに近いUIかもしれない。
Cornerstone 3
https://www.zennaware.com/cornerstone/
Subversionクライアント。使ったことはないけれど、スクショを見る限りではUIは素晴らしい。Mac Appをデザインする際に参考になりそうな表現が数多くある。
Fork
Fork is getting better and better day after day and we are happy to share our results with you. Hit the button below to…git-fork.com
シンプルなGitクライアント。TowerやSourceTreeほどではないけれども、必要最低限の機能は備えているしUIはとても美しいので、今後期待したいMac Appである。
ドキュメントベースドのマルチウインドウアプリではなさそうだが、Safari/Xcode風のタブバーに対応しているので実質的にはドキュメントベースドに近い。
Mac Appとしてはメニューバーから行える命令の量に若干貧弱さを感じてしまうがまだβ版ということで、今後手入れされることを期待したい。
Kaleidoscope 2
Easily spot the differences in text and image files. Review changes in seconds with the world's most advanced Mac diff…www.kaleidoscopeapp.com
ファイルの差分を確認できるツール。今となってはスタイルが古いがあえてここに挙げた。その様子は2009年頃のSafariを彷彿とさせるメタルUIで、タブの角丸の具合が特にイケている。
CodeRunner 2
An advanced, highly flexible, and easy-to-use programming editor for your Mac.coderunnerapp.com
コードをサクッと実行できるエディタ。スニペットのテストなどが行える。
Xcode風のタブバーが再現されていて、コード補完機能やエディタの構成なども全体的にXcodeをリスペクトしていてとても良い。
1Password
We like 1Password because it keeps you protected without requiring a whole lot of effort.1password.com
言わずと知れたパスワードマネージャー。スキューモーフィズムの時代は微妙だったが、最近の1PasswordはMac OSらしさがあって良い。横3ペイン構造はMail.appで馴染みがあるので直感的で使いやすい。環境設定ウインドウはMac OSらしさをはかる上でも注目したいところ。
CotEditor
Cocoaらしさが詰まったテキストエディタ。UIを余計にIDEっぽく拡張せずに昔のSimple Textのような形態を守っている。それでいてコーディング向けの痒い所に手が届く機能もサポートしている塩梅が良い。
PopClip
Instantly copy & paste, and access actions like search, spelling, dictionary and PopClip appears when you select text…pilotmoon.com
PopClipのUIと言えるようなものはこのポップアップと環境設定画面くらいだが、テキストフィールドでポップアップが出る様は余計なものはなくMac OSらしさを破壊せずうまく調和できている。その上でMacに足りていないショートカット機能を提供できているので、これも挙げてみた。
Pixelmator
The world's most innovative, fastest, full-featured, and powerful image editing app for the Mac that has everything you…www.pixelmator.com
超良くわかっているペイントアプリ。Mac OSらしさを残しつつ黒地のUIをデザインするのはなかなか難しいけれども、これはちゃんとHIGを守りつつ独自色も出せていて素晴らしい。機能豊富で複雑なツール系アプリだが、なんとなく触っていても使い方が分かるのは良くできている証拠である。
Adobe Photoshopも見習うべき。