editorial-portfolio-chapters

エディトリアルポートフォリオの各章

ページは、明確に区別されたエディトリアルの各章が続く構成にします。スタジオについて説明する前に、作品で関心を引きつけます。

ストーリーを組み立てる

1. 印象的なキャンペーン画像を1枚と、簡潔なポジショニングの一文で始めます。
2. すぐに厳選した作品へ進みます。各ケーススタディを、新しい雑誌の表紙のように扱います。
3. 作品が注目を集めたあとで、スタジオの視点を説明します。
4. 実績から問い合わせへの橋渡しとして、特大サイズのサービスタイポグラフィを使います。
5. 最後は、後付けではなく締めくくりとして感じられる、コントラストの強い問い合わせの章で終えます。

ソースに含まれるブランド、プロジェクト、人名、主張、画像、ラベル、リンクはすべて、オリジナルまたはクライアント提供のコンテンツに置き換えます。ソースのコンテンツではなく、テンポと階層を保ちます。

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

• ページをほぼ黒で縁取り、そこから温かみのある白と、プロジェクトごとに1色の落ち着いた色面を加えます。
• グロテスク体のディスプレイ書体と、ニュートラルな本文用書体を組み合わせます。ラベルはコンパクトにし、コピーは読みやすく保ちます。
• デスクトップでは左右の余白を40–64pxにして、12カラムグリッドに揃えます。
• 正方形または意図的にトリミングしたメディア、控えめな角丸、極細の罫線、ほぼ影のないスタイルを優先します。
• 最も説得力のある実績では、表示スケールに変化をつけます。すべてのセクションをヒーローや弁当箱型のグリッドにしないでください。
• 全面表示の章は、必要な場合に限って目的を持って使います。

ページを構成する

• ヘッダー：コンパクトなナビゲーションを両端に配置し、アイデンティティは中央に置くか、強く印象づけます。
• ヒーロー：最初のビューポートの大半を安定した画像に割き、最初のプロジェクトはスクロール後に見えるようにします。
• プロジェクト：暗いフレームと落ち着いた色のパネルを交互に使い、タイトル、役割、年、アクションをホバーなしで表示します。
• スタジオ：ありきたりなチームカードのグリッドではなく、非対称なポートレートや制作プロセスの構成を使います。
• サービス：大きな意味のある見出しやリンクとして、機能を設定し、折り返しを適切に制御します。
• 問い合わせ：ひと目でわかる1色のシグナルカラーと、主要なアクション1つに切り替えます。
• フッター：問い合わせへの誘導と競合させずに、ナビゲーション、所在地、ソーシャルリンク、法的表記をまとめます。

特徴的なインタラクションを実装する

エディトリアルなプロジェクトパネルの表示

• メディアの読み込み前に、パネルの高さを確保します。
• 画像レイヤーだけをクリップし、タイトルとメタデータは選択可能な状態にします。
• 500–760msのマスクまたは小さな移動で表示します。
• ホバーまたはフォーカス時には、メディアを1.02を超えない範囲で拡大し、同じプロジェクトアクションを表示します。
• 静止状態でも各パネルの内容が理解できるようにします。

特大サイズのサービスからの橋渡し

• スケールにはclamp()を使い、端に沿った短いテキストマスクを適用します。
• レイアウトを動かさず、ホバーやフォーカス時にウェイト、下線、またはトーンを変化させます。
• オプションの詳細は、セマンティックな開閉動作、Escapeキーへの対応、フォーカスの復帰を備えて開きます。
• モバイルでは意図的に折り返し、動きを抑える設定では即座に表示します。

モーションのデフォルト

• コントロールのフィードバックには160–220ms、セクションの表示には500–760msを使います。
• cubic-bezier(.22,.61,.36,1)を使い、直接の子要素を45–70msずつずらして表示します。
• パララックスは5%未満に抑え、ヒーローはじっくり見られる程度に安定させます。
• ナビゲーションや背景の変化は、セクションの境界に連動させます。
• 画面外のメディアやオブザーバーは一時停止し、ルート変更時にタイムラインをクリーンアップします。
• スクロールを乗っ取らないでください。

検証する

• 見出しの順序が論理的であること、フォーカスが見えること、代替テキストが有用であること、色が変わってもコントラストが保たれることを確認します。
• キーボード、タッチ、200%ズーム、幅の狭いモバイル画面、読み込みの遅いメディア、欠落したメディア、動きを抑える設定をテストします。
• アニメーション前でもケーススタディが読みやすく、ソースのコンテンツが少し言い換えただけの形で残っていないことを確認します。
• 根拠がない場合は、創作した受賞歴、クライアント、成果、主張を削除します。

ソースに基づくプロンプト集

エディトリアルポートフォリオを、ローダー、ピン留めされた章、アーカイブ、インスペクション、スティッキースタック、フッターのインタラクション用のポータブルなプロンプトに変換する実例として、Mara Voss Interaction Prompt Packを使います。再利用するのはモーションのロジックであり、参考元のアイデンティティ、コピー、画像、主張ではありません。

避けること

• 制作物を見せる前に、スタジオについて説明すること。
• すべての章で同じ角丸カードを繰り返すこと。
• カードの素早い動き、大きなパララックス、装飾的なモーションループ。
• ホバーするまでプロジェクト名やアクションを隠すこと。
• 元の画像、ブランドの表現、プロジェクト名、クライアントに関する主張をコピーすること。