Hacker News の API を使って、モバイル向けのニュース一覧LPを制作することにしました。
今回はデザインと実装を切り分け、まずは 画面設計から着手しています。
本日は Figma を使って、モバイル版の画面設計を行いました。
画面設計はこちらからご覧いただけます。
（画面設計 → こちら）
配色は、情報を素早く把握できるよう グレーを基調としたモノトーンにしています。
色数を抑えることで、ニュースのタイトルが主役になるよう意識しました。
記事一覧はカード形式で縦に並べ、初期表示は10件としています。
モバイルでのスクロール量や読みやすさを考慮し、
「もっと見る」を押すことで 10件ずつ追加表示し、最大30件まで閲覧できる設計にしました。
また、Hacker News にはコメント機能がありますが、
コメントの階層構造はUI・実装ともに複雑になるため、
今回は コメント本文は扱わず、コメント数のみを表示する方針としています。
ニュース一覧としての役割にフォーカスし、画面をシンプルに保つことを優先しました。
また、記事カード全体ではなく、タイトルをタップしたときに元のニュースソースへ遷移する設計としました。
スクロール中の誤タップを防ぎつつ、落ち着いたニュース一覧UIになるよう配慮しています。
明日からは、この画面設計をもとに
Hacker News API からデータを取得し、Next.js を使って表示部分を実装していく予定です。
APIの構造（ID一覧取得 → 個別データ取得）を理解したうえで、
モバイル向けに無理のない件数・構成で実装を進めていきます。