【初心者でもOK】ノーコードツールSTUDIOでLPサイト作成手順書

はじめまして！
ベンチャースパイスでWebデザイナーをしているがっしーです。
Webスクールを卒業して4ヶ月が経ち、在宅で働ける嬉しさを日々噛みしめている今日この頃。

近年、プログラミングの知識がない方でも、気軽にWebサイトが作れるノーコードツールが流行ってきました。
実際に私も実務で使っていますが正直、めっちゃ簡単！とは言えません。STUDIOを使って2ヶ月になり、ようやく慣れてきたと実感しております。

こんな私が、白紙のプロジェクト〜完成まで分かりやすくまとめましたので、この記事を見て少しでもみなさんのお力になれたら嬉しいです。

※ここから先は短編動画がたくさん出てきます。少し大変かもしれませんのでご了承いただけますと幸いです。

STUDIOとは？

デザインをそのまま実際Webサイトとして公開可能な、次世代のデザインツール。 コーディングなしで、完全オリジナルなデザインのサイトを作成することができる。

作成前の準備
（登録がお済みの方はスキップしてください）

新規アカウントを開設

①STUDIO公式サイトのアクセスする
②新規登録を行う
③チュートリアルを開始する

新しいプロジェクト作成

①＋新しいプロジェクトをクリック

②白紙から作成(Blank site)

③プロジェクト名を入力

作成開始

完成イメージ(1ページ作業時間：約30分)

今回はPC版だけの作成手順をご紹介いたします。
ここから先は少しだけWeb用語が出てきたりするので、未経験の方は下のサイト構成の画像を参考にしてください。

ヘッダー作成(作業時間：5分)

①ヘッダーエリアを作成
親ボックス(W:100％×H:100px)を設置し、<header>タグを設定します。

②コンテンツ幅を指定
子ボックス(W:1000px×H:auto)を設置します。

③ロゴを入れる
今回はテキストですが、ロゴデータがある場合は、画像データをSTUDIOツール内にアップロードして設置を行ってください。

⑤SNSアイコンを入れる
※個人的にSNSとナビゲーションはボックスを分けていますが、分けなくても大丈夫です。

⑥ヘッダーを固定配置する
ヘッダーボックスを選択してスタイルバーの「位置」を「固定」にすると、ボックスが画面に固定されます。 固定したボックスはスクロールに影響されず常に同じ位置に表示されます。※背景を半透明にする動作が含まれております。

キービジュアル(作業時間：1分)

①メイン画像を設置
画像ボックスをAddバー(左メニュー)からドラッグ&ドロップします。※このままヘッダーの下に画像ボックスを置くと固定配置している関係で画像ボックスが下に入り込んでしますので、画像ボックスのトップマージンを100px指定します。

②メイン画像の上にテキストを挿入
画像ボックスの上にテキストを挿入し、文字サイズ、フォントを変更します。

コンテンツ作成(作業時間15分)

①コンテンツエリア<main>を設置
ボックスをAddバー(左メニュー)からドラッグ&ドロップします。

③各見出しを作成
作成方法は動画の手順になります。

⑥Google Mapを挿入
Addバー(左メニュー)の”iframes”のMapを選択すると、ページにマップが出てきます。右メニューを見ていただくと、「埋め込みコード」という箇所があるかと思いますが、こちらを変更すると表示場所を変更することができます。

まずは、Googleで”GoogleMap”と検索していただき表示した場所の住所を検索します。左側にある”共有”を押すと埋め込みコードを取得できます。そのコードを、STUDIOの埋め込み場所へ、コピー&ペーストしてください。これで設定は完了です。

⑦お問い合わせフォームを設置
Addバー(左メニュー)にある、”Forms”に中にある、”Form1″をドラッグ&ドロップしてください。あとは細かな設定をすれば完成です。

フッター作成(作業時間：1分)

①フッターエリアを作成

②ロゴとナビゲーション設置
ヘッダーで作成したものをコピー&ペーストします。

ナビゲーションの遷移先の設定(作業時間：5分)

①各エリアにIDをつける
IDというのはエリアの名前を指定するタグになります。このIDは各エリアへ飛ばす(ジャンプ)目印みたいなものと思ってください。繰り返しにはなりますが「ここに飛ばしたい！」というところに目印を付けてあげてください。

②ナビゲーションボタンに遷移先を指定
[CONCEPT]ボタンを押したら、CONCEPTエリアへ飛ばす設定をしなくてはなりません。右パネルの[リンク]の右横に「ページorURL」という箇所がありますが、「ページ」を選択します。その下の「ページを検索」欄をクリックすると、先ほどID指定した各エリアの名前一覧が出てくると思います。飛びたい場所をクリックしてあげたら1つ目の遷移が完了です。他も同じ様に指定をしてあげてください。ちなみに、フッターのナビゲーションもお忘れなく指定をしてください。

③SNSボタンにURLを指定
SNSもナビゲーションボタンと同じ様に、SNSアイコンをクリックします。右パネルの[リンク]の右横に「ページorURL」という箇所がありますが、「URL」を選択します。その下の欄がURL指定欄になるので、飛ばしたいURLを貼り付けてください。こちらもフッター部分もお忘れなく！

④ロゴの遷移先をトップにする
最後にロゴを押すとページの上へ移動するようにしたいので、右パネルの[リンク]の右横に「ページorURL」という箇所がありますが、「ページ」を選択します。その下の「ページを検索」欄をクリックすると、[Page 1]というページを選択すれば完了です。※遷移先指定後にレイヤーでページ名や、ID名を変更すると遷移先が一致せず上手く遷移されないので、その際は今一度、遷移先をご確認ください。

まとめ

作成したものは「リアルプレビュー」機能でいつでも確認できます。すごく便利です！

今回は外装のみですが静的ページだと約30分以内で完成してしまいます。
とってもすごいですよね！
ここから、動きをつけたり、モーダルを作成したり、メールの設定などするともう少し時間はかかりますが、初心者の方でもすごく簡単に実装できます！
今後はこの辺りの設定方法を機会があれば紹介していきたいと思います。
今すぐやりたいという方は検索すると色々な方が解説しているものがありますので、そちらを見ながら進めてみてください。

最後まで読んで、観ていただきありがとうございました。