デザイン&レイアウト

デザイン機能

あらゆる画面サイズで最高のユーザー エクスペリエンスを実現。

デザイン&レイアウト

インタラクティブ&エフェクト

デザインアセット&メディア

ブレイクポイント管理

デザインに複数のブレイクポイントを追加し、あらゆる画面サイズに対応できます。

resize handle
resize handle
resize handle
デザイン雑誌「Daylong」のデスクトップのブレークポイントで表示されたウェブサイトの画像。2つの正方形の画像が横に並び、それぞれの上に白い文字が表示されています。2つの正方形の画像が横に並んでおり、それぞれの上に白い文字が表示されています。左側の画像はカラフルなデジタルグラデーション、右側の画像はピンクのドレスを着た女性の画像です。
デザイン雑誌「Daylong」のモバイルのブレークポイントで表示されたウェブサイトの画像。ピンクのドレスを着た女性の四角い画像が表示され、上に白い文字が配置されています。
白い背景に青い文字で「ブレークポイントを追加」と書かれた画像。
デザイン雑誌「Daylong」のデスクトップのブレークポイントで表示されたウェブサイトの画像。3つの正方形の画像が横に並び、それぞれの上に白い文字が表示されています。左の画像はカラフルなデジタルグラデーション、中央の画像はピンクのドレスを着た女性、右の画像は多色のピクセルを使ったデザインです。
デザイン雑誌「Daylong」のデスクトップのブレークポイントで表示されたウェブサイトの画像。2つの正方形の画像が横に並び、それぞれの上に白い文字が表示されています。2つの正方形の画像が横に並んでおり、それぞれの上に白い文字が表示されています。左側の画像はカラフルなデジタルグラデーション、右側の画像はピンクのドレスを着た女性の画像です。
デザイン雑誌「Daylong」のモバイルのブレークポイントで表示されたウェブサイトの画像。ピンクのドレスを着た女性の四角い画像が表示され、上に白い文字が配置されています。
Image of desktop, tablet, mobile and ellipses icons aligned horizontally with mobile highlighted.
resize handle
resize handle
resize handle
赤いグラデーションを背景に、ヘッドフォンを頭にかけた女性の画像。測定単位のメニューが表示され、最低値/最高値が選択されています。
赤いグラデーションを背景に、ヘッドフォンを頭にかけた女性の画像。測定単位のメニューが表示され、最低値/最高値が選択されています。
赤いグラデーションを背景に、ヘッドフォンを頭にかけた女性の画像。測定単位のメニューが表示され、最低値/最高値が選択されています。
赤いグラデーションを背景に、ヘッドフォンを頭にかけた女性の画像。測定単位のメニューが表示され、最低値/最高値が選択されています。

CSS グリッド

複数の重なり合う二次元レイアウトを作成し、ブレイクポイントごとに要素の位置を正確にコントロールすることができます。

青いグラデーションの背景に重なる2つの画像。手前は黄色の背景に3枚の写真を表示したポートフォリオサイトの画像で、後ろは、コンテンツマネジメントシステム「Editor X」の画像です。
青いグラデーションの背景に重なる2つの画像。手前は黄色の背景に3枚の写真を表示したポートフォリオサイトの画像で、後ろは、コンテンツマネジメントシステム「Editor X」の画像です。

リピーター

統一されたスタイルで複数のボックスにそれぞれ独自のコンテンツを表示するフレックス・レイアウトツールです。リピーターを統合型の CMS に接続することで、チームのプロフィールや機能一覧、プロジェクトギャラリーなどをシームレスにデザインできます。

レイアウター

どのビューポートでもシームレスに調整されるレスポンシブボックスを使って、モジュール式のフレックスレイアウトをデザインできます。カスタマイズ可能な白紙ワイヤーフレーム、またはデザイン済みのレイアウトから選択できます。

メタリックなジャケットを着て、バックパックを背負った男性の画像。左側には Editor X のインスペクタパネルの「ドッキングとマージン」セクションが表示されています。
メタリックなジャケットを着て、バックパックを背負った男性の画像。左側には Editor X のインスペクタパネルの「ドッキングとマージン」セクションが表示されています。

ドッキング

スマートドッキングは、要素を親コンテナの最も近いエッジに自動的にアタッチします。また、手動でドッキングを調整して、すべてのビューポートで正確なレイアウトを作成することもできます。

ブルーのテクスチャーの背景の上にテキストっが表示され、左側にレイヤーパネルが開いている、デザインされたコンテナのイメージ。

レイヤー

レイヤーパネルを使い、ページ上のすべての要素の順序を表示・管理したり、親となる要素を確認することができます。また、レイヤーの名前を変更して整理整頓することもできます。

テキストスケール

文字サイズの最小値と最大値を設定することで、画面サイズに合わせて文字のサイズが最適化されるようにします。

その他のデザイン&レイアウト機能

キャンバスの左上の部分を拡大し、ヘッダーを緑で強調した画像。

マスター

