近年、スタートアップから大企業、官公庁に至るまで、多くの企業でノーコードツールのSTUDIOが活用されています。STUDIOは多くの機能を備えており、ノーコードでオリジナルデザインを実装できるのが1番の特徴です。

こちらの記事では、基本的に全ての制作案件でSTUDIOを活用している弊社が、STUDIOの基本的な使い方について解説します。記事内で細かい機能まで全てを解説することは難しいですが、STUDIOの使い方の全体像を抑えられるように、網羅的に使い方を紹介していますので、ぜひ参考にしてみてください。

ノーコードツールSTUDIOとは？

STUDIOとは、Webサイトを制作できる日本発のノーコードツールです。STUDIOは、かなり自由度の高いデザインを実装でき、制作後も運用しやすいため、スタートアップから大企業、官公庁に至るまで、数多くの企業で導入されています。

これまでは、本格的なWebサイトの多くがコーディングをして制作されてきました。しかし、近年では、STUDIOでも十分複雑なデザインや機能を実装することができ、制作後の運用もしやすいため、本格的なサービスサイトやコーポレートサイトでもSTUDIOが活用されるケースが増えています。

STUDIO導入のメリット・デメリットや、導入前に確認しておくべきことを資料にまとめました。STUDIOを活用したサイト制作をご検討中の方は、下記リンクよりぜひご覧ください。

※ 参考資料：STUDIOを活用するメリット・デメリット

STUDIOでできること・できないこと

STUDIOは、デザインの自由度が非常に高く、基本的なWebサイトに求められる要件は、ほとんど全て実装が可能です。細かい機能を挙げればきりがありませんが、STUDIOの主要な機能は下記の通りです。

• オリジナルデザインの実装

• CMSの構築

• レスポンシブ対応

• フォームの設置・運用

• 基本的なSEO対策

• 独自ドメインの接続

• 外部サービスとの連携

上記のようにSTUDIOではオリジナルデザインを実装でき、Webサイトに求められるほとんどの要件は満たすことができますが、一部実装できない機能も存在します。実装できない主な機能は下記の通りです。

• ソースコードを編集できない

• ページネーションを実装できない

• ログイン機能・決済機能を実装できない

• アコーディオンを実装できない

※ 参考記事：STUDIOでできること・できないことを徹底解説

STUDIOの使い方

デザインエディタとダッシュボード

ここからはSTUDIOの基本的な使い方について解説していきます。STUDIOでは、デザインの実装を行うデザインエディタと、公開設定やCMSの更新などを行うダッシュボードの大きく２つの管理画面があります。基本的にはデザイナーがデザインエディタを使ってサイトの実装を行い、運用者がダッシュボードからブログやニュースなどのCMSの更新、メンバー招待や公開設定を行うことができます。

ボックスレイアウト

STUDIOではボックスレイアウトが採用されています。ボックスレイアウトとは、ボックスレイアウトとは、1つのボックス内にさらなるボックスを配置し、それらを敷き詰めてデザインを制作する手法を指します。STUDIOのボックスには、通常のボックス、テキストボックス、画像ボックスなどがあり、これらを敷き詰める形でレイアウトを制作していきます。

ボックスレイアウトは、作業効率を向上させるだけでなく、生成されるコードが適切に構造化されるというメリットがあります。

デザインエディタの基本操作

ページ・モーダルの追加

新規ページやモーダルを作成するには、「ページを管理」から「追加」ボタンをクリックします。その後、追加したいページやモーダルの種類を選択することで作成できます。通常のページやモーダルだけでなく、CMSの動的ページ、検索ページ、リダイレクト設定やパスワードページも追加できます。

ボックスの追加

ボックスはサイドバーから追加できます。追加したボックスの大きさ、色、余白などは、画面上部のスタイルバーから編集できます。ボックスの種類には、セクション、通常のボックス、画像、テキスト、アイコンなどがあります。

さらに、外部サービスを埋め込むiframe、フォーム、カルーセルなどもボックスとして追加できます。利用できるボックスの一覧は、サイドバーの「追加」セクションから「ボックス」を選択することで確認できます。

