これから作る見本サイトを知り、セクション構成を決める

このChapter 3で作るのは、Optima（オプティマ）という架空の会社の企業サイトです。ただし、会社概要や料金などの別ページは作らず、1ページの中だけで完結する企業サイトにします。リンク先のページを増やさないぶん、最短でサイトを1つ仕上げて公開するところまでを体験できます。Optimaは、テクノロジーの力で企業のDX（デジタルトランスフォーメーション）を進め、業務の効率化からデータ分析までを一元的にサポートするAIソリューションのパートナーです。掲げているコンセプトは、AIの力で、現場の可能性を最大化する、です。このコンセプトが、ファーストビューの見出しにもなります。

これから、このOptimaの紹介ページを、ヘッダー、ファーストビュー、SERVICE、NEWS、フッターの5つのセクションに分けて、STUDIOで1から作ります。このレッスンの冒頭の動画で、完成した見本サイトを、ひととおり確認してから進みましょう。ヘッダーのボタンをクリックすると外部ページが開き、サービス紹介のカードが並び、お知らせの記事をクリックすると詳細ページへ移動する、といった一連の動きが、最終的に自分で作れるようになります。

制作課題の完成見本は、こちらです。https://webcoach-optima.studio.site/ 新しいタブで開いて、スクロールしながら、ヘッダーからフッターまでを確認しましょう。制作の途中で見た目に迷ったときも、この完成見本と見比べながら進めます。

実際の制作でも、まず完成のイメージと原稿を確認してから、手を動かします。見本サイトを読み解くときの最初の手がかりは、次の5つのセクションです。

コードを書く制作でも、STUDIOのようなノーコードでの制作でも、最初にやることは同じです。完成見本と原稿を読み、ページに必要なセクションの数と並び順を決めます。いきなりエディタを開いて手を動かすと、あとから「このセクションはどこに入れるのか」で迷い、作り直しが発生しやすくなります。

見本サイトは、上から順に1つずつ完成させると、前のセクションを土台にして次のセクションを作れる構造になっています。Chapter 2で学んだとおり、ボックスは親の中に子が入る入れ子で成り立っているため、上から順に積むほうが、親子の関係を崩さずに進められます。

設計の段階で必ず確認しておきたいのが、ナビの項目と、ページ内のセクションが対応しているかどうかです。見本サイトのヘッダーのナビは4項目ですが、セクションとして存在するのは、サービスとお知らせの2つだけです。ホームはページの先頭に戻る動き、サービスとお知らせはそれぞれのセクションへ移動する動きになります。残りの料金は、見本サイトに料金のセクションがないため、このコースではリンクを設定しません。

このコースでは、ダウンロードして用意する素材はありません。制作は、すべてSTUDIOの中で完結します。画像は、STUDIOのストックパネルから選んで使い、テキストは、各レッスンの表や手順に書かれた文言を入力します。

プロジェクト Optima を作る

設計が決まったら、見本サイトを作るためのプロジェクトを新規作成します。名前は Optima です。Chapter 1・2で練習に使った practice とは別に、白紙から作ります。

Optima は、受講者にとって2本目のプロジェクトです。ワークスペースが無料のFreeプランでは、プロジェクトを3本までしか持てません。このコースでは、練習用の practice と、見本サイトの Optima の2本だけを使い、残り1本分を空けておきます。3本目を空けておけば、もし作り直したくなったときも、新しいプロジェクトを作れる余裕が残ります。

ヘッダーを整える｜テンプレートの書き換え

見本サイトのヘッダーは、左にロゴ、右にナビとボタンが並ぶ構成です。ヘッダーは、ゼロから組まずに、追加パネルのテンプレートに入っているヘッダーを置き、中身を見本に合わせて書き換えます。ロゴ、ナビ、ボタンがひととおり入っているため、組み立てる手間を減らせます。

ヘッダーのような全ページ共通の部品は、Base直下に置きます。他のセクションの中に入れ子にしてしまうと、あとでポジションを固定にしたとき、親ボックスの範囲に閉じ込められて、画面に固定されなくなります。テンプレートからページの上へ置けば、Base直下に入ります。

