【2025年度版】noteマガジン一覧をWebページから取得!!

web service

noteの検索機能は意外と使いづらい?
「もっとサクッと見つけたい!」と思ったことはありませんか?
今回は noteのマガジン見やすく、使いやすいWebページ を作ってみました!

🛠 課題: noteの検索結果は見にくい

🔍 noteの検索結果の課題

  1. 導線がわかりづらい ‐ どこから検索するかいつも迷う
  2. 一覧性が悪い – マガジンがカード形式ではなくリスト表示
  3. サムネイル画像が小さい – ビジュアルでパッと判断しにくい
  4. リンクが直感的じゃない – クリックしにくい

✅ 解決策

note非公式APIを使って、キーワード検索ページを作成!
カードデザインで見やすく
サムネイル画像を大きくしてビジュアル重視
クリックしやすいCTAボタンを設置
検索結果を整理し、ユーザーフレンドリーなデザインに


🚀 実際に作ったWebページ

🔹 検索ページの特徴

  • キーワードを入力すると、関連するnoteのマガジンを取得
  • カード形式で一覧表示し、画像+タイトル+説明文を見やすく整理
  • 新しい順に並び替え(今後のAPI対応次第)
  • シンプルかつクールなUIを採用
Noteマガジン検索

Noteマガジン検索

https://note.com