FREE TEMPLATES

無料テンプレート

Chart DesignのHTML/CSS製Webテンプレートを無料で配布しています。自由にダウンロードしてご活用ください。

Claude Design 制作プロンプト

テンプレート ZIP と制作プロンプト .md を一緒に Claude Design へアップロードするだけで、デザインを踏襲したサイトが即座に制作できます。

コーポレートサイト

会社・屋号のコーポレートサイトを Claude Design で制作するための指示書。ページ構成・要件をそのまま記入して送信できます。

.md をダウンロード

ランディングページ

サービス・商品の LP を制作するための指示書。ヒーロー・料金・FAQ・CTA の詳細仕様を含みます。

.md をダウンロード

アプリ / SaaS UI

ダッシュボード・一覧・詳細・設定など複数画面を持つ Web アプリの UI を制作するための指示書。

.md をダウンロード

ブログ / メディアサイト

記事一覧・記事詳細・カテゴリ・検索・About を含むブログ・メディアサイトを制作するための指示書。

.md をダウンロード

画像生成ガイド (Nano Banana)

テンプレートの画像を Nano Banana で生成・差し替える方法。アスペクト比別の6要素プロンプト手法を解説。

.md をダウンロード

Pinegrow でビジュアル編集

HTML/CSS を目視で編集したい方向け。コードは少し分かる・Dreamweaver 的に使いたい方に向いています。

  1. 01
    テンプレートをダウンロードZIP ファイルを取得します。
  2. 02
    Pinegrow で開くPinegrow でプロジェクトとして読み込みます。
  3. 03
    GUI で編集文章・画像・色・レイアウトをビジュアルで変更します。
  4. 04
    HTML/CSS として保存編集した内容をファイルに書き出します。
  5. 05
    GitHub にアップロードファイルをリポジトリに push します。
  6. 06
    Cloudflare Pages で公開無料ホスティングでサイトを公開します。

Webサイト公開の流れ

ダウンロードしたテンプレートを本番公開するまでのステップです。Xserver・Cloudflare・GitHub を使って無料で公開できます。

  1. 01
    Xserver でドメイン取得サイトの住所となるドメインを取得します。
  2. 02
    Cloudflare にドメイン追加ドメインを Cloudflare に登録します。
  3. 03
    Xserver で接続先変更ネームサーバーを Cloudflare に切り替えます。
  4. 04
    GitHub を準備ファイルを置くリポジトリを用意します。
  5. 05
    GitHub にファイル追加ダウンロードした HTML/CSS を push します。
  6. 06
    Cloudflare と GitHub を連携Cloudflare Pages でリポジトリを接続します。
  7. 07
    ブラウザで確認公開 URL にアクセスして表示を確認します。

制作のご依頼

このようなWebサイトの制作をご希望の方は、お気軽にお問い合わせください。

お問い合わせ →