STUDIOの使い方を解説!次世代デザインツールを使ってサイトを作ろう!

前の記事で「STUDIO」の魅力や気になる点、登録方法などを紹介しました。

今回は、無料でできる範囲での「デザイン」や「設定方法」を紹介したいと思います。

「STUDIO」って何ぞや? 登録方法は? って方は、下の記事をチェックしてくださいね。
STUDIOを使ってみた!コードいらずでサイトをデザインできるツール

プロジェクトを作る

「STUDIO」にログインしたら、まずは「プロジェクト」を作りましょう

「STUDIO」は Google Chrome のブラウザ上でしか動作しないから、気をつけてね。

真っさらの状態から始めたい人は、すでに作られている「First project」の「Editor」から入っても大丈夫です。

ただ、何もない状態から始めるのは何かと大変なので、「新規プロジェクト」に入って「テンプレート」を選んでからカスタマイズする方が時間の節約になりますね

テンプレートを選択する

コーポレートサイトやランディングページなど、それぞれに適したデザインを施された「テンプレート」がいくつかあります。

どれもプロがデザインしているから、画像や文字を差し替えるだけでオシャレ〜なサイトが出来上がっちゃいます

一覧ではサイトの一部しか見えていないので、カーソルをテンプレートの画像に重ねて右上に表示されている「 プレビュー」をクリックして全容を確認してみましょう。

studio

私は、ついつい全部のテンプレを確認しちゃいましたけどね。

使いたい「テンプレート」が決まったら、「このテンプレートを選択」をクリックしてください。

studio

プロジェクト名を入力

「このテンプレートを選択」をクリックしたら、「プロジェクト名」を入力します。

studio

「プロジェクト名」は公開されることはないので、好きな名前を決めちゃって大丈夫。もちろん、後で変更することも可能ですよ。

入力が終わったら、「作成」をクリックしてください。

基本的なデザイン方法

「STUDIO」でサイトを作る時に、ある1つの概念を知っておく必要があります

それは、「ブロック」

「STUDIO」では、すべてを「ブロック」で積み上げていき、その「ブロック」の中に画像だったり文字を入れていくって感じですかね。

そのため、デザインしていく順番はこうなります。

  1. ブロックを入れる
  2. 文字や画像を入れる

あとは、自由にデザインすることができます。

MEMO
すでにデザインされている場合も概念は同じで、クリックする毎に「大枠 > ブロック > 画像や文字」といった順番に設定することができます。右側に表示されているメニュー( みたいなやつ)からも操作はできます。

ブロックを入れる

デザインする画面には、左に「ブロック」の要素がバーに表示されています。クリックしても良いですし、ドラッグ&ドロップでも「ブロック」が追加されます。

studio

 

これは、「大枠」として利用するブロック。タンスを例にすると、引き出しが「ブロック」になり「大枠」が引き出しを入れるタンス自体という感じ。

 

画像を入れる時に使うブロック。

 T

文字を入力する時に使うブロック。

 

純粋にハートマーク。

 

Google Map やテンプレートなど、さらなるデザイン要素がここから選択できるようになります。

大きさを変える

サイトのデザインに重要な「幅」や「高さ」といった設定は、「STUDIO」ならとっても簡単。

大きさを変えたい枠の端にある◯をクリックしたまま動かすと、自由に変えることができます。もちろん、上部にあるメニューで数字を入力して整えることもできますけどね。

studio

本来のサイト制作ではかなり面倒だったこの工程ですけど、ビジュアル的に大きさを変えられるのは画期的です。

画像を挿入する

画像を表示させるブロックを入れたら、そのままブロックをダブルクリックしてみましょう。すると、左から画像の設定メニューがニョキッと出てきます

studio

通常なら面倒なフリー素材画像を探す作業が、「STUDIO」なら何万ものフリー画像が簡単に探せます

画像の探し方

