機能の概要
デザインビルダーは、テキスト・画像・FAQ・コンテンツボックスなどの要素をドラッグ＆ドロップで自由に配置・編集できるツールです。直感的な操作でマニュアルやコンテンツページのレイアウトを組み立てることができ、専門的な知識がなくても簡単にページデザインが行えます。
デザインビルダーの項目説明 #
デザインビルダーの各項目 #
- ① テンプレート
作成済みのページテンプレートを呼び出して使用できます。 - ② ブロック
あらかじめ構成されたパーツ（見出し・画像・テキストなどの組み合わせ）を追加できます。 - ③ セクション
ページ全体を構造的に分けるための領域を追加します。 - ④ カラム
横方向の分割レイアウトを構成する際に使います。2カラムや3カラムなどを作成可能です。 - ⑤ オブジェクト
テキスト・画像・ボタンなど、単体の要素をドラッグ＆ドロップで追加できます。 - ⑥ 戻る
フォームビルダーの項目編集画面に戻ります。 - ⑦ 保存名
現在編集中のデザインの名前を確認・編集できます。 - ⑧ デスクトップ
デスクトップ画面サイズでのプレビュー表示に切り替えます。 - ⑨ スマホ
スマートフォン画面サイズでのプレビュー表示に切り替えます。 - ⑩ プレビュー
実際の公開ページに近い状態で確認するためのプレビューモードに切り替えます。 - ⑪ ガイド表示
配置の目安となるガイド線の表示・非表示を切り替えます。 - ⑫ 取消
直前の操作をキャンセルして元に戻します。 - ⑬ やり直し
取り消した操作を再度実行します。 - ⑭ コード表示
HTMLソースコードを直接表示・編集できます。 - ⑮ 設定表示
全体のデザインやページ設定（背景色など）を調整できます。 - ⑯ 保存
現在の編集内容を保存します。
デザインビルダーの各オブジェクト説明 #
各オブジェクトの説明 #
- ① テキスト
任意のテキストを挿入できる基本的な要素です。段落や見出しの作成に使用します。 - ② ボタン
リンク付きのボタンを追加できます。クリックで外部サイトやページ内の移動に対応可能です。 - ③ イメージ
画像を挿入するための要素です。サイズや配置の調整が可能です。 - ④ ビデオ
YouTubeやVimeoなどを埋め込んで表示することができます。 - ⑤ スペース
任意のスペース（空白）を挿入し、要素間の余白を調整するために使います。 - ⑥ リスト
箇条書きや番号付きリストを作成できます。内容を整理して提示するのに便利です。 - ⑦ プログレスバー
進行状況などを視覚的に表現するバーを追加します。 - ⑧ タブ
複数のコンテンツをタブ形式で切り替えられるインターフェースを作成します。 - ⑨ FAQ
よくある質問とその回答を展開型で表示するセクションを追加します。 - ⑩ コンテンツBOX
枠付きのコンテンツボックスを追加し、目立たせたい内容を囲って表示します。
デザインビルダーでのロールオーバーの説明 #
「ロールオーバー」は、ユーザーがボタンや画像などにマウスカーソルを乗せたときに、スタイル（色・影・背景など）を変化させる演出です。
通常時とは異なる見た目を設定することで、インタラクティブ性（反応のあるUI）を高め、クリック可能な要素であることを視覚的に示すことができます。
ロールオーバー状態の設定方法 #
デザインビルダーでは、ボタンなどのオブジェクトに対して「通常」と「ロールオーバー」の2つの状態ごとにスタイルを設定できます。
- 画面右の設定パネルで、状態のプルダウンから「ロールオーバー」を選択します。
- 背景色やボーダー、影、フォント色などを「ロールオーバー時」の見た目として調整します。
- 状態を「通常」に戻すことで、通常表示のデザイン設定に切り替えることができます。
⚠ 注意事項
ロールオーバーを多用すると、ページの描画負荷が高まり、動作が重くなる可能性があります。特に画像・影・グラデーションなどの変化が重なると、PCやモバイル環境でのパフォーマンスに影響が出ることがあります。
極めて強調したい「決め手」の要素に限定して使用することをおすすめします。