レスポンシブ対応の独自機能
レスポンシブ対応では、よりWebアプリに対応する機能を実装しています。
対象環境
Proプラン以上・レスポンシブ環境(v4)
エレメント
ヘッダー
スマートフォンではハンバーガーメニューに、タブレットおよびPCではドロップダウンやサイドメニューに対応しました。
.gif?table=block&id=29bb3ff2-9033-805c-951a-deb1a7127c1f&cache=v2&width=1200)
ロゴ
キャンバス左側のブランドアセットからロゴを設定してください。
エレメント右側パネルの要素設定内のLogo項目内の画像ソースから「ロゴ（ブランドアセット）」からロゴ１を選択してください。
メニュー設定
メニューエレメントの設置の際は、エレメント右側パネルのレイアウトタブ内の位置を「固定」としてください。
デバイスごとの表示設定は、エレメント右側パネルの目アイコンからオンオフを設定してください。要素設定項目から、Logoや表示するメニューの設定を行う事ができます。
「Add Item」でメニュー（ページ）の追加「Add Group」でメニューグループ（ページのグループ）を追加することができ、削除も可能です。
デザイン
メニュー項目から、アイコンの設定やメニュー名を設定できます。
アクション
メニューエレメント右側パネル内の「アクション」から、メニュー選択時の画面の遷移等のアクションを設定いただけます。
サイドバー
主に、タブレット、PCでご利用いただけます。
メニューエレメントの設置の際は、エレメント右側パネルのレイアウトタブ内の位置を「固定」としてください。
メニューの設定方法は、ヘッダーと同様に行ってください。
フッター
メニューエレメントの設置の際は、エレメント右側パネルのレイアウトタブ内の位置を「固定」としてください。メニューの設定は、上記のヘッダーえを参考におこなってください。
テキスト
テキストスタイルを使うと、文字のデザインをまとめて管理・変更できます。UI上から直感的に「見出し」「中見出し」「小見出し」のスタイルを適用可能です。キャンバス内のブランドアセットから設定してください。
設定できる項目
- フォント
- Noto Sans JP
- Noto Serif
- Roboto
- 文字装飾
- 太字（Bold）
- 斜体（Italic）
- 下線（Underline）
- 打ち消し線（Strikethrough）
- デバイスごとのスタイル
- フォントウェイト（Boldなど）
- 文字サイズ（例：32px）
- 行の高さ（例：51）
4.文字の配置
- 左揃え
- 中央揃え
- 右揃え
テキストエレメントを配置し、「ブランドアセットを使用」から選択してください。
フォント
- 使用するフォントを選択可能。例：
- Noto Sans JP
- Noto Serif
メタディスクリプション
メタディスクリプションを設定できる機能が新たに追加されました。
これにより、アプリに表示される説明文を自由に編集できるようになり、検索エンジンやSNSでの表示内容をより適切にコントロールできるようになりました。
アプリ作成画面の設定内の基本設定「アプリ紹介」にご入力ください。
ファビコン
ファビコンを設定できる機能が新たに追加されました。
これにより、ブラウザのタブやブックマークに表示されるアイコンを自由に設定できるようになり、アプリやページのブランド認識を高められます。
アプリ作成画面の設定内の基本設定「アイコン」にアップロードしてください。
ページの直リンク
v３環境と異なり、v４環境下で作成したアプリは、ページ生成と同時に公開時に固有のURLが生成される機能が実装されました。
これにより、各ページは自動的にユニークなURLを持つようになり、特定のページへ直接アクセスできる直リンクを簡単に取得・共有できるようになりました。
（例）
同じアプリでも、ページごとにURLが異なる
【関連記事】
不具合等が発生した場合は、以下のフォームよりお問い合わせください。https://docs.google.com/forms/d/e/1FAIpQLSe2uAfz82hPZFo5ov31M1SHggTwNEoDh_1Xgi6nlDSrrxpBqg/viewform?usp=sf_link
最終更新日：2025/11/05