国産のサービスではあるんですが、おそらく画像の提供元が海外だと思われるため注意点が1つだけ。

画像検索をする時は、「英語」で検索しなければ思ったような画像が出てきません。なので、Chrome をどうせ使っているはずなので探したい画像があったら、サクッと翻訳でもして英語で検索をかけてください。

studio

画像のアップロードの仕方

画像メニューはデフォルトで検索する項目が表示されていますが、「ファイル」を選択すると「 アップロード」というボタンが出てくるので、クリックして入れたい画像を自分のPCから選択します。

文字をカスタマイズする

文字を表示させるブロックを入れたら、そのまま文字をダブルクリックしてみましょう。すると、文字の大きさやフォントをカスタマイズできるようになります。

文字の大きさを変える

文字の大きさを変えるには、上部のメニューにある「サイズ」の数字で変更することができます。

studio

同じメニュー内に「太さ」や「イタリック」を変更するボタンがあるので、サイトのデザインを考えながら変更してみると良いでしょう。

フォントを変える

フォントを変えるには「フォント」にカーソルを持っていき、「+」をクリックすると何千ものフォントから選ぶことができます

studio

正直、あり過ぎて困っちゃうけどね。

上級者的な埋め込み

「STUDIO」では、コーポレートサイトなどでは不可欠や「Google Map」「Youtube」といったものも簡単に入れることができます。

ブロックを追加できるメニューにある をクリックすると、さらに追加できるブロックが登場します。

Google Map を表示させる

をクリックすると、メニューに地図のマークがあるのでクリック、またはドラッグ&ドロップすると「Google Map」が追加されます。

デザイン画面に追加されたら、表示させたい大きさに変更しましょう。

ただ、ここまでは簡単なんです。店舗や会社の住所へ変更するには、ちょっと設定が必要となります。

Gogle Map に住所を設定する

まず「STUDIO」に設定した地図をクリックすると、左上に「iframe」と書かれが青いボタンをクリックします。すると、「埋め込みコード」と書かれた場所にこれから説明するコードへ差し替えます。

studio

次に、普通に「Google Map」にアクセスして設定したい住所を表示させます。

そうしたら詳細が表示されるので、「共有」をクリック。

studio

そして、「地図を埋め込む」をクリック。すると、「iframe」から始まるコードが表示されているので、それをコピーします。

studio

コピーしたコードを、「STUDIO」の「埋め込みコード」に差し替えれば完了です。

Youtubeを設定する

「Youtube」も「Google Map」と設定方法は同じで、ブロックを追加したら左上の「iframe」と書かれが青いボタンをクリックします。

そして、「埋め込みコード」と書かれた場所にこれから説明するコードへ差し替えます。

次に、「Youtube」にアクセスして表示させたい動画の「共有」をクリック。

studio

そして、「動画の埋め込み」をクリック。すると、「iframe」から始まるコードが表示されているので、それをコピーします。

studio

コピーしたコードを、「STUDIO」の「埋め込みコード」に差し替えれば完了です。

問い合わせを設定する

サイトには欠かせない「問い合わせ」も、簡単に設定することができます。

表記としては「Forms」となっているので、そこから好きなタイプを選択します。ただデフォルトでは英語となっているので、項目は全て日本語へ変更する必要がありますね

studio

問い合わせの項目を設定

「Forms」からブロックを追加したら、項目をクリックすると「input」というボタンが左上に表示されるのでクリック。

studio

表示された項目を、自由に変更してください。

必須項目もここで設定できるので、チェックを入れたり外したりしてください。

問い合わせの項目を追加

項目を追加するには、単純に項目をコピペして追加するしか方法はないようです。

メールの受信先を設定

項目をクリックすると右側にメニューが表示されるので、「通知先の設定・集計結果」をクリックするとメールを登録する画面に飛びます。

プロジェクトの一覧ページからも、各プロジェクトにカーソルを持っていき、ダッシュボード(Dashboard)からも変更が可能です。

