Studioのコンポーネント機能の使い方｜メリット2選も解説
Studioのコンポーネント機能は、サイト制作する方にとって必修科目といえます。
制作スピードが格段に上がるだけでなく、更新ミスや抜け漏れなどを防止することに繋がります。
そこで今回はStudioのコンポーネント機能の使い方、そして使用するメリットについて詳しく解説していきます。
「Studioの使い方がまだイマイチわかっていない、、、」という方は、以下のマニュアルも参考にしてみてください。
Service
【最安15万円〜】
全てセット料金のホームページ制作サービス
サイト企画〜公開まですべてセット料金になっており、「余計な料金は一切いただかない」というのをモットーにしています。
最安15万円〜からホームページが作れて、すべてオリジナルデザインで制作可能です。また自社管理できる「Studio」というツールを用いているので、プランによっては維持費0円で運営できます。
期間限定で制作費用の3万円割引キャンペーンもやっていますので、ぜひお気軽にご相談ください！
Studioのコンポーネント機能とは
Studioのコンポーネント機能とは、「一度作れば何度でも使えて、まとめて編集できる便利パーツ」です。
サイトでは何度か使いたいセクションが必ずあります。具体例を挙げるなら、下記のとおりです。
- ヘッダーやフッター
- お問い合わせボタン
- 料金プランの一覧
- よくある質問コーナー
毎度フッターを作るのは面倒ですよね。そんな時に大活躍なのがコンポーネント機能です。
例えばフッターをコンポーネント化すれば、ワンクリックで同様のフッターを作成できます。そして驚くべきは編集した内容が、すべてのフッターに反映されるということです。
Kajiコンポーネント化されたフッター2つを編集したのが、以下の動画です！「お問い合わせ」→「お問い合わせしよう！！」に変更したら、両方とも反映されています！
コンポーネント機能を利用するメリット
コンポーネント機能を利用するメリットは、下記の2点です。
- 制作スピードが早くなる
- 更新ミスや漏れの防止になる
それぞれ具体的に説明します。
制作スピードが早くなる
メリット1つ目は、サイトの制作スピードが早くなることです。
なぜならコンポーネント機能を使えば、一括編集が可能になるからです。
例えば、ヘッダー部分に修正が発生した場合、普通ならヘッダーの個数分だけ修正をやらなければなりません。ですがコンポーネント化をしていれば、一つのヘッダーを編集するとすべてのヘッダーに変更内容が適用されます。
1枚型のホームページであれば恩恵はあまりないかもしれませんが、複数ページになってくるとコンポーネント化は最大の武器になります。
2ページ以上のホームページを作る方は、基本的にコンポーネント化を使用するようにしましょう。
更新ミスや漏れの防止になる
メリット2つ目は、更新ミスや漏れの防止になることです。
先ほども伝えたとおり、コンポーネント化されたアイテムを編集すれば、自動的にすべてに反映されるからです。
仮に、50ページ型のホームページがあれば、ヘッダーやフッターは同様に50個必要です。それをすべて手動で修正していたら、どこかで修正ミスをしたり、更新漏れが発生することは想像に難くありません。
ですがコンポーネント化をしていればサクッと編集が終わるだけでなく、ミスもなるべく減らせます。なのでコンポーネント化はなるべく早いタイミングで習得しておきましょう。
Studioでコンポーネントを使用する方法
コンポーネント機能を利用する手順は、一般的には下記のとおりです。
それぞれ具体的に説明します。
コンポーネントを作成する手順
コンポーネントを作成する手順は、下記のとおりです。
- コンポーネント化したいボックスを選択して右クリック
- 「コンポーネント化」をクリック
- 管理名をつけて、プロパティを登録して、「コンポーネントを作成」をクリック
画像をもちいて、各手順ごとに説明していきます。
①コンポーネント化したいボックスを選択して、右クリックします。
②「コンポーネント化」をクリックします。
③管理名をつけて、プロパティを登録して、「コンポーネントを作成」をクリックします。
Kaji今回はフッターをコンポーネント化するので、管理名は「フッター」にします！
コンポーネント化すると一部のフッターを編集すると、すべてのフッターに編集内容が反映されてしまいます。ですがプロパティを登録していれば、すべてのフッターに反映されることなく、編集したフッターだけに反映させることができます。
例えば、上記の例では「施工事例」の部分をプロパティに登録しているので、一部のフッターだけ「施工事例」のメニュー項目を「お客様の声」などに変更できます。
コンポーネントを複製する手順
コンポーネントを複製する手順は、下記のとおりです。
- 左側のメニューを開く
- 「追加」→「コンポーネント」をクリック
- 複製したいコンポーネントをドラッグ&ドロップ
画像をもちいて、各手順ごとに説明していきます。
①左側のメニューを開きます。
②「追加」→「コンポーネント」をクリックします。
③複製したいコンポーネントをドラッグ&ドロップします。
コンポーネントを解除する手順
コンポーネント自体は残しておきたいけど、一部パーツだけコンポーネントの縛りから抜け出したい時は「コンポーネントの解除」がおすすめです。
ではコンポーネントを解除する手順について、詳しく解説していきます。
①コンポーネント解除したいボックスを選択します。
②右クリックして、「コンポーネント解除」をクリックします。
これでコンポーネント解除は完了です！
コンポーネント解除できているかを確認するために、一部のテキストを変更してみましょう。
Kajiコンポーネントが解除されていれば、テキストを変更しても他のコンポーネント部分には反映されません！
コンポーネントを削除する手順
不要になったコンポーネントは削除しておきましょう。
コンポーネントを削除する手順は、下記のとおりです。
①左側のメニューを開きます。
②「追加」→「コンポーネント」をクリックします。
③「×」ボタンをクリックします。
コンポーネント削除は完了です！
Studioのサイト制作は「Terace」にお任せ！
当メディアを運営する私達は、Studioの制作代行サービス「ラク子」を運営しています。
Kaji「デザイナー」と「フロントエンジニア」のフリーランス3名で運営しています！
- ポッキリ価格でホームページを制作できる
- 専属デザイナーが完全オリジナルのデザイン作成
- 納品後1ヶ月間は無料の電話サポートあり
- 自社更新できるホームページが作れる
- ホームページ制作期間中は何度でも無料相談できる
- 顔の出ているフリーランス3人が運営
- 維持費0円でホームページを運営できる
料金プランは、以下の通りです。
ポッキリ価格でホームページが作れるサービスであり、個人事業主や中小企業からよく選ばれています。サービス利用者の声を聞きたい方は、ぜひ以下のインタビュー記事をご覧ください。
今だけ、毎月3組まで制作費用が3万円割引になるキャンペーンを行っています。
先着順で締め切るので、気になる方はぜひお早めにお問い合わせください！
ebook
【無料のお役立ち資料】
初ホームページ制作のよくある質問集
ホームページ制作に関するよくある質問14選にすべて答えています。
「自作するべきなのか」か「Web制作会社に任せるべきか」など、これまでホームページ制作をやっていく中で1番よく受けた質問を厳選しています。
無料でダウンロードできるので、これからホームページを作成する予定の方はぜひ参考にしてみてください！
