## 制作の流れProduction Flow

#### ヒアリング

お客様のビジネス内容やサイト制作の目的をしっかりとお伺いします。ターゲット層やご希望のデザインイメージ、必要な機能について具体的にヒアリングし、課題解決に向けた方向性を明確化します。ご要望に応じて、参考サイトや色使い、写真素材などのイメージも共有いただきます。

#### デザイン制作

ヒアリング内容をもとに、お客様のブランドに最適なデザイン案を作成します。PCやスマホなど、異なるデバイスでの見え方を意識したレスポンシブデザインを採用。カラーパレットやフォントの選定、配置の細部までこだわり、魅力的で使いやすいデザインを形にします。必要に応じて修正を行い、最終デザインを確定します。

#### コーディング

確定したデザインをHTML、CSS、JavaScriptを使用してコーディングします。SEOを考慮した構造や、読み込み速度を意識した軽量なコードで、高品質なサイトを構築します。さらに、スマホやタブレットでも快適に操作できるよう、レスポンシブ対応も徹底します。お客様が簡単に更新できるCMSの導入もオプションで対応します。

#### 公開＆サポート

完成したサイトをサーバーにアップロードし、正式に公開します。公開後も安心して運営いただけるよう、更新方法のレクチャーや不具合対応を含む運用サポートをご提供します。必要に応じて定期的な改善提案や分析データの共有も行い、サイトの成長をサポートします。

## 「制作の流れ」ブロックについて

    <!--▼▼▼▼▼ここから「制作の流れ」-->
    <section class="bg2 bg-pattern2" id="flow">

    <h2 class="c">制作の流れ<span>Production Flow</span></h2>

    <div class="list-normal1 flow">

    <div class="list up">
    <div class="text">
    <h4><i class="fa-solid fa-ear-listen"></i>ヒアリング</h4>
    <p>お客様のビジネス内容やサイト制作の目的をしっかりとお伺いします。ターゲット層やご希望のデザインイメージ、必要な機能について具体的にヒアリングし、課題解決に向けた方向性を明確化します。ご要望に応じて、参考サイトや色使い、写真素材などのイメージも共有いただきます。</p>
    </div>
    </div>

    <div class="list up">
    <div class="text">
    <h4><i class="fa-solid fa-palette"></i>デザイン制作</h4>
    <p>ヒアリング内容をもとに、お客様のブランドに最適なデザイン案を作成します。PCやスマホなど、異なるデバイスでの見え方を意識したレスポンシブデザインを採用。カラーパレットやフォントの選定、配置の細部までこだわり、魅力的で使いやすいデザインを形にします。必要に応じて修正を行い、最終デザインを確定します。</p>
    </div>
    </div>

    <div class="list up">
    <div class="text">
    <h4><i class="fa-solid fa-code"></i>コーディング</h4>
    <p>確定したデザインをHTML、CSS、JavaScriptを使用してコーディングします。SEOを考慮した構造や、読み込み速度を意識した軽量なコードで、高品質なサイトを構築します。さらに、スマホやタブレットでも快適に操作できるよう、レスポンシブ対応も徹底します。お客様が簡単に更新できるCMSの導入もオプションで対応します。

    </p>
    </div>
    </div>

    <div class="list up">
    <div class="text">
    <h4><i class="fa-solid fa-globe"></i>公開＆サポート</h4>
    <p>完成したサイトをサーバーにアップロードし、正式に公開します。公開後も安心して運営いただけるよう、更新方法のレクチャーや不具合対応を含む運用サポートをご提供します。必要に応じて定期的な改善提案や分析データの共有も行い、サイトの成長をサポートします。</p>
    </div>
    </div>

    </div>
    <!--/.list-normal1-->

    </section>
    <!--▲▲▲▲▲ここまで「制作の流れ」-->

### 各ボックススタイルは

cssフォルダのstyle.cssから「list-normal1」でテキスト検索してみて下さい。詳しい解説もあります。
このlist-normalは、お客様の声で使っているブロックと同じです。詳細もそちらで確認して下さい。

### <section class="bg2 bg-pattern2" id="flow">について

「bg2」と「bg-pattern2」の2つのclassが指定されており、それぞれstyle.cssで検索すると設定内容がわかります。
「bg2」は背景色だけ指定されているスタイル。「bg-pattern2」は背景の格子柄のパターン（bg_pattern2.png）の読み込みです。

idはメニューのリンク先の目印です。
メニュー側は、
<a href="#flow">制作の流れ</a>
になっています。
トップページ以外からトップページに戻るリンクだと、別ページへのリンクになるので
<a href="index.html#flow">制作の流れ</a>
と書きます。

### 見出し横のアイコンは

アイコンはFont Awesomeを使用しています。アイコンを変更したい場合はmanual.htmlをお読み下さい。