【基礎と応用】STUDIOの使い方と利用するメリット・デメリット

「STUDIOの基本的な操作について知りたい」

「STUDIOが何なのかイマイチ分からない」

このようにお考えの方に向け、本記事では『STUDIOを利用するメリット・デメリット』『STUDIOの操作方法』などを紹介していきます。

STUDIOの基本的な情報と使い方についてマスターしたい人は、ぜひ参考にしてみてください。

STUDIOとは、ノーコードでWebサイトが制作できるプラットフォームです。エディタ上のデザインが自動的にコードに変換されるため、開発スキルがない人でも簡単にWebサイトを制作できます。

STUDIOで作られたWebサイトの完成度は、実際にエンジニアがコードで制作したWebサイトとほとんど変わりません。

ただし、STUDIO上でデザインを自在に操るためには「ボックスモデル」という概念を理解しておく必要があります。

ボックスモデルとは、CSSでレイアウトをおこなう際に用いられる概念であり、「要素はボックス内に全て収める」という考え方です。

ボックスモデルを習得するのは難しいですが、開発よりは容易なため、実際にSTUDIOを使用しながら覚えていくとよいでしょう。

STUDIOを利用するメリットは下記の通りです。

それぞれのメリットについて、詳しく見ていきましょう。

STUDIOは日本語に対応しているのがメリットです。英語が苦手な方でも、導入してすぐに問題なく使用することができます。

実際、著名なノーコードツールのほとんどは海外製である傾向です。日本語に対応していないノーコードツールも多く、「導入したものの英語表記しかないから活用を断念した」といった声も少なくありません。

STUDIOなら、管理画面はもちろんのこと、使い方を解説しているページなども日本語対応であるため安心です。

STUDIOの大きな魅力は、ドロップ＆ドラッグで直感的に操作ができる点です。コーディングを必要としないため、サイト制作初心者の人でも簡単に利用できます。「どこに何を配置したいのか」といったイメージに合わせて、直感的に制作していくことが可能です。

また、制作したサイトは1クリックで他のWebサイトと同じように公開することが可能です。面倒なサーバー設定をおこなう必要もありません。「スピーディーにサイトを公開したい」といった方にも便利なツールです。

STUDIOは、意外にも自由度が高いといったメリットがあります。ノーコードツールということもあり「テンプレートの状態からほとんど変更できないのではないか」と思う方も多いのではないでしょうか。

しかし、STUDIOは、デザインを1から作っていくことができます。自分好みのデザインにできることはもちろん、アニメーションを実装して最新のWebサイトを制作することも可能です。

STUDIOは、有料版・無料版いずれも展開されています。そのため、一部の機能を無料で利用することも可能です。有料版と比べると、自由度が低かったり、使える機能に制限があったりするものの、一般的なサイトを制作するくらいであれば支障はないでしょう。

なるべくコストをおさえてWebサイトを制作・公開したい方には、STUDIOがおすすめです。

STUDIOのデメリットは下記の通りです。

それぞれのデメリットについて、詳しく見ていきましょう。

STUDIOのデメリットとして、まず挙げられるのが「コードを触れないこと」です。基本的にノーコードツールであるため、コードを触りながら編集ができません。

たとえば、「この部分はCSSで自分好みにデザインにしたい」と思っても、コードを修正したり、追加したりできないため、微調整が難しいのが難点です。細かく調整したい方や、自分のイメージ通りのデザインに設計したい場合は、STUDIOは不向きといえます。

STUDIOは、ノーコードツールの中ではデザインの自由度が高い傾向にありますが、できないこともあります。たとえば、「アコーディオン機能が実装できない」「H1タグでロゴを囲めない」などです。

デザインや機能性が限られているため、限られた範囲の中で変更を加えたり、追加したりする必要があります。Webサイトを設計するにあたって、実装したい機能やデザインがある方は、STUDIOで対応できるかを事前に調べておく必要があります。

STUDIO最大のデメリットは「長期にわたってサイト運営をする場合はランニングコストがかかる」という点です。無料プランでもサイト制作と公開は可能なのですが、無料プランには「5記事までしか公開できない」「制作後のサイトにSTUDIOのロゴが入る」などの制約があるため、長期のサイト運営には向きません。

