ファーストビューの枠を設計する｜全幅と最大幅の型

文字や画像を置く前に、ファーストビュー全体の枠を作ります。STUDIOの制作では、セクションを全幅のボックスで作り、その内側に幅1280pxのコンテンツ用ボックスを入れる、という二重構造がよく使われます。

この型を使う理由は、広い画面で見たときに、文字や画像が横に伸びすぎるのを防ぐためです。背景は画面いっぱいに広げて、実際に読む文章や画像の幅は、コンテンツ側で幅を決めておくと、どんな画面幅でも読みやすい行の長さを保てます。見本サイトの残りのセクションも、すべてこの二重構造で作ります。

もう1つ、ヘッダーとの関係も整理しておきます。ファーストビューは、ヘッダーのすぐ下に置くセクションです。固定ヘッダーを使う場合は、ヘッダーに隠れないように、一番上のセクションの上側に余白を持たせます。動画では、セクションの上パディングを60pxにしています。

画像を用意する

STUDIOで画像を使う方法は、パソコンにある画像のアップロードと、ストックパネルからのフリー画像の取得の2つです。アップロードは Ctrl/⌘+5 で開くアップロードパネルに、画像をドラッグ&ドロップするだけで完了します。複数枚をまとめてドラッグすることもできます。

解説動画では、Ctrl/⌘+6 のストックパネルから、見本サイトと同じ雰囲気のビジネスパーソンの写真を選んで使っています。キーワードから雰囲気に近い写真を探せて、ストックパネルの写真は、商用利用できるライセンスで提供されています。

アップロードした画像は、プロジェクトのストレージ容量を使います。Freeプランの上限は5GBで、ダッシュボードのHomeタブから、いつでも使用量を確認できます。上限に近づいたときは、使っていない画像を削除しましょう。

画像のサイズにも、画質を保つための目安があります。4000pxを超えるような大きな画像を、そのままアップロードすると、STUDIOが表示を軽くするために圧縮処理をかけます。元の画像が大きすぎるほど、圧縮による劣化が目立ち、かえって粗く見えることがあります。実際に表示する幅の、およそ2倍のサイズで書き出してからアップロードするのが目安です。ファーストビューの画像は表示幅が約480pxなので、幅1000px前後の画像が目安になります。

Boxモード・Imgモードの使い分け

画像ボックスを新しく置くと、既定ではBoxモードになっています。Boxモードの最大の特徴は、ほかのボックスと同じように、子要素を中に入れられることです。画像ボックスの中にテキストボックスをドラッグして入れると、画像の上に文字が乗った状態を作れます。写真の上に見出しを重ねる表現に向いています。

画像ボックスを選択した状態で、右パネルからImgモードへ切り替えると、性質が大きく変わります。Imgモードの画像は、子要素を中に入れられません。テキストボックスをドラッグしても、弾かれて入りません。その代わりに、代替テキスト（alt）を設定できるようになります。

解説動画では、右のボックスを画像に変換して、ストックの写真を当てました。画像のタブには、写真のURLと、代替テキストの入力欄があります。

altは、画像が表示できないときや、視覚に障害のある方が読み上げソフトを使うときに、画像の内容を伝えるテキストです。検索エンジンが画像の内容を理解する手がかりにもなります。ファーストビューの人物写真は、見せること自体が目的で、文字を重ねる予定もないため、Imgモードを選んで、altを入力します。altには、画像が見えない人にも内容が伝わるように、「オフィスで打ち合わせをするスーツ姿のビジネスパーソン」のように、写真の内容をそのまま書きます。

Boxモードの画像では、もう1つ、つまずきやすい現象があります。幅と高さを両方autoにしたまま、中身を空にすると、画像が横一本の線のように潰れて見えることです。Boxモードの画像は、中身（子要素）の大きさを基準に高さが決まる仕様のため、中身が空だと、基準にする高さがなくなってしまうからです。直し方は、幅と高さに具体的な数値を入力して、サイズを固定する方法と、親ボックスの配置設定を両端揃えにして、親の高さいっぱいに広げる方法の2つです。

見出しと説明文を入力する

