主なデザイン機能

プロ仕様の機能で高度なレスポンシブデザインを実現できます。

Responsive website getting bigger and smaller between viewport sizes

ブレイクポイントを細かく設定

ブレイクポイントを細かく設定し、デザインを自在にコントロールできます。さらにレイアウトの変更、コンテンツの表示/非表示、スタイルの調整などをあらゆるビューポートサイズで設定できます。

Desktop, tablet and mobile views with pixel measurements
Decorative typography
Image of glasses being docked to a container

フルードデザイン

ドッキング、スタック、スケーリングなど、ページ上の要素が環境に応じてどのように最適化されるかを設定できます。異なるフルード測定単位を使用し、すべてのデバイスで思い通りのデザインを実現できます。

Units of measure in pixels next to a docking box. %
A Flexbox layout with multiple containers showing watch images and descriptive text
10 different grid layouts

CSS グリッドレイアウト

あらゆるブレイクポイントで要素の位置と動作をコントロールし、完全レスポンシブのユーザーエクスペリエンスを構築できます。

フレックスボックス

ブレイクポイントに関わらず、画面サイズに合わせてコンテンツを自動的に調整することができます。

5 different flexbox layouts including vertical strips, mosaic, and slideshow
4 columns of a CSS Grid
White earphones on a dark backdrop
Abstract shapes in deep orange with streaks of blue

デザイナーによる、デザイナーのためのツール

イラストや透過動画、ボックス、セクションなど、デザイナー制作による数百種類の素材やコンポーネントにアクセスしてカスタマイズできます。

A pair of white headphones on a grid background
Blue site homepage on a mobile device
Editor X interface with a designed
Video thumbnail of a guy wearing an anorak, headphones and sunglasses.
Multiple circles overlapping each other in tones of blue and yellow
Pink and grey website section with text and image
2 grey bottles - 1 large, 1 small on a grey background
A pale blue speaker image with an editing panel open in Editor X
A music synthesizer with 3 knobs highlighted in blue
Homepage of site on a mobile device showing a woman using a face cream
3 columns of website text with background colors ranging from brown to beige

Editor X

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

Label that shows that this page was created on Editor X