本記事は、ノーコードWEBサイト制作ツール『STUDIO』を使ったホームページ制作演習の後編です。

前編をまだお読みでない方はこちらからどうぞ→URL:https://implist.dev/entries/3b13983412c44555d892bf0c62e82b04

今回トライするのは、以下のセクションです。

※本演習のための架空の教室です

サンプルページURL: https://implist-training.studio.site

前半同様、公開されたサイトを見ながら、STUDIOでの作り方をイメージしてみましょう。そして、作り方がパッと思いつかなかった部分は、解説を読みながら手を動かして練習していきましょう！

【今回の解説】

1. 文字と画像がふわっと出現するアニメーション
2. ギャラリー
3. アクセス（googleマップの入れ方）
4. フッター
5. 内部リンクの付け方
6. 公開前にすること

STUDIO 文字と画像がふわっと出現するアニメーション

スクロールしていくと、画面の両サイドから文字と画像がふわっと出現してくるアニメーションです。この演出も「あるあるパターン」なので、ぜひマスターしましょう！

セクション全体のレイアウト

アニメーション設定の前に、まず、全体のレイアウトを組んでいきましょう。ボックスの配置（入れ子構造）は以下のようになっています。

STUDIOに実装するときは、以下の順番でボックスを設置していきましょう。

※本記事内では、説明のため各ボックスに色を付けております。

1. このセクション全体のボックス（灰色）
2. 横並びのコンテンツが入る親ボックス（オレンジ）
3. テキストパートが入るボックス（青）
4. 画像ボックス（緑）

オレンジのボックスは、中に２つの子要素が入っていますね。これらを**「横並び」かつ「均等揃え（両端揃えでもOK）」**にするよう設定しておきます。
※子要素の配置は、その親要素（今回はオレンジのボックス）に対して設定します。

つまずいてしまったら、ここで復習！
『STUDIO基本操作① ボックスモデルを制す者はSTUDIOを制す！？→https://implist.dev/entries/e3d8b5449404c6034a0d292d21e2d7a9

青ボックスにテキストを、緑ボックスに画像を入れたら、次はアニメーションの設定です。

アニメーションの設定

今回は、ページをスクロールしてこのセクションに来ると、文字度画像がふわっと現れるようにしたいので、**「出現時」**を以下のように設定します。

1. アニメーションをつけたい要素を選択する
2. **「条件付きスタイル（画面右上）」メニューから「出現時」**を選択する
3. 画面上部のタブを**「モーション」**に切り替えて、数値を設定する

アニメーションの設定は、テキストパートの入ったボックス（青）と画像ボックス（緑）のそれぞれに対して行います。

「移動」の数値が「30px」の場合は右に30pxずれた場所から、「-30px」の場合は左に30pxずれた場所からの出現になります。これで要素が左右からふわっと出現する演出ができます。

※今回は読者がモーションをしっかり目で追えるように「遅延 600」としてありますが、実際のサイトでは、この数値はもう少し小さくするとよいでしょう（間が空きすぎるとユーザーに不安感を与えてしまいます）。

アニメーションは、ご自身で数値をいじってそれをプレビューで見ながら、数値とサイトの印象をその都度確認していきましょう！

STUDIO ギャラリーセクション

ポートフォリオサイトにも欠かせない「ギャラリー（作品紹介）」のセクションを作っていきましょう。ここでのポイントは、複数個のボックスの配置設定と、ホバーすると画像がちょっと大きくなる動作の設定です。

複数ボックスの配置設定

今回の例のように、ひとつの作品がテンプレート化されたボックス（画像＋日付＋名前 など）に入っているときは、まずこのテンプレートを完成させます。

そして、このテンプレートを複製していきます。このとき、複製したい元の要素にマージンがついていると、このマージンも一緒にコピペされます。

※あとで親ボックスに「均等揃え」を設定して行間を整える場合は、マージンはゼロでもOKです。

テンプレート群の親要素を選択して、全体のサイズおよび子要素（=各テンプレート）の並べ方を指定します。このとき、並べ方として**「折り返し表示」（ジグザグ矢印）**を指定しておくのがポイントです。

要素の並べ方についてはここで復習！
『STUDIO基本操作① ボックスモデルを制す者はSTUDIOを制す！？』→https://implist.dev/entries/e3d8b5449404c6034a0d292d21e2d7a9

One Point
「枠線」は部分的につけることが可能です。お手本のテンプレートでは、右側と下側のみに枠線をつけてアクセントにしています。

ホバーすると画像がちょっと大きくなるアニメーション

ここでは、ある要素についてホバーする（カーソルを合わせる）と、その要素が拡大するようなアニメーションを設定します。

1. アニメーションをつけたい要素を選択する
2. **「条件付きスタイル（画面右上）」メニューから「ホバー」**を選択する
3. 画面上部のタブを**「モーション」**に切り替えて、数値を設定する