ボックスの方向・配列

後述するグループ化やボックスの中にボックスを作成することで、複数のボックスをまとめた親ボックスを作成できます。ボックスの配列を変更したいときは、親ボックスを選択し、矢印のボタンから並び順を変更できます。また、矢印の左のボタンから、小ボックスの配置を変更できます。

表示

画面上部のスタイルバー左端の「表示」から、画面幅に応じたコンテンツの表示・非表示を切り替えられます。これは主に後述するレスポンシブ対応の際に利用します。たとえば、PC版ではヘッダーを表示し、スマホ版ではハンバーガーメニューを表示するなどの設定が可能です。

※ 参考記事：STUDIOでハンバーガーメニューを実装する方法を解説！

配置

スタイルバーの「配置」から、要素の固定位置、相対位置、絶対位置を切り替えられます。以下にそれぞれの配置について説明します。

相対位置

新たに追加したボックスはデフォルトで相対位置に設定されます。相対位置のボックスの配置は、他のボックスとの相対的な関係により決まります。この仕組みを活用し、親ボックスの方向や配列を設定することで、意図したレイアウトを実現できます。STUDIOでは、ボックスレイアウトに従って、基本的には、相対位置のボックスを組み合わせてコンテンツを制作します。

固定位置

ページ全体を含むベースボックス（ページを追加した際に自動的に生成されるボックス）直下に作成するボックスは、固定位置に設定できます。固定位置にしたボックスは、他のボックスの配置やスクロール位置に影響されず、画面上の一定の位置に常に固定されます。これは、例えばヘッダーなど、常に画面に固定表示させておきたいコンテンツなどに適しています。

絶対位置

絶対位置は親ボックスを持つ子ボックスに適用できます。絶対位置の子ボックスは親ボックスの最も近い辺からの距離を設定し、常に親ボックスを基準として、指定した位置に配置されます。相対位置とは異なり、他のボックスの配置に影響を受けません。

はみ出し

画面上部のスタイルバーの「はみ出し」から、親要素からはみ出した子ボックスの表示を設定できます。「はみ出し」「切り取り」「スクロール」の３種類の設定があり、それぞれの説明は下記の通りです。

はみ出し

 親ボックスからはみ出した要素をそのまま表示します。

切り取り

親ボックスからはみ出した要素を切り取り、親ボックスのサイズに合わせて表示します。

スクロール

親ボックスからはみ出した要素を切り取りますが、スクロールをすることで、切り取られた要素を表示させます。

重ね順

画面上部のスタイルバーの「重ね順」から、各要素の重ね順を設定できます。新規に追加したボックスの重ね順はデフォルトで0に設定されていますが、この値を変更することで、特定の要素を他の要素の上や下に表示させることが可能です。高い数値を設定したボックスは、他のボックスに比べて前面に表示されます。

マージン・パディング・ギャップ

画面上部のスタイルバーの「マージン」「パディング」「ギャップ」から、ボックス間の余白を設定できます。

マージン

ボックスの外側に余白を設定します。

パディング

ボックスの内側に余白を設定します。

ギャップ

親ボックスにギャップを設定することで、子BOX同士の余白をすべて均等に設定できます。

縦幅・横幅

画面上部のスタイルバーの「横幅」「縦幅」から、各ボックスの幅を設定できます。設定できる幅の単位は、ピクセル（px）、パーセント（％）、オート（auto）、フレックス（flex）、vhの５種類のいずれかで設定できます。

ピクセル（px）

ピクセル単位で固定の幅を設定します。画面幅が設定したピクセル幅よりも大きい場合、設定値の幅が保たれます。しかし、画面幅が設定値以下になると、画面幅に合わせてボックスの幅も小さくなります。

パーセント（％）

親要素の幅に対する割合で幅を設定します。例えば、2カラム表示を作成する場合、各子要素の幅を50%に設定することで可能です。

オート（auto）

ボックスは子要素の幅に合わせて自動的に幅が設定されます。これは、子要素が親要素からはみ出すことを防ぐのに便利です。

フレックス（flex）

