フッターを作る

フッターは、ページの一番下に置く、サイト全体の締めくくりです。見本サイトのフッターは、ロゴ、ナビ、区切り線、コピーライト、プライバシーポリシーで構成します。上の段に、ロゴとナビを左右に並べ、その下に区切り線を引いて、下の段に、コピーライトとプライバシーポリシーを左右に並べます。背景は、ファーストビューと同じ薄いグレーにして、ページの終わりを示します。

全幅のセクションの内側に、コンテンツ用ボックス（幅1280px）を入れる型は、ほかのセクションと同じです。セクションの上下のパディングは、上を60px、下を10pxにして、高さは数値で固定せずautoにします。コンテンツ用ボックスには、下側に40pxのパディングを取ります。ナビの項目が、ヘッダーより増えているのは、ページの一番下で、資料や問い合わせへ進む入口をまとめておくためです。

ナビのリンクは、できるだけヘッダーと同じ設定にします。ホームはホームページ、サービスは service、お知らせは news のIDへのアンカーリンクです。お問い合わせとプライバシーポリシーは、案件のサイトでは必ず専用のページを作って、リンクを設定しますが、見本サイトには専用のページがないため、リンクなしの文字として置きます。

HTMLタグを設定する意味は、このあとの節で詳しく扱います。フッターを、ヘッダーと同じようにコンポーネントにしておくと、ページが増えたときにも、同じ内容で表示できます。フッターの文言を直したいときは、1か所を直すだけで済みます。

ブレイクポイントと継承のルール

ここまでは、PCの画面幅で、見本サイトを作ってきました。スマートフォンやタブレットで開くと、文字が重なったり、要素がはみ出したりすることがあります。画面幅ごとに、レイアウトを個別に調整できる仕組みが、ブレイクポイントです。

STUDIOには、既定で5段階のブレイクポイントが用意されています。ツールバーで切り替えると、キャンバスの表示幅が、その数値に変わり、その画面幅で見たときのレイアウトを、個別に編集できます。

実務では、Default（PC）・Tablet・Mobileの3段階を軸に調整することが多く、SmallとMiniは、必要に応じて追加で調整する位置づけです。見本サイトも、この3段階で調整します。

ブレイクポイントの設定には、上位から下位へ、一方向に伝わる継承という仕組みがあります。PCで設定した余白やサイズは、何もしなくても、TabletやMobileに引き継がれます。反対に、TabletやMobileだけで値を変えても、その変更はPCには影響しません。継承は、常に画面幅の広いほうから狭いほうへの一方向で、狭いほうから広いほうには戻りません。

このため、レスポンシブの調整は、必ずPC（Default）から始めます。モバイルから最初に作ることはありません。Defaultで作ったデザインは、TabletやMobileにも、そのまま適用されます。反対に、TabletやMobileの状態で作った設定は、Defaultには反映されません。作った画面幅より画面が広くなった瞬間、その設定は適用されなくなります。

ブレイクポイントごとに個別の値を設定すると、右パネルのその入力欄に、色の枠が付きます。Tabletで変更した項目には黄緑、Mobileで変更した項目にはオレンジの枠です。PCの画面に戻ると、この色枠は表示されません。色枠がない項目は継承された値のまま、色枠が付いている項目は、そのブレイクポイントで個別に上書きした値、と見分けられます。

PC→Tablet→Mobileの順で崩れを直す

レスポンシブの調整は、必ずPC→Tablet→Mobileの順で進めます。継承が上から下への一方向であるため、この順を守らないと、同じ修正を何度もやり直すことになります。先にPCを完成させておけば、Tablet以降は、その状態を土台に、崩れている部分だけを直す作業に集中できます。

見本サイトでは、次の表のとおりに調整します。数値は、動画で実演している、見本サイトの指定値です。TabletでSERVICEを縦並びにすると、その設定はMobileにも引き継がれるため、Mobileでは改めて設定しません。

文字サイズの単位にvwを使うと、画面幅に対する割合で大きさが決まります。画面が狭くなるほど文字も小さくなるため、Mobileで見出しがはみ出しにくくなります。幅や高さの単位は、px・%・auto・vwから選べます。セクションの高さをpxで固定していると、中身を縦に並べたときにはみ出すため、autoに変えます。

横に3枚並べたカードを、狭い画面幅でそのまま見ると、カード同士が窮屈に押し合って、つぶれたように見えます。横幅の狭い画面に、PCと同じ3列の横並びを維持しようとするため、1枚あたりの幅が極端に狭くなってしまうのが原因です。親ボックスの配列方向を、狭い画面だけ縦並びにすると、カードが1列に並び、1枚ずつ十分な幅で表示されます。この変更は、変更した画面幅以下でだけ有効で、PCの横並びには影響しません。

ブレイクポイントごとに、要素の表示と非表示を切り替えることもできます。PCでは見せたいが、Mobileでは不要な要素に使います。Editor 5.0では、この切り替えは、レイヤーパネルの目のアイコンで行います。旧エディタで使っていた、画面左上のボタンを探しても見つからないため、レイヤーパネルを確認しましょう。

画像そのものを、画面幅によって差し替えることは、できません。同じ画像ボックスが、ブレイクポイントをまたいで存在し続ける仕組みだからです。PC用とスマートフォン用で、別の画像を出したいときは、2つの画像ボックスをあらかじめ重ねて配置して、PCでは片方を非表示に、Mobileでは、もう片方を非表示にします。見本サイトでは、この方法は使いませんが、案件で必要になる場面があります。

ハンバーガーメニューを作る

