この記事では、AIエディターにおけるページ構成について説明しています。
AIエディターもかんたんエディターもページ内にパーツやコンテンツ、コンポーネントを追加してページを作成していきます。 AIエディターでは、コンポーネントやコンテンツを「セクション」「コンテナ」「インナー」という要素の概念があり、これらの要素を使ってパーツを配置していきます。
❶ 要素の種類
Hirameki 7のエディターにおいては、配置できるパーツは「セクション」「コンテナ」「インナー」と呼ばれる要素の上に配置されます。各要素は、親子関係のある要素となっておりセクションが親となり、コンテナ、インナーと重なりパーツが配置されます。
| 番号 | 項目名 | 詳細説明 |
| ❶ | セクション | 最大の要素となります。ページ内では縦に並ぶことができ、背景色、背景画像などを設定することができます。幅は100%で設定され変更することはできません。 |
| ❷ | コンテナ | セクションの次の要素で、横並びに配置できます。背景色、背景画像などを設定することができます。幅は任意に変更することができます。 |
| ❸ | インナー | コンテナの次の要素で、インナーも横並びで配置することができます。コンテナ内をさらに分割して横並びに配置することができます。背景色、背景画像などを設定することができます。幅は任意に変更することができます。 |
| ❹ | パーツ | 各種パーツは、縦に並べることができます。背景色、背景画像などを設定することができ、加えてパーツ毎にそれぞれの内容にあった細かな設定を変更することができます。 |
| ❺ | コンテンツ・コンポーネント | パーツには、「コンテンツ」と「コンポーネント」の2種類が存在します。「コンテンツ」は、見出しやテキスト、画像などの基本的なパーツ、「コンポーネント」はロゴやメニュー、パンくずなど他のページや既に登録されている情報などをページ内に配置するパーツとなります。 |
エディターへのパーツの配置を行うと、インナー、コンテナ、セクションはパーツが配置された位置に合わせて自動的に配置されます。
セクションとセクションの間にパーツを追加すると、そのパーツの周りにインナー、コンテナ、セクションが追加されます。既にセクション、コンテナ、インナーが存在する要素にパーツを追加するとパーツのみが追加されます。
❷ 要素のメニュー
セクションメニュー
コンテナ、インナーメニュー
パーツメニュー
| 番号 | 項目名 | 詳細説明 |
| ❶ | デザイン生成 | AIを使った要素の変更をプロンプトから行えます。要素の背景や要素に追加したいパーツの配置などを自然言語で指定することができます。 |
| ❷ | 上下移動 | 追加されているセクション、パーツを上下に移動させます。 |
| ❸ | 左右移動 | 追加されているコンテナ、インナーを左右に移動します。 |
| ❹ | グループ編集 | 横並びになっているコンテナ、インナーを1つのグループとして一括で編集します。 |
| ❺ | ゴミ箱 | 追加されている要素とその子要素を削除します。セクションを削除した場合は、そのセクションに含まれる全ての要素が削除されます。 |
| ❻ | パーツメニュー | パーツメニューは、パーツの種類によって表示されるメニューが異なります。テキスト系パーツであれば、フォントサイズ、カラー、リンクなどの変更メニューが表示されます。 |
❸ 要素の設定について
セクション、コンテナ、インナーの各要素では、サイズ等様々な設定を行うことができます。
| サイズ・配置 | ||
| セクションでは、セクションの高さとセクション内に配置されるコンテナの並びを、コンテナの並びの始点と方向で設定することができます。 | コンテナでは、コンテナの幅と高さ、コンテナ内に配置されるインナーの並びを、インナーの並びの始点と方向で設定することができます。 | インナーでは、インナーの幅と高さ、インナー内に配置されるパーツの、配置位置を位置を指定して設定することができます。 |
| マージン・パディング・間隔 | ||
| セクション、コンテナ、インナーではそれぞれのマージン(要素と外側要素の距離)、パディング(要素と内側要素との距離)を設定することができます。また、要素間の間隔を設定することができます。 | ||
| 背景色・グラデーション・背景画像設定 | ||
| セクション、コンテナ、インナーではそれぞれの背景色を設定することができます。背景色はからピッカーから色を指定して、選択す他にカラーコードを直接入力して指定することができます。また、透明度を指定することができます。 | セクション、コンテナ、インナーではそれぞれの背景に複数色からグラデーションを作り設定することができます。グラデーションカラーピッカーから色の追加とそれぞれの色の透明度を指定することができます。 | セクション、コンテナ、インナーではそれぞれの背景に画像を指定することができます。画像は、PCに存在する画像ファイルや既にHirameki 7上にアップロードしたファイル、プリセットから選択できます。 |
| 枠線・角・PC/モバイル表示設定 | ||
| セクション、コンテナ、インナーではそれぞれに枠線、角の丸味、影の有無を設定できます。また、PCでのみ表示、スマホのみで表示、両方で表示させるなどの設定を行えます。 | ||
関連ページ