子要素間の幅の比率を設定します。例えば、横幅が1000pxの親要素に対して、3つの子要素のflexを2:1:1と設定すると、各子要素の横幅はそれぞれ500px, 250px, 250pxになります。

vh

ブラウザウィンドウ（ビューポート）の高さを基にした長さを設定します。1vhはビューポートの高さの1%に相当し、100vhに設定すると常に画面の高さ全体を占めるように表示されます。

透明度

画面上部のスタイルバーの「透明度」から設定できます。透明度は0（完全に透明）から1（完全に不透明）の範囲で設定できます。

色

ボックスとテキストの色はそれぞれ別に設定できます。

ボックスの色

画面上部のスタイルバーの「ボックス」内の「塗り」からボックスの色を設定します。色はカラーグラフから選択するか、カラーコードを直接入力することで設定できます。また、グラデーションを設定することもできます。

テキストの色

画面上部のスタイルバーの「テキスト」の中の「色」からテキストの色を設定できます。ただし、ボックスの色とは異なり、グラデーションの設定はできません。

枠線

画面上部のスタイルバーの「枠線」から設定できます。各辺の枠線の有無や太さは、個々に設定可能です。さらに、枠線の種類や色も自由に選択することができます。

シャドウ

画面上部のスタイルバーの「シャドウ」から設定します。「X」「Y」の値により、上下左右の影の方向を調整することができます。「Blur」では影のぼかし具合を、「Spread」では影の広がりを設定することができます。さらに、「inset」にチェックを入れることで、ボックスの内側にシャドウを設定することが可能です。また、頻繁に使用される4種類のシャドウが事前に用意されており、これらを選択することもできます。

リンク

リンクを設定したいボックスの詳細設定から指定します。設定パネルのリンクの＋をクリックすることで、ボックスのリンク先を指定することができます。リンク先は、ウェブサイト内部の別ページ（内部リンク）やウェブサイト外部の別ページ（外部リンク）を指定することができます。さらに、「新規タブで開く」をオンにすると、リンクをクリックしたときに新しいタブでリンク先を開く設定に変更することが可能です。

リッチテキスト

リッチテキストはサイドバーのボックスから追加できます。リッチテキストは、通常のテキストボックスよりも豊かな表現力を持つテキスト形式の一つです。リッチテキストでは、太字、斜体、イタリック、下線、リンク、打ち消し線などの設定ができます。また、リッチテキストを活用すると、文中の一部だけにリンクを設定したり、色を変更したりすることができます。詳しい設定方法は、STUDIO公式のこちらの記事をご覧ください。

ただし、リッチテキストを使用するとページの読み込み速度に影響が出る可能性があるため、特別なスタイルを適用したい場合や、本文の一部だけにリンク先の設定やスタイルの変更を行いたい場合に限定して使用することをお勧めします。

グループ化

グループ化とは、複数のボックスをまとめて新たな親ボックスを作成することを指します。サイトを制作する際に、ボックスの配置や並び順を変更したり、全体の幅を設定する必要がある場合には、このグループ化が非常に便利です。BOXを複数選択(Shift を押しながらBOXを選択)した状態で、右クリックし「グループ化」をクリックします。ショートカットは、⌘（Command）+ Gです。逆に、⌘（Command）+ Shift + Gを入力すれば、グループ化を解除できます。

グループ化は便利な機能ですが、必要ないときに過度に使用すると、ボックスの階層構造が複雑になり、SEOに悪影響を及ぼすことがあるため注意が必要です。

リスト化

リスト化とは、同じレイアウトのボックスを簡単に追加、編集できる機能です。同じレイアウトを使用するコンテンツではリスト化を活用することがおすすめです。これにより、レスポンシブ対応の手間を大幅に削減できます。

ボックスを選択した状態で、右クリックし「リスト化」を選択します。ショートカットは、⌘（Command）+ Lです。リスト化されたボックスは枠線が緑色に変わります。なお、リスト化されたボックスは同じレイアウトを保つため、一つのボックスで操作した内容は、リスト化された全てのボックスに反映されます。

リストアイテムの編集

