DesignForge とは何か
DesignForge は、ウェブサイトやランディングページの制作で欠かせない 「ボタン」と「ロゴ」を視覚的に作成できる、ブラウザだけで動くデザインツールです。 プログラミングの知識がなくても、スライダーやカラーピッカーを操作するだけで プロ品質のデザインを数秒で作れます。完成したデザインは HTML・CSS・SVG・PNG の形式でそのまま書き出せるので、 コーディング作業に直接貼り付けて使用できます。
このツールはすべて 単一の HTML ファイル として動作します。 サーバー不要・インストール不要で、ファイルをダブルクリックするだけで ブラウザ上で即時に起動します。
リアルタイムプレビュー
設定を変えるたびに、プレビューが即座に更新されます。完成形を確認しながらデザインを進められます。
コードをそのままコピー
「HTML コピー」ボタン一押しで、そのままウェブページに貼り付けられるコードを取得できます。
ファイル書き出し
ロゴは SVG（拡大しても劣化しない）と PNG（画像ファイル）の 2 形式でダウンロードできます。
主な機能
2 つのタブにまたがり、合計 20 以上の設定項目 を備えています。 それぞれのタブの機能を以下にまとめます。
ボタンテキスト入力
ボタンに表示する文字を自由に入力できます。日本語・英語どちらにも対応しています。
4種類のスタイル選択
塗りつぶし（Filled）・アウトライン（Outline）・ゴースト（Ghost）・ソフト（Soft） の 4 スタイルをワンクリックで切り替えられます。
アイコン追加
矢印（→）・スター（★）・メール（✉）・ハート（♥）の装飾アイコンをボタン左側に付加できます。
カラーカスタマイズ
カラーピッカーまたは16進数コードで、背景色と文字色を細かく調整できます。8色のプリセットスウォッチも使用可能です。
サイズ・形状の調整
フォントサイズ（12〜28px）・角丸（0〜40px）・縦横パディング・フォントウェイト（Regular / Medium / Bold）をスライダーで直感的に調整できます。
状態プレビュー
通常・ホバー（マウスオーバー）・無効化の 3 状態を同時に並べてプレビューできます。背景はダーク・ライト・グリッドから選択可能です。
コード出力
生成された HTML コードと CSS コードをワンクリックでクリップボードにコピーできます。
ブランド名・サブテキスト
会社名やブランド名と、その下に表示するキャッチコピー・サービス名を別々に入力できます。
3種類のレイアウト
アイコン左（横並び）・アイコン上（縦積み）・テキストのみ のレイアウトを選択できます。
マーク形状 × 4
六角形・円・正方形・ダイヤ の 4 形状からシンボルマークの輪郭を選択できます。
マーク内デザイン × 4
イニシャル文字・スパーク（閃光）・ウェーブ（波線）・ダイヤ（菱形） から内部デザインを選択できます。
グラデーションカラー
始点色と終点色の 2 色でグラデーションを設定。8色のプリセット＋カスタムカラーピッカーで自由な配色が可能です。
フォントスタイル × 4
Syne（モダン）・Serif（クラシック）・Mono（技術系）・Elegant（高級感） の 4 フォントスタイルを選択できます。
カラーバリエーション
6 種類のプリセット配色でロゴのバリエーションを一覧表示。クリックするだけで即座に配色を適用できます。
SVG / PNG 書き出し
SVG 形式（ベクター・拡大劣化なし）と PNG 形式（3倍解像度・高精細）でダウンロードできます。
使い方（ステップガイド）
初めての方でも 5 ステップ でデザインを完成させられます。
HTMLファイルを開く
配布された design-tool.html ファイルをダブルクリックします。
Chrome・Firefox・Edge などのブラウザで自動的に開きます。
インターネット接続もインストールも不要です。
タブを選ぶ
画面上部の「ボタン作成」または「ロゴ作成」タブをクリックして、 作成したいコンテンツを選びます。それぞれ独立した設定パネルが表示されます。
左サイドバーで設定を調整する
画面左の設定パネルで、テキスト・色・形・サイズなどを自由に変更します。 変更はリアルタイムで右プレビューに反映されるため、 完成形を見ながら調整を進められます。
✓ スウォッチカラーをクリックすると素早く配色できますプレビューで確認する
右のプレビューエリアで仕上がりを確認します。ボタン作成では Dark / Light / Grid の背景で見た目を検証できます。 ロゴ作成では6色のバリエーション一覧から気に入ったカラーを選ぶことも可能です。
書き出し・コピーする
サイドバー下部のボタンからコードのコピーやファイルのダウンロードを行います。 コピーしたコードはウェブページの HTML ファイルにそのまま貼り付けて使えます。
✓ 「SVGコピー」はSVGタグごとそのまま使えます書き出し形式
用途に合わせて 4 種類の形式で出力できます。それぞれの特徴と使いどころを確認してください。
HTML コード
ボタンを HTML ファイルに直接貼り付けられるタグ形式。style 属性付きで外部 CSS 不要。
CSS コード
スタイルシートとして管理したい場合に使用。クラス名 .btn で出力されます。
SVG ファイル
ベクター形式のロゴ。どんな解像度でも劣化せず、Web・印刷どちらにも対応。
PNG ファイル
高精細（3倍解像度）の画像ファイル。SNSのプロフィールや OGP 画像などに最適。
技術仕様
| 項目 | 内容 |
|---|---|
| 使用技術 | HTML5 CSS3 JavaScript (ES6+) |
| 外部依存 | Google Fonts（フォント読み込みのみ）。それ以外は完全にローカルで動作します。 |
| 対応ブラウザ | Google Chrome・Mozilla Firefox・Microsoft Edge・Safari（最新版推奨） |
| インストール | 不要。HTML ファイルをブラウザで開くだけで動作します。 |
| ロゴ PNG 解像度 | SVG の元サイズに対して 3 倍で書き出し（Retina 対応） |
| ボタンスタイル数 | 4種類（塗りつぶし・アウトライン・ゴースト・ソフト） |
| ロゴ形状数 | 形状 4 種 × マーク 4 種 × レイアウト 3 種 = 最大 48 通りの組み合わせ |
| フォント | DM Sans DM Serif Display Syne Monospace |
注意事項
Google Fonts について：フォントの読み込みにインターネット接続が必要です。 オフライン環境では system-ui などシステムフォントにフォールバックされますが、 デザインの見た目が若干変わる場合があります。
コードのコピーには HTTPS が必要な場合があります
「HTML コピー」「CSS コピー」などのクリップボード機能は、ブラウザのセキュリティ制限により HTTPS 環境または localhost でのみ動作します。ローカルファイル（file://）での動作はブラウザにより異なります。
生成したデザインは自由に使用できます
このツールで作成したボタンやロゴのコードは、個人・商用を問わず自由にウェブサイトに使用できます。