【Studio】コンポーネントの作成から配置までの基本解説

Studioで複数ページのサイトを作っていて、ヘッダーに修正を入れる必要が出てきたとします。

もし普通のブロックで作っていた場合、同じ修正作業を5回繰り返すことになり、面倒で非効率ですよね。

この悩みを解決できるのがコンポーネントという機能です。

本記事では、Studioのコンポーネントの基本について解説します。

コンポーネントとは

コンポーネントとは、繰り返し使う要素を共通パーツとして登録し、まとめて管理する機能です。

ヘッダーやフッターといった、サイト全体で同じ見た目や内容を保ちたいパーツで使います。

一度登録したら、あとはサイトの好きな場所に配置するだけ。

便利なのが、登録したコンポーネントの内容を変更すると、配置したすべての場所に自動で反映されるところです。

サイトのページが多いほど、ヘッダーやフッターに一箇所修正があるだけで大変だったり修正漏れが出たりしますが、コンポーネントを使えばその心配はなくなります。

ひとつ注意しておきたいのが、コンポーネントはあくまでもプロジェクト内で共有されるということ。

テンプレートとは少し意味が違い、同サイト内での使用しかできません。

グループとの違い

コンポーネントもパーツをまとめるという意味ではグループと同じですが、そのまとめたグループを使い回すことができます。

グループ化は複数のパーツを一つのボックスにまとめるだけで、他のパーツには影響しません。

一方、コンポーネントはサイト全体で共有されるので、同じサイトであれば、どのページからでも呼び出せて、編集すれば全てに反映されます。

そうして聞くと、全部コンポーネントにすれば良いかと思うかもしれませんが、管理が大変になり、編集のテンポも悪くなります。

なので、基本的にはグループを使い、ここぞというときにコンポーネントを使えば良いでしょう。

作成から配置までの手順

コンポーネントの作り方については、ほぼグループと同じです。

複数のパーツを選んで、右クリックメニューから「コンポーネント化」を選ぶかショートカットキーのCommand + J(Ctrl + J)を押すだけです。

ここからが少し違い、管理名を入力する画面が表示されます。

入力する名前は、後から一覧で見たときに「ヘッダー」「CTAボタン」のように用途が分かる言葉にしておきましょう。

コンポーネントの配置

デザインエディタ左のアイコンボタンをクリックすることで、コンポーネントパネルが開きます。

そこには作成済みのコンポーネントが一覧で表示されるので、配置したいものを選びましょう。

パーツ同様に、画面上へドラッグするか、クリックするだけで配置されます。

同じものを何度でも配置可能で、サイトに配置したコンポーネントを消しても登録されたものは残るので、あまり気にせずに扱っても問題ありません。

編集モードで中身を編集する

中身を編集するには、ダブルクリックまたは選択後にEnterで編集モードに入ります。

編集モードでは、通常のボックスと同じようにテキストや色を変更したり、パーツを追加したりできます。

そして、何度も言いますが、編集した内容は全ての場所に反映されます。

慣れていないと、何気なく加えた修正が全てのページに広がってしまうという事故も起こってしまうので、配置と違って編集は気をつけて行いましょう。

コンポーネント化に向くパーツ・向かないパーツ

特徴や使い方は分かったけれど、実際どのようなところで使えばいいのかと疑問に思う方もいるでしょう。

迷ったときの基準は、2ページ以上で使うかどうかです。

ヘッダー、フッター、ナビゲーション、CTAのように、サイト全体で共通するパーツなどが分かりやすいです。

それ以外のボタンや見出しといったパーツも、ページをまたいで繰り返すならコンポーネント化する価値があります。

逆に、そのページにしか出てこない要素は無理にコンポーネント化しなくて構いません。

もちろん、同ページ内で繰り返す場合も使えますが、同ページであれば修正の手間や漏れといったリスクも下がるので、そこまで必須というほどではないと思います。

最初はあまり深く考えずに、ヘッダーやフッター専用の機能のような感じで割り切って使うだけでも十分です。

まとめ

コンポーネントは登録とか編集モードとか、なんだか難しそうな雰囲気が漂っているので敬遠しがちですが、割と簡単に使えて、かつ便利な機能です。

大規模なサイトになるほど、その恩恵も大きいので、積極的に使って慣れておいて損はないでしょう。