リスト内の各アイテムのテキスト、画像、URLはプロパティとして管理できます。リスト全体のボックス（ul）の設定パネルから、各プロパティとデータの追加や編集ができます。

プロパティの紐付け

リスト全体のボックスの設定パネルで設定したプロパティをリスト内の各ボックスに紐付けることで、プロパティの内容を反映できます。プロパティの紐付けができていない場合、一つのアイテムでテキストや画像を変更すると、その変更内容が全てのボックスに反映されてしまいます。プロパティの紐付けは、リスト内の任意の一つのアイテムを選択し、テキストや画像にリストのプロパティを設定することで紐づけられます。

シンボル化

シンボル化は、共通のパーツ（例：ヘッダーやフッター）を一元管理するための機能です。この機能を利用せずにコピー&ペーストで共通パーツを使いまわすと、修正が必要な場合に全ての箇所で作業を行う必要が出てきます。しかし、シンボル化を行えば、一箇所での修正がシンボル化されたすべての要素に反映されます。これによりメンテナンスが容易になります。

シンボル化したいコンテンツは、右クリックし「シンボル化」を選択します。ショートカットは、⌘（Command）＋Jです。シンボル化を解除したい場合は、⌘（Command）＋Shift＋Jで解除できます。シンボル化したパーツは、名前をつけて管理でき、サイドバーのシンボルからいつでも確認ができます。

レスポンシブ対応

レスポンシブ対応とは、ウェブサイトのデザインが、さまざまなデバイスや画面サイズに適応し、見やすく表示されるように調整することです。STUDIOではデフォルトで3つのブレイクポイント（画面の幅やデバイスのサイズに応じてデザインやレイアウトが変化するポイント）が設定されており、最大で5つまで設定できます。

STUDIOのレスポンシブ対応は、細かい設定が必要になるため、注意が必要です。ご自身の端末では綺麗に表示されていても、他のデバイスでは表示が崩れている場合があるため、公開する前に全ての画面幅で表示が崩れていないかは最低限確認するようにしてください。STUDIOのデザインエディタ上で、下記のように画面幅を変えて表示を確認することができます。

レスポンシブ対応のやり方やコツなどは、下記の参考記事で詳しく解説しているので、あわせてご覧ください。

※ 参考記事：STUDIOのレスポンシブ対応の基本とコツを徹底解説！

アニメーション

STUDIOでは、マウスカーソルが特定の要素の上に移動したときに動作するホバーアニメーションや、ページやコンテンツが表示される時に動作する出現時アニメーションの２種類を設定できます。トランジション、トランスフォームといった設定を組み合わせることで、一般的なWebサイトに求められるアニメーションは十分に実装ができます。

弊社で制作した以下のサイトでは、TOPページに、ロゴを全面に表示し、その後にファーストビューが現れるようなアニメーションを実装しています。ファーストビューでは、写真がふわりと切り替わるアニメーションを実装しています。また、左下のスクロールアニメーションは、ループ表現のため、gifで実装しました。

事例の紹介はこちら

アニメーションの細かい設定方法やその他の事例などは、以下の参考記事で詳しく解説していますので、あわせてご覧ください。

※ 参考記事：STUDIOのアニメーションの基本からポイントや事例までを徹底解説！

ライブプレビュー

STUDIOでは、公開前に編集したサイトがどのように表示されるかを確認できるライブプレビュー機能があります。ライブプレビューでは、編集した内容が正しく表示されているかや、レスポンシブ対応ができているかを確認するのに役立ちます。ライブプレビューは編集した内容がリアルタイムで反映されるため、複数人でプレビューを確認しながら、作業を進めることもできます。

ライブプレビューは、画面右上のライブプレビューから確認できます。サイトを公開または更新する際には、PCやスマホなど、複数のデバイスでライブプレビューを確認してから進むようにしましょう。

バージョン管理

バージョン管理機能は、デザインエディタの編集履歴を保存するものです。編集箇所と編集者の情報が記録されるため、チームでの作業にも非常に便利です。変更内容は一定期間ごとに自動で保存され、履歴として保存されますが、手動でバージョン履歴を追加することも可能です。バージョン履歴は、デザインエディタの「ページ設定」の履歴タブから確認し、必要に応じて復元することができます。そのため、デザインエディタを編集する際は、念の為、手動でバージョン履歴を残しておくと、いつでも編集前の状態に戻せるので安心です。

