TOP｜レシピ集05
設定
ベースデザインを設定する
- メインカラーを青色（#215383）に設定する
- ボタン1「資料ダウンロード一覧」を青色（#215383）に設定する
- ボタン2「お問い合わせ」を緑色（#00a0a5）に設定する
複合パーツ
メインビジュアル用｜キャッチコピー
キャッチコピーとサブコピーを設置できます。
【利用例】
トップページ、下層ページのメインビジュアル など
【ベースデザイン設定】
なし
単体パーツ
ボタン｜テキストのみ
ベースデザイン設定のボタンを設置できます。
【利用例】
アンカーリンク、サイトの回遊用のリンク など
【ベースデザイン設定】
なし
セクションパーツ
事例｜ロゴスクロール
余白なしのセクション内にロゴスクロールを設置できます。
【利用例】
事例 など
【ベースデザイン設定】
再生停止ボタンはベースデザイン設定のサブカラーに依存
セクションパーツ
その他｜下からフェード
スクロールと共にフェードイン表示されるパーツです。
ページの視覚的な魅力を高める効果があります
【利用例】
課題セクションやCTAなど注目させたいセクション
【ベースデザイン設定】
見出しはh2のフォントサイズが当たります
単体パーツ
見出し｜テキストのみ
見出しを設置できます。
【利用例】
見出し、ヘッダー・メインビジュアル上の見出し
【ベースデザイン設定】
フォントファミリー、フォントサイズ、カラー、文字間行間はベースデザイン設定に依存
複合パーツ
テキスト｜アイコン＋テキスト
アイコンがついたテキストを配置できます。
【利用例】
こういう課題はありませんか？サービス導入すると得られるメリット3つ など
【ベースデザイン設定】
アイコン背景色（丸部分）はベースデザイン設定のメインカラーに依存
アイコンカラー（メイン、サブ、アクセント、黒、白）と1部ベースデザイン設定に依存
セクションパーツ
その他｜下からフェード
スクロールと共にフェードイン表示されるパーツです。
ページの視覚的な魅力を高める効果があります
【利用例】
課題セクションやCTAなど注目させたいセクション
【ベースデザイン設定】
見出しはh2のフォントサイズが当たります
単体パーツ
見出し｜テキストのみ
見出しを設置できます。
【利用例】
見出し、ヘッダー・メインビジュアル上の見出し
【ベースデザイン設定】
フォントファミリー、フォントサイズ、カラー、文字間行間はベースデザイン設定に依存
単体パーツ
テキスト｜テキストのみ
テキストを設置できます。
【利用例】
文章 など
【ベースデザイン設定】
なし
セクションパーツ
空白のセクション｜画面幅100%
背景色がベースデザイン設定の背景カラー①の画面幅100%セクションを設置できます。
【利用例】
キャンペーン、訴求コンテンツの拡大表示 など
【ベースデザイン設定】
なし
複合パーツ
ボックスリンク｜エフェクト付き2
hover時、背景画像が拡大し、明度が上がります。
【利用例】
その他事業内容 など
【ベースデザイン設定】
なし
単体パーツ
テキスト｜テキストのみ
テキストを設置できます。
【利用例】
文章 など
【ベースデザイン設定】
なし
セクションパーツ
その他｜下からフェード
スクロールと共にフェードイン表示されるパーツです。
ページの視覚的な魅力を高める効果があります
【利用例】
課題セクションやCTAなど注目させたいセクション
【ベースデザイン設定】
見出しはh2のフォントサイズが当たります
単体パーツ
見出し｜テキストのみ
見出しを設置できます。
【利用例】
見出し、ヘッダー・メインビジュアル上の見出し
【ベースデザイン設定】
フォントファミリー、フォントサイズ、カラー、文字間行間はベースデザイン設定に依存
単体パーツ
テキスト｜テキストのみ
テキストを設置できます。
【利用例】
文章 など
【ベースデザイン設定】
なし
セクションパーツ
その他｜左からフェード
スクロールと共にフェードイン表示されるパーツです。
ページの視覚的な魅力を高める効果があります
【利用例】
課題セクションやCTAなど注目させたいセクション
【ベースデザイン設定】
見出しはh2のフォントサイズが当たる
複合パーツ
画像・見出し｜デザイン3 画像右
左側に数字、見出し、テキスト、右側に画像を設置できます。
【利用例】
3つのポイントの詳細 など
【ベースデザイン設定】
カラム間の余白はベースデザイン設定の余白設定に依存
セクションパーツ
その他｜右からフェード
スクロールと共にフェードイン表示されるパーツです。
ページの視覚的な魅力を高める効果があります
【利用例】
課題セクションやCTAなど注目させたいセクション
【ベースデザイン設定】
見出しはh2のフォントサイズが当たる
複合パーツ
画像・見出し｜デザイン3 画像左
左側に画像、右側に数字、見出し、テキストを設置できます。
【利用例】
3つのポイントの詳細 など
【ベースデザイン設定】
col間の余白はベースデザイン設定の余白設定に依存
セクションパーツ
その他｜左からフェード
スクロールと共にフェードイン表示されるパーツです。
ページの視覚的な魅力を高める効果があります
【利用例】
課題セクションやCTAなど注目させたいセクション
【ベースデザイン設定】
見出しはh2のフォントサイズが当たる
複合パーツ
画像・見出し｜デザイン3 画像右
左側に数字、見出し、テキスト、右側に画像を設置できます。
【利用例】
3つのポイントの詳細 など
【ベースデザイン設定】
カラム間の余白はベースデザイン設定の余白設定に依存
セクションパーツ
その他｜下からフェード
スクロールと共にフェードイン表示されるパーツです。
ページの視覚的な魅力を高める効果があります
【利用例】
課題セクションやCTAなど注目させたいセクション
【ベースデザイン設定】
見出しはh2のフォントサイズが当たります
単体パーツ
見出し｜テキストのみ
見出しを設置できます。
【利用例】
見出し、ヘッダー・メインビジュアル上の見出し
【ベースデザイン設定】
フォントファミリー、フォントサイズ、カラー、文字間行間はベースデザイン設定に依存
単体パーツ
リスト｜記事リスト横スクロール
横スクロールします。
【利用例】
導入事例セクション など
【ベースデザイン設定】
なし
単体パーツ
ボタン（その他）｜矢印動くボタン
ホバーで矢印が動きます。
【利用例】
下層遷移ボタンでデザイン性のあるボタンを配置したいとき など
【ベースデザイン設定】
テキスト、丸背景はベースデザイン設定のメインカラーに依存
セクションパーツ
スライドギャラリー｜ズームスライドショーVer2
ズームインしながら複数の画像が切り替わるスライドショーです。
訴求したい画像をセクション全体を使って大々的にアピールすることができます
スライドショーの画像に制限はありません。画像の横幅は固定になります。
【利用例】
メインビジュアル など
【ベースデザイン設定】
セクションに含まれるボタン1の資料ダウンロードは他のボタンに入れ替えが可能
セクションパーツ
その他｜下からフェード
スクロールと共にフェードイン表示されるパーツです。
ページの視覚的な魅力を高める効果があります
【利用例】
課題セクションやCTAなど注目させたいセクション
【ベースデザイン設定】
見出しはh2のフォントサイズが当たります
複合パーツ
画像・テキスト｜画像 右
左側にテキスト、右側に画像を設置できます。
【利用例】
事例インタビュー など
【ベースデザイン設定】
なし
単体パーツ
見出し｜テキストのみ
見出しを設置できます。
【利用例】
見出し、ヘッダー・メインビジュアル上の見出し
【ベースデザイン設定】
フォントファミリー、フォントサイズ、カラー、文字間行間はベースデザイン設定に依存
セクションパーツ
その他｜下からフェード
スクロールと共にフェードイン表示されるパーツです。
ページの視覚的な魅力を高める効果があります
【利用例】
課題セクションやCTAなど注目させたいセクション
【ベースデザイン設定】
見出しはh2のフォントサイズが当たります
単体パーツ
見出し｜テキストのみ
見出しを設置できます。
【利用例】
見出し、ヘッダー・メインビジュアル上の見出し
【ベースデザイン設定】
フォントファミリー、フォントサイズ、カラー、文字間行間はベースデザイン設定に依存
複合パーツ
その他｜フローテーブル
フローチャートを設置できます。
【利用例】
サービス導入方法や商談フロー など
【ベースデザイン設定】
丸背景色はベースデザイン設定のメインカラーに依存
丸と丸を繋ぐ線のカラーはベースデザイン設定のメインカラーに依存
セクションパーツ
その他｜アコーディオン
表示されている行（Q）内をクリックすると、コンテンツ行（A）が開き表示されます。
【利用例】
よくある質問のQ&Aページ など
【ベースデザイン設定】
- Qはメインカラーが当たる
- Aはアクセントカラーが当たる
- 矢印はメインカラーが当たる
- セクション全体の背景色は背景色カラー１が当たる
セクションパーツ
空白のセクション｜画面幅100%
背景色がベースデザイン設定の背景カラー①の画面幅100%セクションを設置できます。
【利用例】
キャンペーン、訴求コンテンツの拡大表示 など
【ベースデザイン設定】
なし
単体パーツ
見出し｜テキストのみ
見出しを設置できます。
【利用例】
見出し、ヘッダー・メインビジュアル上の見出し
【ベースデザイン設定】
フォントファミリー、フォントサイズ、カラー、文字間行間はベースデザイン設定に依存
単体パーツ
テキスト｜テキストのみ
テキストを設置できます。
【利用例】
文章 など
【ベースデザイン設定】
なし
単体パーツ
画像｜画像のみ
画像を設置できます。
【利用例】
製品画像・サービス説明画像・キャンペーン紹介画像 など
【ベースデザイン設定】
なし
単体パーツ
埋め込み｜共通パーツ
複数ページで使用した際リンク先を一括で変更できないので共通パーツがおすすめです
管理画面の「共通パーツ一覧」で作成し設置できます。
注意点
共通エリア「フッター」で作成されているエリアです。 作成する場合はこちらをご参照ください。
※一部CSSで表現している箇所がございます。