カスタマイズ

カスタマイズの方法

Hirameki Webでは、3つの方法でサイトをカスタマイズできます。

AIチャット

自然言語で修正指示

ビジュアルエディタ

GUIで直感的に編集

コードエディタ

HTMLやCSSを直接編集

AIチャットでのカスタマイズ

最も簡単な方法は、AIに自然言語で指示を出すことです。

色の変更

サイト全体の配色を青系から緑系に変更してください

レイアウトの変更

トップページの「サービス」と「会社概要」セクションの
順番を入れ替えてください

フォントの変更

例

見出しのフォントをもっと太くしてください。
本文のフォントサイズを16pxに変更してください。

画像の変更

例

トップページのヒーロー画像を
ビジネスチームの写真に変更してください

ビジュアルエディタ

要素の選択

エディタモードに切り替え

画面右上の「編集」ボタンをクリック

要素をクリック

編集したい要素（テキスト、画像、ボタンなど）をクリック

プロパティパネルで編集

右側のパネルでスタイルを変更

編集可能なプロパティ

テキスト
背景
レイアウト
ボーダー

フォントファミリー
フォントサイズ
太さ
色
行間
文字間隔
配置（左/中央/右）

コードエディタ

エディタを開く

画面左側のファイルツリーから編集したいファイルをクリックします。

サポートされるファイルタイプ

HTML

.html .htm .php

CSS

.css .scss .sass

JavaScript

.js .ts .jsx .tsx

コード例

<!-- カスタムヒーローセクション -->
<section class="custom-hero">
  <div class="container">
    <h1 class="hero-title">Welcome to Our Site</h1>
    <p class="hero-subtitle">Building the future together</p>
    <a href="#services" class="cta-button">Get Started</a>
  </div>
</section>

レスポンシブデザイン

ブレークポイント

Hirameki Webのデフォルトブレークポイント:

Mobile
Tablet
Desktop

< 640px - スマートフォン

レスポンシブCSS

/* モバイルファースト */
.container {
  padding: 20px;
}

/* タブレット */
@media (min-width: 640px) {
  .container {
    padding: 40px;
  }
}

/* デスクトップ */
@media (min-width: 1024px) {
  .container {
    padding: 60px;
    max-width: 1200px;
    margin: 0 auto;
  }
}

カラーパレット管理

カスタムカラーの定義

:root {
  --primary-color: #3b82f6;
  --secondary-color: #8b5cf6;
  --accent-color: #f59e0b;
  --text-color: #1f2937;
  --bg-color: #ffffff;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
}

/* ダークモード */
@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #f3f4f6;
    --bg-color: #1f2937;
  }
}

色の適用

.button {
  background-color: var(--primary-color);
  color: white;
}

.button:hover {
  background-color: var(--secondary-color);
}

タイポグラフィ

フォントの追加

Google Fontsを使用する場合:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

body {
  font-family: 'Inter', sans-serif;
}

タイポグラフィスケール

:root {
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */
  --text-4xl: 2.25rem;   /* 36px */
  --text-5xl: 3rem;      /* 48px */
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
p { font-size: var(--text-base); }

アニメーション

CSS アニメーション

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.6s ease-out;
}

トランジション

.button {
  transition: all 0.3s ease;
}

.button:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

ベストプラクティス

一貫性のある配色

3〜5色程度のカラーパレットを決めて、サイト全体で統一しましょう。

読みやすいタイポグラフィ

本文のフォントサイズは最低16px、行間は1.5〜1.8倍を推奨します。

モバイルファースト

スマートフォンでの表示を最優先に考え、そこから大画面に対応させましょう。

パフォーマンス

不要なCSSやJavaScriptは削除し、画像は最適化しましょう。

アクセシビリティ

色のコントラスト、キーボード操作、スクリーンリーダー対応を意識しましょう。

よくある質問

変更を元に戻せますか？

はい、各編集にはUndo/Redo機能があります。Ctrl+Z (Cmd+Z) で元に戻せます。

カスタムCSSが反映されません

ブラウザのキャッシュをクリアしてください。それでも反映されない場合、CSSの記述にエラーがないか確認してください。

レスポンシブ対応を確認するには？

プレビュー画面の右上にあるデバイス切り替えボタンで確認できます。

外部ライブラリを使用できますか？

はい、CDN経由で読み込むことができます。

はじめに

ガイド

詳細設定

運用