SEO

STUDIOはSEO対策に弱いのではないかと不安に感じる方もいるかもしれませんが、STUDIOでも十分にSEO対策が可能です。

サイト設定・ページ設定

デザインエディタのページ設定から、サイト全体と各ページのタイトル、説明文、ファビコン、カバー画像を設定できます。さらに、サイトの非公開設定やno indexの設定（検索エンジンにはインデックスされないようにする設定）も行うことができます。これらのタイトルや説明文は検索エンジンで表示されるため、必ず設定しましょう。

HTMLタグの設定

STUDIOのデザインエディタ上で各ボックスにHTMLタグを設定できます。こちらもSEOに影響を与えるため、必ず設定しましょう。設定できるタグは下記の通りです。

404ページの制作

404ページとは、サイト内で存在しないURLへとユーザーが遷移した際に表示させるページのことを指します。404ページを特に設定しない場合は、STUDIOのデフォルトの404ページが表示されます。404ページでユーザーが目的とするサイトへと誘導してあげることでサイトの利便性が向上するため、こちらも独自のページを制作しましょう。

詳しい設定内容はSTUDIO公式のこちらの記事で解説されています。

サイトマップの送信

サイトマップとは、サイト全体の構造を示すファイルのことです。STUDIOでは、検索エンジン向けのXMLサイトマップが自動で生成されるため、簡単に設定することが可能です。STUDIOのダッシュボードから、サイトマップのON/OFFを選択できます。生成したサイトマップは、Google Search Consoleに送信しましょう。

画像の代替テキスト（alt属性）の設定

画像の代替テキスト（alt属性）とは、サイト上の画像を表すテキストのことを指します。これは、画像や動画が表示されなかった場合、または音声ブラウザでサイトを訪れた場合などに活用されます。この設定もサイトの使いやすさを向上させる役割を果たすため、意味のある画像には必ず設定しましょう。

代替テキストは、STUDIOのデザインエディタ上で、imgタグで設定された画像を選択することで設定可能です。

STUDIOで設定すべき項目や詳しい設定方法については、以下の記事で解説していますので、あわせてご覧ください。

※ 参考記事：STUDIOはSEOに弱い？STUDIOで設定すべきSEO対策一覧

CMS

STUDIOのCMSはその使い易さと機能性が特徴的です。ダッシュボードは非常に洗練されており、初めての方でも直感的に編集や更新が可能となっています。また、リアルタイムでの共同編集が可能なため、複数人での作業も効率的に行えます。さらに、WordPressからのCMSアイテム移行機能も提供されているため、既存のWordPressサイトからの乗り換えも簡単に行うことができます。

CMSの基本的な仕組み

STUDIOのCMSは、以下の4つの要素を組み合わせて実装できます。各要素の詳しい説明や使い方は、こちらの記事で解説しておりますので、あわせてご覧ください。

• モデル

• アイテム

• プロパティ

• コレクション

CMSでコンテンツを入稿する方法

STUDIOのCMSはダッシュボードからアクセスできます。管理画面はわかりやすく誰でも簡単にコンテンツの入稿や更新が可能です。実際のアイテムの更新方法やエディタの使い方については、以下の参考記事で解説していますので、あわせてご覧ください。

※ 参考記事：STUDIOのCMSの特徴と機能を徹底解説！

外部サービス連携

STUDIOは多くの外部のアプリケーションとの連携にも対応しており、本格的にサイトを運用していきたい企業でも十分に活用できます。Google AnalyticsやGoogle Search Consoleなどのアクセス解析ツールはもちろん、広告を運用する際のコンバージョンタグの設置やカスタマーサクセスツールとの連携にも対応しています。また、ヒートマップツールなど連携に対応していないサービスでも、Google Tag Managerでの連携に対応している外部サービスは連携することができます。連携可能なアプリケーションは以下の通りです。

▼ STUDIOと連携できるApps一覧

• Google Analytics

