🐳

STUDIOでWEBサイト作成してみた：テンプレート

2023/08/27に公開

仕事でstudioを利用する機会があったので備忘録
※前回の記事はこちら

前回のおさらい

studioのアカウントを作成し、早速WEBサイトを公開してみました！
※装飾はほんのちょっとなのでWEBサイトとしては機能しませんがｗ
今回はstudioに予め用意されているテンプレートを利用して
ガッツリWEBサイトを作成してみます。

テンプレートを利用したWEBサイトを作成するため、新しいプロジェクトを作成します。
studioにログインすると「プロジェクト一覧画面」が表示されます。
画面右上に「＋新しいプロジェクト」ボタンがありますのでクリックします
「プロジェクトを作成する」画面に遷移します。
画面下部に「テンプレートを探す」というセクションがあります。
カテゴリーから「ビジネス」をクリックし「FRACTAL BIZ」にマウスオーバーすると
「このテンプレートで始める」ボタンが表示されますのでクリックします。
※「詳細を見る」ボタンをクリックするテンプレートの目的や利用用途等が見れます。
　「プレビュー」ボタンをクリックすると実際のWEBサイトが見れます。
プロジェクト名の入力を促されますので、お好きなプロジェクト名を入力します。
※私は専門の知識を持った人とオンラインで面談できるサービスを作って見ようと思います
　プロジェクト名は「ExpertConnect」にします。

作成ボタンをクリックすると選択したテンプレートが適用されたデザイン画面が
表示されていれば成功です。

画面右上の「ライブプレビュー」をクリックし、画面上部に表示された「スタート」ボタンを
クリックします。Live Previewの設定が完了しURLが表示されますのでクリックします。
ブラウザの新しいタブに適用したテンプレートのWEBサイトが表示されました。
※すごい、やっぱり私が作るより断然素敵なWEBサイトになっています。。。
Live Previewの設定画面にはQRコードも表示されていますので、ご自身のスマホで
QRを読み取りサイトへアクセスすることもできます。

実際にテンプレートの文言や見た目を変更し、少しずつご自身のプロジェクトに沿った
内容に変更してきましょう！

まずは「魔法のような体験で課題解決」を「予定に合わせて、知識と対話の扉を開こう」に
変更してみます。

左右の不等号をクリックしメニュー領域を閉じるとキャッチコピーが
「魔法のような体験で課題解決」→「予定に合わせて、知識と対話の扉を開こう」に
変更されています。

Live Preview画面をタブで開いている方はWEBサイトを確認してください。
キャッチコピーが変更されているはずです。
Live Preview画面を閉じた方は画面右上の「ライブプレビュー」をクリックし
URLをクリックしてWEBサイトを確認してください。

ここまで1行もソースコードを書いていません。
WEBサイトを更新する場合、HTMLを修正し、然るべきサーバにUPLOADする等
リリース作業が必要ですが、studioを利用すれば変更箇所が秒で反映されます。
ノーコード、恐るべし。

今回は実際にstudioのテンプレートを適用して本格的なWEBサイトを作成してみました
次回はstudioのメニューを理解しつつ、もう少しテンプレートを修正してこうと思います。

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