documentary-brutalist-agency

ドキュメンタリー・ブルータリスト・エージェンシー

力強いタイポグラフィで視点を確立し、実際のプロジェクト画像でその裏付けを示します。

ストーリーを確立する

1. 看板のように大きなポジショニングコピーと最小限のナビゲーションで始めます。
2. 黒を背景に、選りすぐりの実績へと直接切り替えます。
3. 余白のある白い章で、スタジオの考え方を説明します。
4. ひとつのドキュメンタリーコラージュで、テンポのあるプロセスストーリーを構成します。
5. 淡い色の証明用サーフェスに、検証済みの推薦文や最新情報を加えます。
6. 最後に、シンプルなFAQで疑問を解消し、大きなフッターのワードマークへとつなげます。

掲載元の名称、プロジェクト、人、写真、引用文、主張、リンクを差し替えてください。独自の素材、またはライセンス取得済みのドキュメンタリー素材を使用します。

ビジュアルシステムを構築する

• 力強い黒と温かみのある白を使い、証明用のサーフェスには淡いミント色やピンク色を時折取り入れます。
• コンデンス体のディスプレイ書体と、ニュートラルなグロテスク体を組み合わせます。
• グリッド線を見せ、角を直角にし、ガラス表現、グロー、装飾的なグラデーションは避けます。
• タイポグラフィと写真で階層を作り、アイコンや装飾は最小限に抑えます。
• 改行を構成要素として活用し、すべてのブレークポイントで確認します。
• 強いコントラストを保ちつつ、すべての要素が同じ強さにならないようにします。

ページを構成する

• ヘッダー：簡潔なアイデンティティ、現在のセクション、明確なメニュー起動ボタンを配置します。
• ヒーロー：看板のように大きなコンデンス体の見出しをひとつ設定し、補足コピーは小さく保ちます。
• 実績：大きなタイトル、役割ラベル、ドキュメンタリー形式のメディアを使った黒い章で構成します。
• フィロソフィー：温かみのある白に切り替え、言葉数を減らして余白を増やします。
• コラージュ：物語上のDOM順序を保ちながら、画像の大きさや配置に変化をつけます。
• 推薦文：検証済みの引用文に限り、淡い色の証明用カードを使います。
• 最新情報：日付、カテゴリ、アクションを添えた簡潔な編集記事として配置します。
• FAQ：明確な境界線と予測可能な開閉動作を使います。
• フッター：大きなワードマークで締めくくり、連絡方法を明確に示します。

ドキュメンタリーコラージュを実装する

• CSS Grid を使い、メディアの読み込み前に各画像ボックスのスペースを確保します。
• ビジュアル上のグリッドが不規則でも、DOM順序は物語の順序に合わせます。
• スクロールの進行度に緩やかなトランスフォームを対応させ、パララックスは 5% 未満に抑えます。
• キャプションはホバー時とフォーカス時の両方で表示し、タッチ操作や支援技術でも利用できるようにします。
• 画像の読み込みに失敗した場合や画像がない場合も、グリッドを維持します。
• ストーリーを明確にする場合に限り、短いピン留めの切り替えを使います。連絡先やフッターには決して重ねません。

メニューとFAQのコントロールを実装する

• セマンティックなボタンと、ネイティブの details／summary またはアクセシブルな開示パターンを使います。
• aria-expanded を更新し、ディープリンクとブラウザー履歴を維持します。
• 真のモーダルメニュー内でのみフォーカスをトラップし、閉じたときに元の位置へ戻します。
• ホバー、フォーカス、押下、開いた状態、無効状態、読み込み中、現在の状態を、色だけに頼らず区別できるようにします。
• 動きが無効な場合でも、ナビゲーションとFAQを完全に操作できるようにします。

モーションのデフォルト設定

• コントロールには 160～220ms、マスクとセクションの表示には 500～760ms を使います。
• ゆっくりしたコラージュのパララックス、固定表示でのコントラスト変化、明確な黒白の切り替えを優先します。
• 読み進める際の画面遷移は、一度にひとつだけアニメーションさせます。
• 画面外のオブザーバーとメディアを一時停止し、ルートのタイムラインをクリーンアップします。
• 絶え間ない浮遊アニメーション、演出的なスムーズスクロール、スクロールの乗っ取りは使いません。

検証する

• CSS とモーションを無効にし、DOM順序でページを読みます。
• キーボードとタッチで、メニュー、FAQ、コラージュのキャプション、プロジェクトへのリンクをテストします。
• 320px、タブレット、デスクトップ、200% ズームで、コンデンス体の見出しの折り返しを確認します。
• 画像の寸法、代替テキスト、コントラスト、フォーカス、動きの軽減設定、メディア読み込み失敗時の状態を検証します。
• 実在しないプロジェクト、クライアント、引用文、受賞歴、成果を削除します。

避けること

• ブルータリズムを、無作為な配置やアクセシビリティを損なうコントラストとして扱うこと。
• 物語上の順序がない装飾的なメイソンリー配置。
• 角の丸い SaaS カード、ガラス表現、グロー、多用されるグラデーション。
• 実績の妨げになる、途切れのないパララックス。
• モーダルではないナビゲーションでのモーダルフォーカストラップ。