SIGNAL NOISE 実験的デジタルマガジンサイト

### あなたの使命 **SIGNAL / NOISE** という実験的なデジタル出版物を設計・開発してください。 これはテクノロジー、人工知能、デジタル文化、そしてインターネットの未来に関する独立系雑誌です。 デジタル編集デザインの優れたプロジェクトと視覚的に競えるウェブサイトを求めています。個性のある体験であり、ありきたりなSaaSのランディングページではありません。 アートディレクション、タイポグラフィ、構成、色彩パレット、アニメーション、ビジュアルシステムを決めるクリエイティブな自由があります。 どのようにウェブをデザインするかを説明してほしいのではありません。**実際に構築してほしいのです。** ### プロダクト ウェブサイトには4つの主要コンポーネントがあります： **1. 編集カバー** 出版物のアイデンティティを即座に確立するファーストスクリーン。 SIGNAL / NOISE という名前、号数（ISSUE 001）、主役の編集記事、そして記憶に残る視覚構成を含める必要があります。 **2. 記事インデックス** テクノロジーとデジタル文化に関する、架空でありながらも説得力のある6つの記事のセレクション。 6つの同一のカードを使わないでください。主役のストーリー、二次的な記事、短いコンテンツを区別できる編集構成をデザインしてください。 **3. 読書体験** カバーからアクセスできる、少なくとも1つの完全な記事を開発してください。 記事タイトル：「The Internet Is Becoming a Place Without People」 リード文、複数のセクション、強調引用、そしてコンテンツに統合された視覚リソースを含めてください。 心地よく丁寧な読書体験である必要があります。 **4. ナビゲーションとインタラクション** 機能的なナビゲーション、トランジション、ホバーステート、視覚的インジケーター、そして小さなインタラクションのディテールを実装してください。 アニメーションは体験に何かを加えるものであるべきで、無意味な装飾であってはなりません。 ### 技術要件 - React、TypeScript、Tailwind CSS。 - アニメーションとアイコンのライブラリを使用できます。 - デスクトップとモバイル向けのレスポンシブデザイン。 - 基本的なアクセシビリティ、キーボードナビゲーション、`prefers-reduced-motion` のサポート。 - 機能しているように見えるだけの静的インターフェースは禁止。 - デザインの代わりに他のウェブサイトのスクリーンショットを使用しないでください。 - 写真や外部の視覚リソースを使用できますが、一貫したアートディレクションに統合してください。 - プロジェクトはローカルで実行できる必要があります。 ### デザイン基準 求めているもの： - 際立った、認識可能な視覚的アイデンティティ。 - 優れたタイポグラフィの階層。 - 意図を持って空間を活用する構成。 - 実験性と使いやすさの良いバランス。 - 丁寧なマイクロインタラクション。 - カバー、インデックス、記事間の一貫性。 - 単に圧縮されただけではない、デザインされたモバイル版。 避けるべきもの： - テンプレートのありきたりな外観。 - 完璧に整列された6つのカード。 - 機能のない装飾的なグラデーション。 - 読書を妨げる派手なエフェクト。 - 不必要なUIコンポーネント。 - AIプロダクトのランディングページの典型的な外観。 ### クリエイティブな自由 特定の視覚的リファレンスに従う必要はありません。 SIGNAL / NOISE が編集アイデンティティとして何を意味し、どのように視覚的に表現されるべきかを自分で決めてください。 実験的、ミニマリスト、ブルータリスト、洗練されたもの、あるいは全く異なる方向性を採用することができます。 重要なのは、あなたの決定が全体として意味をなすことです。 ### 成果物 プロジェクト全体を構築してください。 完了時に、動作することを確認し、主要なアートディレクションの決定について簡単な説明（最大200語）を提供してください。 **質問したり、視覚的方向性の承認を求めたりしないでください。決定を下し、実行してください。**