コラム【No-code編】 Studioとは- Xux Webzine【クスクスウェブマガジン】Webデザイン参考ギャラリー

Ｓｔｕｄｉｏとは？

ＨＴＭＬ／ＣＳＳなどのコードを書くことなく、直感的なドラッグ＆ドロップでウェブデザインから公開までで行う事の出来る、日本発の強力なノーコードＷｅｂ制作プラットフォームです。デザインツールのＦｉｇｍａやＸＤのような感覚で使う事が出来ます。従来のノーコードツールと比較して、デザインの自由度が高いです。日本国内で開発されているのも魅力で、管理画面が日本語に対応しており、サポート体制が充実している点も大きな強みとなっています。

Ｓｔｕｄｉｏは完全ノーコードでＷｅｂサイトができる日本発のサービスです。
世界のノーコード市場規模は３５兆円、日本国内は１．８兆円と言われています。
日本におけるＳｔｕｄｉｏのシェアは０．０２％余りですが、その数字以上に操作性、デザイン性の高さで認知を広げています。
Ｗｅｂ制作の現場でも取り入れられており、今後さらに伸びてくることが予想されるツールです。

「ノーコードでもプロ品質のデザインに仕上げたい方」「自作するか、制作会社に依頼するか迷っている方」「サーバーの契約はしたくない方」などにおすすめです。

Ｓｔｕｄｉｏの使い方

ＳＴＵＤＩＯの基本的な使い方を下記にて説明いたします。

・アカウント登録

まず、STUDIOで利用を希望する料金プランを選び、新規登録してユーザーアカウントを作成します。
登録方法は「メールアドレス」「Facebook」「Googleアカウント」から任意で選んでいただき、ログインパスワードを設定すれば、登録作業は完了です。

・チュートリアル

アカウントを登録したら、基本的機能のチュートリアルの案内となります。
チュートリアルは、不要な場合には省略しても問題ありません。

チュートリアルが受けられる内容は、「画像ボックス追加、サイズの調整、画像の挿入」「テキストの追加、サイズの設定、文字間隔の調整」となり、チュートリアルの内容を理解すれば、スムーズにSTUDIOを使いこなせるようになります。
チュートリアル動画はマイページからいつでも閲覧できるため、初心者にも安心の機能です。

・プロジェクト作成

まず、「新規プロジェクト作成」をクリックします。「白紙から作成」または「テンプレートから作成」のどちらかを選びます。
テンプレートでは、選んで制作を始める以外にも、「プレビュー」と「エディターで試す（sandboxモード）」が用意されています。
テンプレートは沢山ありますので、色々見てみるのも楽しいです。

選択したら、「プロジェクト名」の入力へ進みます。
プロジェクト名はSTUDIO内で管理しやすい名前にすると便利です。後から変更も可能です。
サイトとして公開する時のタイトルは別に設定する事ができます。
「作成」をクリックすると、デザインの編集画面が表示されます。
これでプロジェクトの作成は完了となります。

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

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

・ドメイン選択とプレビュー

ホームページのデザインが決まったら、ドメインを選択します。
ドメインとはWebサイトの住所の変わりとなるもので、わかりやすくいうと「URL」のことです。
基本的に、STUDIOのサブドメインを使用することになりますが、有料プランでは独自ドメインを設定することも可能です。
Webサイトの機能・デザインの構築作業が完了したら、公開前にユーザーからどのように見えているかを確認します。
STUDIOには「ライブプレビュー機能」がありますのでプレビューでチェックします。

・公開

確認が完了すれば、あとは公開することでサイト構築が完了です。
ローンチやリリースと言われる事もあります。
編集エディタの右上方もしくはダッシュボード内にある「公開設定」をクリックすれば、制作したサイトが外部に公開されます。

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

ここでは、上記でご説明致しましたデザインエディタの基本操作を詳しくご紹介いたします。

・ページ・モーダルの追加

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

・ボックスの配列・方向

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

・表示

表示はレスポンシブの対応で利用します。
画面上部のスタイルバー左端の「表示」から、画面幅に応じたコンテンツの表示・非表示を切り替えできます。
コンテンツのPCだけ表示や、SPだけ表示のような設定が可能です。
レスポンシブとは、画面の幅やデバイスのサイズに応じてデザインやレイアウトが変化するデザインの事です。

・配置

配置はスタイルバーの「配置」から切り替えられます。配置では下記のようなことが出来ます。

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

