【Studio】【初心者向け】知っておきたい基本パーツの種類と役割

Studioはノーコードでも魅力的なサイトが作れますが、そのためにはパーツの種類や役割を把握する必要があります。

本記事では、Studioのパーツの種類と役割について簡単に解説します。

基本パーツ

デザインの土台となるパーツです。

Section：ページを縦に区切るブロック。コンテンツをまとまりごとに整理するために使う

Box：要素を入れ子にして並べるための箱。区切り線や、絶対位置で自由なレイアウトを組むときにも使う

Image：画像を配置するためのパーツ

Text：テキストを表示するパーツ

Icon：アイコンを配置するパーツ

RichText：部分的にデザインを変えられるテキストパーツ

Video：動画を配置するためのパーツ

個人的には「Rich Text」と「Video」以外のパーツは全体的によく使います。

テンプレートパーツにはないことをやろうとすると、これらのパーツを組み合わせる必要があるので、基本とはいいながら最も重要なパーツでもあります。

埋め込み

BlankはHTML・CSS・JavaScriptなどのコーディングを埋め込むためのパーツ、
他は外部サービスのコンテンツなどをページ内に表示できるパーツです。

Google Map、YouTube、各種SNSなどは標準パーツとして、他のサービスも埋め込みコードが提供されているサービスであれば、Blankパーツを利用すれば可能だと思います。

また、Blankを使ってコーディングで作ったパーツを追加することもできます。

動作に不具合があってもサポートが受けられないので、あまり頻繁に使う方法ではありませんが、Studioでは実装が難しいこともコーディングでは出来る場合が多いので、最終手段として覚えておくと良いでしょう。

インタラクション

動きのあるパーツです。

カルーセル：複数のコンテンツを横にスライドして表示するパーツ。

トグル：クリックで開閉できるパーツ。FAQやアコーディオンメニューに向いている。

ビデオリッチボタン：ボタン付きの動画パーツ。

ループボックス：コンテンツが自動で流れ続けるパーツ。

基本パーツだけでは難しいようなことができるパーツです。

最初は扱うのに多少苦戦すると思いますが、使えると表現の幅が増えるので、チャレンジする価値はあります。

フォーム

問い合わせフォームを作成できるパーツです。

ある程度の項目がセットになったものから、細かいフォームパーツまで用意されているので自由度は高めです。

フォームパーツも充実しているので、困ることはないと思います。

こちらも扱いが少し難しいですが、Studioのサービス内で問い合わせフォームまで完結してくれるので、外部サービスを使う理由がなければパーツを使って作ることをオススメします。

まとめ

Studioのパーツは種類ごとに役割がはっきり分かれているので、それぞれの用途を把握しておくだけで制作がスムーズに行えるようになります。

まずは実際に色々触ってみて、パーツごとの特徴や使い方を頭に入れておきましょう。