• Google Tag Manager

• Google Search Console

• Google reCAPTCHA v3

• Facebook Pixel

• HubSpot Tracking(Beta)

• Intercom

• チャネルトーク

外部サービスとの連携は、ダッシュボードのホームタブから「Apps」を開くと連携ができます。各サービスとの連携方法は、ダッシュボード上のヘルプから確認できます。

外部サービスの埋め込み

STUDIOでは、さまざまな外部サービスをサイト内に埋め込むことも可能です。主に以下のサービスがサイト内に埋め込み可能です。さらに、iframeタグを発行できる外部サービスであれば、STUDIOに簡単に埋め込むことができます。

埋め込みは、デザインエディタのサイドバーの追加タブから、埋め込みを選択し、埋め込みたいサービスをドラック＆ドロップで追加できます。埋め込んだボックスは、通常のボックスと同様に、幅などを自由に設定できます。

また、埋め込みのタイプを「Custom」に設定し、埋め込みコードにiframeタグを設定することで、リストにないサービスでも埋め込むことが可能です。ただし、一部のサービスでは動作が安定しない場合があるため、実際に埋め込む前に動作確認を行うことをおすすめします。

※ 参考記事：STUDIOに埋め込める外部サービス一覧〜動画やSNSから日程調整まで〜

フォーム

STUDIOのフォーム機能では、デザインエディタ上で、下記のパーツを自由に組み合わせることでフォームを作成できます。

• 短めのテキストボックス（input）

• 長めのテキストボックス（Textarea）

• セレクトボックス（Select）

• ラジオボタン（Radio）

• 単体チェックボックス（Confirm）

• 複数チェックボックス（Checkbox）

• ファイルアップロード（File）

• ボタン（Button）

また、ボックスの詳細設定から、フォームの送信を管理するためのフォーム名やフォーム送信後に遷移させるサンクスページを設定できます。

フォーム入力内容の確認

フォームからの送信があった場合、STUDIOのダッシュボードからそれぞれのフォーム名に基づいて入力内容を確認することができます。同じ名前を複数のフォームに設定することで、別ページに置いているフォームの送信内容も、一覧で見ることが可能です。

さらに、ステータス管理機能や入力内容の検索機能、リスト表示項目の編集機能などもあります。これらを使うことで、多くのお問い合わせにも確実に対応できます。

通知と自動返信メール

フォームから送信があった場合、設定したメールアドレスに通知を受け取ることができます。通知先のメールアドレスや通知メールのタイトルは、ダッシュボードの設定画面から自由に変更できます。これにより、チーム内での運用もスムーズに行うことが可能です。

STUDIOの基本機能では、フォームが送信された際に、自動返信メールを設定することはできませんが、Zapierを利用することで自動返信メールを実装できます。ただし、別途Zapierの料金が発生する場合があるため、注意が必要です。Zapierと連携して自動返信メールを実装する方法は、以下の参考記事で解説していますのであわせてご覧ください。

※ 参考記事：STUDIOのフォーム機能を徹底解説！Zapierの自動返信設定から埋め込み可能なツールまで

メンバー

ダッシュボードのホームタブのメンバーから、メンバーの追加や権限の変更ができます。「メンバーを招待」からメールアドレスを追加すると、招待メールが届きプロジェクトに追加されます。

また、各メンバーの権限についても各メンバーのカードから変更できます。下記の４つの権限が設定でき、多くのメンバーでの運用もしやすいです。各権限の詳細は、STUDIO公式の記事をご覧ください。

• オーナー

• お支払いオーナー

• 編集者

• ライター

プラン・お支払い

プランの変更や支払い方法の設定は、ダッシュボードの「プラン・お支払い」から行うことができます。「お支払いオーナー」権限を持つメンバーだけがこれらの設定を変更できます。

※ 参考記事：【2023年最新】STUDIOの料金プランまとめ-連携可能な外部サービスの料金まで

公開

STUDIOでは、画面右上の公開から、ワンクリックでサイトを公開できます。ただし、独自ドメインでサイトを公開する場合は、事前にDNSの設定変更やTLS証明書の発行などの手続きが必要になり、数時間〜1日程度時間がかかります。独自ドメインの接続方法は下記の記事で詳しく解説していますので、あわせてご覧ください。

