🌱

Studio新エディター [Editor 5.0 Beta] なかなか良い!

に公開

🔍新旧エディターの比較

なんといっても一番のポイントは、キャンバスが広くなったこと。

旧UIの左・上・右のUIパネル郡、おそらく、初期UIから追加追加の繰り返しでなんとか機能を実現してきたものと思われ、個人的には良くできてるなあと使い始めたころから感動していました。(選択するオブジェクトによってUIや表示項目が変わる点など)
しかし慣れもあるのでしょう!情報設計の観点では整理がよろしくないということはあって、何故これがここに?!という感じで知らないとたどり着けない設定があったことは否めない。

新エディターでは、徹底した情報整理によって左右のパネルに情報や設定項目がまとまっています。

エディターの切り替えについて

  • 切替はユーザー毎
  • 右上の自分のアイコンから。設定タブの中でトグルで切替

エディター全体のUI・使い方が変わるとなると正直不安になりますよね!...でも大丈夫です。説明会でデモを見て分かりましたが、作業中にバシバシ切り替えても問題無い状態です!アレ!?と思ったら旧エディターに戻す、という感じで全然OK。

正式リリース後、完全切替を予定しているとのことですが、まだまだ改善が続いていてしばらくは新/旧の双方を使えそうです。

🎯ファーストインプレッション

キャンバス上、表示の拡大/縮小、パン操作、オブジェクトの選択などの取り回し、デザインを自在に操る操作性の快適さ、ここはなんら変わらず最高です。

ガラッと変わったけど、だいたいの操作は直感的に分かる仕上がり!

旧エディターで行っていた操作・機能は概ね網羅されていることを確認。

地味に嬉しい改善点

  • キャンバスの表示倍率がページを切り替えても保持される!
    (旧エディタでは、ページ毎に個別だった為、ページ切り替える度に倍率調整する必要があった)

💡初見で分かりづらかった点と改善案

バージョン履歴

ヘルプを見ないと発見できなかった(左上のStudioロゴに色々集まっている!と認識すればOK)
→ 左メニューバーの、コメントの上にボタンがあると良いと思う
※割と頻繁に、作業する際には必ず一度は確認するのでもっと前面に位置付けてほしい
※コメント・コンテンツ編集モードと同様にアイコンのクリックで右パネルのON/OFF切り替わるUIが自然だし、UIとしても整理が良い!

🌟アップデートされました!
Editor 5.0 Beta シェアスペースにてカイゼン報告【10/21】

ビューポート切替UI

旧UIでは、ビューのデバイス切替とは別に代表的なサイズ(width)への切替が視覚的に分かりやすかった!これと同様の操作は、「数値を打ち込む」ことで叶う。直接的だし、UI面で省スペースでまとまっていて、この方が断然良い!と考えるに至りました。

QuickBar

デザイン要素が隠れてしまう、別の要素を選択しようとすると邪魔だったりする(WixStudio同様の仕様だったりしてこれが一般的に好まれるのかもだが..)
→ 設定で表示をON/OFFできるようになっていると良い
※右側のデザイン編集パネルで操作できるので問題無いし、要素に近いクイックバーで設定できることにあまりメリットは感じない、それよりデザインが隠れたり要素を選択しにくいことが問題だと思っている。

右パネル

要素を選択していない時はパネル自体が非表示になり、その分キャンバスを広く使えるという利点もあるとは思うが‥
→ パネルは常時存在し表示する要素が切り替わる方が良いと思う
※履歴を表示していると、履歴を閉じないかぎり要素の設定パネルが表示されない

🧠アナウンスは未だのようですがアップデートされた様子!(~10/31)
要素未選択時はページ/サイトの設定を表示するようになりました。

右パネルでは、選択している要素のプロパティを表示、
特定の要素を選択していない=>開いているページおよびサイトのプロパティを表示、
という理に叶ったUI設計、素晴らしい!

なお、履歴を表示しているときに要素選択しても履歴が前面にいて要素プロパティが見えない点は変わってないが履歴ボタンが装備されたことで解決しています。コメント・コンテンツ編集と同様に左下UIグループの統一動作としてON/OFF切り替えで統制されていて、履歴表示状態であることもアクティブなアイコンで常に明示されているので分かりやすい!


...その後の所感・気付 etc.
  • 新エディタだと正しく設定できず旧エディタで設定するといったことにも遭遇していて、同じページを新/旧別タブで開き並行作業していたりします

  • デザインエディターが重い感(特に要素をクリックしてから選択状態になるまでの時間が長い)は、新/旧どちらも共通な気がしている
    (2025.10.31)

  • あらためて新/旧それぞれ操作してみたところ、新エディタがどうも重い気がする

  • テキストレイヤーの編集>コンテンツ編集モードに切り替えないと改行が効かない(解消済)
    (2025.10.6)

✨新しくなったポイント

ここからは9/12の説明会で伺ったポイントや参加者からのご意見をご紹介します。

UI/UXの進化~概要

  • よりFigmaライクなUIに!
  • もっとライトなユーザーでも使いやすいようにした工夫のひとつがクイックバー
  • 小さな画面でも支障なく使えるようになった(旧エディターだとUIのかぶりや収まり、支障があった)
  • 機能分類によるレイアウトの精査によって、開発観点でも新機能を追加しやすくなったという副次的メリットあり

アセットの充実

  • セクション、パーツ、すでにめちゃ沢山ある、もっともっと増やしていく
  • CTAバリエーションたくさんあってうれしい
  • 自分でつくるのと違う構造に気付があったりするのもメリット
  • これまで某かのツールで作成していたWFをStudioで手早く用意する活用法もアリかも!

アイコンの進化

  • Material Icons → Material Symbols に変更され、線の太さや塗色を調整可能に
  • 新/旧エディター間で設定項目に違いはあるが、表示に問題は無い
  • 旧エディタで配置したアイコンはSymbolsに差し替えるのがベター

フォント設定の拡充

  • カスタムフォントが設定できるようになった

padding等ハンドル調整の操作改善

  • 個別がデフォルト
  • +Shift、で左右一括
  • +Alt、で上下左右一括
  • デフォルト、ナッチが刻まれる!8px刻み(可変も検討してる)
  • +Ctrl、で1px単位

🔗関連リンク

Discussion