例として、真ん中の画像にアニメーションをつけてみます。**「ホバー時に、画像を1.2倍の大きさにする」設定として、「スケール」**をX, Yともに1.2としています。

One Point
**「Shiftキー」**を押しながら要素を順次クリックしていくことで、複数の要素を同時に選択することができます。こうすることで、6枚の画像を同時に選択し、ホバーの設定を一回で行うことができます。

STUDIO Googleマップの設置

本章では、STUDIOにGoogleマップを設置する方法を解説します。

STEP1. Googleマップから載せたい場所の位置情報を取得する
Google マップからのiframe情報の取得は、以下のように行います。

1. Google マップを開き、該当する住所を検索する
2. 「共有」アイコンをクリック
3. **「地図を埋め込む」**タブをクリック
4. **「HTMLをコピー」**をクリック

※上記は例として東京スカイツリーの住所を取得しています。

コピーしたiframeの情報は、いったんメモ帳などに貼り付けておきましょう。

STEP2. STUDIOにGoogleマップをセットする
STUDIOに戻って画面左のメニューバーを展開し、「追加」タブの**「ボックス」から「Map」**を選択し、ドラッグ＆ドロップでMapを追加します。そして、挿入されたMap縦横のサイズを調整します（調整の仕方は、通常のボックスと同じです）。※デフォルトでは東京タワーのマップが表示されます。

STEP3. iframeを埋め込みコードとして貼り付ける
次は、マップが選択された状態で、画面右のメニューを展開します。この中の**「埋め込みコード」のiframe**を、デフォルト（東京タワーの住所）から実際に表示したい住所のコードに差し替えればOKです。

先程、Googleマップから取得してメモ帳に貼り付けたコードに差し替えてみましょう。新しいコードを貼り付けた後、Enterを押すと地図が更新されます。

STUDIO フッターを作る

本章では、WEBサイトの最終セクションであるフッター部分を作っていきます。

本例では、サイト全体に統一感をもたせるために、トップページと同じ画像をフッターにも用いています。

ここでは、画像の**「明るさ」**を0.6として（明るさが 0だと元画像のまま、1だと真暗です）、白文字が浮き立つようにします。

黒背景に白文字を合わせた場合、文字がくっきり浮き立ちます。一方、グレーの背景に白い文字を合わせると、文字を控えめに目立たせることができます。

お手本通りに文字を入れていってもOKですが、ボックスを2つ横並べにして、**左側に「タイトル / 住所 / 連絡作先 etc…」、右側に「縦並びのメニュー」**というレイアウトもフッターあるあるです。

One Point
フッターは、**STUDIOのテンプレート（「追加」→「セクション」→「フッター」）**もありますので、これを利用することもできます。

STUDIO 内部リンクの設定

全てのセクションができたところで、トップページのメニューに（フッターにもメニューを付ける場合はフッターも）内部リンクをつけていきます。

内部リンクを設定する前の準備として、各リンク先にIDをつけていきます。

※「メニュー」→「各セクションへのリンク」をつけるため、各セクションごとに（デザインにかかわらず）親ボックスを設けておくと便利です。この「各セクションの親ボックス」にIDを振っていきます。

各セクションの親ボックスに、以下のようにIDを割り振ってみましょう。
※IDには頭に「#」を付けるのが決まりです。

• トップページ→ID: #top
• 教室紹介→ID: #introduction
• 講師→ ID: #teachers
• 作品紹介→ ID: #gallery
• アクセス→ ID: #access

IDを設定すると、リンク先としての選択肢に「#top, #introduction…」が、現れるようになります。「華道教室」を#topに、あとは各メニューに対応するIDを選択肢から設定していけばOKです。

STUDIO 公開前にSEO対策を行う

WEBサイトを公開する前に、「ページ設定（画面右上）」を入力しましょう。この項目をしっかり埋めることで、適切なワードで検索・表示されるされるようになります。

このほか、トップページのタイトルを「h1」に指定、各セクションのタイトルを「h2」に指定するなど、基本的なSEO対策はしっかり行いましょう。

参考：**『STUDIOで作るWebサイト☆必見SEO対策４選』**→https://implist.dev/entries/3f73389da0b66722bddc8599f4f5528f

また、今回は省略しますが、サイト全体をレスポンシブ対応にすることもお忘れなく！

参考：『STUDIOのレスポンシブデザインで押さえておきたい技３選』
→https://implist.dev/entries/da28fc72a916af98bd8e4d25438de514

サイトを公開するときは、「全体設定」ページから**「公開設定」をクリックし、URLを決めて入力すると（https://ここの文字列を決める.studio.site）、「公開」ボタン**が押せるようになります。

おわりに

いかがでしたか？前編〜後編を通してお読みいただくと、WEBサイトを制作する流れがつかめると思います。

前編・後編をざっと読んでおおまかな流れをつかみ、細かいテクニックは各記事でじっくり学んでいきましょう。慣れれば、かなりのハイスピードでひとつのサイトが完成します。

頑張っていきましょう！