よって、長期にわたってサイト運営をする場合は、月額2,480円のpro版にアップグレードする必要があります。

STUDIOの無料プランは、あくまで「使用感を確かめるだけのもの」と思っておいた方がよいでしょう。

STUDIOでできないことについては下記の記事にて詳しく紹介しておりますので、あわせてご覧ください。

以下では、STUDIOの登録方法と実際の使い方について解説していきます。

まずはホームページにアクセスし［無料ではじめる］をクリックします。

STUDIO：https://studio.design/ja

2022年7月現在では「Facebook」「Google」「メールアドレス」のいずれかで登録することができます。

登録が完了するとチュートリアルが開始されるため、基本的な操作は簡単に覚えることが可能です。

STUDIOでサイトを制作する際は、まずダッシュボードからプロジェクトを作成します。

［新規プロジェクト作成］をクリックしてデザイン作成を開始しましょう。

ゼロベースでWebサイトを制作したい場合は［白紙から作成］を選択します。WordpressのようなCMSモデルを利用して手軽にサクサク作成したい場合は［CMS Basic］を選択するとよいです。

作成のアイデアが無く、試行錯誤しながら作成してきたい人は、［白紙からの作成］の下にあるテンプレートを利用しましょう。テンプレートには、さまざまなカテゴリーがあり、参考となるデザインが複数表示されるため、好みのものを選択するとよいです。

プロジェクトの作成が完了したら、実際に触ってみましょう。STUDIOは、直感的な操作ができるため、説明書とにらめっこするよりも実践した方が習得は早まります。

ただし、無料プランでは使えない機能があるため、その点には留意しておいてください。

以下では、STUDIOの基本の操作方法と応用編について解説していきます。

STUDIOで行える、以下の基本操作について解説していきます。

それでは順番に見ていきましょう

STUDIOは、デスクトップサイズ、タブレットサイズ、モバイルサイズの順にレスポンシブデザインを適用させる仕組みになっています。そのため、デザインを開始する際は、レスポンシブバーをデスクトップサイズに合わせなければなりません。レスポンシブバーを「1024px Laptop以上」にしておけばOKです。

デスクトップサイズ以外から作成してしまうと「デザインを作ったばかりなのに即作り直し…」なんていうケースもあり得ます。最初のうちは必ず確認しましょう。

テキスト、画像、ボックスなど、使用頻度の高い要素は、画面左側にある「エレメンツパネル」から追加できます。試しにすべての要素をドロップ＆ドラッグしてみましょう。

エレメンツパネルにはテキストや画像の他にも、さまざまな要素があるので、パネルの一番下にあるボタンを押して確認しておくとよいです。

たとえば、Webサイト制作において必須の要素である「ヘッダー」「カラムレイアウト」などがあります。同じ要素でも色々な種類があるので、作りたい外観に合わせて選択するとよいです。

エレメンツパネルから追加した要素は、ダブルクリックで編集できます。画像を変更したい場合もダブルクリックで変更が可能です。

「images」をクリックすることで画像サービス「Unsplash」から自由に画像が選べます。自分で所有している写真を追加したい場合は「uploads」からファイルをアップロードしましょう。

レスポンシブバーのサイズを編集することで、デスクトップ、タブレット、モバイルでの見え方を変更することが可能です。

STUDIOのブレイクポイントである「1024px」「768px」「414px」それぞれでデザインが崩れていないかを確認しましょう。

要素を選択し、右上に表示される ”  ＞ ”  の形をしたマークをクリックすることで、リンクの設定が可能です。プロジェクト内で作成したリンクの追加、外部サイトのリンクの追加、どちらでも対応できます。

ただし、imageタグにはリンクの設定ができません。そのため、imageタグをboxで囲った上で設定するなどの工夫をしましょう。

画面右上にある［ライブプレビュー］をクリックすると、デザインエディタの内容がサイトに反映されます。「デザインの崩れがないか」「見やすいサイトになっているか」を適宜チェックしながら制作しましょう。