ヘッダー、セクション、フッターを保存し、複数のページで再利用できます。制作フローを効率化するため、マスターの編集内容はサイト内で使用されるすべてのマスターに適用されます。

グレーの背景に3つのレイアウトベクターとボタンの形が表示された画像。

デザインアセット

セクション全体をデザインしてデザインアセットとして保存し、複数のサイトで再利用することができます。デザインアセットは、サイトレベルでローカルに保存することも、共有可能なデザインライブラリに保存してアカウント内のすべてのサイトからアクセスすることもできます。

白い背景の上に表示された2つの見出しタイトルと、それぞれの隣に鉛筆のアイコンがある画像。

スタイルマネージャー

サイトで使用されているタイポグラフィやカラーパレットを表示し、細かくカスタマイズすることができます。

グレーの背景に空白の長方形とボタン型のアイコンが横に並んでいる画像。

カスタムメニュー

サイトの各ページに独自のメニューを追加し、管理することができます。メニューのデザイン、表示するアイテム、リンクするページなどを選択し、ブレイクポイントごとに各メニューのアイテムをカスタマイズできます。

青いメジャーがビューポートの高さが100を示しているグレーの正方形の画像。

ビューポートの高さ

任意のセクションでビューポートの高さを100%に設定できます。これにより、訪問者のデバイスにかかわらず、常に画面の高さの上限まで表示されるようになります。

灰色の背景の上にあるコンテナの中にある、固定とフルードを選択するトグルの画像。

固定、フルード、スケール

画面のリサイズに応じて要素がどのように調節されるかを管理できます。固定サイズまたはフルードサイズを選択したり、画像やテキストをビューポートに比例して拡大・縮小するように設定できます。

キャンバスの右上部分を拡大し、グレーの円筒形の上に白い文字が置かれた画像。

リサイズハンドル

編集画面の両端にあるリサイズハンドルを使い、任意のビューポート幅でサイトを表示・編集することができます。

視覚的なレイアウトデザインが施されたコンテナの画像。

スタック

すべてのビューポートで垂直方向の余白を確保し、小さいサイズの画面で要素が重複しないようにできます。

白い四角を薄緑色の背景で囲んだ、選択されたコンテナの画像。

コンテナの余白

任意のコンテナの周囲に余白を設けることで、常に一定の距離を保つことができます。

デスクトップ、タブレット、モバイルの青いアイコンを縦に並べ、左に下向きの矢印を配置した画像。

カスケードルール

特定のブレイクポイントで行ったスタイルの変更はより小さなブレークポイントにも反映されますが、その逆はありません。

デスクトップ、タブレット、モバイルのアイコンが横に並び、デスクトップのアイコンが選択されている画像。

ブレイクポイントへのコピー

要素のレイアウトやスタイルのプロパティを、任意のブレイクポイントから別のブレイクポイントにコピーできます。例えば、モバイル用の要素のスタイルをタブレット用の要素に数クリックで適用することができます。

グレーの背景に、視覚的なレイアウトデザインが描かれた2つの正方形のボックスが表示された画像。

フォーマットのコピー

要素のスタイルを別の要素にコピーすることで、作業効率を向上することができます。特定のブレイクポイントでのスタイルをコピーするか、すべてのブレイクポイントでのスタイルをコピーするかを選択できます。

白い背景の上に並んだページとアンカーのアイコンの画像。

アンカー

非表示のポジションマーカーを追加し、サイト訪問者のナビゲーションをサポートできます。任意の要素をアンカーに指定して、サイト内のボタンやメニューアイテムにリンクすることができます。

白い背景にグレーの横線と青文字が表示された画像。

フォントのアップロード

フォントファイルをアップロードし、すべてのサイトで使用できます。

分数、パーセンテージ、ピクセル単位のアイコンを横に並べた画像。

測定単位

要素のサイズは、ピクセル、パーセンテージ、またはビューポートの高さや幅に応じて設定できます。また、グリッドの列や行のサイズを fr 、calc などを使って変更することもできます。

すべて見る →

これらの機能は Editor X のほんの一部です。

Editor X でサイトを構築、管理、公開するためのより高度な機能をご紹介します。

コラボレーション

役割&権限のカスタマイズ、チームアカウントの作成、共有可能なデザインライブラリなどからワークフローを合理化し、チームとの連携をサポートします。

Web 開発

開発者向けのオープンプラットフォーム「Velo」で、JavaScript や API を使った高度な Web アプリケーションを構築できます。

ノーコードの CMS

データコレクションを使用することで、サイトのデザインを編集することなく動的コンテンツを管理できます。

マーケティング&SEO

高度なマーケティング機能を活用して、オンラインキャンペーンの測定、トラフィックの促進、訪問者の情報収集を行うことができます。

ビジネスソリューション

ネットショップからサブスクリプション、予約システムまで、多彩なツールであらゆるビジネスニーズに対応します。

resize handle
resize handle

Editor X

Web デザインを、どこまでも自由に