メインコンテンツまでスキップ

要素パネル

要素パネルでは、ページにさまざまなパーツを追加できます。左サイドバーの上部にある要素をクリックすると開きます。要素、レイアウト、コンポーネントの3つのタブがあります。

パネルからキャンバスにドラッグすると、パーツを追加できます。マウスを離した場所に配置されます。

要素​

要素タブには、個別の基本パーツが、開閉できるセクションごとにまとめられています。

基本とレイアウトとナビゲーションのセクションがある要素タブ
セクション要素
基本ボタン、入力欄、見出し、段落、コンテナ、カード
レイアウトとナビゲーションメニュー、サイドバー、グリッド、列、行、タブ、パンくずリスト、区切り線
フォームと入力フォーム、テキストエリア、セレクト、チェックボックス、トグル、ラジオボタン、日付選択、検索バー、ファイルアップロード、範囲スライダー
データ表示テーブル、リスト、バッジ、タイムライン、料金カード
フィードバックとステータスアラート、モーダル、アコーディオン
メディア画像、動画、YouTube、Vimeo、音声、アイコン
詳細設定リッチテキスト、カルーセル
連携Stripe、Google Maps、Calendly、Typeform

レイアウト​

レイアウトタブには、完成済みのセクションが用意されています。各カードにはセクションの構成を示す簡単なワイヤーフレームが表示されるので、形を見て選べます。ページ上にドラッグして追加します。通常は、既存の2つのセクションの間に配置します。

ヒーローグループのワイヤーフレームのサムネイルが並ぶレイアウトタブ
グループレイアウト
ヒーロー中央配置、分割レイアウト、シンプル、左揃え、左右反転、機能紹介付き
機能カードグリッド、アイコングリッド、チェックリスト、画像付き分割、シンプルなグリッド、交互配置のステップ
統計シンプルな4列、青い背景、枠線付きカード、説明付き大サイズ、画像付き分割、ミニマルな3列
行動喚起枠線付きボックス、統計付きバナー、画像上に重ねて表示
料金3列の料金プラン、月額と年額、単一プラン
お客様の声3列グリッド、注目のコメント、2列カード
お問い合わせ連絡先情報付きフォーム、シンプルな中央配置
フッター複数列、シンプルな中央配置

配置したパーツがページになじむ仕組み​

要素やレイアウトは、既定のスタイルのまま配置されるわけではありません。WebTwizzが、追加するパーツをサイトに合わせて調整します。

  • サイトの見た目。 ページで使われている色、フォント、ボタン、カード、余白に合わせます。
  • 選んだ場所。 グリッドの1マスや行内の1列など、配置した場所に合うサイズになります。
  • ページとコンテンツ。 メニューやサイドバーは、ブランド名、ページ、ヘッダー内の既存リンクなど、サイトの情報をもとに作成されます。レイアウトは選んだ配置を保ち、各項目にはサイト内の既存コンテンツが使われることがあります。タブ、アコーディオン、カルーセルにも、可能な場合はサイトのコンテンツが入ります。サイトに住所が記載されていれば、Google Mapsにその住所が表示されます。
  • 隣のカード。 既存のカードやボタンの隣に新しいものを配置すると、同じ作りで、別のコンテンツを持つパーツが作成されます。
  • サイトに合った文章と画像。 配置した直後に、サイトに合う仮の文章が作成され、写真やアイコンが選ばれます。

メニューは、配置する場所に応じて形が変わります。ページ上部ならヘッダー全体、ヘッダー内なら横並びのリンク、フッター内なら縦並びのリンクになります。ページ本体に配置したサイドバーは、コンテンツの横に表示され、各ページへのリンクが入ります。1ページ構成のサイトでは、各セクションへのリンクになります。スマートフォンではメニューボタンに切り替わります。すでにヘッダーがあるサイトに新しいヘッダーを配置すると、その旨が表示されるので、不要な方を削除できます。

元に戻す（⌘Z / Ctrl+Z）と、配置したパーツと自動で入ったコンテンツを一度に取り消せます。

コンポーネント​

コンポーネントは、ナビゲーションバー、料金カード、フッターなど、サイト内で再利用できるパーツです。コンポーネントタブには、プロジェクトのコンポーネントフォルダーにあるすべてのコンポーネントファイルが表示されます。ただし、uiフォルダーにある小さな基本パーツは除きます。

検索欄と1つのコンポーネントが表示されたコンポーネントタブ

各行には、コンポーネント名と、Button.tsxなどのファイル名が表示されます。コンポーネントを検索で一覧を絞り込めます。コンポーネントをキャンバスにドラッグすると使用できます。サイト上に配置したものはすべて同じコンポーネントを参照するため、コンポーネントを変更すると、使われているすべての場所に反映されます。

プロジェクトにまだコンポーネントがない場合、タブにはコンポーネントがありませんと表示されます。

コンポーネントの作成​

キャンバスまたはレイヤーパネルで要素を右クリックし、コンポーネントに変換を選択します。⌘⇧K / Ctrl+Shift+Kでも実行できます。

コンポーネントに変換が表示されたコンテキストメニュー

コンポーネントを作成ダイアログで名前を入力し、作成をクリックします。名前には英数字のみ使用でき、先頭の文字は自動的に大文字になります。要素は専用のコンポーネントファイルに移され、ページでは元の要素の代わりに新しいコンポーネントが使われます。

名前の入力欄があるコンポーネントを作成ダイアログ

すでにコンポーネントになっている要素には、コンポーネントに変換は表示されません。

コンポーネントの名前変更と削除​

コンポーネントタブでコンポーネントを右クリックし、名前を変更または削除を選択します。

名前を変更と削除が表示されたコンポーネントメニュー

サイト内のどこかで使われているコンポーネントは、削除できません。

AIの作業中​

AIがサイトを変更している間は、パネル全体にAI が編集中と表示され、操作できなくなります。これは、あなたの編集とAIの編集が競合しないようにするためです。AIの作業が終わると、すぐに操作できるようになります。