文字を表示するボックスには、テキストボックスとリッチテキストボックスの2種類があります。テキストボックスは、全体で1つのスタイルしか持てません。文章の一部だけ色を変えようとしても、ボックス全体の色が変わります。リッチテキストボックスは、文章の中に複数のスタイルを混在させられるため、一部だけ太字にしたり、リンクを付けたりできます。

ファーストビューの見出しと説明文は、それぞれ全体が1つのスタイルで済むため、テキストボックスを使います。ボタンのラベルのような短い文字列も同じです。部分的な強調や箇条書きが必要な長めの説明文には、リッチテキストボックスを使いましょう。毎回リッチテキストにしてしまうと、管理する項目が増えて手間がかかります。

文字の見た目は、右パネルの[テキスト]タブで設定します。最初にフォントを選びます。STUDIOで使えるフォントサービスは、Google Fonts、TypeSquare、自分で用意するカスタムフォントの3種類です。フォント欄を開くと、提供元ごとに区分された一覧が表示されます。解説動画では、フォントは初期のまま使い、サイズ・太さ・行高を調整しています。見本サイトと同じ書体にしたいときは、フォント欄からGoogle Fontsの Noto Sans JP を追加して選びます。

設定値のうち、行高は、複数行の文章の行と行の間隔を決める数値です。行高が詰まりすぎていると、複数行の文章が読みにくくなり、広すぎると、1つのまとまりとして読みにくくなります。見出しは文字が大きく行数も少ないため140%程度、説明文は読みやすさを優先して180%程度にします。ほかに、文字と文字の間隔を決める字間、文章の揃えを左・中央・両端から選ぶ整列の設定があり、見出しの印象や読みやすさを細かく調整できます。

背景色・角丸・ボタンを整える

ボックスの背景色は、右パネルの背景色の項目で設定します。色の指定方法は、カラーピッカーで感覚的に選ぶ方法と、色の数値であるHEXコードを直接入力する方法があります。HEXコードなら、デザインカンプやほかのツールで確認した色を、そのまま再現できます。見本サイトの黒は #222222 です。解説動画では、この色を black、薄いグレー（#F2F2F2）を light gray というカラースタイルに登録して使っています。スタイルに登録しておくと、一覧から選ぶだけで同じ色を当てられ、あとから色を直すときも、使っている場所へまとめて反映されます。

色の指定には、RGBAという形式もあります。最後のAはアルファ値と呼ばれる不透明度で、数値を下げるほど背景色が透明に近づき、下に重なっている要素が透けて見えます。写真の上に、うっすら色を重ねたいときなどに使います。複数の色を滑らかにつなぐグラデーションも、背景色の種類を切り替えて、開始色・終了色・角度を設定するだけで作れます。

ボックスの角の丸みは、角丸で設定します。数値を8px、24pxと大きくしていくと、角が少しずつ丸くなります。角丸を、ボックスの高さの半分以上の値にすると、四隅が完全な半円になり、ボタンによく使われるピル型になります。999px のように大きな値を指定しておけば、高さが変わっても、常にピル型を保てます。解説動画のボタンは、32px の角丸で、やわらかい印象に仕上げています。

左右に並べて組み上げる

素材が整ったら、ファーストビューのコンテンツ用ボックスの中に、左右2つのボックスを並べます。配列方向は、Chapter 2の2-4で学んだとおり、親ボックスの設定で決めます。2つのボックスをグループにして、配列方向を横にし、左のボックスに見出し・説明文・ボタンを縦に並べ、右のボックスに人物写真を入れます。

左右の幅を揃えるときは、サイズ指定のpx・%・auto・flexの違いを、Chapter 2の2-3で確認したとおりに使い分けます。解説動画では、%で50ずつに分けています。幅をpxで固定すると、画面幅が変わったときに崩れやすくなるため、%やflexで分け合う指定のほうが、あとのレスポンシブ対応が楽になります。

ここまでの完成状態

ファーストビューが完成したら、ヘッダーの下に、左に文字、右に人物写真が並んだ状態になっています。次の3-3では、その下にあるSERVICEのセクションを作ります。

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