BLOGS
ずっと気になっていた「STUDIO」でのWebサイト制作に挑戦してみました。
STUDIOとは？
STUDIOは、HTML・CSS・JavaScriptなどのコーディングの作業や、サーバーのセットアップをせずに、Webサイトのデザイン制作から公開までを行うことが出来るCMSです。
- コーディング不要
- サーバー契約不要
- 無料プランあり
- コミュニティが充実している
- テンプレートあり
という、とっても便利なツールで、気軽に始めることができます。
STUDIOの使用手順
アカウントの取得
初めてSTUDIOを使う方はアカウントを作成する必要がありまが、Facebook、またはGoogleアカウントと連携できるのですぐに取得できます。
プロジェクトの作成
アカウントができたらプロジェクトを作成します。今回は無料プランでどこまで作れるのか試したかったので、無料プランで作成しました。
テンプレートを選ぶ
まっさらな状態からデザインを起こすこともできますが、何せ初めてなのでテンプレートを使って作成することにしました。今回はギャラリーセクションが欲しかったので、こちらのテンプレートを選びました。
デザイン
先ほど選択したテンプレートをベースにデザインしていきます。
今回はコンテンツ量が多くないのでシングルにしましたが、無料プランでも複数ページのサイトが作成できます。
マージンやパディング、ボックスといった言葉が出てきますが、少しでもhtml・CSSを触ったことのある方や、FigmaやXDなどのデザインツールを使ったことのある方ならすぐに慣れることができます。
というのも、私はこういったUIで躓くことが多いのですが、スムーズにデザインすることができました。これはSTUDIOのUIがとても素晴らしいということなんだと思います。マニュアルなんかなくても使うことができるって本当に素晴らしい！ストレスフリー！！これは人気なわけだ…と納得です！
普段、Figmaを使ってデザインしているのですが、STUDIOに移行できるならしたいくらいですね。（ちょっと用途がはずれるので難しいのですが）
SEO設定
ページタイトルや説明文、OGP画像やファビコンなどを設定します。無料プランのせいなのか？Twitter Cardの設定はできないようです。
公開
今回は無料プランなので、ドメインは勝手に割り振られた英数字ですが、ボタンクリックのみでWebサイトを公開することができました。
まとめ
ここまでいいところばかりを紹介してきたわけですが、最後に残念なポイントも記載しておきます。（これは、私の努力不足もあると思うので、改善できたらまた報告します。）
メリット
- 無料プランがある
- UIが抜群にいい
- コードを書かなくていい
- サーバーを用意しなくていい
- デザインの自由度が高い
- コミュニティがある
デメリット
- vwや細かなカラム落ちなどの指定ができない
- 独自に契約しているWebフォントのサービスと連携できない
- ローディングアニメーションやスクロールアニメーションが設定できない（特にページ内遷移させる時のアニメーションが微妙）
- Twitter Cardが設定できない
- CMSが有料
と、まとめるとこんな感じになりました。
デメリットにもたくさん記載しましたが、無料の範囲でこれだけできればかなり満足です！！
まだSTUDIOを使ったことがない方はぜひ、試してみてください。
今回の制作物
今回作ったWebサイトはこちらからもご覧に慣れます。何かの参考になれば嬉しいです。
https://black583955.studio.site/