webデザインと額縁

以下はこのサイトにて画像を掲載した際の挙動を示す scss ファイルである。

img {
  max-width: 100%;
  height: auto;
  transition: all 0.35s ease-in-out;

  .blur & {
    $blur: 20px;

    -webkit-filter: blur($blur);
    filter: blur($blur);
  }
}

横幅を目一杯使うよう指示していて、縦は自由。ではこの状態で縦長の写真を掲載するとどうなるか。

このように、縦に見切れてしまう。

ならば写真を縮小することで画面に収めるのがよいだろう。しかし、そうすると縦の迫力が失われてしまう。

どうすればよいか。「諦める」が正解である。そのような額縁が与えられているのだから、その額縁に合う表現を再設計しなければならない。読者に届けたい印象や情報が、媒体の構造によってどう変わるのか、これを意識することは常に重要である。

かといって、額縁によって可能な表現が狭まるのは好ましくない。そこで、「額縁を生み出す」という次のステップに進む。なぜ縦長の額縁を私は求めるか。スマホが常に縦向きで持たれるから、カメラを向ける時も縦に持つのが自然だからだ。しかし、通常のブログのような媒体では先ほどの通り、縦長の画像による表現は額縁に合わず、持て余す表現であった。TikTok や Instagram が爆発的に流行しているのは、縦長の額縁を提供したからだ。これにより、発信側が最も自然な形でスマホで被写体を写し、そのフォーマットならではの表現が誕生し、そこから新たな文化が発生した。受信者側にとっても、縦が最も都合が良い。

写真に限らず、何かプラットフォームの額縁を制定するときは、「人は何を表現したいか」「現在の額縁では何が制限されているか」「額縁をどのように拡張することで、表現は花開くか」を意識することが重要である、という殴り書き。