STUDIOの使い方。

STUDIOでWebサイトを作りたいけど、何から始めれば良いかわからない方もいるかもしれません。
そこで私たちは、STUDIOでのデザインの始め方を丁寧に説明することを決めました。
これを読めば、あなたもあっという間にSTUDIOを使いこなせるようになるはずです。

1. アカウントを登録して、新しいプロジェクトを始めよう

まずは、FacebookかEmailでアカウントを登録しましょう。
登録が完了したら、ダッシュボードが開きます。
ここでは、あなたのプロジェクトの一覧を見ることが可能です。

「新規プロジェクト作成」をクリックして、プロジェクトを始めましょう。まずは「Web」プロジェクトを選択すると、デザインを１から始めるか、テンプレートを使うか選択できます。
(ウェブデザインが初めての方は、テンプレートを使うのがおすすめです！)

2. UIを理解しよう

プロジェクトに取り掛かる前に、まず作成ページのUIを理解しましょう。どのボタンで何ができるのかがわかれば、このあとの作業がスムーズです。

ADDバー - 左パネル

カーソルを左に合わせるとADDバーが現れます。ドラッグ＆ドロップでデザインに追加できる、ボックス/画像/テキスト/アイコンなどの要素があります。

ツールパネル - トップバー

作成ページの最上部には、「ライブプレビュー」、「公開」、「メンバーの招待」の機能があります。
また、編集したい要素をクリックすると、ツールパネルが現れます。
ここでは、ボックス / テキスト / 画像の編集ができ、ボックスのマージンやパディング、テキストのフォントや太さ、画像の色調などを編集できます。
ツールパネルでは、以下のような発展的なツールも使えます。

HTMLタグボタン：ツールバーの左端にあります。パラグラフにh1やh2などのタグをつけて、SEO対策ができます。

Hoverボタン：ツールバーの右端にあります。選択すると、Hoverモードのレイアウトを編集できます。

レスポンシブバー - トップ最下部バー

ツールバー下部にカーソルを合わせると、Small / Tablet / Mobile用のカラフルなレスポンシブバーが表示されます。
レスポンシブバーを利用し、作成したプロジェクトを様々なデバイスできれいに見られるよう、デバイスのサイズ別にデザインを調整します。

ページメニュー - 右パネル

カーソルを右に合わせると、ページメニューが現れます。
プロジェクトにページを加えたり、構成要素の階層を確認したりすることができます。

ボトムバー

要素を選択するとボトムバー左端にパンくずリストが表示されます。これは、選択した要素がWEBサイト内のどの位置にあるのかを表示します。
右端には、表示サイズを調整できるズームボタン、プレビューボタン、一つ前のバージョンに戻るボタンがあります。

3. ボックス / 画像 / テキストを追加しよう

UIを理解したら、デザインの作成に取り掛かりましょう。
STUDIOには様々な機能があり、初めから使いこなすことは大変だと感じるかもしれません。
そこで、デザインを始めるにあたってまずは重要なアクションをいくつか紹介します。

💡: サイトを作り始めるときは必ず、レスポンシブバーのサイズをデスクトップサイズ似合わせてください。(サイトの両端が、レスポンシブバーのグレー部分に位置している状態です)

コンポーネントを追加したり、画像を変更する

デザインを１から始める代わりに、ワイヤフレームなどのコンポーネントを使う事が可能です。追加したコンポーネントはすべてカスタマイズ可能です。例えば、下記の動画のようにヒーローのヘッダー画像を変えたい時。変更したい画像を選択し、希望の写真をフリー画像から選んだり、自分でアップロードするだけです。

編集したい構成要素の選択＆テキストの編集

編集したい構成要素を選択するには、その要素のふちが水色になるまで何度かクリックする必要があります。これは、１度目のクリックでは親要素が選択され、徐々に下層の要素を選択していくためです。
下のビデオでデモンストレーションを参照してください。

要素の配置方法

STUDIOでは実際のコードに使用される「ブロックレイアウト」を採用しております。そのため要素の水平・垂直方向の並びを考慮してレイアウトを作成していく必要があります。これはどのスクリーンサイズで見ても、バランスよく表示されるサイトを作るためです。

パディングとマージンを調整する

パディングとは、構成要素の内側の余白です。
マージンとは、構成要素の外側の余白です。
構成要素を選択すると、トップに表示されるツールバーから設定できます。
また、構成要素の端にカーソルを合わせてドラッグ&ドロップで調整することも可能です。

ボックス、テキストを追加する

カーソルを左端に合わせて、ADDバーを開きます。好きな要素を選んでドラッグ&ドロップして、要素を追加します。

リンクの追加＆プレビューでリンクの動作を確認する

リンクを追加するには、リンクを加えたい構成要素を選択してください。
選択すると要素の右上に現れる「 > 」をクリックし、リンクを追加できます。

リンクがうまく動くかどうかを確認するには、プレビューを確利用しましょう。
ボトムバー右端の「▷」をクリックすると、プレビューを確認できます。また、トップバー右端の「ライブプレビュー」を選択すると、友達やプロジェクトのメンバーに送れるライブプレビュー用のリンクを取得できます。このリンクにアクセスすればリアルタイムでプロジェクトを確認できます。

4. レスポンシブデザインを調整しよう

作成したプロジェクトを様々なデバイスできれいに見れるように、デバイスのサイズ別にデザインを調整します。レスポンシブバーを使って、どの幅でもサイトが綺麗に表示されるように確認しましょう。

5. 作成したプロジェクトの公開

サイトを公開する前に、プレビュー / ライブプレビューでサイトを確認しましょう。STEP 3にもあるように、ボトムバー右端の「▷」をクリックするか、トップバー右端の「ライブプレビュー」を選択すると確認できます。

プレビューで確認して問題がなかったら、トップバーの「公開」をクリックしてプロジェクトを公開しましょう。独自のドメインがある方はそれを使うことも可能です。そうでない方は、簡単にSTUDIOのサブドメインを利用できます。
公開が完了したら、あなたのプロジェクトは世に放たれました！
ソーシャルにシェアをするなどして、サイトの認知度を高めましょう！

さあ、STUDIOをはじめましょう！

STUDIO | コードを書かずに、 あなただけのWebサイトを。