【超初心者向けノーコード入門STUDIOでサイトの構築と運用〜②デザインをカスタムしてオリジナルを目指す〜

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


この記事は、超初心者向けにノーコード入門をします。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超初心者を対象としています
        - まずは雰囲気や使い方について触れてもらうことを目的とします
        - したがって案件化にはこの記事の目次4つは最低でもクリアしないと案件化は難しいでしょう

# 結論
- 基本はやっぱり素材は無料テンプレからコピって作ろう!!!
- それでもない場合は、PCの画面から徐々に調整してレスポンシブを構築していこう



## 作戦１： 基本はやっぱり素材は無料テンプレからコピって作ろう!!!
- 別のブラウザのタブから他のテンプレートプロジェクトを立ち上げて、欲しい部品をサンプルからコピーして自分のプロジェクトにペーストしましょう
- 自分で作ると絶対にバグります

### ブラウザのタブにいくつか同系のテンプレを並べておくと便利
- STUDIOには無料/有料のテンプレートがたくさんあります
    - 実装したいパーツを同系の別プロジェクトからコピってくるのが一番いいです

![Screenshot 2023-12-07 at 4.57.15 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/de09aafa-e237-a6e1-2652-6f24113302e6.png)

- たとえば黒系のサイトだと黒のパーツがありそうなサイトをいくつか開いておきます
    - てきとう(てきとうすぎた)に名前をつけておきましょう

![Screenshot 2023-12-07 at 4.55.14 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/16816337-0692-60cb-260f-df5b633099b1.png)


![Screenshot 2023-12-07 at 4.59.09 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/22445dee-0755-88e4-ad83-42482e77b7e3.png)


### 例えば以下のテンプレに料金パーツを入れたいとします
- 「RECENT PROJECTS」を「PRICING」に変更してみましょう
    - ベースがこれだとします
![Screenshot 2023-12-07 at 5.05.37 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/db504678-5866-f84d-5be3-370a2219e5d8.png)

- PRICINGの部分だけ選択して cmd + c します
- 欲しいパーツのプロジェクトからパーツをコピってみましょう
    - 左上の「レイヤー」から確実に選択してコピーするのがおすすめです

![Screenshot 2023-12-07 at 5.08.29 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/b7932dab-c0fd-ebc5-2d95-19d4456a2820.png)

- Baseのプロジェクトの持っていきたいところにちゃんとターゲットを絞って cmd + v しましょう

![Screenshot 2023-12-07 at 5.10.59 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/d4962a9b-481d-8799-223b-743945aba6ec.png)

### マージンなどを元のプロジェクトと合わせましょう
- このままだと、余白感の統一性のないサイトになってしまいます
    - Baseのプロジェクトのマージンなどを確認して、持ってきたものに適応してみましょう

- 元のBaseのプロジェクトのDivの中に入れてしまいましょう
    - これで余白感が統一されます

![Screenshot 2023-12-07 at 5.52.31 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/b66fefa7-f716-d805-7c8b-206b42ad4f8c.png)

- PRICINGの部分を消したり、文字のフォーマットを合わせたり色を合わせたりしましょう

![Screenshot 2023-12-07 at 5.57.06 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/8c67d458-dded-2f5c-ac1e-56e58bc733e8.png)


完璧だー

## 作戦２： 作戦１でパーツがどうしてもない場合は、PCの画面から徐々に調整してレスポンシブを構築していこう
- STUDIOの特性として、「基準」＝＞「スモール」＝＞「タブレット」＝＞「モバイル」の順でレイアウトが自動で決められていきます
    - なのでまずは「基準」サイズで入れてそこから徐々にレスポンシブ対応を入れていきましょう

### 地図でも入れてみますか〜
- まずは余白感を統一するために、作戦１で作った親Divをコピっておきましょうか
    - 作戦1と同様になるべく余白感などを統一した方がレイアウトは綺麗に見えますので、親からコピります
        - ＝＞「Divぐらい自分で作ればいいじゃないか!!」コピーすることでレスポンシブが考慮されたDivを持ってくることができます。レスポンシブを自分で時間をかけたい人はどうぞ自分で作ってください。バグります。

