もっとスムーズに、もっと直感的にデザインできるエディタへ。2023年4月3日にSTUDIOエディタが生まれ変わります。この記事ではその全貌をご紹介します!要素と要素の間に余白を追加する、ギャップが登場%3Ciframe%20src%3D%22https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F812323263%3Fautoplay%3D1%26amp%3Bloop%3D1%26amp%3Bbackground%3D1%22%20width%3D%221920%22%20height%3D%221080%22%20frameborder%3D%220%22%20webkitallowfullscreen%3D%22%22%20mozallowfullscreen%3D%22%22%20allowfullscreen%3D%22%22%20allow%3D%22autoplay%22%3E%3C%2Fiframe%3E%0A%3Cdiv%20style%3D%22position%3Arelative%3B%22%3E%3Ciframe%20src%3D%22https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F812266412%3Fh%3D1ca1ace7c7%26amp%3Bbadge%3D0%26amp%3Bautopause%3D0%26amp%3Bplayer_id%3D0%26amp%3Bapp_id%3D58479%22%20frameborder%3D%220%22%20allow%3D%22autoplay%3B%20fullscreen%3B%20picture-in-picture%22%20allowfullscreen%3D%22%22%20style%3D%22position%3Aabsolute%3Btop%3A0%3Bleft%3A0%3Bwidth%3A100%25%3Bheight%3A100%25%3B%22%20title%3D%22blog-gap.mp4%22%3E%3C%2Fiframe%3E%3C%2Fdiv%3E%3Cscript%20src%3D%22https%3A%2F%2Fplayer.vimeo.com%2Fapi%2Fplayer.js%22%3E%3C%2Fscript%3Eマージンやパディングに加え、複数の要素の間に余白を設定するギャップの提供がスタートします!ギャップを使用すると、要素と要素の間に余白を一括で設定できるため、レイアウトの作成がより迅速になります。この機能を使って、スムーズなデザイン作業をお楽しみいただけます!レイアウト作成をよりスムーズに!「セクション」が誕生STUDIOでの「セクション」の概念が新しくなりました。これまで、通常のボックスにHTML <section>タグを指定したり、コンテンツの最大幅を指定してレイアウトを組むことができましたが、初めてSTUDIOで制作する人にとっては難易度が高い手法でした。新しく登場した「セクション」は、そうしたレイアウトを直感的に実現するための要素です。追加したページにセクションを並べて、その中にコンテンツ(テキスト・画像など)を配置してデザインすることができます。この機能を使えば、初心者でも簡単に美しいレイアウトを作成できるようになります。これからはセクションを活用して、より効率的なページ作成を実現しましょう!よりパワフルになったデザインエディタ今回のアップデートで、STUDIOの機能がさらに洗練され、画面上でのデザイン作成がより直感的かつ効率的に行えるように進化します!カーソルをあわせて数値のチェックが可能に%3Ciframe%20src%3D%22https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F812326191%3Fautoplay%3D1%26amp%3Bloop%3D1%26amp%3Bbackground%3D1%22%20width%3D%221920%22%20height%3D%221080%22%20frameborder%3D%220%22%20webkitallowfullscreen%3D%22%22%20mozallowfullscreen%3D%22%22%20allowfullscreen%3D%22%22%20allow%3D%22autoplay%22%3E%3C%2Fiframe%3E%0A選択しているボックスの縦幅、横幅、マージンなどの数値をデザイン上で確認できるようになります!縦幅や横幅は、ボックスの青枠線にカーソルを、マージンやパディングは、色がついた箇所にカーソルを乗せると数値が表示されます。表示中に、枠線や色がついた箇所をクリックすると数値入力できるようになり、設定可能なパーセントなどのサイズ単位も一緒に入力して指定できます。テキストの細かな調整もデザイン上で%3Ciframe%20src%3D%22https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F812328895%3Fautoplay%3D1%26amp%3Bloop%3D1%26amp%3Bbackground%3D1%22%20width%3D%221920%22%20height%3D%221080%22%20frameborder%3D%220%22%20webkitallowfullscreen%3D%22%22%20mozallowfullscreen%3D%22%22%20allowfullscreen%3D%22%22%20allow%3D%22autoplay%22%3E%3C%2Fiframe%3E%0Aテキストの文字間、行高、文字サイズをデザイン上で編集できようになります!それぞれ、カーソルを当てると数値が表示され、クリックすると数値入力できます。エディタ上部のスタイルバーへ移動することなく、テキストの細かなサイズ調整が可能です。ボックスの配置メニューがひとまとまりに!%3Ciframe%20src%3D%22https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F812331516%3Fautoplay%3D1%26amp%3Bloop%3D1%26amp%3Bbackground%3D1%22%20width%3D%221920%22%20height%3D%221080%22%20frameborder%3D%220%22%20webkitallowfullscreen%3D%22%22%20mozallowfullscreen%3D%22%22%20allowfullscreen%3D%22%22%20allow%3D%22autoplay%22%3E%3C%2Fiframe%3E%0Aこれまで、3箇所に分かれていた配置、整列、方向のメニューが、ボックス上部にまとまりまります。 この変更により、ボックスの配置調整時に複数のメニューを行き来する必要がなくなり、作業の効率性がアップします!Editor 2023では、よりデザインしやすいエディタを目指し、操作体験の向上と新機能を追加しリリースいたします。STUDIOはこれからも皆さまの創る喜びを最大限に広げるべく、進化して参ります。今後もぜひ、ご期待ください!