スマートフォンの画面では、PCのようにナビの項目を横に並べる余白がありません。そこで使われるのが、アイコンをタップするとメニューが開く、ハンバーガーメニューです。仕組みは、通常は見えないモーダルページと、それを開閉するリンクを設定したアイコンの組み合わせです。これまで学んだ、表示/非表示とリンクの設定の、応用です。

アイコンボックスで選べるアイコンの提供元は、Font AwesomeとMaterial Symbolsの2つです。提供元によって、線の太さや雰囲気が異なるため、1つのサイトの中では、どちらか一方に統一すると、印象がそろいます。Material Symbolsは、線の太さ・スタイル（Outline・Rounded・Sharp）・塗りを調整できます。

ハンバーガーメニューのアイコンをタップしても、何も起きないときは、アイコンにモーダルを開閉するリンクが設定されているかを確認しましょう。リンク先が、正しいモーダルページを指していないと、開閉しません。

Auto Responsiveの限界を知る

STUDIOには、PCで完成させたデザインから、レスポンシブの設定を自動で作る、Auto Responsive AIという機能があります。Mobileの画面でBaseを選択し、星のアイコンから実行するだけで、それらしい設定が自動で作られます。

ただし、Auto Responsiveには、明確な限界があります。px固定で指定した要素は変換されず、パディングの数値が、24pxから10pxのように、意図せず縮んでしまうことがあります。これは、Auto Responsiveが、ボックスの構造や余白の意図までは判断できず、既存の数値を機械的に縮めているだけのためです。ボックスモデルの基礎を理解していない状態で、Auto Responsiveだけに頼ると、崩れた結果を自分で直せず、かえって修正の手間が増えてしまいます。

HTMLタグとaltを設定する

見た目が同じテキストでも、それがページの中で、どんな役割を持つ文字なのかを、HTMLタグで示せます。検索エンジンは、このタグの構造を手がかりに、ページの内容を理解します。正しく設定しておくと、検索結果で、ページの内容が伝わりやすくなります。設定は、要素を選択して、右パネルの[設定]タブで行います。

設定したあとは、レイヤーパネルを見ると、各要素にタグの名前が表示されます。ページ全体で、タグが正しく並んでいるかを、確認する方法として使えます。セクションの見出しとして目立つ、英字のSERVICEとNEWSに、h2を設定します。日本語のサブ見出しは、補足の役割のため、見出しのタグは付けません。

画像の代替テキスト（alt）も、このタイミングで確認します。3-2で学んだとおり、altを設定できるのは、Imgモードの画像だけです。見本サイトでは、ファーストビューの人物写真が、Imgモードで、写真の内容を伝えるaltが入っているかを確認します。altは、画像1のような機械的な文言ではなく、画像が表示できないときにも内容が伝わる言葉で入力します。

メタ情報とサイトマップを設定する

右パネルの[サイト]タブでは、サイト全体で使う、タイトル・説明文・ファビコン・OG画像（ソーシャルカバー画像）を設定します。スクリーンの余白をクリックして、何も選択していない状態にすると、このタブが表示されます。

タイトルと説明文は、SEO Writing Assistという機能で、AIに自動生成させることもできます。文言に迷ったときの下書きとして使い、最終的な内容は、見本サイトのサービスの内容に合わせて調整しましょう。ファビコンとOG画像には、サイトの内容に合った画像を設定します。

記事の詳細ページのメタ情報は、3-5で、記事のプロパティに結びつけて設定しています。ここで、[ページ]タブを開いて、タイトルが記事のタイトル、説明文が概要、OG画像がサムネイルに結びついていることを、あらためて確認します。

サイトマップは、サイト内のページ構成を、検索エンジンに伝えるためのファイルです。ダッシュボードのHomeタブから、プロジェクト設定を開き、サイトマップのトグルをオンにするだけで有効になります。この機能は、無料プランでも使えます。

公式20チェックリストで公開前に確認する

公開する前に、STUDIOの公式が案内している、制作中のうまくいかないを解消する20のチェックリストで、最終確認をします。症状ごとに原因が整理されているため、公開したあとに不具合を見つけてから探すよりも、先にチェックリストで確認しておくほうが効率的です。見本サイトには、NEWSでCMSも使っているため、A項目も確認の対象です。

20のチェックリストは、公開したあとに不具合が見つかったときの、原因探しにも使えます。症状から該当する項目を引いて、上から順に確認すると、見落としを減らせます。

公開して確認する

チェックが済んだら、公開パネルから、サブドメインを入力して公開します。入力した名前が、〜.studio.site のURLになります。公開したあとは、実際に公開URLをブラウザで開いて、確認します。

エディタのプレビューではなく、実際に公開したURLを開いて、一連の動作を確認するのは、公開後の環境でしか見つからない不具合があるためです。確認の途中で気づいた不具合は、エディタで直して、あらためて公開しましょう。

実案件で必要になる有料機能

ここからは、実際の操作を伴わない説明です。学習中は、無料プランで完結しますが、実際にクライアントの案件でサイトを公開するときには、次の機能が必要になる場面があります。1つずつ確認しておきましょう。

独自ドメインの接続は、案件でよく求められる作業のため、流れを順番に押さえておきます。

案件の規模の目安としては、1ページのLPならMini、3ページ以上のサイトならPersonal以上、GTMやカスタムコードが必要な法人サイトならBusinessが選択肢になります。受注する前に、必要な機能とプランを、確認しておきましょう。

提出するもの

最後に、見本サイトを完成させて、公開URLを提出します。提出前に、次の項目を、公開サイトで確認しましょう。

提出するのは、公開した見本サイトのURL（〜.studio.site）です。STUDIOのバナーが表示されていても、問題ありません。コーチからのフィードバックを受けて、修正したあとは、再公開して、同じURLで確認してもらえます。