UIがエロいMac App集

usagimaru
13 min readOct 21, 2016

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
  • Twitter

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

https://paw.cloud

HTTPクライアント。一目見て、この設計者はMacのUIはどうするべきかをちゃんと分かっていると感じた。色の選び方も素敵。全体的にXcodeから影響を受けていると思われる。

Sketch

言わずと知れたGUI設計ツール。我々もお世話になっていて頭が上がらない。そのSketch自体もMacのツールはどうあるべきかをちゃんと分かっている。

左サイドバーにレイヤー要素、中央にエディタ、右サイドバーにインスペクター、そして上ツールバーというスタイル。もちろんドキュメントベースドアプリなのでマルチウインドウにも対応している。

全体的な感じからKeynoteから影響を受けていると思われる。

Sequel Pro

MySQLデータベースを構築するためのMac App。普段使っていないので細かいところまではわからないが、このウインドウを一目見れば『分かっている』のが伝わってくる。黄色と紫色を使い分けるのはMacユーザー、特にXcodeユーザーには馴染みがあって良い。

ツールバーの感じからスタイルが3〜4年ほど古い印象はある。

Tower 2

割と良いお値段のGitクライアント。スクショを眺めるだけでもほぼ完璧である。Data Sourceスタイルのサイドバーを備えた3ペイン構造はMail.appに近いUIかもしれない。

https://www.git-tower.com/mac/

Cornerstone 3

https://www.zennaware.com/cornerstone/

Subversionクライアント。使ったことはないけれど、スクショを見る限りではUIは素晴らしい。Mac Appをデザインする際に参考になりそうな表現が数多くある。

Fork

シンプルなGitクライアント。TowerやSourceTreeほどではないけれども、必要最低限の機能は備えているしUIはとても美しいので、今後期待したいMac Appである。

ドキュメントベースドのマルチウインドウアプリではなさそうだが、Safari/Xcode風のタブバーに対応しているので実質的にはドキュメントベースドに近い。

Mac Appとしてはメニューバーから行える命令の量に若干貧弱さを感じてしまうがまだβ版ということで、今後手入れされることを期待したい。

Kaleidoscope 2

ファイルの差分を確認できるツール。今となってはスタイルが古いがあえてここに挙げた。その様子は2009年頃のSafariを彷彿とさせるメタルUIで、タブの角丸の具合が特にイケている。

http://www.kaleidoscopeapp.com
http://www.kaleidoscopeapp.com
http://www.kaleidoscopeapp.com
http://www.kaleidoscopeapp.com

CodeRunner 2

コードをサクッと実行できるエディタ。スニペットのテストなどが行える。

Xcode風のタブバーが再現されていて、コード補完機能やエディタの構成なども全体的にXcodeをリスペクトしていてとても良い。

https://coderunnerapp.com
https://coderunnerapp.com
https://coderunnerapp.com
https://coderunnerapp.com

1Password

言わずと知れたパスワードマネージャー。スキューモーフィズムの時代は微妙だったが、最近の1PasswordはMac OSらしさがあって良い。横3ペイン構造はMail.appで馴染みがあるので直感的で使いやすい。環境設定ウインドウはMac OSらしさをはかる上でも注目したいところ。

CotEditor

Cocoaらしさが詰まったテキストエディタ。UIを余計にIDEっぽく拡張せずに昔のSimple Textのような形態を守っている。それでいてコーディング向けの痒い所に手が届く機能もサポートしている塩梅が良い。

https://coteditor.com
https://coteditor.com
https://coteditor.com

PopClip

PopClipのUIと言えるようなものはこのポップアップと環境設定画面くらいだが、テキストフィールドでポップアップが出る様は余計なものはなくMac OSらしさを破壊せずうまく調和できている。その上でMacに足りていないショートカット機能を提供できているので、これも挙げてみた。

Pixelmator

超良くわかっているペイントアプリ。Mac OSらしさを残しつつ黒地のUIをデザインするのはなかなか難しいけれども、これはちゃんとHIGを守りつつ独自色も出せていて素晴らしい。機能豊富で複雑なツール系アプリだが、なんとなく触っていても使い方が分かるのは良くできている証拠である。

Adobe Photoshopも見習うべき。

http://www.pixelmator.com/mac/
http://www.pixelmator.com/mac/
http://www.pixelmator.com/mac/
http://www.pixelmator.com/mac/

--

--