BiNDupテンプレート「PADDLE.inc」のビルボードを深掘り

太く大きなゴシック体の英字と、画像に少しだけ重なるようにずらしたビルボードが印象的な「PADDLE.inc」のテンプレートですが、このビルボード部を少し詳しく見ながら、アレンジを考えてみます。

ブロックの横幅と画像のサイズ

タイポグラフィのブロック

英語のタイポグラフィのブロックはコンテンツ幅100%としています。そして、ブロック余白はカスタムで左右は30pxです。
要するに画面（ブラウザウィンドウ）が広い場合、ページレイアウトのブロック内コンテンツの最大1170pxを超えて広がります。ウィンドウの幅に合わせて広がりますが、左右に30pxの余白は確保される状態になります。

そうすると、文字の左側には30pxの余白があるということになりますが、見た感じでは30pxよりも余白が大きく感じます。そこで、ブロック設定にある「Dressテーマ」を確認してみます。
現在のテーマを編集をクリックして、詳細設定を選択するとそのDressに設定されている項目が表示されます。一番下に「ページタイトル」がありますので確認してみます。ボックススタイルの余白で左側が30pxとなっています。これで、ブロックの余白30pxに、ページタイトルに対して設定されている左余白30pxを加えて、60px分の余白が左側に設定されていることがわかります。

※音声なし

メイン画像のブロック

画像のブロックはコンテンツ幅98%としています。そして、ブロック余白はカスタムで上下左右は0pxです。
そして、画像は中央配置になっていますので、画像の左右に各1%の余白ができるように思います。ですが、BiNDupのサイトエディタでサイトマップの開閉をクリックしてウィンドウを広げてみると、画像は左右に広がりません。これは画像を編集でSiGNで開いて見るとわかりますが、画像のサイズが1360pxとなっていて、そのサイズよりも広がることはないので、左右の余白が大きくなっていることになります。

試しに、出力サイズの「自動調整する」のチェクをはずし、PC: のところに100を入力し、単位を%にしてみると、画像は横に広がります。BiNDupでは大きいサイズの画像は幅に合わせて縮小表示されますが、小さいサイズは拡大はしません。幅に合わせて拡大したい時には、このような自動調整のチェックをはずし100%にして上げる必要があります。

※音声なし

文字サイズの単位

BiNDupの新しいテンプレートでは文字サイズの指定でvwの単位を指定しているものが多い印象です。vwは、Viewport Width（ビューポートの幅）の略で、現在のブラウザのウインドウの横幅を基準とし100とした割合になります。10vwとするとウィンドウ幅の10%ということになります。

ブロックなどの余白について無視して簡単に言えば、10vwのサイズの文字であればウィンドウ幅に関わらず10文字までが横に並び、それを超えると改行されるようなイメージです。pxだとウィンドウサイズによって１文字だけ改行されてしまうというような事が起こり得ますが、vwにすることでウィンドウ幅に対しての10%となるので10文字が収まることになるので、様々にモニターサイズがある中主流になってきているのでしょう。

何となく「だったら%でいいじゃん。」と思われるかもしれませんが、%は必ずしも画面幅を基準としません。左右に２分割した中で50%と指定すると２分割の中のさらに50%ということになりますので、画像（ウィンドウ）サイズを基準とする時にはvwが使われることになります。

ウィンドウ幅を基準とするvwは、10vwとしても必ずしも10文字が収まるとは限りません。このテンプレート「PADDLE.inc」のタイポグラフィでは7.7vw（スマホでは11.7vw）となっていますが、それなら100÷7.7で12文字までは横に収まるとはなりません。
このブロックに設定されている左右の余白や、ページタイトルに設定されている余白、文字間隔などの設定があると実際には12文字は収まりません。

PADDLE.incのビルボードをアレンジ

文字の重なりと画像サイズをアレンジ

テンプレート「PADDLE.inc」の大きな特徴である大きな太い文字をメインビジュアルに重ねている部分をアレンジしてみます。

重なりは、文字のブロックにあるDressで設定されています。左右違いブロックのページタイトルに対して下余白をマイナス値とすることで下にずらしています。文字ブロックの下余白を0pxとし、画像ブロックの上余白も0pxとすることで、-40pxと指定されている数値分が重なるようなイメージになっています。この数字を増やせが重なる部分が大きくなっていきます。

画像に1360pxのものを配置することで、ウィンドウサイズがそれを超える時には画像のほうが横幅が小さくなるため文字だけが左に広がるため左側を揃えないこともデザインになっていると思います。その文字と画像の横方向のズレを調整してのアレンジもできると思います。画像を右揃えにしてサイズを80%のようにしてみると、画像の左に20%分の余白ができるので、文字の下へのずらし方と合わせてレイアウトを調整できます。

また、文字のブロックに設定されているブロックアニメーションを変更することで印象を変えることもできると思いますが、新しく追加された「シャッター（右へ）」を選択してみるとブロックの重なりがあるとうまく機能しません。このような細かいことは設定しながら経験値として積み重ねていくしかないことだと思います。

※音声なし

文字が読みにくい時にDressで縁取りを設定してみる

画像の濃淡や文字の色によっては重なる部分が読みにくく感じることもあると思います。そんな時にはBiNDupのDressにある「縁取り」の設定で対応できるか考えてみましょう。ただ、この縁取りはフォントによっておかしくなることもあるので、縁取りを優先する時にはフォント（WEBフォント）を変える必要がある可能性があります。