ここでは、文字や色などの見た目の値は、見本と見比べながら合わせます。それぞれの設定の意味と使い分けは、次の3-2で詳しく学びます。ヘッダーの時点では、見た目を決める値は後から変更できるため、まずは構造をBase直下から正しく組むことを優先してください。

ポジション4種と固定ヘッダー

※ここから、リンクの設定・コンポーネント化までは、解説動画では実演していません。本文の手順にそって、自分の画面で操作しながら進めてください。

ヘッダーは、ページをスクロールしても上に残り続けてほしい要素です。この動きを実現するのが、ボックスのポジションの設定です。STUDIOのポジションには、相対・絶対・固定・追従の4種類があります。何も設定していないボックスは相対で、Chapter 2で組んだレイアウトは、すべて相対のまま並んでいました。

見本サイトのヘッダーは、スクロールしても常に画面の上にあるため、固定を使います。ヘッダーのボックスを選択し、右パネルの[変形]タブでポジションを固定に切り替えます。切り替えた直後は、見た目に変化がないように見えますが、プレビューでスクロールすると、ヘッダーだけが画面の上に残るのを確認できます。

固定を使うときに、必ず押さえておきたい性質があります。固定されたボックスは、もともとあった場所の領域を持たなくなることです。ヘッダーを固定にすると、後続のセクションは、ヘッダーがそこに存在しないかのように上へ詰めて配置されます。その結果、ページを開いた瞬間に、セクションの先頭がヘッダーの下に潜り込んで、隠れて見えなくなります。

仮のセクション2つは、このレッスンの動作確認用に置くものです。1つ目は3-3でSERVICEのセクションに、2つ目は3-5でNEWSのセクションに使います。中身を入れていくあいだは、上下のパディングで出した高さを、中身に合わせて調整します。

絶対と追従は、ヘッダーでは使いませんが、次のレッスン以降で出てくる場面があります。絶対は、直近の親ボックスを基準に、上下左右の数値で位置を指定します。画像の右上にラベルを重ねたいときなどに使います。追従は、普段は通常の並び順のまま表示され、画面の特定の位置まで来ると、そこに張り付きます。

ナビにリンクを設定する

ヘッダーの見た目が整ったら、ナビとボタンにリンクを設定します。STUDIOのリンクには、同じページの中を移動するアンカーリンク、別のページへのリンク、外部サイトへのリンク、メールを送るmailto、電話をかけるtelの種類があります。

見本サイトで使うのは、アンカーリンク、ページリンク、外部リンクの3つです。mailtoとtelは、見本サイトには登場しませんが、案件のサイトで問い合わせ先を載せるときによく使うため、書式だけ覚えておきましょう。

アンカーリンクの設定は、必ず先に移動先へIDを付けて、あとからリンク元でそのIDを指定する順序で進めます。リンク元でIDを指定するときに、候補として表示されるのは、すでに付けてあるIDだけだからです。

リンクは、文字そのものではなく、ボタンのようにまとまったボックスに設定すると、クリックできる範囲が広がり、押しやすくなります。特にスマートフォンでは、指でタップする面積が小さいと押し損ねやすいため、ボタンのボックス全体にリンクを付けましょう。外部リンクを新規タブで開く設定にしておくと、閲覧者が自分のサイトに戻って来られる状態を保てます。

ヘッダーをコンポーネント化する

ヘッダーは、ホームページだけでなく、3-5で作るお知らせの記事ページにも、同じ見た目で表示します。ページごとに別々のヘッダーを作ってしまうと、あとから色を1つ変えたいだけでも、すべてのページを開いて直すことになります。この手間を避けるのがコンポーネントです。

ヘッダーを選択して Ctrl/⌘+J を押すとコンポーネントになります。名前をヘッダーにして保存すると、Ctrl/⌘+8 で開くコンポーネントパネルに登録されます。登録したコンポーネントは、ほかのページにも配置でき、元を直すと、配置したすべての場所に変更が反映されます。

ここまでの完成状態

ヘッダーが完成したら、このレッスンで作ったものを確認します。次の3-2では、ヘッダーの下に置くファーストビューを作ります。

完成状態と違う箇所があれば、該当するセクションの手順に戻って、設定を見直しましょう。原因が見つからないときは、1つ前の状態まで戻して、操作を1つずつ確認すると、見つけやすくなります。