こんにちは、STUDIOのSaikaです！ この記事では、STUDIOの特徴とSTUDIO導入前によくいただく質問をリストアップしてご紹介します。STUDIOは最高の創作体験ができるようサービスの提供に努めています。コードを書くことなく自由にデザインできるWebデザイン制作ツールとして、これまで36万人以上の方にご利用いただいてきました。活用シーンはポートフォリオから企業サイト、官公庁サイトにまで多岐に渡ります。そんな中、STUDIOの利用を考えている方からどんな機能があるか知りたい！というお声をいただくことがあります。そこで、この記事ではSTUDIOの特徴とこれまでユーザーの皆さんからいただいた機能やサービスに関する質問をいくつかピックアップしてご紹介します。導入してみたいけどSTUDIOについてまだ深く知らない。という方はぜひ最後まで読んで導入前の参考にしてみてください！STUDIOの特徴1. 直感的な操作でデザインできる%3Ciframe%20src%3D%22https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F873213621%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%3ESTUDIOの１番の特徴は直感的な操作でデザインできること。デザインエディタと呼ばれる画面でまっさらな状態から、あなたの思い描くデザインを作り上げることができます。もちろん、洗練されたサイトテンプレートやプリセットされたヘッダーなどのパーツもご用意。用途や状況に合わせて作り方が選べる自由さも兼ね備えています。STUDIOでのWebサイト制作はコーディングが必要な制作に比べ学習コストが低く、初めて操作しても慣れるまでに時間がかかりません。実装以外の情報整理やデザインにより多くの時間を割くことができるところも魅力の一つです。2. レスポンシブ設定が適切に、簡単に%3Ciframe%20src%3D%22https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F873210462%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%3ESTUDIOではPCからモバイルまで、あらゆる画面幅でWebサイトを適切に表示する「レスポンシブ」の設定が簡単に行えます。「ブレイクポイント」を使い、特定の画面幅ごとにデザインやレイアウトを調整するだけで設定可能。調整したレスポンシブはエディタ内で画面を拡大・縮小して表示を確認する。ブラウザでサイトがプレビューできる「ライブプレビュー」機能を使いスマートフォンなどの実機で表示を確認しながら、微調整を行うことも可能です。より適切で効率的にレスポンシブが設定できるようサポートする機能が充実しています。3. アニメーションにもこだわれる%3Ciframe%20src%3D%22https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F873215104%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%3ESTUDIOでは特定の条件下、例えば要素が画面上に表示された時のスタイルを指定し、通常時のスタイルとの変化を設定することでアニメーションを作り出します。設定方法を理解すれば簡単に設定でき、アニメーションの速度や色の変化など細部までこだわった表現が可能です。4. ライブプレビューで編集内容をリアルタイム確認ライブプレビューはブラウザ上で作成しているWebサイトの見た目を確認できる機能です。制作に使用しているPCはもちろん、タブレットやスマートフォンなど様々なデバイスからリアルタイムでサイトの確認ができます。デザインの微調整やレスポンシブ対応時にも使え、効率的な作業が可能。ライブプレビュー用のURLをクライアントやチームメンバーに共有すると作業進捗の連絡がスムーズになります。5. ワンクリックでサイトを公開%3Ciframe%20src%3D%22https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F759741889%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一般的にWebサイトを公開するには、サーバーを契約の上、制作したデザインなどのデータをアップロードする必要があります。しかし、STUDIOではホスティングサーバーを提供しているので面倒なサーバー設定は必要ありません。設定に頭を悩ませることなく「公開」ボタンをクリックするだけです！6. CMS機能と共同編集%3Ciframe%20src%3D%22https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F759742688%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%3ESTUDIOオリジナルのCMSが利用できます。CMSダッシュボードと呼ばれる画面で記事やポートフォリオ作品などのコンテンツデータの一括管理が可能。プロジェクトに招待したメンバーとの共同編集もできるため、記事へのフィードバックや修正もスムーズに行えます。記事の執筆から投稿まで、他サービスを介することなくSTUDIOのみで完結します。7. 学習コンテンツやサポートが充実STUDIOを使いこなせるようにヘルプサイトやYouTubeで学習コンテンツを公開しています。他にも、ユーザー同士でSTUDIOの使い方について情報交換したり、開発リクエストなどが行えるSTUDIO Community へは誰でも参加可能。ユーザー同士の繋がりも得られます！何か困った際にはアプリ上から直接チャットサポートに問い合わせることができ、初めての利用でも安心です。※操作方法などに関する有人チャットサポートは有料プランでのみ利用可能です8. アップデートが頻繁に行われているSTUDIO Blog や 公式 Xアカウントで紹介する主要なアップデートだけでなく、チャットサポートやコミュニティ上でいただいたご要望に応えるカイゼンやアップデートを積極的に行なっています。本記事でこれからご紹介するSTUDIOで現状実現できないことについても、今後の開発で対応していくかもしれません。上記でピックアップした特徴の他にも、STUDIOには多くの便利な機能が揃っています。例えば、Figmaからのデザインデータインポート機能や外部アプリとの連携、API連携など制作時に役立つ機能が充実しています。さらに、公開後にはSTUDIO独自のアナリティクス機能でサイト分析ができ、公開後の運用もサポートしています！STUDIO利用前のよくある質問と回答STUDIOは日々成長しているサービスであるため、表現や機能によっては実現できない、または工夫が必要な場合があります。ここで紹介するよくある質問と回答を通して、制作の進め方や利用する外部ツールなどを事前にイメージしておくと制作がよりスムーズに行えるでしょう。※2023年10月現在の情報となります1. 決済機能や予約機能は追加できますか？ECサイトやサービスサイトなどで活用される決済機能や予約機能はSTUDIOでは提供していません。しかし、外部サービスとSTUDIOのEmbedボックスやカスタムコード機能を組み合わせることで、これらの機能を追加できる可能性があります。例えば決済機能だと、Stripeなどの外部サービスを使って購入ボタンをページに配置できます。一例としてStripeのPayment Linksを利用する方法について、こちらのYouTube動画で解説しています。2. パララックス効果はつけられますか？スクロールをトリガーにしたスタイルの変化は設定できないため、STUDIOのスタイルやアニメーション機能のみでは実装できません。外部サービスとEmbedボックスやカスタムコード機能を使って実現できる可能性があります。3. フォームのカスタマイズはできますか？STUDIOのフォーム機能では、シンプルなインプットボックスなどのパーツを自由に組み替えてフォームが作成でき、デザインもエディタ上でカスタマイズいただけます。回答はSTUDIO上の専用の画面で確認でき、ステータス管理も可能です。ただし、自動返信メールやフォーム送信前の確認画面などはSTUDIOの機能として提供はしていません。自動返信メールはSTUDIOのフォーム結果の外部連携機能と外部サービスの「Zapier」の両方を利用する必要があります。詳しい手順は以下のヘルプ記事で解説しています。フォーム送信時の自動返信メール | STUDIO Uその他、高度なカスタマイズが必要な場合はHubspotなどの外部サービスで作成したフォームをEmbedボックスに埋め込むなどの方法をご検討ください。4. 手持ちのフォントをアップロードして使用することはできますか？手持ちのフォントをSTUDIOにアップロードすることはできません。しかし、Google Fontsとモリサワ社のTypesquareフォントがプランに関係なく無料で利用いただけます。使用可能なフォントを事前に確認しておくことをオススメします。5. ページネーションを追加する機能はありますか？STUDIOではCMS機能を利用した場合でもページネーションは自動で生成されません。6. 文字サイズに「rem」などは指定できますか？文字サイズは「px」でのみ指定できます。相対的なサイズである「rem」「em」などは設定できません。画面サイズに合わせて文字サイズを可変させるには、レスポンシブ設定を活用してブレイクポイントごとにサイズを指定します。7. 会員登録機能やログイン機能は実装できますか？会員登録機能やログイン機能は提供していないため、会員制のサイトなどはSTUDIOのみでは制作いただけません。なお、ログイン機能に近しい機能として「サイトのパスワード保護」機能はご利用いただけます。サイト全体に閲覧制限を設けることができるため、閲覧する人を限定したいサイトなどを制作することは可能です。8. プランの支払いはクレジットカード以外でも可能ですか？プランのお支払いはクレジットカードでのみ行なっていただけます。ただし、より規模の大きいWebサイトの制作・運用に最適な「Enterpriseプラン」では、銀行振込にも対応しています。最後に今回はこれまでいただいたご質問やユーザーの皆さんの声をベースに、STUDIOの特徴とよくある質問をピックアップしてご紹介しました。ここで紹介した特徴や機能以外にも、STUDIO製サイトが掲載されるギャラリーサイトの「STUDIO Showcase」をチェックすると、STUDIOの可能性がより感じられると思います。色々とご紹介しましたが、STUDIOの操作感などは直接使ってみないと分からないものです。STUDIOは無料のFreeプランでも多くの機能がお試しいただけます。この機会にアカウントを作成して、ぜひご自身でSTUDIOを体感してみてください！操作する中で疑問が湧いた際には、ヘルプサイト や STUDIO Community がご利用いただけます。ぜひお気軽にご利用ください。