STUDIO脱初心者！WEBサイト制作演習【華道教室ホームページ】前編
これまでに、ノーコードでWEBサイトが作れるSTUDIOというツールの使い方を11回にわたって解説してきました。
今回と次回は、その総集編としてWEBサイト制作演習を行います。
例として、以下のような「華道教室」のホームページを作っていきます。これをマスターすれば、「地域のお教室」のホームページが作れるようになります。目標完成タイム2時間を目安にトライしてみましょう！
完成したサイトがこちらです（本演習のための架空の教室です）。
URL: https://implist-training.studio.site
サイトを見ながら、STUDIOでの作り方をイメージしてみましょう。作り方がパッと思いつかないセクションは、解説を読みながら手を動かして練習していきましょう！
【今回】
- 全体の横幅を規定する
- ファーストビュー
- 「お知らせ」セクション
- 「教室紹介」セクション
STUIDO演習 全体の横幅を規定する
各セクションのレイアウトを組んでいく前に、下準備を行います。
今回は、WEBサイトを開いた時に、左右に余白があるページにします。そこで、まず、ファーストビューを含む全てのセクションが入るボックスを設置し、ページ全体の横幅を決めます。
（下記の例では横幅を80%としていますが、任意の値で大丈夫です。75〜90%くらいがよいでしょう。）縦幅はめいっぱい下まで伸ばします。
このとき、この「全体ボックス」に薄くシャドウをつけると、ちょっとカッコ良くなります。シャドウは**「Y方向: 2」「Blur（ぼかし）: 5」**で灰色のデフォルトカラーでOKです。
STUDIO 演習 ファーストビュー
ファーストビューは、以下のようなレイアウトで作成します。このセクションでは、以下の点をしっかり再現できるかを意識して取り組んでみましょう。
- ナビゲーションメニューの実装
- 文字出現のアニメーションの実装
完成ページURL: https://implist-training.studio.site
まず、先ほど設置した「全体ボックス」の中に、ファーストビューのセクションとなるボックスを設置します（通常のボックスでなく、画像ボックスにします）。
ファーストビューセクションの縦幅は90vhとし、次のセクションがちょっと見えているくらいの長さにします。これは、「この下にもコンテンツがあるのでスクロールしてくださいね」と、ユーザーに暗に伝える効果があります。
※vh=「viewport height」です。100vh＝画面幅いっぱいという意味です。縦、横それぞれに設定可能です。
今回はSTUDIO提携サイトの画像を使いますが、実在する教室のWEBサイトを作る際は、クライアントから写真を提供してもらいましょう。
参考：『STUDIO基本操作② 画像の設定と編集をマスターしよう』
→https://implist.dev/entries/6a2007be3c1757bc7e1a6456373df5af
One Point
メインの写真はサイト全体の雰囲気を決めるため、慎重に選びましょう。また、デザインから自身で行う場合は、メインの写真中の色でサイト全体を構成することを意識すると、統一感のあるサイトになります。
ナビゲーションメニューの実装
先ほど設置した画像ボックスの上に、通常の「ボックス」を配置します。これがナビゲーションメニュー全体の親要素となります。
この中にさらに2つのボックスを加え、横並び・両端揃えにします。
※横並び・両端揃えの設定は、2つのボックスの親要素に対して行います（「中に入っている子要素をどう並べるか」という設定だからです）。
※説明のため、ナビゲーションのボックスに色をつけてありますが、後で透明にします。
先ほど設置したボックス（スクショ中では水色のボックス）に文字を入れていきます。メニュー4つは横並びで配置した後、等間隔に設定します。
文字サイズやフォント等を設定した後、親ボックスのサイズ、マージン、パディング等を調整してメニューバー全体のバランスを整えます。
今回、筆文字っぽい明朝体は「Yuji Mai」、その他の明朝体は「Sawarabi Mincho」、ゴシック体は「Lato」を使用しています。
参考：『STUDIOの文字装飾テクニック5本ノック！』
URL→https://implist.dev/entries/154277bd6525864772a21644cca341a9
参考：『STUDIO基本操作① ボックスモデルを制す者はSTUDIOを制す！？』
URL→https://implist.dev/entries/e3d8b5449404c6034a0d292d21e2d7a9
文字出現のアニメーションの実装
ファーストビューの「伝統の優美」という文字について、上からひと文字ずつゆったりめに出現させてみましょう。この演出は、和風サイトに相性が良いですよ！
まず、文字を入れる親ボックスを設定し、1文字につき1つの文字ボックスを入れていきます。親ボックスには、文字が縦並び・等間隔になるよう設定します。
文字の配置ができたら、1文字ずつに対してアニメーションを設定していきます。アニメーションの設定は、以下のステップで行います。
- 対象となるボックスを選択する
- 「モーション」タブに切り替える
- **「条件付きスタイル」→「出現時」**を選択
ちょっとよくわからない…という場合は、こちらの記事でアニメーションをじっくり学習してみてください！
参考：『STUDIO これだけ覚えればOK！アニメーションの基礎マスター』
URL→https://implist.dev/entries/f0853e93ec65088b238fb1c39ba42347
参考：『STUDIO アニメーション実践 サンプル5選！』
URL→https://implist.dev/entries/6796a8167426a4500e9332af26b2f7f9
今回は、このように**「モーション」**タブの数値を設定しています。
1文字ずつ「遅延」時間を300（1000=1秒）ずつプラスしていくことで、出現時間に差をつけます。また、**「時間（文字が出現するのにかかる時間）」**は、1文字あたり1800とゆっくりめに設定しています。
【補足】
今回のサンプルは、文字の後ろにもうひとつ画像ボックスを設置し、ダウンロードした画像を入れて作っています。
※イラストはイラストACから取得したものです（「筆 丸」で検索して見つけてね）。
STUDIO演習 「お知らせ」セクション
次は、「お知らせ」のセクションです。本章では、2つのポイントが習得できているかどうかを意識しましょう！
完成ページURL: https://implist-training.studio.site
- マイナスマージンをつける
- ボックス内の内容をスクロールさせる
マイナスマージンをつける
**「マイナスマージン」**と聞いてピンとくるでしょうか？…マージンとは通常、隣り合う要素との間に間隔を設けるためのものです。例えば、「マージン50px」の意味は「隣の要素との間に50px分の余白がある」ということですね。
このマージンの値を負の値にすると、この逆…つまり**「マージン -50px」であれば「隣の要素に50px分重なる」**という意味になります。
以上を踏まえて、今回のレイアウトにチャレンジしてみましょう！
まずは、前のセクション（ファーストビュー）の下に、新しいセクションの親ボックスを設置します。そして、その中に「お知らせ」用のボックスを配置します。
この「お知らせ」用のボックスに対して、「-40px」のマージンを設定すると、上のセクションに40px分の重なりができます。
※デザイン上、このボックスは透明度を少し上げ、シャドウ（Y:2, Blur: 5, 灰色）をつけてあります。
マイナスマージンについては、こちらの記事でも詳しく解説しています！
『STUDIOの便利な画像操作5本ノック！』
URL→https://implist.dev/entries/432ba7f2c3f4c672bbf48978fd1e09c4
ボックス内で内容をスクロールさせる
ここでは、「お知らせ」ボックスの中の過去の項目を、スクロールすることで表示できるように設定してみましょう。
まずは、先ほど作った「お知らせ」ボックスの中に、もうひとつボックスを加えます（これを便宜的に「お知らせボックス②」と呼びます）。このとき、「お知らせボックス②」は十分な長さをとっておきます（はみ出てOK）。
そしてその中に、イベント情報の個数分の文字ボックスを入れていきます。
イベント情報を入れ終わったら、「お知らせボックス②」を選択して、**「はみ出し」→「スクロール」**に設定します。
最後に、「お知らせボックス②」のサイズを調整（ボックスしたの白丸をクリックして引き上げるようにドラッグ）して完成です。
イベントを追加したい場合は、「お知らせボックス②」を再度十分な長さまで引き伸ばしてから文字ボックスを追加しましょう。追加後に、ボックスを元の長さに戻せばOKです。
One Point
エディタ画面ではスクロールバーが表示されていますが、公開されたページではスクロールバーが表示されません。ですので、「スクロール（もっと見る）」と表記するなど、スクロールすることで隠れたコンテンツを表示できる旨を示しておくと親切でしょう。
STUDIO演習 「教室紹介」セクション
本章では、「教室紹介」のセクションを通して、ホームページを制作する際のちょっとした小技をご紹介します。
完成ページURL: https://implist-training.studio.site
上記のように**「写真＋半透過の白背景＋文字」のデザイン**はよく見るパターンだと思います。
しかし、いざ選んだ写真を配置してみると、**「写真が鮮やかすぎて他のセクションに馴染まない！」「印象がキツい！」**など困ったことになった経験はありませんか？…そんなとき、STUDIO上ではどのように対処すればよいかを解説していきます！
背景画像を編集する
背景画像の主張がちょっと強いかも…と感じたときは、画像に編集を加えて、少しマイルドな印象にしてみましょう。
「明るさ」を調節するのも有効な手段ですが、今回は**「モノクロ: 0.3」「ぼかし: 6px」**としてみました。
「モノクロ」は「1」にすると完全に白黒画像になります。今回は、色を少し残したいので「0.3」とやや控えめにするに留めました。
背景画像が文字の視認性をちょっと邪魔していると感じるときは、**「明るさ」や「モノクロ」「ぼかし」**等の数字を調整してみましょう。
画像編集についてはこちらで詳しく解説しています！
参考：『STUDIO基本操作② 画像の設定と編集をマスターしよう！』
URL→https://implist.dev/entries/6a2007be3c1757bc7e1a6456373df5af
One Point
画像に**「ぼかし」**を入れると、セクションの区切りまでぼやけてしまいます。そんなときは、以下の方法で対処します。
- まず通常の「ボックス」を設置します（親ボックス）。このボックスを、設置したい画像のサイズと同じ大きさにします。
- 上記のボックスの中央に、画像ボックスを入れます。
- 画像ボックスのサイズを、親ボックスよりひとまわり大きくします（例：縦幅103%、横幅103%）。
- 画像に**「ぼかし」**をかけます。
- 親ボックスを選択し、**「はみ出し」→「切り取り」**と設定します。
こうすることで、画像が親ボックスの位置で切り取られるため、画像そのものに「ぼかし」がかかったままで、境界線ははっきりとしたデザインが実装できます。
ここで、今回の「STUDIO演習」の前半が終了です！後半をお楽しみに！！
おわりに
いかがでしたか？わからなかったところは、以前の記事に戻って復習してみましょう！
本記事とお手本サイトは、デザインをSTUDIOに実装する練習のために作られたものです。実際に「地域の教室」のホームページを制作する際は、「料金設定」や「レッスン風景（教室の雰囲気がわかるセクション）」などが必要になります。
たくさん練習をこなして、いろいろなデザインを実装できるようになりましょう！！
