STUDIO 勉強会資料_2時間でWebサイト

STUDIO 勉強会資料 ２時間でSTUDIOでウェブサイトが作れるようになる資料 一般社団法人未完 事務局長 西村航（@wataru̲nishi731） 2023年5月21日 ©一般社団法人未完( https://mikan-foundation.org/ )

• https://mikan-foundation.org/

この資料が扱うこと / 扱わないこと ❗この資料では、STUDIOを使うことを前提に技術的な話を簡略化しています。 🙆あつかうこと ■ 基本的なウェブサイトの仕組みとHTML/CSS+JavaScriptの初歩的な話 ■ STUDIOデザインエディタの基本的な使い方 ■ STUDIOでのテンプレートの使い方 ■ STUDIOでのWebサイト公開の仕方 ■ 最低限のデザイン知識 🙅あつかわないこと ■ STUDIO フォーム機能・CMS の基本的な使い方 ■ 実用的なHTML/CSSやJavaScriptなど詳しい技術の話 ■ Webサイトの種類や分類の話 2

この資料の読み方 ‼この資料では「学びパート」と「実践パート」に分かれています 🖋学びパート ページタイトルの背景がグレーなページは「学びパート」です。読んで覚えてください この資料の読み方 💪実践パート ページタイトルの背景が黒で文字が白色なページは「実践パート」です。タイトル横の時間でできるよう チャレンジしてみて下さい サイトタイトルを出してみよう（15分） 3

目次 1. STUDIOとは？簡単に説明 2. Webサイトはどうやって公開されているの？（Webサイトとブラウザ・サーバー、ドメイン・URLのお話） 3. Webサイトのページの中身について（HTML/CSS, JavaScriptのお話） 4. STUDIOでできること・できないこと 5. STUDIOのはじめ方 6. デザインエディタでWebサイトを作り込もう！ 7. STUDIOでWebサイトを公開してみよう！ 8. 逆引き！STUDIO機能解説 4

1. STUDIOとは STUDIO株式会社が運営するノーコードでWebサイト制作ができるWebブラウザ上で動くデザインツ ールです。１行もプログラムを書くことなくサイトが手軽に公開できる利便性から、イベントページや LPといった公開期間の短く情報量の少ないWebサイトだけでなく、コーポレートサイトやサービスサイ トでも利用されています。 フォーム機能やSEO（検索エンジン最適化）向け機能、ホスティング機能などWebサイト構築に必要 な機能が１つにまとまっており単体で誰でもすぐにクオリティの高いウェブサイトを作ることができる のがSTUDIOの強みです。 STUDIO公式サイト： https://studio.design/ja/ 5

• https://studio.design/ja/

2. Webサイトはどうやって公開されているの？（Webサイトとブラウザ・サーバーのお話） Webサイトは一般的に、 ■ Webサイトの本体データである「ファイルやデータそのもの」 ■ それを公開（ホスティング）するための「サーバー」 ■ サーバーから受け取ったファイルを受け取る「クライアント（みなさんのお手元のコンピューターのことです）」 ■ 成形してWebサイトとして表示する「ブラウザ（ChromeやSafari、Edgeなど）」 によって構成されています 図示すると以下の通りです 6

2. Webサイトはどうやって公開されているの？（ブラウザとドメイン・URLの話①） クライアントはサーバーからデータを受け取って表示します。具体的にはどこのWebサイトからどのデータ（ページ）を取 ってくるかをブラウザに伝え、その通りにブラウザとクライアントがサーバーにデータを要求しています。 どこのWebサイトのデータが欲しいかをブラウザに伝えるためのインターネット上の住所を「ドメイン」と言います。 ドメインは「mikan-foundation.org」や「google.com」のようにサービス名や団体名が使われおり、わかりやすく覚えや すいものになっています。 ですが、実際はドメインだけでどこのサーバーか特定しているわけではなく「IPアドレス」と呼ばれるインターネット上の 座標とドメインを紐づけることでブラウザからサーバーにアクセスしています。 IPアドレスはインターネット上でお目当てのサーバーかどうかを見分けるために３桁の数字を４つ組み合わせた値※です。使 われるIPアドレスは各サーバーにつき１つ（厳密には違いますが一旦この認識で大丈夫です）割り当てられいますが、以下 のようにIPアドレスではドメインと比べて覚えにくく、使いづらいという問題があります ※IPv4と呼ばれる形式のIPアドレスのみの話でIPv6と呼ばれる形式はより複雑で覚えづらくなっています。 7

2. Webサイトはどうやって公開されているの？（ブラウザとドメイン・URLの話②） 前述の通り、ブラウザはドメインを利用して目当てのサーバーを見つけますが、ドメインだけでは具体的に見たいページのデー タがどれかまではブラウザには伝えられません。欲しいデータがどこにあるかを示す情報を含めた文字列を一般的に「URL」と 呼び、ブラウザにはURLを入力することでお目当てのWebサイトが表示されます URLにはドメインの他にプロトコル・スキーム・ディレクトリ・ファイル名・クエリなどを含みますが、今回は「ディレクト リ」と「ファイル名」を覚えましょう。例えば未完メディアのとある記事のURLは以下のように構成されています。 まとめると、Webサイトは以下のようにデータを取得しブラウザでウェブを表示していることになります 8

3. Webサイトのページの中身について（HTML/CSS, JavaScriptのお話） Webサイトが見れるようになる仕組みが大まかにわかったところで、簡単にWebサイトのページの中身がどうなってい るかについても説明します。 基本的に私たちが見ているWebサイトは以下の３つの技術を使ってページのデータが作られています。 わかりやすく“家に例えて”簡単に説明すると以下の通りです。 ■ 家の骨組み・基礎となる「HTML」 ■ 家の壁や床、屋根など見える部分の装飾を行う「CSS」 ■ 家電や水道、暖房・お風呂といった家に“機能を与える”「JavaScript」 それぞれにファイルやデータがあり、HTMLを中心にCSSとJavaScriptを組み合わせてWebサイトのページは構成され ています。 ここまででSTUDIOとは関係のない、Webサイトの基本的な説明は以上になります。 9

4. STUDIOでできること・できないこと ここまでで簡単にWebサイトについて説明したところで、STUDIOをつかいたいのですが、一旦STUDIOがどこまでノー コードでできるのか、逆に何ができないのかについて説明しておきます。 先ほどまでの説明をベースに整理すると以下のようにまとめられます。 🙆できること 🙅できないこと ■ HTML / CSS / JavaScriptを一切書くことなくWebサイ トを公開できる。 ■ 作ったWebサイトのHTML/CSS/JavaScriptを書き換えてカ スタマイズすること ■ 自分でドメインを用意し、IPアドレスを紐づければサーバー 要らずでWebサイトを公開できる ■ 高度なアニメーションや動画・3Dの描画などSTUDIO側で提 供していないJavaScriptの機能は利用できない ■ JavaScriptなどでプログラムを書くことなく、お問合せ フォームやブログなどを組み立てWebサイトを公開できる ■ STUDIO側で提供されていないプログラムの実装や外部プラ グイン・ツールなどの利用ができない ■ CSS / JavaScriptを書くことなく、カルーセルスライダーや リッチなアニメーションをWebサイトに実装できる ■ 既にあるWebサーバー上にSTUDIOのWebサイトを公開する ことができない（ドメインを別で用意し、IPアドレスと紐づ けることが前提なため） 10

5. STUDIOのはじめ方 では早速STUDIOを始めていきましょう。 https://studio.design にアクセスし、Login / ログイン しましょう！ STUDIOでは、１つ１つのWebサイトのことをプロジェクトと呼びます。 「＋新しいプロジェクト」からプロジェクトを作成することができます。 11

• https://studio.design

5. STUDIOのはじめ方 プロジェクトを作成するという画面が出てきたはずです。「テンプレート」「ワイヤーフレーム」「お気に入り」のタブ がありますが、今回は「空白からはじめる」をクリックして何もないプロジェクトを作ります。 「ワイヤーフレーム」をクリックすると ワイヤーフレームのタブへ移動できます 空白からはじめる では、全くのゼロからウェブサイトを作れます デザインを外部ツール（Figmaなど）で 作っている場合はこれがおすすめです 🔻画面下にいくと有志の方が作成したテンプレートがあります STUDIO側で用意されているワイヤーフレームです。 デザインを１から作る必要がない場合はある程度骨組みがある 状態から始めることもできます 「このワイヤーフレームではじめる」でプロジェクト作成可能です 12

プロジェクト名を決めて、作成しよう（3分） ここまでの説明通りに、空白のプロジェクトを作成し好きな名前を決めて、プロジェクトを作成してみましょう！ 名前を決めたら「作成」をクリック！ 13

6. デザインエディタでWebサイトを作り込もう！ こちらがデザインエディタです。簡単に各部分の機能説明を書きました。それぞれの機能の詳細はここから説明していき ます。実践パートではないですが、実際にSTUDIOを触りながら覚えていきましょう。 この資料では太字の部分を中心に説明していきます。 レスポンシブ設定 プレビュー表示・公開設定 ＜ページ設定＞ ・URLを構成するページ名を編集できる Twitterなどでシェアされる OGPのプレビューです ＜ツールバー＞ ・ボックス、画像、テキストなど実際に デザインで使うツールです ・画像の設定やアイコン、iframeなどの 埋め込みもできます ＜作業場＞ 基本的には、実際の Webサイトと同じものが表示されます ＜サブツール＞ ・ページを増やす ・メニューモーダルを作る ・レイヤーを使い順番や重ね順を変更で きる 14 ＜プロパティバー＞ 以下のことができます ・テキストボックスのテキスト変数 ・URLの設定 ・リスト機能を使った変数の設定 ・ボックス内の画像変更 ・idの設定

ボックスを作成し、その中にテキストを入れてボタンを作ろう！（5分〜10分） 「習うより慣れろ」ということで実際にSTUDIOを触っていきます 左側のツールバーからボックスを選択し、そのボックスの中にテキストを入れてボタンっぽいものを作ってみましょう 余裕のある方はボックスの色やテキストの色、枠線など追加してみましょう。 ボックスを作成 ボックスを選択すると出てくる画面上部のツールバーから横幅・縦幅・角丸など設定可能です マージンとパディングについては次ページで説明します テキストを作成 テキストをダブルクリックすると 内容を編集できます ドラッグ&ドロップで テキストをボックスの中に入れることができますが うまくいかない時はボックスのサイズを変えてみましょう ★画面左側レイヤーからもドラッグ&ドロップで入れ子構造にすることができます 押すと開きます ボックスの周りをマウスで操作すると マージン（オレンジ）やパディング（緑） 縦幅・横幅（青）を変更可能です ※ピンク色が出る場合２つ以上ならんだ要素の間隔（ギャップ）を設定可能です 15

6. デザインエディタでWebサイトを作り込もう！| STUDIOでのレイアウトについて デザインエディタの最低限の使い方がわかったところで、STUDIOでのレイアウトについて学んでいきましょう。 STUDIOでのレイアウトは一言で言うと「ボックスの入れ子構造を使った整列」になります ボックスはボックスの中に含まれているテキストや画像、ボックスをどの箇所に配置するか（整列）とその並び順（順 序）を設定可能です。つまり、ボックスの中にボックスを入れると複雑なレイアウトを組むことができるようになります 整列 順序 カーソルを合わせると表示されます カーソルを合わせると表示されます 上から下に 縦上横左 縦中央横左 縦上横中央 縦横中央 縦上横右 縦中央横右 左から右に 要素がはみ出る場合に 1段下にずれて左から右に 右から左に 縦下横左 縦下横中央 縦上横右 下から上に グループ化は右クリックで 出てくるメニューからでも可能です 縦◯横▲ ⇨縦方向◯揃え、横方向▲揃えの意味です それぞれの設定を記載しておきました （実際には同時に複数設定は表示されません） 16

6. デザインエディタでWebサイトを作り込もう！| 余白について デザインエディタの最低限の使い方がわかったところで、STUDIOでの余白について学んでいきましょう。 STUDIOでの余白はHTML/CSSで使う余白と同じ「マージン」と「パディング」と呼ばれるものを使います マージンはボックスの外側の余白、パディングは内側の余白です。服で例えると服の外側の距離はマージン。服と自分の 体の間の距離はパディングです。 マージン パディング 横幅、縦幅の値を「auto」にし、パディングを設定すると文字の長さに合わせて自動で横幅が変動するボックスが作れ ます。 17

6. デザインエディタでWebサイトを作り込もう！| ul / liを使ったリスト機能について① Webサイトをデザインしていると、同じ見た目でテキストや画像・URLが違う内容の繰り返しがあります。 STUDIOでは「リスト機能」を使うことで繰り返しを実現可能です。 繰り返しをしたい要素を選び、右クリックから「リスト化 」をクリックします ここがulの場合リスト全体を編集できます 要素の追加も可能 ドラッグ&ドロップで順序変更可能 クリックするとリストになります それぞれの要素はクリックして編集可能です +New から新しく要素の追加ができます ※写真を追加したい場合は、Finder / エクスプローラーから 追加したい画像をドラッグ&ドロップするだけで追加可能です 18

6. デザインエディタでWebサイトを作り込もう！| ul / liを使ったリスト機能について② リスト機能で繰り返しする要素を追加したり、繰り返し要素をどこに割り当てるかも変更できます。 画面左上のボタンから、 直接紐付けも可能です。 直接このサイドバーから画像の変更も可能です 割り当てを変更したいテキストや画像を選択します リストのどのプロパティを割り当てるか選べます 19

画像とテキストを並べて、ギャラリーを作ってみよう（20分） 「レイアウト」「余白」「リスト機能」を使って以下のような写真ギャラリーを作ってみよう 20

6. デザインエディタでWebサイトを作り込もう！| レスポンシブデザインについて 一般的にWebサイトは、１つのWebサイトでスマホ用・タブレット用・PC用と異なるサイズのデザインを作る必要があ ります。どのサイズでも綺麗に表示されるデザインのことを「レスポンシブデザイン」と言います。 STUDIO上では、レスポンシブデザイン機能で実現可能です。 画面上部のレスポンシブから設定可能です。まず「基準」でサイトを作ります。 次に、１つ下のサイズに移動しレイアウトなど崩れないように値を変更したらも う１つ下のサイズに移動し、最後はまた「基準」から確認し調整していきます 変更した箇所は色が変わります。 デフォルトでは タブレットは緑・モバイルはオレンジです レスポンシブを「タブレット」に移動し 画像の横幅を「320px」に設定しました 作業スペースの縦線をドラッグすることで、 より柔軟にサイトの横幅を変更可能です 21

レスポンシブデザイン機能を利用して写真ギャラリーをレスポンシブデザイン対応しよう（20分） 「タブレット」サイズの時は、画像を320pxに、「モバイル」サイズの時は ギャラリーが縦並びになるように変更してみよう 22

7. STUDIOでウェブサイトを公開してみよう（3分） STUDIOでウェブサイトを公開する方法は簡単です。画面右上の「公開」から設定可能です。 独自ドメインの設定とstudioロゴの非表示は有料プランのみなため、今回の資料では触れません。 .studio.site の前に好きな文字を入れ※「保存」をクリックして「公開」をクリックすると公開できます ※他の人が利用している文字は利用できません この箇所をクリックすると実際に公開されているサイトが開きます 23

• http://studio.site

8. 逆引き！STUDIO機能開設 | リンクを設定したい！ STUDIOでは、リンクの設定を画面右のサイドバーから行えます。STUDIO内のページも、外部のURLもどちらも設定可 能です。またボックスなどの要素にもリンクは設定可能です。 リンクの設定をするとタグが<a>に変更されます ここからリンクの設定が可能です。リスト側でURLプロパティを追加 していれば、ここからURLの紐付けも可能です。 24

8. 逆引き！STUDIO機能開設 | ページを追加したい！ STUDIOでは、ページの作成は左下のサブツールのページボタンで開く左サイドバーの「ページ」タブから作成可能です ここからページ追加が可能です ページを選択するとページが開いて移動します クリックすると ページタブが開きます 25 ページ名はSTUDIOで管理する際の名前です パスに設定した名前は、URLに反映されるため 外部公開された際のパスになります

8. 逆引き！STUDIO機能開設 | 外部公開前にプレビューしたい！ 画面右上の「ライブプレビュー」を開き、「スタート」をクリックするとプレビューリンクが生成されます。 26

最後に 今回の資料では、STUDIOの最低限の機能しか紹介していないためもっと多くの機能や使い方を知りたい！という方はぜ ひ公式のガイドやYouTubeなどをご覧ください！ STUDIO公式 YouTube STUDIO公式ガイド https://www.youtube.com/@STUDIOJapan https://help.studio.design/ja 27

• https://www.youtube.com/@STUDIOJapan
• https://help.studio.design/ja

以上でこの勉強会資料は終了となります。 以降はこの資料の利用方法や参考資料などをまとめたAppendixになります。 かなり駆け足な学習でしたがこれをきっかけにSTUDIOの良さを知っていただければと思います！ 28

Appendix | 参考資料 STUDIO公式サイト https://studio.design/ 開発者向けのウェブ技術 - MDN Web Docs https://developer.mozilla.org/ja/docs/Web 29

• https://studio.design/
• https://developer.mozilla.org/ja/docs/Web

Appendix | この資料について この資料は「技術で地域を良くする。」一般社団法人未完が作成した資料です。 未完では北海道を中心に、地域のコミュニティの勉強会開催の協力やカンファレンスイベントの開催や 独自の勉強会・ハッカソン・ハンズオン企画などU25エンジニアが自分の持つポテンシャルを発揮でき るような環境を作るための企画を実施しています。 こちらの資料を使った勉強会・LT会・ハンズオンなどの開催など大歓迎ですので、是非ご利用ください。 ただし、こちらの資料は無許可での商用利用※1を禁止します。商用利用を希望される方は次ページの お問い合わせまでご連絡ください。 こちらの資料に表記ミスや根本的な間違い、訂正すべき点がありましたらお手数ですが上記同様次ペー ジに記載のお問い合わせ先までご連絡いただくようお願いいたします。 ※1 非営利団体が主催の企画や利益目的でない活動で、会場費や設備などの必要経費徴収のため参加費を徴収するイベントや勉強会での利用は商用利用に当たらないものとします 30

Appendix | お問合せ この資料に関するお問合せは以下メールアドレスまでお願いいたします。 利用した勉強会やイベントなどでの感想などもお待ちしております。 [email protected] 31