※ 参考記事：STUDIOで独自ドメインのサイトを公開する手順と注意点を徹底解説！

STUDIOで作られたサイト事例

実際に弊社がSTUDIOの機能を活用して制作したサイト事例をご紹介します。CMSを用いて本格的に運用をしているサービスサイトから、デザインやアニメーションにもこだわったコーポレートサイトまで様々なサイトをSTUDIOで実装可能です。

NOROSHI Partnersサービスサイト

弊社が運営するNOROSHI PartnersのサービスサイトもSTUDIOで実装されています。STUDIOのCMSを活用して、ご覧いただいているブログ記事や、制作実績、ニュースなどを運用しています。

大谷石のカネホンコーポレートサイト

日本遺産にも登録されている採石場の壮大な風景や、KANEHONのものづくりへのこだわりを海外の方にも体感してもらえるよう、Vimeoと連携し背景動画を用いたダイナミックなサイトをSTUDIOで実装しました。また、英語との言語切り替え機能も実装しました。

制作実績詳細はこちら

ペネトレイトコーポレートサイト

不動産総合ソリューションを提供されているペネトレイト様のコーポレートサイトのデザインからSTUDIO実装までを担当しました。こちらのサイトもSTUDIOを活用することで約1ヶ月程度での公開を実現しました。

制作実績詳細はこちら

※ 参考記事：STUDIOで作られたサイト事例紹介！

STUDIOの学習期間は？

STUDIOの学習期間は、コーディングの知識の有無や個々の適性によって異なりますが、基本機能を全て習得するにはおおむね1ヶ月から3ヶ月程度が必要になります。ただし、細かいレスポンシブ対応や、複雑なデザインの実装ができるようになるためには、基本機能に加えて多少の専門的な知識や経験が必要になります。

また、Webサイトを１から構築するには、STUDIO実装前に、ワイヤーフレームやデザインの制作が必要になります。STUDIOでの制作に対応している制作会社もあるため、短期間で質の高いWebサイトを作りたい場合は、制作会社への依頼を検討しましょう。弊社でもSTUDIOを活用したサイト制作に対応しているので、お気軽にご相談ください。

サービスページを見る↗️

また、STUDIOではデザインやレイアウトを崩さずに、ライティングや画像のみを変更するコンテンツ編集モードも用意されています。そのため、非デザイナーの方が、大枠の使い方を覚えて、サイトの簡単な修正や運用を行うことは容易にできるのがSTUDIOを活用するメリットの一つです。そのため、最初の制作はプロのデザイナーや制作会社に依頼し、その後の運用をご自身で行うのもおすすめです。

※ 参考記事：STUDIOの制作代行会社は必要？制作会社に依頼するメリット・デメリット

STUDIOの使い方の学習方法

STUDIOの使い方を本格的に学ぶには、まずはSTUDIO公式のYouTubeがおすすめです。STUDIOのトップページには「使い方を学ぶ」セクションがあり、そこには基本的な使い方を解説する動画や記事がまとめられています。

基本的な操作方法を学んだ後は、STUDIOを使って、実際のWebサイトを制作してみましょう。複雑なデザインの実装やレスポンシブの設定には、多少の専門的な知識や経験が必要になりますが、簡単なデザインであれば基本操作を学んだだけでも十分に実装が可能です。

STUDIOの使い方を完全にマスターすれば、オリジナルデザインを自由に実装できます。一部STUDIOでは実装できない機能は存在しますが、本格的な企業サイトや大規模なサイトにも十分に活用できます。

まとめ

STUDIOは、デザイナー向けのデザインエディタと、管理者向けのダッシュボードが分かれており、チームでも運用がしやすいツールです。制作会社や社内のデザイナーがサイトを制作した後も、マーケティング担当者が簡単な修正を行うことができる点も非常に便利です。LPやサービスサイト、コーポレートサイトなど、新規でのサイト制作を考えられている方は、ぜひSTUDIOを活用してみてください。