フォトグラフィーは2006年以来、ITコンサルティングと並ぶもう一つの柱です。年月とともにモチーフは進化してきました — 静かなポートレートから、風景の中の人物、そしてスタジオでの演出まで。一方で、これらの作品をウェブ上でどう見せるかは、背後にある画像処理の技術と同じ速度では進化してきませんでした。サイトのリローンチは、フォトグラフィーのセクションに意識的に時間を割く良い機会でした。
作品に呼吸を許すスライダー
フォトグラフィー・ページ では、ギャラリーが意図的に通常のコンテンツ・コンテナを破り、画面の全幅を占めます。Edge-to-edge — サイト内でこれが起こる唯一の場所です。作品を一列に押し込むべきではない。それ自体がコンテンツなのですから。
仕組みは以下の通りです:
- フル解像度(1920×1280)の42枚のスライド、最初の1枚以降は遅延読み込み、
- 前後のナビゲーションには矢印キーと矢印ボタン、
- 下部の小さなドットが可視的な目次として機能、
- ライトボックスを開くと一時停止するオートプレイ、
- CSSキーフレームによる柔らかいクロスフェード遷移。
クリック、拡大、次へクリック
各スライドには可視のキャプション・オーバーレイ(多言語 — 後ほど詳しく)と不可視のボタンラッパーがあります。クリックすると、暗い背景の上にフルスクリーンのダイアログとしてライトボックスが開きます:中央に大きく画像、左右に矢印、右上に閉じるアイコン。キーボードも同じように動きます — 矢印キーでページ送り、Escapeで閉じる。小さなステージ・ロジックが遷移中、退出するスライドと入ってくるスライドを一瞬重ねて保持し、切り替えが急ではなく滑らかに感じられるようにしています。
同じライトボックスの仕掛けは、ブログ記事内に埋め込まれた画像にも用意されています。50行のJavaScriptファイルが <img class="blog-img"> へのクリックを委譲し、ネイティブの <dialog> ノードを生成し、画像を中央に配置 — それだけです。お試しください:この記事のどの写真をクリックしても、大きく開きます。
5言語でのキャプション
フォト・スライドにはそれぞれ alt テキストと可視のキャプションがあり、両方とも5つのバリアント(ドイツ語、英語、フィンランド語、ポーランド語、日本語)を持つ型安全な言語レコードとして保管されています。日本語版のサイトに到達した方は日本語のキャプションを目にし、スクリーンリーダーも alt テキストを日本語で読み上げます。最小の細部に至るまでのローカリゼーションです。
(サイトがそもそもどうやって日本語を獲得したかは、ジャパンタグの記事 でお伝えしています。)
自分専用のブログ・カテゴリ
新登場:フォトグラフィー・ブログ概観。フォトグラフィー・カテゴリに該当するすべてのブログ記事のフィルタ表示 — 今のところまだコンパクトですが、これは変わっていきます。3つの小さな色付きチップ(コンサルティング、ディストリビューション、フォトグラフィー)が、すでにメイン概観で記事を分類していますし、いま読んでいただいているこの記事は、いわばその専用カテゴリ・レーンにおける最初の一篇です。
次に控えていること
次のフォトグラフィー記事のためのテーマはすでにいくつか頭の中にあります — モバイル・スタジオでの光のシェイピング、ビューティー・レタッチがいつ役立つか(そしていつ害になるか)、画像のルックを意識的に選ぶこと。コーチング や共同撮影にご興味があれば、ぜひ 最初の一歩 をどうぞ。
