第2回は「ノーコードツール」と「STUDIO」の基礎について学びます。
ノーコードツールとは?
ノーコードツールとは、プログラミングの知識がなくてもウェブサイトやアプリを作成できるツールのことです。
代表的なものとして、STUDIO、Wix、ジンドゥー、Shopify、BASE、などが挙げられます。
ノーコードツールを利用することで、プログラミング言語の知識が無い初心者でも簡単にウェブサイトを作成することができます。一般的に、ドラッグ&ドロップで素材(画像やテキスト)を配置するだけで簡単にWebサイトを構築することが可能です。
プログラミングの知識がなくても簡単に利用できるため、初心者でも簡単に使いこなすことができますが、SEOやアクセシビリティに配慮した設計で構築する場合には、HTML等の基礎的な知識が必要になります。
「STUDIO」基礎編
動画のおさらい
デザインをそのまま実際のWebサイトとして公開可能な、次世代Webデザインツール。
コーディングなしで、完全オリジナルなWebサイトを作成することが出来る。
制作プロセスがシンプルで、爆速でWebサイトを公開することが可能
従来のWeb制作の流れ

STUDIOのWeb制作の流れ

まっさらな状態から制作を始めることが出来る為、他のノーコードツールと比べて表現の自由度が高い。

現在(2023年4月時点)は上質なテンプレートが多数ありますので、いろんなジャンルのテンプレートに触れてみよう。

STUDIOで構築可能なWebサイトの構造を学ぶことが出来る為、学生の皆さんには、テンプレートを選んでからの制作スタートをオススメします。
メンバーを招待して共同でデザイン編集することが可能です。追加人数の制限はありません。

無料プランの場合、サブドメイン(○○○.studio.design)としてサイトを公開できます。
ドメイン(に設定できる文字列)は早いもの勝ち。お気に入りのワードを含んだドメインを取得したいのであれば、早めに設定してみましょう!
豆知識:サブドメインとは?
「hoge.com」を本体とした際に、「fuga.hoge.com」のようにドメインの先頭に任意の文字列を挿入し、ドメインを区分けするものです。1つのドメインを用途別に分割したい時に使用されます。
サブドメインの使用例として、「Yahoo!」などが参考になります。
サブドメインを利用して複数サービスを展開しているようです。
- Yahoo!JAPAN : https://www.yahoo.co.jp/
- Yahoo!ショッピング : https://shopping.yahoo.co.jp/
- Yahoo!プレミアム : https://premium.yahoo.co.jp/
- ヤフオク : https://auctions.yahoo.co.jp/
- Yahoo!ニュース : https://news.yahoo.co.jp/
豆知識:独自ドメインの設定も可能
有料プランになると独自ドメインを設定できます。
もし、今後も個人のWebサイトとして活用することを考えている方は、独自ドメインの取得方法からSTUDIOでの設定方法まで詳しく教えますので、気軽に相談してね!
STUDIOでは、ボックスレイアウト(ボックスモデルとも呼ぶ)の考え方を採用しています。
「HTMLで定義された要素は全て長方形のボックスの中に納められている」という考え方で、これを元にWebサイトを制作していくことになります。
四角の箱に画像や文字を入れて、積み木のように重ねていくイメージです。
マージンは、ボックスの外側の余白
パディングは、ボックスの内側の余白
マージンとパディングは、家と土地の関係でよく例えられます。以下のようなイメージです。

ボックス内の要素は、上下左右・斜めを含めた9つの位置に配置できます。整列の向きは矢印のボタンですぐに変更可能。
レスポンシブ対応のWebサイトを行う場合はジグザグ矢印に設定しておくとオススメ。
実際にカード型のレイアウトを組んでみよう!
まずはSTUDIOにログイン!
レイアウト見本を参考に、同じようなレイアウトをSTUDIOで再現しよう。

【おまけ】StudioにInstagramを埋め込もう
外部ツール rss.app を使って入れることも出来るけど、これは有料プランになるので学生の皆さんがまず試してみたいという場合には下記の『SnapWidget』を使うやり方があります。
https://note.com/chako731/n/n87c48a4d5939
次回予告
次の授業は、更に詳しいSTUDIOの使い方を学んでいきます。
次回をお楽しみに!