Clickのレスポンシブデザイン（PC/タブレット/モバイル）
スマートフォン・タブレット・PCなど、異なるデバイス環境に対応したアプリを、同一キャンバス上で3画面同時に制作できます。
さらに、Webアプリに特化した機能も搭載されており、幅広い開発ニーズに対応できます。
この記事では、レスポンシブデザインキャンバスの概要と操作手順ついて解説します。
対象プラン
Proプラン以上・レスポンシブ環境(v4)
従来のキャンバス（v3環境）とレスポンシブデザインキャンバス（v4環境）の違い
従来の v3キャンバス は絶対配置によるデザイン方式で、ドラッグ＆ドロップで直感的に操作できますが、デバイスによって表示位置がずれる場合があります。
新しい v4キャンバス（レスポンシブデザインキャンバス） ではオートレイアウトに対応し、どのデバイスでも崩れないレイアウトを実現します。
機能に関して
| 機能・項目 | v3 環境（従来キャンバス） | v4 環境（レスポンシブデザインキャンバス） |
|---|---|---|
| 一画面で作成できるデバイス | １デバイス（スマートフォンまたはPC） | ３デバイス（スマートフォン、タブレット、PC） |
| デザインのオートレイアウト | ×（未対応） | ○（対応） |
| エレメント設置方法 | 絶対配置※ | 相対表示・絶対配置※ |
| テキストスタイル（ブランドアセット） | × | ○ |
| ロゴ（ブランドアセット） | × | ○ |
| SEO設定（メタタグ設定） | 〇 | ○ |
| ヘッダーエレメント | × | ○ |
| サイドバーエレメント | × | ○ |
| フッターエレメント | × | ○ |
| アプリのページ直リンク | × | ○ |
※絶対配置と相対配置について
絶対配置
- ドラッグ＆ドロップで簡単にページ上にエレメントを配置できます。
- ただし、アプリ公開時に画面サイズが異なると、配置した位置がずれることがあります。
相対配置
- オートレイアウト機能を使用してエレメントを配置します。
- 画面サイズが変わっても位置が崩れず、レスポンシブな表示が可能です。
操作手順
「新規プロダクト作成」ボタンをクリックすると画面が表示されます。デフォルトはモバイルのみです。
- 「次へ」ボタンをクリックすると、「ユーザーがアプリにアクセスするデバイスを選択してください」 と表示されます。レスポンシブ対応で作成する場合は、中央の 「PC/タブレット/モバイル」 を選択します。
- 「プライマリーに設定するデバイスを選択してください」 と表示されます。アプリ作成の基準となるデバイスを選択します
- 既存データベースを使用するかどうかを選択し、「次へ」ボタンをクリックします。
💡プライマリーデザインとは、スマートフォン、タブレット、PCそれぞれの画面で、プライマリーデザインで選択した設定が適用されるデザインの基準です。プライマリーデザインを基準に、アプリ全体が作成されます。詳しくはこちらからご覧ください
「＋」アイコン をクリックします。
プロダクト名を入力し、 「次へ」ボタン をクリックします。
キャンバス画面に3つのページが表示されます。プライマリーデザインを設定したデバイスページを中心にデザインやアクション設定を行ってください。
レスポンシブデザインで制作されたアプリはワークスペースの一覧では、左上にアイコンが表示されます。
注意事項
- モバイルのみ・PCのみ（v3環境）とPC/タブレット/モバイル（v４環境）の間での エレメントのコピーペーストは非対応 です。エラーになりますので、行わないでください。
【関連記事】
プライマリーデザイン2025/10/2 9:202025/11/3 15:02デザインへのオートレイアウトの追加2025/10/3 9:152025/11/3 15:03オートレイアウト（デザインの自動調整）2025/10/5 10:352025/11/2 14:44レスポンシブ対応の独自機能2025/10/5 10:402025/11/3 15:04【重要なお知らせ】新しいレスポンシブ対応環境（v4環境）について2025/10/2 15:052025/11/3 15:05不具合等が発生した場合は、以下のフォームよりお問い合わせください。https://docs.google.com/forms/d/e/1FAIpQLSe2uAfz82hPZFo5ov31M1SHggTwNEoDh_1Xgi6nlDSrrxpBqg/viewform?usp=sf_link
最終更新日：2025/11/05