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

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

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

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

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

以下では、ホームページ制作ツール「STUDIO」について解説していきます。

メリット・デメリットも紹介しますので、ぜひ参考にしてみてください。

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

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

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

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

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

以下では、STUDIOのメリット・デメリットを紹介していきます。

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

STUDIOの大きな魅力は、ドロップ＆ドラッグで直感的に操作ができる点です。コーディングを必要としないため、サイト制作初心者の人でも簡単に利用できます。また、制作したサイトは1クリックで他のWebサイトと同じように公開することが可能です。面倒なサーバー設定を行う必要もありません。

また、ノーコードツールということもあり「テンプレートの状態からほとんど変更できないのではないか」と思う人も多いですが、STUDIOは、デザインを1から作っていくことができます。自分好みのデザインにできることはもちろん、アニメーションを実装して最新のWebサイトを制作することも可能です。

さらに、STUDIOは一部の機能を無料で利用することもできます。制限はあるものの、一般的なサイトを制作するくらいであれば問題はありません。

なお、STUDIOは日本語に対応しているため、問題なく使用することが可能です。著名なノーコードツールのほとんどは海外製なので、この点もSTUDIOを利用する上での大きなメリットと言えるでしょう。

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

STUDIOは、コードを触りながらの編集ができなくなっています。たとえば、「この部分はCSSで自分好みにデザインにしたい」と思っても、コードを修正したり、追加したりすることができません。

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

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の面でも高いパフォーマンスを発揮できます。

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

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

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

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