テクニカルライティング向けWebサイトデザイン

Quartz テクニカルライティング向けWebサイトデザイン

Quartzは、アウトラインから下書き、レビュー、公開まで、キーボードから手を離さずに進めたいテクニカルライター向けのワークスペースとして提示されています。このページはコンセプトサイトであり、実際に稼働するサービスの証拠ではありません。そのため最大の貢献は編集的なフレーミングにあり、機能を並べる前に、特化したツールとしての視点を与えています。

冒頭の一文は、左揃えの大きな Instrument Serif の見出しに置かれ、「docs nobody read」がイタリックで強調されています。最大幅16chによって長い主張文がコンパクトな一列になり、補足文はより広い52chの行幅を使います。温かみのあるオフホワイトの背景の上で、ダークカラーの Request access ボタンは、控えめな Read the manual アクションや印字風のショートカットバッジと対比されます。執筆という前提を優先する構成ですが、これらのコントロールが謳われたワークスペースの作業を実行するわけではありません。

このデザインが支えるタスク

このページは関連するいくつかのWebサイト上のタスクに応えますが、いずれもQuartzの前提に結びつけています。訪問者は、製品が誰のためのものか、想定されるワークフローがどう順序づけられているか、何にならないと決めているか、プランが読者層でどう違うかを理解できます。これらは機能を詰め込んだ導入ではなく、短いラベルと繰り返される対比で伝えられます。

ページは執筆からポジショニングへ進む

レイアウトは製品ストーリーと同じ順序で進みます。大きなヒーローがトーンを定め、エディタを紹介したのち、レビュー、エクスポート、履歴、連携へと進みます。その後、対比のセクションがQuartzが何でないかを述べ、料金セクションが編集上の立場を3つの読者層別の提案に置き換えます。この順序により、ページはカタログではなく論証のように読めます。

1. エディタから始める

   最初の番号付きセクションは「01 / OUTLINE」で、見出しは「An outline that doubles as a typewriter.」です。本文では、見出しのドラッグ、フォーカスモード、ページの残りが暗くなることに触れています。これらの詳細は構造と集中を結びつけますが、検証済みの実行時の挙動ではなく、あくまで提案された操作の挙動です。

2. チームの文脈へ広げる

   続くセクションでは、インラインレビュー、Markdownエクスポート、改訂履歴、連携が紹介されます。ラベルは各アイデアをコンパクトに保ち、説明が具体的な関係を加えます。コメントは行に紐づけられ、文書は同じ .md 構造を読み書きするものとして説明され、チケットIDはサイドレールに関連するものとして示されます。追加のたびに想定されるワークスペースは広がりますが、実際の実装が裏づけるべき製品上の主張も増えます。

3. 商業的な選択で締めくくる

   料金帯では、Solo は月額$9、Studio は1席あたり月額$22、Press は「Talk / to us」として比較されます。課金単位と読者層のラベルが異なることで、1人の書き手、ドキュメントチーム、出版社が区別されます。Solo と Press はそれぞれ4つの機能を挙げ、Studio は5つで、おすすめバッジが付きます。Press は単に長いリストを示すのではなく、SSO、セルフホスティング、エクスポートパイプライン、サポートへと主題を切り替えます。すべての価格と機能はサンプルとしてのポジショニングです。

目に見えるデザインと機能の境界

Quartzはマーケティング用のコンセプトであり、実装された執筆ワークスペースではありません。唯一のスクリプトは IntersectionObserver でセクションを表示するだけで、ボタン、表示されているショートカット、編集、レビュー、エクスポート、アカウント作成は処理しません。ネイティブのリンクは Surfaces、What It Isn't、Plans に移動しますが、Changelog に対応するセクションはなく、フッターのリンクはプレースホルダーです。したがってこのページが示すのは視覚的なポジショニングであり、動作する連携、暗号化同期、公開、実際の料金提示ではありません。それらのサービスには、別途実装とテストが必要です。

出典表記

OpenDesignは、この事例をCommunityライブラリで配布しています。元のドキュメントでは、編集的ミニマリズムと空間的リズムに関するガイダンスについて Taste Skill by Leonxlnx がクレジットされています: https://github.com/Leonxlnx/taste-skill。これは配布上のクレジットであり、OpenDesignが独自に原作者であるという主張ではありません。同梱のマニフェストはMITを宣言していますが、掲載されている個々のアセットに別途権利が成立するわけではありません。