この記事ではUIデザインに特化して解説します。デザインシステム・UI生成全般は デザインシステムとは？仕組み・構成要素・有名事例をエンジニア向けに完全解説 をご覧ください。

ツールの概要

Clearlyは、macOS専用のネイティブMarkdownエディタ。GitHub Stars 314、開発者はJosh Pigford（@Shpigford）。一言で表すなら「Electron排除・機能最小限・macOS最適化のMarkdownエディタ」。

SwiftとAppKitだけで構築された純粋なネイティブアプリ。サブスク不要、アカウント不要、クラウド接続不要。ローカルの.mdファイルを開いて書く、それだけに特化した設計。

OSSのREADME執筆やブログ下書きに適している。Viteのようなフロントエンド開発ツールのドキュメント作成や、OpenSwiftUIプロジェクトの資料作成にも使える。

何ができるのか

Clearlyの機能を3つのモードで整理する。

graph TD A["起動"] --> B["エディタモード (Cmd+1)
NSTextView + シンタックスハイライト
見出し / 太字 / リンク / コードブロックを色分け"] A --> C["プレビューモード (Cmd+2)
WKWebView + cmark-gfm
GFM / Mermaid / KaTeX を即時レンダリング"] A --> D["サイドバイサイド
左: エディタ 右: プレビュー
同期スクロール対応"]

機能一覧を整理する。

機能カテゴリ 内容 操作方法
シンタックスハイライト 見出し、太字、斜体、リンク、コードブロック、引用、リスト 自動適用（正規表現ベース）
リアルタイムプレビュー GitHub Flavored Markdown完全対応 Cmd+2 または分割表示
Mermaidダイアグラム フローチャート、シーケンス図等をプレビュー内で描画 Mermaid記法をそのまま記述
KaTeX数式 数式をプレビュー内でレンダリング LaTeX記法をそのまま記述
YAML frontmatter エディタ・プレビュー両方でフォーマット表示 ファイル先頭に—で囲む
PDF出力 プレビュー内容をPDFエクスポートまたは直接プリント メニューから実行
フォーマットショートカット 太字(Cmd+B)、斜体(Cmd+I)、リンク(Cmd+K) キーボードショートカット
Scratchpad メニューバー常駐のミニエディタ。グローバルホットキーで起動 ホットキーで呼び出し
QuickLook Finderで.mdファイルをスペースキーでプレビュー QLPreviewProvider拡張
ダークモード システム設定に自動追従、手動切り替えも可 自動 / 手動設定

Scratchpadは他のMarkdownエディタにあまり見られない機能。ドキュメントを開かずにメニューバーからメモを取れるため、ちょっとしたアイデア記録に使える。

仕組み

アーキテクチャはSwiftUI + AppKitのハイブリッド構成。DocumentGroupベースのドキュメント管理アプリとして動作する。

graph TD A["ClearlyApp (@main)"] --> B["DocumentGroup + MarkdownDocument
FileDocument準拠、.mdファイルのI/O"] A --> C["ContentView"] C --> D["EditorView (NSViewRepresentable)
NSTextView をラップ"] D --> E["MarkdownSyntaxHighlighter
(NSTextStorageDelegate)
正規表現でキーストロークごとに解析
コードブロック → 見出し → 太字 → ... の優先順位"] C --> F["PreviewView (NSViewRepresentable)
WKWebView をラップ"] F --> G["MarkdownRenderer (cmark-gfm) → HTML生成
PreviewCSS でスタイル適用"]

設計判断で注目すべき点が3つある。

NSTextView採用の理由 – SwiftUI標準のTextEditorではなくAppKitのNSTextViewを使用。ネイティブUndo/Redo、システム検索パネル（Cmd+F）、NSTextStorageDelegateによるハイライトが必要なため。

共有コード設計 – MarkdownRendererとPreviewCSSは、メインアプリとQuickLook拡張の両方にコンパイル。プレビューの見た目がFinderのQuickLookと完全一致する。

動的テーマ – 全カラー定義がTheme.swiftに集約。NSColor(name:)でライト/ダークを自動解決し、ハードコードされた色は存在しない。

インストールと使い方

方法 手順 前提条件
DMGダウンロード GitHub Releasesから.dmgを取得 → Applicationsにドラッグ macOS 14以降
ソースビルド git clone → xcodegen generate → Xcode(Cmd+R) Xcode、Homebrew、xcodegen
CLIビルド xcodebuild -scheme Clearly -configuration Debug build Xcode CLI tools

ソースビルドの前提条件を整理する。

必要ツール インストール方法 用途
macOS 14 (Sonoma)以降 – 実行環境
Xcode + CLI tools xcode-select –install ビルド
Homebrew brew.sh パッケージ管理
xcodegen brew install xcodegen project.yml → .xcodeproj生成
Sparkle (自動取得) Swift Package Manager 自動アップデート
cmark-gfm (自動取得) Swift Package Manager Markdownレンダリング

project.ymlが設定の正。変更した場合はxcodegen generateの再実行が必要。.xcodeprojの直接編集は非推奨。

shadcn/uiなどのUIコンポーネントライブラリでフロントエンドを構築する際のドキュメント、ClearlyでMarkdown執筆してからGitHubにプッシュする流れが効率的。

他ツールとの比較

項目 Clearly iA Writer Bear Obsidian Typora
価格 無料（OSS） 買い切り約$50 サブスク$1.49/月 無料（プラグイン一部有料） 買い切り約$15
プラットフォーム macOS専用 macOS/iOS/Windows macOS/iOS 全プラットフォーム macOS/Windows/Linux
レンダリング方式 ネイティブ(AppKit+WKWebView) ネイティブ ネイティブ Electron Electron
GFM対応 完全 部分的 部分的 プラグイン依存 完全
Mermaid対応 対応 非対応 非対応 プラグインで対応 対応
KaTeX/数式 対応 非対応 非対応 プラグインで対応 対応
クラウド同期 なし iCloud iCloud Obsidian Sync(有料) なし
プラグイン なし なし なし 豊富 なし
QuickLook拡張 対応 非対応 非対応 非対応 非対応
Scratchpad 対応 非対応 非対応 非対応 非対応

Clearlyの立ち位置は明確。「macOSでMarkdownを書くだけ」に徹した無料ツール。Obsidianのナレッジベース構築やBearのタグ管理は不要、iA Writerに$50を払う前に試す価値がある選択肢。

クロスプラットフォームが必須なら選択肢から外れる。iOS連携もなく、チームでドキュメントを共有する場合はVS CodeやObsidianの方が適切。

制限事項・注意点

  • macOS 14以降が必須: Sonoma未満のmacOSでは動作しない。古い環境のユーザーは対象外
  • クラウド同期機能なし: アプリ自体にファイル同期機能は存在しない。iCloud DriveやDropboxフォルダに保存すれば間接的に同期は可能だが、コンフリクト解決はOS任せ
  • プラグイン・拡張機能なし: 設計思想として機能追加の仕組みを持たない。カスタムテーマ、ショートカットの追加、外部サービス連携は不可
  • 自動テストなし: テストスイートは存在しない。手動ビルド→実行→目視確認が基本フロー
  • iOS/iPad非対応: AppKit依存のためiOS移植の見込みなし。モバイル執筆にはiA WriterやBearを選択
  • Xcodeビルドが必要: ソースビルドにはxcodegen + Xcode環境が前提。DMGダウンロードであれば不要

参考リンク