noteの検索機能は意外と使いづらい?
「もっとサクッと見つけたい!」と思ったことはありませんか?
今回は noteのマガジンを見やすく、使いやすいWebページ を作ってみました!
🛠 課題: noteの検索結果は見にくい
🔍 noteの検索結果の課題
- 導線がわかりづらい ‐ どこから検索するかいつも迷う
- 一覧性が悪い – マガジンがカード形式ではなくリスト表示
- サムネイル画像が小さい – ビジュアルでパッと判断しにくい
- リンクが直感的じゃない – クリックしにくい
✅ 解決策
note非公式APIを使って、キーワード検索ページを作成!
✔ カードデザインで見やすく
✔ サムネイル画像を大きくしてビジュアル重視
✔ クリックしやすいCTAボタンを設置
✔ 検索結果を整理し、ユーザーフレンドリーなデザインに
🚀 実際に作ったWebページ
🔹 検索ページの特徴
- キーワードを入力すると、関連するnoteのマガジンを取得
- カード形式で一覧表示し、画像+タイトル+説明文を見やすく整理
- 新しい順に並び替え(今後のAPI対応次第)
- シンプルかつクールなUIを採用