Home
ウェブ制作
ウェブデザイン
ウェブデザイン

コーディング不要！国産WebデザインツールSTUDIO 3.0で注目の新機能まとめ

studio-3-feat-image-1

 

ウェブサイト作成に必要なツールがひとつに揃った、国産Webデザインプラットフォーム「Studio」。

 

コーディングの知識も不要で、Webやアプリデザインを誰でも作成できるだけでなく、たった1クリックで作成したデザインを実際のWebサイトとして公開することも可能です。

 

今回は、最新アップデートが行われたばかりの「Studio」に追加された新機能をまとめてご紹介します。

 

 

Studioとは？

Studioとは、ウェブサイトのデザインから公開、CMS機能までを完結できる、日本発の国産Webデザインツールです。

 

今回のアップデートにより、ブログなどのコンテンツ管理ができるCMS（英: Contents Management System）が追加されたことで、WordPressのような動的サイトの制作が可能となりました。

 

今回のアップデートの目玉のひとつ、リアルタイムでの共同編集は、新型コロナウイルスの影響で在宅ワークが増えているいまの状況にも最適と言えるでしょう。

 

Studioを開発したSTUDIO株式会社のCEO石井穣さん（@ytk141）が、STUDIO 3.0の新機能をまとめて紹介していたので、以下で詳しく見ていきましょう。

 

 

STUDIO 3.0の新機能まとめ

1. リアルタイム共同編集

新機能STUDIO CMSを使えば、リアルタイムでの記事の共同編集が可能。複数人でプロジェクトを同時にすすめることができ、WordPressにはない機能のひとつ。Slackなどでファイル送信を行う必要がなく、その場でコンテンツを共同で作成できます。

 

2. マークダウン記法に対応

文章での階層づくりに便利な、「マークダウン」記法を採用し、h2やh3などの見出しタイトルはもちろん、リストや引用文などのスタイリング設定も自由。

 

3. コメントと差分検知機能搭載

複数人で記事を編集しているときに便利な、レビュー用コメント機能が標準装備。また、レビュー後に編集した箇所はハイライト表示されます。

 

4. InstagramやTwitterなども埋め込み自由

STUDIO CMSによる記事作成では、InstagramやTwitterなど、iframe以外も自由に挿入できるように。ソーシャルメディアによる連携で特に便利な機能。

 

5. CMSリストのフィルタ機能

CMSで作成された記事データを、用途に応じてタグやカテゴリーなどで絞り込みができ、リアルタイムで変化し、表示件数も直感的に指定できます。

 

6. 「もっと見るボタン」を一発設置

過去記事をさらに表示したいときに便利な、「もっと見るボタン」をクリックひとつで設置可能。ボタンデザインも自由に変更できます。

 

7. metaやリンクの設定を動的に

STUDIO CMSのプロパティを活用することで、titleなどのmetaデータや、リンクの設定も動的に設定可能に。ブログ必須のSNSシェアボタンにも対応しています。

 

8. データの加工も可能に

 

9. アニメーションもパネルから設定可能

画像や文字テキストなどにアニメーションを追加できる新機能が登場。不透明度や時間の他、ペジェ曲線をつかったより細かく、滑らかな独自アニメーションもGUIから作成できます。

 

10. シンボル機能でより効率的に

何度も使い回すことが多いデザイン要素をシンボル化できる新機能が追加。これまでコピペで行っていた作業も楽に。

 

11. ドラッグ＆ドロップで完結の新パネルデザイン

デザインエディター左にあるAdd Penalがリニューアル。目的のコンテンツがより見つけやすくなり、ドラッグ＆ドロップするだけで本格的なデザインに仕上げることが可能。

 

12. Overflow設定が可能に

はみ出してしまった画像などの設定がより便利に。これまでは非表示でしたが、「隠す・表示する・スクロールさせる」から選択できるように。

 

13. Appear / in-Hover / first-childコンディションが登場

 

14. ヘルプ機能の強化

左下に表示されたヘルプアイコンをクリックすれば、ショートカットと検索パネルが表示されます。ヘルプセンターと連動しているので、該当する記事が見つけやすくなっています。

 

15. ジャンプ機能

共同プロジェクトで便利な機能のひとつ。

 

 

STUDIO 3.0を使ってみた

実際にSTUDIOにログインした様子。強化されたヘルプ機能のほか、ダークモードにも対応しています。

 

デザインは0から始めることができ、用途に応じて自由に表現できます。急ぎのときは、用意されている高品質なテンプレートを活用してみると良いでしょう。

studio___the_next_generation_design_tool-1

 

 

株式会社モリサワが提供するWebフォントサービス「TypeSquare」を導入されているので、500種類を超える日本語フォントが使用可能な点も大きなポイント。

 

 

ますます増えるデバイスのスクリーンサイズにもクリックひとつで対応でき、リアルタイムでレスポンシブレイアウトを検証できます。

 

 
余白やパディング幅など、細かい数値設定もドラッグ＆ドロップによる、直感的で快適な操作性も魅力です。

 

STUDIOでは、今回紹介したデザインツールの全機能を無料から利用することができます。この他に独自ドメインへの接続も980円/月から始めることができます。

%e6%96%99%e9%87%91%e3%83%95%e3%82%9a%e3%83%a9%e3%83%b3___studio

 

参照元リンク : STUDIO | Webサイト作成のための次世代Webデザインプラットフォーム

Related
Latest