サイトをデザインし、ファイルを確認して、公開方法を選びましょう。OpenDesignは静的ウェブサイトのフロントエンドを生成し、HTMLまたはソースコードとアセットを書き出せます。プロバイダーを設定すれば、対応するデプロイ連携を通じた公開も可能です。ホスティング先を選ぶ前に、ビルド要件と実行時の要件を確認しましょう。
ブランドに合わせたフロントエンド · 実ファイル · コーディングエージェントで続行
レスポンシブなページ、再利用できるコンポーネント、デプロイ先を問わず使える静的出力。
プロジェクトを見る
「わかりやすいホームページ、機能ページ、変更履歴へのリンク、意味の明確なコンテンツを備えた、高速なドキュメント兼製品サイト。編集用CMSは不要です。」
静的フロントエンドの価値は、高速で確認しやすく、アクセシブルで、特定の独自ランタイムに縛られずにデプロイできることにあります。
このドキュメントサイトの例では、ナビゲーション、コードセクション、公開情報を組み合わせています。実際に移行できるかは生成後に確認しましょう。ファイルを書き出し、アセットのパスとビルド要件を確認してから、選んだデプロイ先で出力をテストします。ここに表示されている数値はイメージであり、測定結果ではありません。
OpenDesignは、定義、トレードオフ、用途、ベストプラクティスを、実際のファイルとデプロイの自由度に結び付けたアーキテクチャの判断材料にします。
頻度が低く、確認後に更新
編集者が多い、または頻繁に公開する全員に同じ基本ページを表示
アカウントやユーザーごとの状態外部サービスで対応できる
複雑なサーバー側の処理ファイル、ビルド、ホスト、CDN
データベース、権限、アプリケーションの実行環境デプロイ連携には外部プロバイダーのアカウントと設定が必要です。書き出したファイルを使う場合も、対応するホストが必要です。どちらの方法でも、パス、依存関係、ドメイン、本番環境での動作を確認してください。
静的サイトでも保守が不要になるわけではありません。本番環境での確認、アクセシブルなコンテンツ、正確なメタデータ、安全なサードパーティ連携、キャッシュ、モニタリング、更新の運用が必要です。
価値は、非現実的な「保守ゼロ」の約束ではなく、移行しやすさと保守対象の少なさにあります。
クロール可能なページ構成、ナビゲーション、コンテンツセクション、リンク、再利用できるフロントエンドコンポーネントを作成します。
画像の表示領域を確保し、読みやすい文字組みを保ちながら、画面幅に合わせて同じデザインシステムを調整します。
実際のプロジェクトで必要なビルドコマンド、ホスティング先、ドメイン、フォーム、APIにファイルを接続します。
書き出し内容を確認したら、設定済みの公開連携か独自のデプロイ手順を使います。
アーキテクチャを選ぶ前に、更新頻度、編集者、動的データ、権限、フォーム、検索、連携の要件を確認します。
ページ構成、レスポンシブなデザインシステム、再利用可能なコンポーネント、ローカルアセットを作成します。
JavaScriptを使わない場合も含め、セマンティクス、メタデータ、パフォーマンス、アクセシビリティ、リンク、画像、動作を確認します。
HTMLまたはソースとアセットを書き出し、内容を確認します。プロバイダーを設定したうえで対応するデプロイ連携を使うか、独自のビルド・ホスティング手順にファイル一式を引き渡します。公開後のサイトも検証しましょう。
この書き出し内容を、静的サイトの公開手順に照らして確認してください。相対アセットパス、ナビゲーション、必要なスクリプトを確認します。バックエンドへの依存があれば特定し、見た目だけ機能しているようなフォームに置き換えないでください。
静的サイトを自分で管理するには、出力内容を確認でき、プロジェクトに適した公開方法を選べることが大切です。OpenDesignは、デザインシステムに沿ったガイドとビジュアル確認を、HTMLやソースの書き出し、設定済みのデプロイ連携と組み合わせます。
「わかりやすいホームページ、機能ページ、変更履歴へのリンク、意味の明確なコンテンツを備えた、高速なドキュメント兼製品サイト。編集用CMSは不要です。」
HTMLまたはソースとアセットを書き出し、ファイルパス、依存関係、ホストでの配信要件を確認します。
ウェブサイトとファイルの接続を保ちながら、プレビューで対応するHTMLのテキストやレイアウトを調整します。
生成前に既存のデザインルールを選べば、軽量なサイトにも意図のあるビジュアルアイデンティティを持たせられます。
設定後に対応プロバイダーとの連携を使うか、別のデプロイ手順向けに書き出せます。プロバイダーが対応するターゲットと要件を確認してください。
HTMLとプロジェクトの書き出し、対応する公開連携、ビルド要件、静的サイトの保守について。
静的ウェブサイトは、本番環境のデータベースやアプリケーションサーバーでページを毎回生成するのではなく、ビルド済みのフロントエンドファイルを配信します。レスポンシブに対応でき、ブラウザー上で動作する機能も追加できます。
クロール可能なHTML、高いパフォーマンス、メタデータの直接的な管理に役立ちます。ただし、検索パフォーマンスはコンテンツ、実装、リンク、サイトの評価、継続的な保守にも左右されます。
できます。ただし、送信内容の受け取りには、別途フォームサービス、サーバーレス関数、またはバックエンドが必要です。フロントエンドの画面だけではメッセージを保存できません。
多くの編集者が頻繁に公開する場合、コンテンツに承認手順や権限が必要な場合、またはコードベースの外でデータを管理する場合は、CMSが役立ちます。
デプロイ先プロバイダーを設定すると、Cloudflare PagesとVercelとの対応連携を利用できます。プレビューや本番環境で利用できるターゲットは、連携によって異なります。ほかの対応ホスト向けにウェブサイトのファイルを書き出すこともできます。プロバイダーのアカウント、ドメイン設定、料金は別途必要です。
デザイン性のある静的フロントエンドを生成し、ソースを確認して、選んだスタックからデプロイできます。
OpenDesignをダウンロード無料・オープンソース · ロックインなし · コーディングエージェントに対応
