Sec.02　STUDIOでサイト制作をはじめよう

STUDIOに登録（サインアップ）しましょう。

https://studio.design/ja にアクセスします。

Googleアカウントでサインアップ・ログインしてください。 

ブラウザはPCのGoogleChromeのみに対応しています。

プロジェクトスタート

STUDIOでサイト制作を開始するためには、まずダッシュボード(管理画面)からプロジェクトを作成します。
▲STUDIOにログインすると、プロジェクトリストが表示されます。（作成している場合）
▲「新規プロジェクト作成」をクリックし、白紙のプロジェクトを作成します。
▲プロジェクト名を入れ→作成ボタン。
▲白紙のページが開きました。

チームメンバーを追加してください。

STUDIOでは、プロジェクトにメンバーを招待したり、リアルタイムの共同編集ができます。

▲画面右上の＋ボタンからメンバーリストを開き、最上段にアカウントのメールアドレスを入力することで、メンバーを招待できます。

今回はkenjioonishi@gmail.comを招待してください。

あなたがプロジェクトの編集を行うと、チームメンバーは閲覧や編集ができます。→すごい(‘O’*)

▲チームメンバーがプロジェクトのページを開いているときは、ページ右上にアイコンが表示されます。

デザインをはじめる前に

トップバーの下にマウスを乗せるとディスプレイの横幅とデバイスが表示されます。
レスポンシブバーをデスクトップサイズ1280px-baseをクリックしてください。

（1024px Laptop以上ならOKです。）

タブレットサイズやモバイルサイズから作成をはじめてしまうと、せっかくのデザインをやり直すことになるかも(>_<)

STUDIOのレスポンシブデザインの仕組み

STUDIOはPCサイズで作成したデザインを基準として、タブレット（Tablet）→モバイル（Mobile）サイズに縮小した時のスタイルの指示を追加することで、レスポンシブデザインに対応します。

レスポンシブ時のスタイルを設定した部分には、Tablet時は緑、Mobile時にはオレンジの影がつきます。

STUDIOエディターの画面構成

プロジェクトバー

▲ページの最上部には、「メンバーの招待」、「ライブプレビュー」、「公開」、の機能があります。

トップバー

▲要素（ボックス）を選択すると、トップバーがスタイルバー（ツールパネル）に変わります。ここで、ボックス / テキスト / 画像の編集、ボックスのマージンやパディング設定、テキストのフォントや太さ、画像の色調などができます。

レスポンシブバー

STUDIOはレスポンシブデザインに対応しています。

レスポンシブバーを利用し、PC用・タブレット用・モバイル用のデザイン調整が可能です。

▲スタイルバー下部にカーソルを合わせると、画面サイズ変更のバーを選択できます。

PCの画面表示

４種類の画面サイズで表示を確認できます。

  • 1920px – Full HD
  • 1440px – Laptop L
  • 1280px – base
  • 1024px – Laptop

 

タブレット（tablet）の画面表示

タブレットは１画面のみです。選択時、画面に緑色の枠が表示されます。

  • 768px – iPad

 

モバイル（mobile）

5種類の画面サイズで表示を確認できます。選択時、画面にオレンジ色の枠が表示されます。

  • 414px – iPhone11
  • 390px – iPhone12
  • 375px – iPhoneX
  • 360px – Android
  • 320px – iPhone SE2016

ADDバー

ADDパネル

アドパネルからGoogleMapsやYouTubeを配置できます。

レイヤーパネル

▲構成要素の階層を確認でき、移動も出来ます。

プロジェクトの管理

ダッシュボードとデザインエディタ

プロジェクトにホバーすると、「Dashboard」「Editor」の２種類の開き方ができます。
デザインエディタではサイトのデザインの編集が、ダッシュボードではデザイン面以外の情報の管理や、CMSの更新ができます。

TO Sec.03