🐳

STUDIOでWEBサイト作成してみた：入門

2023/08/26に公開

webサイト

仕事でstudioを利用する機会があったので備忘録

studioってなんだ？

ノーコードでWEBサイトを作成することができるツールです。
技術者でない方でも自分でWEBサイトを作成することができます。
studioのお作法になれる必要はあると思いますが。。。

早速触ってみよう！

ツールであれば色々触って試すことができるので、入場してみたいと思います。
今回は無料プランを試します。

アカウント作成

ここからstudioのアカウントを作成します。
※私は自前のメールアドレスで登録したので確認通知が飛んできました。
確認通知に記載されているボタンをクリックしてアカウント登録完了となります。

何かある

ログイン完了後、プロジェクト一覧が表示されました。
お試し用かな？First projectが既に存在していました。

First Projectで作業してみる

First projectにマウスオーバーするとグレー反転しDesign Editorボタンが表示されました。
クリックするとPage1という画面に遷移して、真っ白い画面が表示されました。

メニューがいっぱい

左右にあるメニュー領域の不等号記号をクリックすると領域が広がり、色々できそうな雰囲気です。※と、いうことは色々覚える事があるのか。。。

レスポンシブ対応は見てて気持ちい

画面上部にあるレスポンシブの3つのアイコンをクリックすると、PC/タブレット/スマホ幅に対応した領域に変化します。※見てて気持ちいー位動きｗ

とりあえずインターネット接続してみます

画面右上にあるライブビューを押します。

Live Previewを有効にする表示が画面上部に表示されますのでスタートを押します。

Live Previewが有効になるとQRコードとURL(studio)が表示されます。
URLをクリックします。

ブラウザに新しいタブが作成され、真っ白な画面が表示されました。
そりゃそうですね、何もしていませんので。。。
ですが、studioが発行してくれたURLでアクセスすることができました。

寂しすぎるのでちょっと装飾します

Page1画面に戻って白いキャンパスに「初めてのstudio」とテキストを書いてみましょう。

左のメニュー領域の「T」をクリックします
画面下部に「Type Something」の文字が表示されます
表示された文字をダブルクリックして「初めてのstudio」と入力します

入力したらライブプレビューしてみましょう

先程、ライブプレビューを有効にしているので画面右上のライブプレビューをクリックして
画面上部に表示されたURLをクリックしてみます。
真っ白画面からほんのちょっと進化して「初めてのstudio」が表示されるようになりました

ノーコード、すごいなっ

ここまで1行もソースコードを書いていません。
もし、studioを利用していなかった場合は以下のような手段もありますが工数とコストを考えるとstudioを利用したほうが楽だな。って思いました。
※お客様の要件にマッチすれば、ですがｗ

CASE1：サーバーを用意する＋ドメインを取得する＋HTMLを作成する

レンタルサーバ等のホスティング事業者と契約します。
お名前.com等のドメイン取得代行業者を通じてドメインを取得します
HTMLファイルを作成して、サーバへUPLOADし、インターネットへ公開します
※月額2,000円位はかかりそうなイメージです。

CASE2：AWS等のクラウドを利用する

クラウド事業者と契約します
何かしらのホスティングサービスを利用（s3,lightsail,EC2・・・）
HTMLファイルを作成して、指定のサービスへUPLOADし、インターネットへ公開します
※無料期間とかあればコストは抑えることが可能ですね。

振り返り

今回は実際にstudioを利用してインターネットへ自分が作成したWEBサイトを公開してみました
次回はテンプレートを利用した素敵なWEBサイトを作成して世界へ公開したいと思います。

この記事が少しでも役立つ情報を提供できましたら幸いです。
読んでくださった皆様に心から感謝申し上げます