みなさん、大変お待たせしました！2020年6月4日、STUDIOは渾身の大型アップデート・STUDIO 3.0をリリースいたしました！🎉🎉🎉

リリースから２週間ほど、もう新しくなったSTUDIOはお試しいただけましたでしょうか？

改めてアップデートの全貌をまとめましたので、ベテランの方も3.0から始めた方も、ぜひチェックして、STUDIO 3.0 をマスターしてください ✔️

CMS

コンテンツの作成・管理が可能な「CMS機能」が、遂にSTUDIO内に搭載されました！
STUDIOのプロジェクトダッシュボードでコンテンツデータを管理し、動的なサイトをコードを書かずに作成・運用することができます。

特徴１ : コンテンツのリアルタイム共同編集

STUDIO CMSの記事制作画面では、複数人とリアルタイムで共同編集が可能になっています。リモートワークなどでチームが離れていても、スムーズに記事の執筆やチェックが行えます。

特徴２ : マークダウンに対応

誰でも簡単に、見出しや箇条書きなどを取り入れて構造化された文章を書けるように、STUDIO CMSではマークダウン記法を採用しています。
マークダウンで書かれた外部の文章のスタイルもコピーペースト時保持されるので、既存サイトの移植もかんたん！

また、文章の一部に太字・斜体等のスタイルを当てるリッチテキスト機能も新たに搭載しています💪

特徴３ : 外部コンテンツの埋め込み

もちろんCMS記事内には、SNS投稿の埋め込みも簡単に可能です！
「</>Embed Block」のフィールドに、投稿の埋め込みコードをペーストしましょう💪

特徴４ : コメント & 差分検知

記事の一部分を指定して、コメントを残すことができます。

また、コメントに対して修正を加えると、その差分も自動でコメントのログに残るため、細かなフィードバックのやりとりを精度高く行うことができます💬

デザインとの紐付け

CMSデータをデザインに繋ぐ操作も、とても直感的に行えます！
もちろん最新のCMSデータがデザインエディタにそのまま反映されるので、リアルな内容を使ってデザインを進めていけます。

特徴１ : CMSリスト＆詳細ページ

まずは記事のリストをデザインに配置しましょう。

新しくなったアドパネルに、作ったCMSデータのリストのボックスが自動的に入っているので、そのままドラッグして配置。

各アイテムの詳細ページは、新規ページの追加ボタンから「動的ページ（CMS）」を選ぶことで作成できます💡

特徴２ : プロパティの変数表示

CMSアイテムには、タイトル・本文の他に様々なプロパティを持たせることができます。特に他のCMSアイテムをプロパティとして参照することで、サイト設計の幅がグッと広がります😎

登録したプロパティ内容は、リストや詳細ページ内で、テキストボックス/画像ボックスに変数として表示することができます。

まずはぜひ、この変数の紐付け方をマスターしてください！

特徴３ : データの加工

CMSデータから紐づけたテキストボックスには、さらに文字数制限やhtmlタグ除去など、データ表示の加工をかけることができます。

リストにキャプションを表示するときなどに役立つ機能です💡！

CMSの詳しい使い方はこちら→

これらの機能を使いこなせば、このような中身の詰まったWebマガジンも作れちゃいます！👏

https://magazine.redesigner.jp/

Animation機能

CMSと並んでご要望の声が多かったAnimation機能も、ついに解禁となりました！！

モーションタブ

ボックスの見た目を管理する、エディタ上部のスタイルバーに、新たに「モーション」タブを搭載。
今までのホバー時の動きの設定と同じ感覚で、通常状態とホバー状態でモーション項目の設定に差異をつけたうえで、変化にかける時間や動きの緩急などを設定することで、自由自在にアニメーション表現をつけることができます。

&appear コンディション

ホバー状態に加え、新たに「&appear」状態も選択できるようになったため、要素が次々フワッと表示されるインタラクティブなサイトも、STUDIOで表現可能になりました✨

https://colorcodes.studio.design/

Animationの使い方はこちら→

Symbol機能

ヘッダーなど、プロジェクト内でなんども登場する共通パーツを「シンボル」として登録できるようになりました！
ショートカットは「 ⌘＋J 」です✔️

後から加えたデザイン変更も共通化されるので、「ヘッダーメニューのフォント変更を４箇所×5ページ…」などという作業はもう必要ありません🙌🙌

シンボル機能の詳しい使い方はこちら→

Overflow

今までは、子要素の親ボックスからはみ出した部分は全て見えない（クリッピングされた）状態にしか設定できませんでした。

今回のアップデートで、新たに

• 見えるようにする（visible）

• クリッピングする（hidden）

• 並び方向にスクロールさせる（scroll）

の３種類から見せ方を選べるようになり、さらにダイナミックなデザイン表現が可能になりました！

オーバーフロー設定の解説はこちら→

その他のUPDATE

STUDIO 3.0は、メインの新機能以外にも、細かなアップデートをたくさん搭載しています🌟

SEO設定パネル

SEO設定ができるパネルを、デザインエディタ右上の歯車アイコン内に移動しました⚙

メタタイトル・ディスクリプションも変数を用いて設定ができるようになったほか、今まではサイト共通だったファビコンやソーシャルカバー画像の設定も、ページごとに可能になりました🎉

「SITE」モードで今までの「全体設定」に当たる設定も可能です！

新しいSEO設定パネルの詳しい使い方はこちら→

右クリックメニュー

ボックスを選択し右クリックすると、

• 削除

• グループ化

• リスト化

• シンボル化

をメニューから選んで実行できる様になりました！

リッチテキストボックス

CMS記事内だけでなく、静的ページでもリッチテキストボックスが配置できるようになりました！

文中に太字、アンダーライン、リンクなどの記述を含めたり、<h1><p>などのタグごとにスタイルを決めることができます🗒

リッチテキストの詳しい使い方はこちら→

パーツテンプレート

よく使われるパーツごとのテンプレートを、ラインナップを一新してアドパネルのBoxタブに配置しました！
背景動画など、設置に手間がかかるパーツも、ドラッグ＆ドロップで配置し、埋め込み内容を入れ替えればあっという間に設置が完了します💡

in-hoverコンディション

親ボックスへのホバーを認識し、子要素に動きの変化をつけることができるコンディションです。
アニメーション機能と相性が良く、より複雑なホバー表現が可能です！

first-childコンディション

リストの１つ目の項目のスタイルを、このコンディションで制御できます！

ジャンプ機能

共同編集時に画面右上のメンバーアイコンを押すと、その人が編集している画面にジャンプできる機能を搭載しました👟
遠隔でコミュニケーションをとりながら、「ちょっと今私がいる所を見に来て」というやりとりが可能に👀！

新しくなった料金プラン

今までのプランに加え、新しく Pro プランが登場！

デザインエディタの機能は、FREEプラン、BASICプランでも全機能を使っていただけますが、CMS記事の公開数をプランごとに制限しており、 Pro プランはブログやメディアサイトを本格的に運用したい方向けの内容となっています。

詳しい料金プランはこちら→

紹介しきれない細かいリニューアルもツール内随所で行われ、STUDIOで作れるサイト表現の幅は何倍にも広がりました✨

アーリーアクセスにご参加いただいたユーザー様の中には、早速開発メンバーを唸らせる重厚なサイトを作ってくださる方も現れ、STUDIOメンバー一同、予想しきれない STUDIO 3.0 の可能性にとてもワクワクしています👀

ぜひあなたも気になる新機能を試し、新しくなったSTUDIOの可能性を発見してください！！