私たちのプロジェクトでは、CMSといえば主にWordpressを使うことがほとんどで、たまに企業様の既存CMSを触らせていただく程度でした。しかしながらずっと思っていたのです。「やっぱりSTUDIOも使ってみたい…!」と…。ということで、2023年の11月、思い切って自社サイトのフルリニューアルをSTUDIOを使ってやってみることになりました。結果出来上がったのが現在ご覧いただいているこのサイトなわけですが、今回はその経験を踏まえて「STUDIOって実際どうなの?」と思っている企業のWebサイト運用担当者様やWebデザイナーさんたち向けにざっくりと情報をまとめてみました。(すでにこの手の情報は散々出ておりますので遅きに失している感も否めませんが、お付き合いいただけると嬉しいです)1. そもそもSTUDIOとは?参照:STUDIO | Web制作を、ノーコードで。STUDIOはコーディングの知識やスキルがなくてもWebサイトが作れるサービスです。Web上の編集画面でレイアウトや配色、テキスト入力、アニメーション設定などを行うと自動でコーディングもされていくという、コーディングできない民にとっては大変便利なサービスです。また、STUDIOではテンプレートをカスタマイズするやり方はもちろん、完全オリジナルでデザインを立ち上げていくことも比較的簡単にできます。もちろん、レスポンシブにも対応しているので安心です。そして作ったWebサイトの公開も無料でできます。もちろん、STUDIOのバナーが必ず画面上に付与されてしまったり、CMS機能が使えなかったりなどの制約があるので、企業のWebサイトとしては有料プランへの登録が必要です(登録にはGoogleアカウントが必要です)。ちなみに有料プランではCMS機能の他、Googleアナリティクスやタグマネージャー、reCAPTCHAなどの連携も簡単にできますので、上手く使えば運用の手間も減らすことができそうです。こちらが実際の編集画面です。ちなみにYoutubeでは公式動画だけでなく様々なチュートリアル動画が公開されていますので学習コストもそこまでかからないかと(本当に良い時代です)。2. STUDIOを使うメリット当然ながらSTUDIOにはWordpressなどの他のCMSと比べて「できること・できないこと」があります。まずは実際に私たちが使ってみてわかったメリットについていくつかご紹介していきます。① ボックスレイアウト&レイヤー構造に慣れれば簡単に作れる操作のほとんどが「ボックスを並べる」「レイヤーを重ねる(整理する)」で簡単にデザインが組み上がっていきます。とは言え細かな調整やレスポンシブ対応など、こだわる部分や構成要素が多ければ複雑な操作が必要な箇所は当然出てきますが、基本的な操作は慣れてしまえばものすごく簡単です。② 自由に使えるアイコン・写真・フォントが豊富特にアイコンやフォントの多さは非常に助かります。写真は私たちの場合はオリジナル素材を使うことが多いのであまり使うことはないですが、たとえばモックアップの制作や予算の少ないプロジェクトなどの場合は助かるのではないでしょうか。③ おしゃれなテンプレートも豊富D-GHOSTのサイトは完全オリジナルで制作していますが、STUDIOのテンプレートはオシャレなものがたくさんあるので、テンプレートを使用して画像とテキストを差し替えていけば取り急ぎ「いい感じ」のWebサイトをつくることは簡単にできます。とりあえず低コストでLPを作りたい、簡単なものでいいからWebサイトを持ちたい、などであれば使い勝手はいいのかなと思います。④ プレビューにすぐ反映される特に何もしなくても勝手にプレビューに作業内容がタイムリーに反映されていきます。URLをメンバーやお客様と共有してすぐ確認してもらえる状況を手軽に作れるのは便利ですね。⑤ 問い合わせフォームの管理も簡単STUDIOの有料プランでは、作ったフォームの回答を一覧で管理できます。ステータスも「未対応」「対応中」「完了」など仕分けができます。また、別途Zapierなどの自動化ツールを使う必要がありますが、問い合わせ内容を自動的にGoogleスプレッドシートに記録していきながら自動返信メールも送ったりすることも可能です(ただしこれは次のデメリットの一つでもあります)。3. STUDIOのデメリット続いてデメリットです。便利なSTUDIOですが、残念ながら「これはできないのか…」という点もいくつかありました。① 「ボックスレイアウト」に慣れないとかなり苦労するメリットでありながらデメリットと表裏一体のボックスレイアウト。自由自在にレイアウトできるわけではないので、「ここにこのパーツを置きたいな」というときにレイヤー構造を作ってどこを固定してどこを動かして…というような工夫が必要になります(伝わりにくくてすみません)。② PC&オンラインでしか扱えない編集画面はスマホやタブレットには対応していません。私たちは仕事でiPadを使うことも多いので、「iPadでできたらなー」と思うことがしばしばありました。いつかアップデートされると本当に嬉しい。また、Webサービスであるためオンライン環境でしか使用できません。「いったんローカルで作業して…」ということはできないので、触る場合はネット環境必須です。③ フォームの自動返信機能がない管理者への通知機能はありますが、自動返信機能は無いため前述の通りZapierなどの別のツールを使用する必要があります。④ アニメーション機能はあるが複雑な動きはしない方が無難アニメーションは使い方次第でかなり自由度高くできますが、通常のCSSでの開発などと比べると自由度は劣ります。また、スライドショーがややカクついてしまうなどの問題もあったりするようなので、リッチに見せたい場合は工夫が必要です。⑤ バージョン管理は有料でも制限あり変更履歴を管理するバージョン管理機能は有料プランのみですが、それでも最長360日ですので注意が必要です。また、サイト単位での管理しかできないため、ページ単位で保存・復元することなどはできません。⑥ 独自ドメインへの切り替え時にダウンタイムが必ず生じる有料プランでは独自ドメインを使用することができます。特に私たちが行ったようなリニューアルの場合、既存のドメインで公開中のサイトと切り替える作業が発生することになりますが、その際に必ずタイムラグが発生し、切り替え中はWebサイトが閲覧できない(ダウンタイム)状態になります。※具体的には「DNSレコードの反映」「TLS証明書の発行」というフェーズで必ず待機時間が発生します。ちなみにこのタイムラグ、STUDIOの公式回答としては「4時間以上かかる場合はチャットで問い合わせてください」となっていますが、場合によっては24時間ほどかかる場合もあるようです。実際私たちのリニューアル作業でも切り替えに一晩中かかりました。参照:STUDIO公式ガイドFAQ「WebサイトをSTUDIOに移行する時、公開サイトのダウンタイムをゼロにできませんか?」そのため、シームレスな切り替えは不可能と割り切り、夜間や休日に切り替え作業を行うことをお勧めします。4. さいごに実際にSTUDIOを使ってみてわかったのは、ノーコードツールとしては非常に使いやすく便利であることと、サイト公開後の問い合わせ管理やサイト分析もかなり楽にできるようになったなということです。特に私たちのようなデザインやプログラミングについて知識のある人にとってはかなり扱いやすいツールであると感じました。もちろん、プログラミングができない人にも使いやすいツールではありますが、HTMLやCSS(特にpaddingやmarginなどの仕組み)を理解しているとかなり楽に覚えられる印象でした。今後D-GHOSTでも積極的にお客様への提案に使っていきたいと思っておりますので、もしSTUDIOの導入を検討したい、あるいは既にSTUDIOを使用していてサイトをリニューアルしたい、という企業の担当者様がいらっしゃいましたらぜひお声がけください。私たち D-GHOST は、特に人事領域の課題解決を基軸とした、Webデザインや動画制作、プレゼンテーションデザインなどのクリエイティブ制作を得意としている「人事に強いデザイン会社」です。業務における課題の調査・マーケティングリサーチ・戦略設計などの上流工程から、Webサイト、動画、各種コンテンツ、研修プログラム、プレゼンテーション資料などの立案・設計・制作まで、一連のプロジェクトに対応できます。人事関連で課題をお持ちの方や、コーポレートサイト・採用サイト・動画などの制作でお困りの方は、私たちにお気軽にご相談ください。D-GHOSTの特長D-GHOSTのサービスお問い合わせ資料ダウンロード