Web デザインツールの 新しいスタンダード

ワイヤーフレームからプロダクションまで Web デザインのプロセスをどこまでもシームレスに。洗練されたレスポンシブ CSS をドラッグ&ドロップで実現できます。

紫のグラデーション背景に表示されたグリッドのイメージ
グリッドが表示されたダークブルーの背景。グリッドは紫および青色でマージンとカラムがあり、その下には別のセクションを追加するためのアイコンを配置
もっと見る」CTA ボタンと、パーツをドッキングする点線が左と中央上に表示された青いグラデーション背景の画像

完全プロ仕様の デザイン機能

柔軟なグリッドレイアウト、カスタムインタラクション、完全なブレークポイント制御で各パーツの位置と動作を正確に指定し、どの表示領域でも美しく見えるサイトを制作できます。

icon of active add button in top bar
icon showing dragging handles from the side of the canvas
icon showing dragging handles from the side of the canvas
要素設定パネルが表示された画像
上部に横長のメニューがある Web サイトのイメージ。2列構成。左側には人の横顔の画像と、その画像の下半分にボックスを表示。右側にはタイトルと、内側にテキストが配置された円を紫のグラデーション背景上に表示
Image showing website for headphones. On the Right image showing a green background with a person, turned to the left, facing towards the camera.  , a horizontal menu at the top. On the left, there is an image on a black background with text over it at the top. At the bottom, is a white and grey background with headphones on it.
ヘッドフォンの Web サイト画像。右側:青色のグラデーション画像。上部:横長のメニュー。左側上半分:黒背景の画像にテキストを表示。下半分:白とグレー背景の上にヘッドフォンのイメージを表示
緑の背景に、左向きで顔をカメラの方に向ける人が表示された画像
ヘッドフォンの Web サイト画像。右側:青色のグラデーション画像。上部:横長のメニュー。左側上半分:黒背景の画像にテキストを表示。下半分:白とグレー背景の上にヘッドフォンのイメージを表示
ヘッドフォンの Web サイト画像。右側:青色のグラデーション画像。上部:横長のメニュー。左側上半分:黒背景の画像にテキストを表示。下半分:白とグレー背景の上にヘッドフォンのイメージを表示
上部に横長のメニューがある Web サイトのイメージ。2列構成。左側には人の横顔の画像を表示。右側にはタイトルと、内側にテキストが配置された円を紫のグラデーション背景上に表示
ヘッドフォンの Web サイト画像。右側:青色のグラデーション画像。上部:横長のメニュー。左側上半分:黒背景の画像にテキストを表示。下半分:白とグレー背景の上にヘッドフォンのイメージを表示
ヘッドフォンの Web サイト画像。右側:青色のグラデーション画像。上部:横長のメニュー。左側上半分:黒背景の画像にテキストを表示。下半分:白とグレー背景の上にヘッドフォンのイメージを表示
上部に横長のメニューがある Web サイトのイメージ。2列構成。左側には人の横顔の画像を表示。右側にはタイトルと、内側にテキストが配置された円を紫のグラデーション背景上に表示

Editor X はウクライナをサポートします

Ukrainian flag

共同作業を大幅に 効率化

デザインライブラリの共有、リアルタイムのコメント機能、役割・アクセス許可設定など便利な機能がたくさん。デザインの一貫性を維持しながら、チームのより良いコラボレーションを支援します。

正面を向いた人が表示された円形の画像。画像の周りは青い円形の線で囲まれ、円の右上には青いドットが見える
blue circle

マリー・ウィックス

コメント

...

テキスト

image of person in a circle facing the camera. There is a blue circle round the image.

マリー・ウィックス

2時間前

このタイトルのカラーを変更しませんか?

7件の返信

circular im正面を向いている人の円形画像。画像の周りに紫色の円形の線が見えるage of person facing the camera. The circle has a colored circle round it.
purple circle

クルティス・グリーン

正面を向いている人の円形画像。画像の周りはオレンジの円形の線で囲まれ、円の右上にはオレンジのドットが見える
orange circle

ジョン・スミス

コメント

...

画像

image of person in a circle facing the camera. There is an orange circle round the image.

ジョン・スミス

2時間前

ここの画像を別のものに変更しましょう

7件の返信

circular imag正面を向いている人の円形画像。画像の周りは赤色の円形の線で囲まれ、円の右上には赤のドットが見えるe of person facing the camera. The circle has a colored circle round it.
red circle

ステファニー・ミラー

コメント

...

テキスト

image of person in a circle facing the camera. There is a red circle round the image.

ステファニー・ミラー

1時間前

フォントを130pxにしませんか?

7件の返信

正面を向いている人の円形画像。画像の周りは緑色の円形の線で囲まれ、円の右上には緑のドットが見える
green circle

ジャクソン・ウィックス

コメント

...

コンテナ

image of person in a circle facing the camera. There is a green circle round the image.

ジャクソン・ウィックス

2時間前