サイトの情報を設定

デザインが終わったらサイトを公開…

と言いたいところですが、デザインが終わったらサイトの情報をちゃんと設定しておきましょう

検索された時の表示を設定

サイトはクリックされた時に表示されるものであって、Googleなどで検索された時には「サイトのタイトル」や「サイトの詳細」が表示されます

それらを、ちゃんと表示させることによってサイトに訪問してくれるようになります。

設定する場所は、プロジェクトの一覧ページから各プロジェクトにカーソルを持っていき、ダッシュボード(Dashboard)にアクセスします。

いつくかの設定項目が表示されるので、「ページ」を選択します。

studio

Title

タイトルには、サイトのことが簡潔にわかる名前を入力しておきましょう。店舗名や企業名、サービスの内容などを入れると良いでしょう。

Description

ディズクリプションには、どんなサイトやサービスなのかといった内容を入力しましょう。ここは、できれば100文字以内にしておきましょう。

Favicon

ファビコンとは、ブラウザなどのタブに表示されるアイコンのこと。まあ設定しなくても良いんですが、設定しておくとサイトっぽくはなりますね。

Social Cover

SNS にシェアさせたりした時に、表示させる画像を設定することができます。

メンバーを追加

「STUDIO」では、複数人でサイトを作成することができます。

ダッシュボードの項目から「メンバー」を選び、右上の「+」をクリック。そして、追加したいメンバーのメールアドレスを入力して招待するだけ。

studio

メンバーの追加には制限がないので、追加したいだけ招待してください。

アナリティクスなどは有料に

ダッシュボードの項目を見ると、「Apps」という表記があります。

ここを見ると、「STUDIOバナー」を消したり、「Google Analytics」「Google Tag Manager」「Google Search Console」などの設定を行えます。

ただ、全て有料プランにすると設定が可能に

アクセス解析やSEO対策をしたいという人は、アップグレードをする必要があります

サイトを公開

デザインもページの設定も終わったら、さっそくサイトを公開しちゃいましょう!

公開するには、画面右上に表示されている「公開」をクリックします。すると、ドメインを入力する画面がニョキッと出てきます。

ドメインとは?初めて取得する時に知っておきたいポイント

無料プランでは「サブドメイン」での公開となり、有料プランにすると独自ドメインを取得してサイトを公開することができます。

サブドメインとは?
「サブドメイン」とは、細かく区分されたドメインのこと。この「STUDIO」では「studio.design」がドメインとなっているので、「◯◯.studio.design」の◯◯に好きな英数字を設定することができます。そのため、「studio.design」という表記が嫌だという場合には、独自ドメインを取得する必要があります。

サブドメインを設定する場合

サブドメインを設定するには、「公開」をクリックした表示された画面で好きな英数字を入力するだけで完了。

studio

すでに他の人が使っている場合にはダメな場合もあるので、そんな時は「ハイフン(-)」などを途中に入れながらサブドメインを設定してみましょう。

独自ドメインを設定する場合

まずは有料プランへアップグレードして、その後にサブドメインの下にある「Use Own Domain?」をクリックして設定をします。

独自ドメインの詳しい設定方法は、こちらをどうぞ。

最後に公開をクリック

ドメインを入力して承認されたら、最後にドメイン右上に表示されている「公開」をクリックすると完了です。

作ったサイトをSNSなどで紹介して、みんなにお知らせしちゃいましょう!

さいごに

ちょっと長くなってしまいましたが、「STUDIO」の基本的な使い方を紹介しました。

サイト制作とは縁がない人でも、サイトを自分で作れるような人でも、使ってみるとなかなか面白いと思います。

ちなみに、私が「STUDIO」で作ってみたサンプルサイトはこちら

studio

https://befriendtimes.studio.design/

サイトが欲しいという人は、ぜひ参考にしてみてくださいね。