ポートフォリオに新しい舞台を — リローンチにおけるフォトグラフィー

carecom.de のリローンチで、フォトグラフィーのセクションも大きくグレードアップしました — 端から端まで広がる新しいスライダー、スライドとブログ画像のためのライトボックス、多言語キャプション、そして専用のブログカテゴリ。細部の作業の小さな展示室です。

フォトグラフィーHarald Mühlhoff 読了 1 分

麦畑の中の女性 — 矢車菊に囲まれた横顔、晩夏の柔らかい光

フォトグラフィーは2006年以来、ITコンサルティングと並ぶもう一つの柱です。年月とともにモチーフは進化してきました — 静かなポートレートから、風景の中の人物、そしてスタジオでの演出まで。一方で、これらの作品をウェブ上でどう見せるかは、背後にある画像処理の技術と同じ速度では進化してきませんでした。サイトのリローンチは、フォトグラフィーのセクションに意識的に時間を割く良い機会でした。

作品に呼吸を許すスライダー

フォトグラフィー・ページ では、ギャラリーが意図的に通常のコンテンツ・コンテナを破り、画面の全幅を占めます。Edge-to-edge — サイト内でこれが起こる唯一の場所です。作品を一列に押し込むべきではない。それ自体がコンテンツなのですから。

仕組みは以下の通りです:

  • フル解像度(1920×1280)の42枚のスライド、最初の1枚以降は遅延読み込み、
  • 前後のナビゲーションには矢印キーと矢印ボタン、
  • 下部の小さなドットが可視的な目次として機能、
  • ライトボックスを開くと一時停止するオートプレイ、
  • CSSキーフレームによる柔らかいクロスフェード遷移。
シャンボール城を背景に秋の落ち葉を投げ上げる女性

クリック、拡大、次へクリック

各スライドには可視のキャプション・オーバーレイ(多言語 — 後ほど詳しく)と不可視のボタンラッパーがあります。クリックすると、暗い背景の上にフルスクリーンのダイアログとしてライトボックスが開きます:中央に大きく画像、左右に矢印、右上に閉じるアイコン。キーボードも同じように動きます — 矢印キーでページ送り、Escapeで閉じる。小さなステージ・ロジックが遷移中、退出するスライドと入ってくるスライドを一瞬重ねて保持し、切り替えが急ではなく滑らかに感じられるようにしています。

同じライトボックスの仕掛けは、ブログ記事内に埋め込まれた画像にも用意されています。50行のJavaScriptファイルが <img class="blog-img"> へのクリックを委譲し、ネイティブの <dialog> ノードを生成し、画像を中央に配置 — それだけです。お試しください:この記事のどの写真をクリックしても、大きく開きます。

白いコルセットを身につけた若い女性のスタジオ・ポートレート、ピンクと紫の縁取り光

5言語でのキャプション

フォト・スライドにはそれぞれ alt テキストと可視のキャプションがあり、両方とも5つのバリアント(ドイツ語、英語、フィンランド語、ポーランド語、日本語)を持つ型安全な言語レコードとして保管されています。日本語版のサイトに到達した方は日本語のキャプションを目にし、スクリーンリーダーも alt テキストを日本語で読み上げます。最小の細部に至るまでのローカリゼーションです。

(サイトがそもそもどうやって日本語を獲得したかは、ジャパンタグの記事 でお伝えしています。)

ソファに座る若いカップルとボーダーコリー — 親密なライフスタイル写真

自分専用のブログ・カテゴリ

新登場:フォトグラフィー・ブログ概観。フォトグラフィー・カテゴリに該当するすべてのブログ記事のフィルタ表示 — 今のところまだコンパクトですが、これは変わっていきます。3つの小さな色付きチップ(コンサルティング、ディストリビューション、フォトグラフィー)が、すでにメイン概観で記事を分類していますし、いま読んでいただいているこの記事は、いわばその専用カテゴリ・レーンにおける最初の一篇です。

次に控えていること

次のフォトグラフィー記事のためのテーマはすでにいくつか頭の中にあります — モバイル・スタジオでの光のシェイピング、ビューティー・レタッチがいつ役立つか(そしていつ害になるか)、画像のルックを意識的に選ぶこと。コーチング や共同撮影にご興味があれば、ぜひ 最初の一歩 をどうぞ。

Harald Mühlhoff

エラーが発生しました。 再読み込み 🗙

サーバーへ再接続しています …

再接続に失敗しました — 秒後に再試行します。

再接続に失敗しました。
もう一度お試しいただくか、ページを再読み込みしてください。

サーバーがセッションを一時停止しました。

セッションを再開できませんでした。
もう一度お試しいただくか、ページを再読み込みしてください。