＼＼ STUDIO でランディングページ作ったよ！／／
すべてのWeb制作学習者の味方っ！！ 在宅ワーク主婦・ゆっぱーです。
噂のノーコードで作れるWebサイト制作ツール「STUDIO」。
2022年3月に「バージョン2.0」として、フリープランでもCMSが1,000アイテムまで利用可能など大幅変更され、さらに利用しやすくなりました。
※STUDIO とは…
ノーコードでデザイン性の高いサイトが作れるWebサイト制作ツールです。
フリープランから有料プランまであり、フリープランでもかなり完成度のサイトを制作できます。
ちなみに今回はフリープランでのLP制作でした。
STUDIOに関して詳しくはコチラ。
STUDIO知識ゼロの状態でランディングページを制作し、先日無事納品完了しました！
さっそく今回制作させていただいたランディンページをご覧ください。
〈制作にあたって〉
素敵なヘアアクセサリーのお店に訪れている感覚になるようにアニメーションを設定しました。
商品の性質上、説明が多いのでモーダルを多く使っています。
STUDIOのフリープランで制作。
とてもステキな商品なので、私がヘアセットする機会があれば必ずやこちらの髪飾り使うことでしょう！
現在STUDIOで別案件のホームページ制作中です。
▶︎2022年6月にはなかとみ歯科さまのホームページをSTUDIOで制作しました。
▶︎2022年8月にヘアサロンrisさまオリジナルシャンプーラニアケアソープのLPをSTUDIOで制作しました。
（※ファーストビューに文字と画像が順番に出てくるアニメーションを使っています！）
▶︎STUDIOの「テンプレート」と「セクション」を使ったサイト作成の全工程の動画をYouTubeにUPしました！速度を速めているので短い動画です♪
▶︎こちらの記事もあとでチェック↓↓
ということで、今回はSTUDIOの知識ゼロからスタートしたランディングページ制作のすべてを、余すところなくお届けします！
０）まずはSTUDIO にアカウント登録
STUDIOの「無料ではじめる」からアカウント登録します。
登録後、ログインすると管理画面が開きます。
登録後すぐにチュートリアルがはじまり、わかりやすく丁寧な作りになっています。
１）STUDIO のYouTube公式チャンネルで学習
アカウント登録をした後、まずはSTUDIO でどういうことができるのかを知るためにYouTube公式チャンネルを見まくります！
STUDIOの管理画面からも閲覧できます。
【私が見た動画】
▶︎全編英語の動画を1.75倍速で一気見！
「まずはじめに」「デザインをはじめる」「デザイン機能紹介」「CMS」「公開」
英語なので字幕を見て学習したのですが、基本的なものなので全部1.75倍速で見ました。
後でライブで制作する動画も見るので、とにかく基本を知るためにガーッと集中して見ます。
▶︎STUDIOチュートリアルコース
STUDIOのMaayaちゃんが解説する チュートリアルコース 。Maayaちゃんが可愛くて癒されます！英語の動画を見たくない人はここから開始でもいいかもです。
今回はCMS機能は使っていないので、CMS関係の動画は見ていません。
（今制作中のサイトは使うのでこれから見ます！）
いっちゃさんという方のアニメーションの紹介１〜３がすごくタメになりました！
▶︎STUDIO Tips
こちらの STUDIO Tips もMaayaちゃんが可愛いTips解説動画です。
STUDIOでどういうことができるのか知っておくために全部見ました。
とりあえず上記の動画を１〜２日で見ました！
今改めて公式チャンネルを見たら「Pickup 動画」という良さげな動画がありました。（見逃してたっ！）
STUDIO で無料で使えるテンプレートでのサイト制作を初心者でもわかりやすいように作りながら解説しています。
テンプレートの写真変更のみで作りたい場合は、この動画見るのも良さそうです。
※私のMacBook AirではSTUDIO のエディター画面でコピペが使用できないため、テンプレートを使って制作ができません。
白紙から作ったサイトでも部分的にテンプレートをコピペして使えてとても便利なので、コピペ使える方はぜひテンプレートを取り入れてみてください！
（コピペできない理由はSTUDIO のチャットで問い合わせし、色々と対処しましたが解決せず原因がわからないままです涙…他のユーザーからも同様の問合せがあるそうですが現状は原因不明のままらしいです…涙テンプレ使いたいよお涙）
２）STUDIO 外部の特典動画で学習
公式チャンネルの動画を集中的に見た後、実際にゼロからサイトをライブで作っている動画を２本見ました。
２本とも、公式LINE登録の特典です。
▶︎マーケティングキャリア【公式】
マーケティングキャリアさんのTwitterで「LINE公式登録でSTUDIOサイト制作ライブ配信のアーカイブプレゼント」という企画がありました（確か…）。
アーカイブのページにはSTUDIOサイト制作以外にもマーケティングやLINE活用の無料動画があり、Web制作学習者にはすごく役に立つと思います。
こちらはSTUDIOのテンプレートを使用するバージョンでした。
▶︎codo-life の公式LINE
Web制作界の超有名人はらさんの codo-life 公式LINEに登録したらSTUDIOサイト制作ライブ動画が見られます。
６大プレゼントでSTUDIO制作動画以外にも特典がありましたよ！
こちらはテンプレートではなく白紙から作るバージョンでした。
テンプレの使い方や問合せページの使い方など細かい部分がわかりとてもためになりました。
※上記は私が学習した動画ですので、時期によっては特典がないかもしれません。登録する前に、事前にご確認ください。
特典でなくてもSTUDIOの制作動画は色々とあるようですので、自分にあった動画をチェックしてみてください！
それからSTUDIO公式のショーケースもチェックして、デザインの参考にさせていただきましょう！
▶︎STUDIOのショーケースはコチラ
３）STUDIO を使用してWebサイトを作ってみる
動画も見まくりましたし、ノーコードでサイトを作ってみたくてウズウズしてきましたね！！
さっそくSTUDIOの管理画面にログインしてサイトを作っていきましょう♪
実際に「Design Editor」（名称おしゃれ！）を触ってみるとわかると思いますが、STUDIOサイト制作で主に使用する”ボックス” の扱い方ほか、ちょっとクセがあったりします。
ほとんどは検索したりSTUDIOのチャット（この機能はほんとにすごい！）で解決すると思いますが、事前にわかっていると理解がスムーズと思いますので、私がつまづいた点を解説します！
３−１）制作中の注意ポイント
ポイントたくさんできてしまいましたので目次
◆ボックスの設定
STUDIOサイトは主にボックスを並べて作っていくのですが、ボックスの中にボックスとか、ボックスの中にテキストとか、ボックスの位置設定などが思うようにならない場合がよくあります。
「ボックスの中にボックス」
親ボックスの横幅を100%にして高さもちょっと広げると入りやすいです。その後、幅や高さを調整すればOK。
「ボックスの中にテキスト」
スルッと滑ってなかなか入らない場合があります。その場合は、まず先程の要領で「親ボックスの中に子ボックス」を入れてから、子ボックスの下にテキストを置きます。そして子ボックスを削除すればOK。
「ボックスの位置設定」
制作したセクションとセクションの間に他のボックス（セクション）を追加したい場合があると思いますが、これが結構うまくいかない。
そのときは、まずすぐ追加できる一番下にボックスを追加し、横のタブにある「レイヤー」で操作します。追加したボックスをレイヤー上で置きたい場所にドラック＆ドロップすればOK。
◆YouTube 埋め込み
iframeで埋め込みするのは超簡単なのですが、自動＆ループ再生させる設定がちょっとだけややこしかったので残しておきます。
STUDIO の公式解説ページ に自動＆ループ再生の埋め込みコードがありますので、「設定」→「埋め込みコード」にコピペします。それだけ！
STUDIOさんが作ってくれている埋め込みコードの「XXX」の部分は、設定したい動画の該当部分（公式解説ページに説明あります）に変更することをお忘れなく！
また、自動＆ループ再生はブラウザ版のみで、モバイル版では機能しません。
モバイル版には表示させないなども可能なので、サイトの用途に合わせて使用しましょう。
◆横スクロール
今回のLPのギャラリーに横スクロールを設定しています。
▶︎横スクロールの解説動画はコチラ（Maayaちゃん可愛い）。
が！！！
STUDIOの横スクロールはスクロールバーが出ないので、パソコンのタッチパッド、MacBookのトラックパッド、スマホやタブレットのタッチスクリーン（っていうんですかね）でのみ横にスクロールできます。
編集画面には横スクロールバーが出るので、間違わないよう要注意です。
今回は公開後に「PCでスクロールできない」とのご指摘を受け、すぐにブラウザ版は折り返し表示に変更。スマホ・タブレット版のみ横スクロールにしています。
「ブラウザ版はカルーセルで代用」と動画のコメントにありましたので、そっちでやってみるのもアリですね。
▶︎カルーセルの設定方法はコチラ（Maayaちゃん可愛い）。
◆「TOPへ戻るボタン」の固定
これはチャットで問合せて解決した件です。
TOPへ戻るボタンが最初に出てきてほしい場所（ページの途中）に設置し固定したところ、サイト内に設定したリンクやホバーなどがすべて機能しなくなりました。
ページの途中で固定すると、すべて上から覆っている状態になっているので、ボタンをフッター部分に設置し固定したら解決。
▶︎要素を画面や親ボックスからの距離で固定する解説はコチラ
ちなみに要素を固定したい時は「div（ボックス）」でないと固定ボタン出てきません。
img（画像）では配置設定ボタンが出てこなかったので、ボックスの中に画像を設定しました。
◆Androidで記号が表示される
サイトが完成してAndroidの画面をチェックしたところ、四角にバツの記号が表示されていました。
STUDIOのテキスト部分を見てみると、スペース？のような何かがあり、削除したら解決。
テキストをメモ帳にコピペしてみたら一行空いて改行されていました。
Androidで見てみるまでまったく気づかなかったので要注意です。
◆画像のAlt（代替テキスト）設定
画像のAlt設定はimgモードでのみ設定できます。
boxモードでは設定欄が出てきませんのでご注意。
３−２）公開時の注意ポイント
◆公開後正しくページが表示されない
すべての設定が終わり、満を辞して公開したら制作途中のページが表示されました（激焦！）。
原因は制作途中でコピーしておいたページが残っていたから。
STUDIOはオンラインでのみ制作できるので、バグで制作したページが消えるのを恐れてコピーして残しておいたのです。
デザインエディター画面の左に「ページ」というタブがあり、そこに制作途中でコピーしておいたページが残っているのがわかりましたので削除して解決。
４）クライアントのログイン
STUDIOもWordPressなどと同じように、クライアントとプロジェクト（管理画面）を共有できます。
方法は２パターン。
１）クライアントにSTUDIOのアカウントを作ってもらい、プロジェクトを作成。自分を招待してもらう。
２）自分でプロジェクトを作成。クライアントを招待し、オーナーを変更する。
▶︎メンバーの権限管理はコチラ
５）STUDIOサイト制作のお役立ち情報
▶︎「STUDIOデザインレシピ集」
はるかなさんによるSTUDIOデザインレシピ集。
これ便利すぎるし、STUDIOで作ったこのページ自体が可愛いぃ。
LP制作後に知ったので次回のデザインに使わせていただきます！
▶︎「STUDIO Animation」
SMARTCAMPさんによるSTUDIOのアニメーションとしてデフォルトで用意されているイージングの動きをまとめたサイト。ありがたい涙…これも制作後に知ったので、これから活用させていただきます！
▶︎「STUDIOでのサイト公開前の注意事項」
公開前に注意事項をチェックしましょう。
この記事内のSEOの設定場所がアップデートで変更になっていました。
「ページ設定パネル」と呼び方を変え、デザインエディタ内に移動。
スタイルバー右上の「ページ設定」をクリックです。
以上、「はじめてのSTUDIO 知識ゼロからノーコードでWebサイト制作」
私がLP制作で知り得たすべての情報を網羅しました！
追加情報ありましたら随時更新、Twitterでお知らせしますのでフォローしておいてください♪
Twitter：@YupparW
文章と画像でお伝えするのには限界があるので、本当はサイト制作しながら解説する動画を作りたかったのですが、なにせコピペ機能が使えないので参考にならないと思い、今回は記事のみです。
STUDIOは本当に手軽で簡単に高度な内容を設定できるので、全部STUDIOで制作したいとさえ思ってしまいます…
がっ！！
SEOの表示の問題もあるようなので、STUDIO無料版・有料版・WordPress、をサイトの性質によって使い分けていこうと思います。
それから！こうも簡単に作れてしまうと、Web制作者としてはデザイン力がモノをいう世界になりますね。
デザインの勉強しつつ経験を重ねて超優秀Webデザイナーになりましょうね〜！！
★感想ツイートいただけますと大変喜びます★
この記事でわからないことがあったらお気軽にDMください♪
Twitter：@YupparW
今までのはじめてシリーズ