Divをコピーします
![Screenshot 2023-12-09 at 4.06.14 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/ec95de9f-b22a-8359-ca58-11f12abe97fd.png)

名前をつけ直しておきますか
![Screenshot 2023-12-09 at 4.06.33 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/6d60e23a-5e3e-9bf6-843d-1557738bb12b.png)

「追加タブ」からmapを選択してDivの中に入れてみます
なんかあやしいところに入りました
「レイヤー」で確認していきます

![Screenshot 2023-12-09 at 4.08.53 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/e03e2aaa-fe86-9832-66fb-c35c43aca86e.png)

狙ったところに入ってなかったみたいなので、コピーしたDivの中に収めてみます

![Screenshot 2023-12-09 at 4.09.09 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/0cb9b031-f1ae-dd52-3cab-07b7c4fc17ca.png)

この辺が良さそうですね
![Screenshot 2023-12-09 at 4.09.30 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/d8efed87-709e-ec0f-f6f6-b825e9cc83e5.png)


横幅を100%にしてみようと思います
![Screenshot 2023-12-09 at 4.09.49 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/1f690170-b4c2-fec3-9baf-2aeb47cbf727.png)

高さは400pxにしてみたいと思います
意外といい感じ！
![Screenshot 2023-12-09 at 4.10.09 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/7d9d3ad2-f724-7998-b223-90633227a9f9.png)

ここでレスポンシブを確認していきます
「タブレット」「モバイル」それぞれ確認していきます

- タブレット
    - なんか少し高さが足りない気がします
![Screenshot 2023-12-09 at 4.15.49 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/4d47269c-f6cd-9d97-3024-a7305301f382.png)

- モバイル
    - なんか少し高さが足りない気がします
![Screenshot 2023-12-09 at 4.15.56 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/39a7794a-bc00-01f0-1fb7-4c419d81336b.png)

とりあえずタブレットの時は地図を600pxにしてみようと思います

- タブレット表示モードで該当の高さを変えると、色付き(きみどり色)で高さが指定されたことがわかります
    - このきみどり色がタブレットサイズの場合のみの高さ指定になります
![Screenshot 2023-12-09 at 4.18.00 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/3db97b14-c0ce-2531-40c3-e2b83c121b0b.png)

続いてモバイルを見ていきましょう

- なんとタブレットで指定した高さが、モバイルでも引き継がれているのがわかります

これは冒頭に説明した
> STUDIOの特性として、「基準」＝＞「スモール」＝＞「タブレット」＝＞「モバイル」の順でレイアウトが自動で決められていきます

という特性によって自動で反映されています。
今回はモバイルもこのままでいいと思いましたが、モバイルのサイズのみの場合の指定も入れてもいいと思います

![Screenshot 2023-12-09 at 4.18.16 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/f72443e5-1c4e-d47b-7bd5-7d27b63079a1.png)


# コツまとめ

- コツはまずはPCから入れていく
    - 定期的にレスポンシブを確認しながら作っていく
    - どうしても１コンポーネントでレスポンシブが不可能な場合は、出しわけ機能を使いましょう

- プレビューでレスポンシブを確認してみる(絶対やってくださいね)

# 公開していく
> 動作確認

https://qiita.com/okamu_/items/6fcc93e43da9caa945d5


# 動作確認しましょう
- 本番で公開したドメインでもちゃんと動いているか確認しましょう
- 前回はブラウザでモバイルのテストをしましたが、今回は、ちゃんとモバイルの**実機**でも確認しましょうね


# 次回
[【超初心者向けノーコード入門】STUDIOでサイトの構築と運用〜①テンプレを駆使して最速リリース〜](https://qiita.com/okamu_/items/6fcc93e43da9caa945d5)
【超初心者向けノーコード入門STUDIOでサイトの構築と運用〜②デザインをカスタムしてオリジナルを目指す〜 
**[【超初心者向けノーコード入門】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)