SERVICEセクションの構造を確認する

見本サイトのSERVICEは、3つの部品で構成されています。上に、英字の見出しと日本語のサブ見出しのエリア、真ん中に、同じ形のカード3枚の列、一番下に、ボタン1つです。

セクションの土台には、3-1で置いた1つ目の仮セクションを使います。すでに、ID service が付いていて、ヘッダーのナビのサービスから、このセクションへ移動できる状態です。ファーストビューと同じように、全幅のセクションの内側に、幅1280px・高さ100%のコンテンツ用ボックスを入れて組みます。解説動画でも、3-2と同じ1280pxで作っています。見本サイトでは、セクションとセクションの間に、薄いグレーの細い区切り線が入っています。この線は、このレッスンの最後に作ります。

3-1では、仮セクションに上下200pxのパディングを入れて高さを出していました。これは、スクロールの動作確認のための値です。中身が入ってきたら、上下のパディングを、見本サイトの指定である80pxへ戻して、高さはautoのままにします。親の高さを数値で固定すると、中身が増えたときにはみ出しやすくなるため、親の高さは基本autoにしておく、というChapter 2の2-3の考え方がここでも役立ちます。

使う素材は、次の2種類です。画像はストックパネルの写真を3枚、テキストは次の表のとおりです。

見出しエリアを作る

見出しエリアは、縦並びのボックスの中に、2つのテキストを入れて作ります。上に、大きな英字の SERVICE、下に、小さめで太字の日本語のサブ見出し 提供サービス を置き、揃えは中央にします。大きい英字で、セクションの区切りを印象づけ、小さな日本語で、何のセクションかを補う組み合わせです。

英字の見出しと日本語のサブ見出しを組み合わせるのは、WEBサイトでよく見る型です。英字は雰囲気づくりとセクションの区切りの役割、日本語は何のセクションかを伝える役割を持ちます。見本サイトのNEWSでも、同じ型の見出しエリアを使います。そこで、この見出しエリアは、あとでNEWSへ複製して使い回せるように、1つのボックスにまとめておきます。

カード1枚を作る｜画像・文字・角丸

カードは、縦並びのボックスの中に、画像、タイトル、説明文を上から順に入れて作ります。まず1枚だけを、完成形に近い状態まで仕上げます。1枚目を作り込んでおくと、あとでリストにして増やすときに、3枚すべてが同じ見た目になるからです。

画像をBoxモードにしているのは、枠に合わせて画像がトリミングされる性質を使うためです。3枚の写真の縦横比が少しずつ違っていても、幅100%・高さ180pxの枠に収めると、3枚とも同じ大きさで並びます。人物写真のように、写っている内容を伝えるためにaltを設定したい画像は、3-2のようにImgモードを選びますが、カード上部の装飾的な写真は、Boxモードのほうが扱いやすくなります。

見本サイトのカードは、画像の角丸だけで見せていて、枠線や影は付けていません。解説動画では、枠線・シャドウ・フィルターの操作は実演していないため、ここは説明だけにしています。装飾を足さないことで、写真と文字が、すっきりと読める印象になります。ただ、ほかのサイトでは、カードを背景から浮かせたい場面があるため、枠線と影の基本を、ここで確認しておきます。枠線は、3-2で確認したとおり、太さと色を指定します。シャドウは、影の位置を決めるXとY、ぼかしの強さ、色を指定します。

ボックス自体をぼかすフィルターという設定もあります。画像の背景をぼかす表現などに使えますが、見本サイトでは使いません。試したあとは、シャドウもフィルターも元に戻しておきましょう。

リスト化して3枚に増やす

カードが1枚できたら、リストにして3枚に増やします。リストは、同じ形のデータが繰り返し並ぶ要素のための仕組みです。カードを選択して、メニューからリスト化を選ぶと、リストになります。ショートカットの Ctrl/⌘+L でも同じ操作ができます。解説動画では、メニューから選んでいます。アイテム数を3にすると、同じ形のカードが3枚並びます。

ここで、つまずきやすい現象があります。リスト化したあとに、1枚目の画像を差し替えると、3枚とも同じ画像に変わってしまうことです。

リストにした時点で、カードの中身は、3枚で共通のデータとして扱われます。そのため、見た目の編集画面で直接変えると、共通のデータが書き換わり、3枚すべてに反映されます。アイテムごとに中身を変えたいときは、右パネルの[データ]タブを開いて、アイテムごとに画像やテキストを設定します。

リスト・コンポーネント・グループ化を使い分ける

STUDIOには、似た名前の仕組みが3つあります。リスト、コンポーネント、グループ化です。どれも、複数のボックスをまとめて扱うための機能ですが、目的が異なるため、場面ごとに使い分けます。

見本サイトでは、SERVICEのカード列にリスト、ヘッダーとフッター、そして「資料ダウンロード」と「詳しくはこちら」のボタンにコンポーネントを使います。NEWSの一覧も、リストを使って作りますが、そのときの中身は、手動で入力するデータではなく、CMSに登録した記事になります。この違いは、3-5で扱います。

色とテキストをスタイルに登録する

なお、スタイルの登録は、解説動画では実演していません。この節は、本文の手順を見ながら、自分の手で進めてください。

ここまでで、ヘッダー、ファーストビュー、SERVICEと、3つのセクションができました。それぞれの箇所に、黒の #222222 や、同じ書式の見出しを、1つずつ入力して設定しています。この状態では、あとから見本サイトの黒を少し変えたくなったとき、すべての箇所を探して直すことになります。そこで、色と書式をスタイルとして登録して、一括で管理します。

Ctrl/⌘+4 でスタイルパネルを開きます。カラースタイルは、色の値そのものではなく、色の名前を、各ボックスに割り当てる仕組みです。名前に結びついた色を、スタイルパネルで変更すると、その名前を使っているすべての箇所に、変更が伝わります。テキストスタイルは、フォント・サイズ・ウェイト・行高をまとめて1つの名前に登録できる、同じ仕組みです。

ボタンを置いて仕上げる

カード列の下に、ボタンを置いて、SERVICEを仕上げます。このボタンは、新しく作らずに、3-1でヘッダーに作った「資料ダウンロード」のボタンをコンポーネントにして使います。ヘッダーのボタンと同じ見た目の部品を、別の場所でも使うため、リストではなくコンポーネントが向いています。

ただし、そのまま置くと、文字もリンク先も同じになります。元の文字を書き換えると、ヘッダーのボタンまで変わってしまうため、データのタブでプロパティを作ります。プロパティの値は、置いた場所ごとに別の内容を入れられます。解説動画では、テキストとリンクの2つを作り、SERVICEの下を「詳しくはこちら」、ヘッダーを「資料ダウンロード」にして、ヘッダーのリンク先をHomeにしています。

ここまでの完成状態

SERVICEが完成したら、見本サイトの上半分ができあがります。次の3-4からは、その下に置くNEWSを、CMSという別の仕組みを使って作ります。

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