ノーコード情報満載!

  1. ノーコード
  2. 62 view

STUDIOの使い方を日本語で解説!基本操作の流れをマスター

顧客との接点やコミュニケーションの場として活用される Webサイト ですが、デザイン性や機能性に優れたサイトを制作するには、一定の知識が必要です。

STUDIOは、 コーディング に関する知識が不要で多用なWebサイトを制作できる便利なツールです。今回は、STUDIOの使い方や基本操作、アカウントの作成手順などを詳しく解説します。自社のサイト制作にお役立てください。

STUDIOの概要とアカウント作成手順

STUDIOのトップページ
画像:studio.design

STUDIOは、Web上でコードを書くことなくサイトを制作できるツールです。サイト制作には、 HTMLCSS などの知識が欠かせませんが、STUDIOを使用すると初めての方でも簡単にサイト制作が行えます。

STUDIOを利用する場合、アカウントを作成する必要があります。以下では、その手順を解説します。

アカウント作成の流れ

STUDIOでアカウントを作成する場合、まず、公式サイトにアクセスし、右上にある「無料ではじめる」をクリックしましょう。STUDIOには料金プランが3つ用意されていて、試しに使用する場合は、無料プランがおすすめです。機能は多少制限されているものの、基本的な機能はすべて利用することができます。

無料プラン以外の料金プランは、以下の2つです。

  • ベーシックプラン……980円/月
  • プロプラン……2,480円/月

次に、メールアドレスの登録を行います。STUDIOの登録方法は、以下の2つです。

  • Facebookのアカウントを利用して登録する
  • メールアドレス、名前、パスワードを設定して登録する

Facebookのアカウントを持っている場合は、STUDIO専用のアカウントを作成する必要はありません。これでアカウント作成は完了です。「新規プロジェクト作成」を選択すると、 Webサイト 制作を始められます。

STUDIOの画面の見方

STUDIOのサイト制作画面は、さまざまな要素が含まれています。こちらでは、それぞれの役割をご紹介します。

ADDバー

画面の左側に用意されているのが「ADDバー」です。ボックス・テキスト・画像・アイコンなどの要素があり、ADDバーからドラッグ・アンド・ドロップすることで、選択した要素をサイトに反映させることができます。

トップバー

サイト制作画面の上部には、トップバーが設置されています。ライブプレビュー・公開・メンバーの招待機能があり、内容に応じた作業を行えます。

レスポンシブバー

画面の最下部には、レスポンシブバーが設置されています。具体的には、Small・Tablet・Mobileの選択肢があり、こちらを活用することで、デバイスごとにデザインを調整することが可能です。

最近は Webサイト をスマホやタブレットで見る機会も増えています。そのため、レスポンシブバーを適切に使いこなし、デバイスごとのデザインを確認することが大切です。

ページメニュー

画面の右側のパネルには、ページメニューが用意されています。プロジェクトへのページの追加や作成した階層の確認などが可能です。

ボトムバー

画面の下部には、ボトムバーも設置されています。バーの左側にはパンくずリスト、右側にはプレビューボタンやズームボタンなどが用意されていて、サイト制作に役立てることができます。

STUDIOの基本的な操作方法

Webサイト を制作する場合、 HTMLCSS などの知識を活用するのが一般的です。しかし、STUDIOはそれらの知識がなくても、簡単にサイトを作成できます。こちらでは、サイトを作成する際の大まかな流れをご紹介します。

テンプレートからデザインを選択する

まずは、トップページから「新規プロジェクトを作成」をクリックしましょう。次の画面では、テンプレートがいくつか用意されていて、気に入ったデザインを選択できます。

一からサイトを制作したい場合は、「白紙から作成」することも可能。また、用意されたテンプレートはレスポンシブデザインに対応しているため、簡単にサイトを制作できます。

テンプレートを編集する

次に、選択したテンプレートを編集しましょう。テンプレートの編集作業で行うのは、テキストの編集・画像の編集・リンクの編集などです。

テキストを編集する場合は、ボックスを選択してダブルクリックすると編集モードに切り替わります。テキストの編集では、文字間やサイズ・行高・フォント・太さ・色・配置などが編集可能です。

画像を編集する場合は、画像をダブルクリックすると編集メニューが表示されます。STUDIO内に用意された画像を使用したり、自分で撮影したものをアップロードして使用したりすることも可能です。

リンクを編集する場合は、ボックス右上の青色の矢印アイコンをクリックしましょう。リンクの挿入や編集を行うことができます。

プレビューを確認してサイトを公開する

サイト設計が完了したら、プレビューを確認してサイトを公開しましょう。STUDIOには「ライブプレビュー」機能が搭載されており、編集中からデバイスごとの表示を確認できます。

まとめ

今回は、ノーコードで Webサイト を制作できるツール、STUDIOについてご紹介しました。プログラミングに関する知識がなくても、デザイン性に優れたサイトを制作できるのが魅力です。また、無料で試すことができ、気に入った後で有料プランに移行することもできるため、サイト制作ツールにお悩みであれば、一度利用してみるのがおすすめです。

ノーコードの最近記事

  1. Autifyの概要からテスト自動化への導入事例までを徹底解説

  2. Platioはノーコードで作成できる便利な業務アプリ!機能や特徴を解説

  3. UNIFINITYで業務効率アップ!使い方とメリットやデメリット

  4. WebアプリとWebシステムの開発に役立つ!FastAPPの概要

  5. STORESの使い方を解説!初心者でも分かる基本や応用のまとめ

関連記事

PAGE TOP