このコンテナを2つ目のセクションに移しましょう

7件の返信

正面を向いている人の円形画像。画像の周りに青色の円形の線が見える
blue circle

ローラ・アンガス

ローラ・アンガス

コンテンツ編集者

image of person in a circle facing the camera. There is a blue circle around the image.
正面を向いている人の円形画像。画像の周りに青色の円形の線が見える
blue circle

トビー・ヒルマン

コメント

...

テキスト

image of person in a circle facing the camera. There is a blue circle round the image

トビー・ヒルマン

5時間前

上のテキストと同じ青色に変更しましょう

5件の返信

正面を向いている人の円形画像。画像の周りはピンクの円形の線で囲まれ、円の右上にはピンクのドットが見える
pink circle

シャーロット・パイン

コメント

...

テキスト

image of person in a circle facing the camera. There is a pink circle round the image

シャーロット・パイン

4時間前

テキストを画像の上に移動してください

3件の返信

正面を向いている人の円形画像。左には画像を連結する3点ドットが見える

ジョン・ヘンツ

サイトで共同作業する4人のユーザーのアバタ―画像と、「+4」と表示された円形の画像。その隣には「プレビュー」と書かれたテキストと公開ボタン
デザインライブラリ内の現在のテーマである見出し1、フォント、ピクセルサイズが表示された画像
青文字の「デザインライブラリを新規作成」と、その上に+マークが表示された画像
デザインライブラリ内のカラーテーマが表示された画像。カラーパレットは4種類
サイトで共同作業する4人のユーザーのアバタ―画像と、「+4」と表示された円形の画像。その隣には「プレビュー」と書かれたテキストと公開ボタン
サイトで共同作業する4人のユーザーのアバタ―画像と、「+4」と表示された円形の画像。その隣には「プレビュー」と書かれたテキストと公開ボタン
デザインライブラリ内の現在のテーマである見出し1、フォント、ピクセルサイズが表示された画像
image showing website for photography classes with a repeater layout. There are 3 images with text and CTAs beneath each one. The floating action bar is visible for the change layout.

高度な CMS と連携

コンテンツを豊富に使用した動的な Web サイトの構築にも最適です。バックエンドのコレクションであらゆる種類のコンテンツを管理し、同一のレスポンシブ対応レイアウトで繰り返し表示できます。

CMS のデータベースに関連する2枚の画像。5つのカラムに写真クラスについての情報が入力されている
リピーターレイアウトを使用した、写真クラスの Web サイト画像。3枚の画像それぞれの下にテキストと CTA を表示。レイアウトを変更できるフローティングアクションバーも表示されている
CMS のデータベースに関連する2枚の画像。5つのカラムに写真クラスについての情報が入力されている
リピーターレイアウトを使用した、写真クラスの Web サイト画像。3枚の画像それぞれの下にテキストと CTA を表示。レイアウトを変更できるフローティングアクションバーも表示されている
thumbnail of black and white image of landscape on a black background
黒背景の上に、モノクロの風景画像が表示されたサムネイル
キャンバスの横に表示された、ドラッグできるハンドルのイメージ
キャンバスの横に表示された、ドラッグできるハンドルのイメージ
キャンバスの横に表示された、ドラッグできるハンドルのイメージ
キャンバスの横に表示された、ドラッグできるハンドルのイメージ
キャンバスの横に表示された、ドラッグできるハンドルのイメージ
アニメーション効果を追加した、キャンバス上の青色のグラデーション画像。コードのカスタマイズについてのヘッダー、サブヘッダー、その下に白色の CTA ボタンを表示
モバイルブレークポイントを選択できる、キャンバスのトップバーの画像 px
モバイルブレークポイントを選択できる、キャンバスのトップバーの画像
モバイルブレークポイントを選択できる、キャンバスのトップバーの画像
白文字で Custom code. と表示されたアイコン
ハンバーガーメニューボタンのアイコン
青色の横線が表示された青と黒の背景画像。画像の中央には、新しいセクションを追加できることを示す+マークが青い円の内側に表示されている

コードを自由にカスタマイズ

機能拡張やビジネスロジックの追加も自由自在。JavaScript や外部 API を利用して、あらゆるパーツや仕様に対応する複雑な Web アプリケーションを構築できます。

ホームページのコードヘッダーと、その下にコードが表示された画像
ホームページのコードヘッダーと、その下にコードが表示された画像
image showing home page code header, with code beneath it.

コードスニペットをクリップボードにコピーしました

キャンバスの横に表示された、ドラッグできるハンドルのイメージ

マーケティング& ビジネス機能

最新の Eコマースツール、予約システム、ブログなどを追加してサイトの機能をさらに充実させましょう。高度な SEO やマーケティングツールに加えて、サイトに必要なアップデートやセキュリティ体制も万全です。

→ ストア

→ ストア

右向きで顔をカメラの方に向ける人が表示された画像。画像の下部には、アイテムや価格などカートの情報が表示されたボックスを配置