画面右上［ライブプレビュー］の右隣にある［公開］をクリックすることでサイトを全世界に公開することができます。

STUDIOのドメインを利用する場合は、公開ボタンの左下にある入力欄に希望のURLを入力しましょう。

今回紹介する応用編の操作は下記の通りです。

操作方法については以下で解説します。

プルダウンメニューの作成方法は下記の通りです。

クリックする要素を間違えると、エラーが起きるため注意しましょう。

タブ切り替えを実装する方法は下記の通りです。

タブ切り替えを実装すると、有効活用できるスペースが広がるため積極的に実装しましょう。

STUDIOで出来ることをまとめてみました。

など、STUDIOで出来ることはたくさんあります。

STUDIOで出来る実際のデザインを見てみましょう。

このように、STUDIOを利用することで、自由度の高いデザインを作成することが可能です。機能面の構築も問題なく行えるため、UXの面でも高いパフォーマンスを発揮できます。

参考：ウェビデザイン「ノーコードWeb制作ツールSTUDIOとは？」

ここからは、実際にSTUDIOで作成されたサイトの事例を5選ご紹介します。どのようなビジネス・企業で活用されているのか、参考にしてみてください。

デザイナーを対象としたコミュニティを展開している「VOGLIO Creative Cafe」のWebサイトです。静的なデザインが中心ですが、文字がフェードインするように表示されるなど、部分的に動きも取り入れられています。

ランディングページのように、トップページにほとんどの情報を盛り入れているのが特徴です。スクロールしながら、一通りユーザーが情報を把握することができ、分かりやすく理解しやすい設計となっています。

コミュニケーションアプリの「LINE」とも連携していて、よりユーザーが活用しやすいように工夫されています。

インパクトのある人物イラストをトップに配置して、人目を引くデザインが特徴です。ブルーをベースにした個性的なデザインであり、画像やイラストも豊富に活用されています。

バナーやメニューバーなどが配置されておらず、サイト内のコンテンツに集中しやすい点もポイントです。

複数の画像を自動でスライドしてユーザーに見せたり、イラストに動きをつけたりと、遊び心も感じられるサイトです。

まるでアニメのような壮大なデザインが特徴のWebサイトです。アクセスすると、画面を覆っていた霧が晴れるようなアニメーションが採用されていて、ユーザーのワクワク感を引き立てます。

茨城の魅力をスマホ画面におさめたように、サイトに表示されているスマホ画面には茨城の風景が映し出されています。映像が用いられているため、写真よりもよりリアルに魅力を感じられる点がポイントです。

地図の見せ方やキャッチコピーの表示方法などに動きを持たせていて、ストーリ性も感じられるデザインといえます。

企業サイトとしてSTUDIOが活用されるケースも多く、「ロゴラボ」はその一例です。

ビジネスサイトとして必要とされるバナーやロゴ、CTA、メニューなども基本に沿って配置されています。取引先情報は、右から左へ流れるように動きを設けていて、一目で「どのような顧客がいるのか」が分かるように工夫されているのが特徴です。

映像・音声による案内も埋め込みされていて、「何を選んだら良いのか分からない」といったユーザーが次のアクションを選択しやすいように配慮されています。

居酒屋のWebサイトとして作成・運用されているWebサイトです。

全体的に表示する情報が絞られていて、シンプルな設計となっています。しかし、キャッチコピーや照会文などはフェードインするような動的デザインを採用していて、ユーザーの興味を引くよう工夫されています。

余白も十分にとっていて、すっきりと見やすいデザインです。料理やお酒の写真も配置されていて、うまくお店の魅力をアピールできています。

STUDIOは、ノーコードツールであるため直感的な操作が可能です。加えて、デザイン性の高いWebサイトを簡単に制作することもできます。

とはいえ、やはり「多くのユーザーから喜ばれるサイト作り」というのは、一朝一夕で習得できるものではありません。

Webサイトは、ユーザーに「使いやすい」と思われてはじめて価値が生まれます。

価値あるWebサイトを作りたい人は、ぜひTHINkBALにご相談ください。