エディトリアル型プロダクトWebサイトデザイン

温かみのある紙面によるプロダクト紹介

このWebサイトは、OpenDesignを従来型のソフトウェアダッシュボードではなく、エディトリアル型プロダクトとして提示しています。作家性のある見出し「Designing intelligence on warm paper.」が、非常に大きなセリフ体で冒頭のビューを占め、「paper.」にはネイビーの配色が施されています。このコントラストにより、説明文が始まる前にビジュアル上の前提が明確に伝わります。

ヒーローでは、そのディスプレイ表現に「The open-source studio for editorial documents, white papers, and one-pagers — typeset by your own coding agent.」という一文を組み合わせています。右側では、「31 SKILLS」「72 SYSTEMS」「12 AGENTS · BYOK」のコンパクトなブロックが、広がりのある左列とのバランスを取っています。ソースCSSからヒーローグリッドが1.45fr/0.55frであることを確認できるため、この構成では見出しのナラティブを優先しながら、幅の狭いエビデンス欄も維持しています。

これはプロダクトランディングページのデザインスタディです。数値、コマンド、ロードマップ、機能に関する記述は例示用のソースコンテンツであり、検証済みの現在の性能や、接続済みサービスの証拠ではありません。ページのビジュアル言語は、それらと切り離して評価できます。温かみのある紙面、大きなタイポグラフィ、控えめなネイビー、コンパクトなメタデータ、意図的に設計された読書順序が特徴です。

プロダクトストーリーのためのランディングページ

このデザインは、コンバージョンの前に説明が必要なプロダクトに適しています。たとえば、オープンソースツール、エディトリアルプラットフォーム、各要素の関係性によって価値が決まるシステムです。冒頭のコピーでは、ドキュメント、ホワイトペーパー、ワンページ資料に言及し、その後「What it is」「How it feels」「What ships next」へと進みます。この順序により、訪問者には定義、作業哲学、将来を見据えた適用範囲という簡潔な物語の流れが示されます。

左側のチャプターラベルは短く、本文列が説明を担います。スタイルシートではチャプターの段落幅が62chに制限されており、各行の読みやすさを保つ一方、長い記述ほど縦方向のスクロール量が増えます。これはマニフェストのような文体を持つプロダクトには有効なトレードオフです。ページは注意とリズムを維持できますが、高密度の比較表ほど素早く大量の機能一覧を伝えることはできません。

表示されるコピーでは、「01」「02」「03」のほか、「MANIFESTO · Nº 01」のような小さなラベルを含むエディトリアル上のマーカーも繰り返し使用されています。こうした反復は、訪問者が議論のどこにいるかを把握するのに役立ちます。タスクの状態や操作が通常は優先される取引型ストアやユーティリティアプリでは、その意味合いは薄くなるでしょう。

01

オープンソーススタジオ

訪問者に行動を促す前に、マニフェスト、ソースへの参照、リリースに関する表現を通じて、プロジェクトの原則を確立できます。

02

ドキュメント指向のプロダクト

温かみのある紙面設定は、素早い業務上の走査よりも、読書、執筆、ホワイトペーパー、ワンページ資料に関係するプロダクトに適しています。

03

物語性のあるロードマップ

専用の「What ships next」チャプターを設けることで、将来の方向性をプロダクト説明の後に配置し、現在の位置づけと提案中の作業を分けられます。

マストヘッドからロードマップまで

読書順序は、号数を示す形式のマストヘッドとヒーローから、ネイビーの罫線が付いたマニフェストへ進み、その後に4セルの指標行が続きます。続く番号付きの3つのチャプターでは、「What it is」がスタジオの概念を紹介し、「How it feels」が提案されているワークフローを説明し、「What ships next」がサンプルのロードマップ文を掲載します。大きなOpenDesignのワードマーク、ソースとスタジオの索引、最後の法的情報欄でページを締めくくります。中間のモジュールは重要です。冒頭のステートメントと、より長い説明を分離する役割を担っています。

第2チャプターは特に特徴的です。ブランド、オーディエンス、規模、言語のフィールドを備えた30秒の質問フォームに続き、選択されたビジュアル方針、固定された書体構成、作成済みの成果物へ進む流れを説明しています。キャプチャでは、これらのアイデアは実際のフォームではなく文章として提示されています。これによりエディトリアルな文体は保たれますが、ページがインタラクティブな状態変化を実演するのではなく、提案されたワークフローを説明するものにもなっています。

ワークフローの段落には、「looks AI」「looks shipped」「One brush tag per page.」などの強調フレーズが添えられています。これらのインラインアクセントは、新しいパネルシステムを導入することなく、セリフ体の本文に変化を加えます。その結果、表現力のある強調が生まれていますが、この慣例は、強調された語句が操作要素ではなくエディトリアル上の注釈であると読者が理解することに依存します。

1. 01：前提を確立する

   ヒーローでは、温かみのある紙面の見出し、プロダクトを説明する一文、号数メタデータ、右側の欄を使用し、訪問者がチャプターへ到達する前にスタジオが何であるかを伝えます。

2. 02：プロダクトを説明する

   「What it is」では、ローカルファーストの説明から、ソースファイル、デザインシステム、プレビュー、エクスポートに関する記述へと進みます。そのため、訪問者はロードマップの内容より先に概念モデルを理解できます。

3. 03：提案されたワークフローを説明する

   「How it feels」では、質問フィールド、ビジュアル方針の選択、書体構成の固定、ファイル出力、iframeでのレビュー、コメントアンカーを一連の流れとして示します。文章はこれらの状態を説明していますが、実行時の動作を証明するものではありません。

4. 04：将来の適用範囲を分ける

   「What ships next」では、パッケージ化、マルチテナント用トークン、成果物の永続化をロードマップ上の項目として挙げ、計画中の作業をページの現在のエディトリアルな位置づけと視覚的に区別しています。

可視化されたデザインと機能の境界

確実に応用できるのは、目に見える構成です。温かみのあるオフホワイトの領域、大きなセリフ体のディスプレイ書体、Source Sans風の実用テキスト、ネイビーのアクセント、番号付きチャプター、幅の狭い本文設計が含まれます。提供されたCSSも、観察された比率、つまり幅広いヒーローコピー列と62chのチャプター本文を裏づけています。

ソースからは、稼働中のデーモン、接続済みのバックエンド、永続化レイヤー、決定論的生成、完成済みのナビゲーションは確認できません。調査した言語リンク「EN」「中文」「日本語」、「github.com/nexu-io」、リリース、イシューは、プレースホルダーのリンク先に接続されています。このデザインを再利用する際は、ワークフロー、ストレージ、コマンド、プロダクト数、ロードマップに関する記述を、サンプルコンテンツまたは提案された動作として扱ってください。

OpenDesignは、この例をCommunityライブラリを通じて配布しています。ソースドキュメントでは、Kami by tw93がデザインシステムで応用されたアップストリームのスキルとして示されています：https://github.com/tw93/kami。この帰属は配布者のクレジットと分けてください。OpenDesignが元のKamiの方向性を独自に考案したという主張ではありません。