【超初心者向けノーコード入門】STUDIOでサイトの構築と運用〜①テンプレを駆使して最速リリース〜

これは[no plan inc.の Advent Calendar 2023](https://qiita.com/advent-calendar/2023/noplan_inc)の14日目の記事です。


この記事は、超初心者向けにノーコード入門をします。STUDIOというノーコードサイト制作ツールでサイトの構築と運用を写真付きで解説してみたいと思います。

# もくじ

**[【超初心者向けノーコード入門】STUDIOでサイトの構築と運用〜①テンプレを駆使して最速リリース〜](https://qiita.com/okamu_/items/6fcc93e43da9caa945d5) <= いまここ!!**
[【超初心者向けノーコード入門STUDIOでサイトの構築と運用〜②デザインをカスタムしてオリジナルを目指す〜](https://qiita.com/okamu_/items/55231ad180556ead7fac)
[【超初心者向けノーコード入門】STUDIOでサイトの構築と運用〜③多言語対応してみる〜](https://qiita.com/okamu_/items/334f30bfc046f51e01d5)
[【超初心者向けノーコード入門】STUDIOでサイトの構築と運用〜④完璧なSEO対策とバックアップ運用を目指す〜](https://qiita.com/okamu_/items/b3c8f1f4be054c1b9d66)

# この記事でわかること
- STUDIOでテンプレを駆使して最速リリースすることができます
- この記事は超初心者向けになっています

# この記事の対象
- Web超初心者
    ー デザイナーや非技術者で、Webのフロントエンドの実装知識がない、Web超初心者を対象としています
        - まずは雰囲気や使い方について触れてもらうことを目的とします
        - したがって案件化にはこの記事の目次3つは最低でもクリアしないと案件化は難しいでしょう

# 結論
- 素材は無料テンプレからコピって作ろう!!!

# まずSTUDIOとは
STUDIOは、ウェブデザインと開発のプロセスを簡素化するためのノーコードツールです。このツールは、特にデザイナーや非技術者を対象としており、複雑なコーディングなしに美しいウェブサイトやランディングページを作成することができます。

# どんなサイトができる？
コードを書かずにリッチなサイト制作できます。

## 事例1: シンガポール三田会
https://sg-mitakai.com/

![mitakai320.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/e170d639-0c9d-f5a7-4112-402fb3236f22.gif)

## 事例2: I-PRIMO TOKYO Singapore キャンペーンサイト
https://campaign.iprimo.sg/

![iprimo320.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/6bfadd7a-3a40-3e19-7a13-8d12d5f49659.gif)

# STUDIOのアカウントを作って実際に試してみましょう
https://studio.design/

にアクセスし、ログインしてください。
アカウント作成はこれだけで終了です。

![Screenshot 2023-12-04 at 3.56.09 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/157df272-c3d0-da63-fac4-6fe6dae780b6.png)

## チュートリアルはおすすめ！
丁寧に使い方を説明してくれます

![Screenshot 2023-12-04 at 4.05.59 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/41a52d80-3846-6a50-3e5b-1ab2b0885c60.png)

チュートリアルが終わると新しいプロジェクトを作るか聞かれるので
新しいプロジェクトを作ってみましょう!!

![Screenshot 2023-12-04 at 4.08.10 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/e73c7163-fda6-faad-039f-320f5a902b36.png)


# STUDIOのテンプレを選ぶ
- 実際にサイトを制作していきましょう
    - サイトを新しく作成しようとすると以下のような画面が出るかと思います
    - オレンジのものを選んでみましょう

![Screenshot 2023-12-04 at 4.08.31 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/57ae92a7-ef22-fa15-5e3c-4cb842fce705.png)

プロジェクトにてきとうに名前をつけます

![Screenshot 2023-12-04 at 4.08.57 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/28f8caf8-4909-96d1-2e07-d5f92249ff1b.png)


## 作戦１：テンプレから外れずにテンプレを変更するだけにしましょう
- 初心者が0から作るといくらノーコードでも、めちゃ時間がかかりますので、かならずまずはテンプレから作りましょう！
- 新しいパーツをチュートリアルから持ってきていましたがそれもやめましょう
    - 理由はレスポンシブ（PC,タブレット、スマホ対応）が難しいからです

## 作戦２：どうしてもパーツが足りない場合
- 別のブラウザのタブから他のテンプレートプロジェクトを立ち上げて、欲しい部品をサンプルからコピーして自分のプロジェクトにペーストしましょう
- 絶対に自分で作るとバグります

# 文言や色味を修正していく
- 文言や色味を自分好みに調整しましょう
- 足りないパーツは他のプロジェクトからコピって持ってきましょう

以下のサイトを参考にするとテンプレのカスタムについてできるようになります

https://note.com/noplan_inc/n/n1560635b7835


# プレビューでレスポンシブを確認してみる(絶対やってくださいね)
- 右上に「Preview」ボタンがあります
![Screenshot 2023-12-04 at 5.25.46 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/d0c9676d-79a0-b764-6d85-5b8b52765c30.png)

- 押すとライブプレビューをするか尋ねられます
![Screenshot 2023-12-04 at 5.25.52 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/7cc4c19b-ed40-506f-4e1e-f81f7dfc3abd.png)

- StartしてプレビューのURLを発行します

![Screenshot 2023-12-04 at 5.26.01 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/df9aee57-cd55-2fb2-40e2-691a91c9c619.png)

- アクセスしみてみましょう

![Screenshot 2023-12-04 at 5.26.12 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/76b8166a-e21c-acc0-3109-0782eb056431.png)

## ここでレスポンシブ（モバイル）の確認をしてみましょう!!!!!!!!
> - 新しいパーツをチュートリアルから持ってきていましたがそれもやめましょう
>    - 理由はレスポンシブ（PC,タブレット、スマホ対応）が難しいからです

と言いました。守れてますか？

- 右クリックから「要素を検証」もしくは、cmd(ctl) + option(alt) + i をします
![Screenshot 2023-12-04 at 5.26.31 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/5f6916d6-32e9-7e02-3226-be44c49922c6.png)

- そこからモバイルモードにします
    - iPhone XRのサイズになります
    - このサイズで表示崩れがないか確認してみましょう

![Screenshot 2023-12-04 at 5.26.41 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/396dea83-1281-85cc-0d76-4da6f0fcdaed.png)


# 公開していく
- 動作確認が済んだら公開していきましょう
    - 右上の「公開する」ボタンを押します
![Screenshot 2023-12-04 at 5.35.56 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/c64ded15-a0e5-9c82-8fe3-fc859a7fbcfe.png)

- 公開するドメインを聞かれます
    - ここでは okamu-portfolio.stuido.site としました
    - 公開ボタンを押せば公開完了です!


![Screenshot 2023-12-04 at 5.36.18 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/f942c2f1-f9dd-ca63-d2d4-c3cd18e82b68.png)


## カスタムドメイン
- カスタムドメインを設定したい場合は課金が必要です

STUDIO料金表
https://studio.design/ja/pricing

## OGP設定は最低でも設定しておきましょう
- 左のページのタブがあるのでそこから、OGTitle, OGDescription, OGImageを設定しましょう

![Screenshot 2023-12-04 at 5.39.31 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/8a64c741-1cd5-cade-a48a-0d357b419642.png)

### OGPについて解説

https://note.com/noplan_inc/n/n802148dc2057


# 動作確認しましょう
- 本番で公開したドメインでもちゃんと動いているか確認しましょう

# まとめ
- 爆速でサイトを構築できました

# 次回
[【超初心者向けノーコード入門】STUDIOでサイトの構築と運用〜①テンプレを駆使して最速リリース〜](https://qiita.com/okamu_/items/6fcc93e43da9caa945d5)
**[【超初心者向けノーコード入門STUDIOでサイトの構築と運用〜②デザインをカスタムしてオリジナルを目指す〜](https://qiita.com/okamu_/items/55231ad180556ead7fac) <= 次回ここ**
[【超初心者向けノーコード入門】STUDIOでサイトの構築と運用〜③多言語対応してみる〜](https://qiita.com/okamu_/items/334f30bfc046f51e01d5)
[【超初心者向けノーコード入門】STUDIOでサイトの構築と運用〜④完璧なSEO対策とバックアップ運用を目指す〜](https://qiita.com/okamu_/items/b3c8f1f4be054c1b9d66)

# no plan inc.で扱っているTechに関する様々なジャンルをアウトプットします!!


[![top.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/41177709-516f-0174-7cc4-c3052a311ac8.gif)](https://noplan-inc.com)



# no plan株式会社について

- no plan株式会社は **「テクノロジーの力でZEROから未来を創造する、精鋭クリエイター集団」** です。
- ブロックチェーン/AI技術をはじめとした、Webサイト開発、ネイティブアプリ開発、チーム育成、などWebサービス全般の開発から運用や教育、支援なども行っています。よくわからない、ふわふわしたノープラン状態でも大丈夫！ご一緒にプランを立てていきましょう！
- [no plan株式会社について](https://noplan-inc.com)
- [no plan株式会社 | web3実績](https://noplan-inc.com/web3)
- [no plan株式会社 | ブログ一覧](https://noplan-inc.com/blog)
エンジニアの採用も積極的に行なっていますので、興味がある方は是非ご連絡ください！
- [CTOのDMはこちら](https://twitter.com/_serinuntius)