【固定位置】
ページ全体を含むボックスの直下にボックスを作成すると固定位置に設定できます。
固定位置にしたボックスは、他のボックスの配置やスクロール位置に影響されず、画面上の一定の位置に常に固定されます。
CTAボタンやヘッダーなど、常に画面に固定表示させておきたいコンテンツなどに最適です。

【絶対位置】
絶対位置は親ボックスを持つ子ボックスに適用することができます。
絶対位置の子ボックスは親ボックスの最も近い辺からの距離を設定し、常に親ボックスを基準として、指定した位置に配置されます。

・横幅と縦幅

上部のスタイルバーの「横幅」「縦幅」から、各ボックスの幅を設定することができます。
「横幅」「縦幅」では下記のようなことが出来ます。

【ピクセル（px）】
WEBでは一般的な、ピクセル単位で固定の幅を設定することが出来ます。
画面幅が設定したピクセル幅よりも大きい場合、設定値の幅が保たれます。
画面幅が設定値以下になると、画面幅に合わせてボックスの幅も小さくなります。

【パーセント（％）】
親要素の幅に対する割合(%)で幅を設定することが出来ます。
2カラム表示を作成する場合、各子要素の幅を50%に設定することで可能となります。

【オート（auto）】
オートではボックスは子要素の幅に合わせて自動的に幅が設定されます。

【フレックス（flex）】
子要素間の幅の比率を設定します。
例えば、横幅が900pxの親要素に対して、3つの子要素のflexを1:1:1と設定すると、各子要素の横幅はそれぞれ300px,となります。

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

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

上部のスタイルバーの「マージン」「パディング」「ギャップ」から、ボックス間の余白を設定することができます。
CSSのmargin.padding.gapと同じようなイメージです。
「マージン」はボックスの外側に余白を設定し、「パディング」はボックスの内側に余白を設定します。また「ギャップ」は親ボックスにギャップを設定することで、子BOX同士の余白をすべて均等にする事ができます。

・はみ出し

上部のスタイルバーの「はみ出し」で、親要素からはみ出した子ボックスの表示を設定することができます。
「はみだし」を設定すると親ボックスからはみ出した要素をそのまま表示し、「切り取り」を設定すると親ボックスからはみ出した部分が表示されなくなり、「スクロール」を設定で親ボックスからはみ出した要素は非表示になりますが、スクロールをすることで非表示の要素を表示することが出来ます。

・重ね順

上部のスタイルバーの「重ね順」から、各要素の重ね順を設定できます。
イラストレーターやフォトショップの「レイヤー」のようなイメージです。
新規に追加したボックスの重ね順は0に設定されています。この値を変更することで、特定の要素を他の要素の上や下に表示させることが出来ます。高い数値を設定したボックスは、他のボックスに比べて前面に表示されます。

・透明度

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

・色(カラー)

「ボックスの色」と「テキストの色」が別で設定できます。

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

などなど他にも沢山あります。

Studioのメリット・デメリット

【メリット】

・手軽にデザイン性の高いサイトを構築できる
・日本語対応で安心できる
・デザインの拡張性が多い
・無料プランから試せる
・コーディング不要でスピーディーに公開
・モバイル対応デザインが自動調整される
・直感的な操作で対応できる
・データがクラウド保存されるので、どのPCからでも編集可能
・サーバーを用意する必要がない

【デメリット】

・wordPressなどのCMSと比較すると実装できない機能が多い
・外部サービスとの連携（予約システム・EC機能など）が制限される
・HTMLやCSSの直接編集はできない
・メールアカウントが登録できない
・公式にしかテンプレートが存在しない
・無料プランによる制限がある
・ネットや書籍などから情報を集めるのが難しい
・バックアップ機能が限定的

以上のようなものがあげられるかと思います。

Studioのできること・できないこと

【できること】

まとめ

ーコードツール「Studio」の特徴やWebサイトを作成する際の重要なポイントについてご紹介しました。
出来ない事も数多くありますが、できることの豊富さを考慮すると、Studioを利用する利点は沢山あります。
Studioは利用者からの改善の要望により定期的に見直しが行われています。そのため、今後ますます使いやすいノーコードツールとなっていくことが期待されています。
「Webサイトの更新や運用を自社で行いたい」「費用をおさえてクオリティの高いホームページを制作したい」そんな方々はStudioでのWebサイトの構築をおすすめします。
最適な機能が使えるプランを選択してWebサイト構築にぜひチャレンジしてみてはいかがでしょうか。