URL
担当
デザイン・コーディング
目的
TOUR PROSページのリニューアル（選手一覧・選手詳細）
こだわり
TOUR PROSページ（選手一覧・選手詳細）のリニューアルでは、視認性と柔軟性を両立したグリッドレイアウトを採用。多くの選手情報を一度に把握できる構成としながらも、契約プロ選手の増減や更新頻度の高さに対応できるよう、運用面を見据えた設計・実装にこだわりました。
デザインとコーディングの両面から、「見やすさ」と「管理のしやすさ」をバランス良く実現。更新性・保守性を担保しつつ、ブランドイメージを損なわないクリーンなデザインに仕上げました。
CLUB PING「TOUR PROS」ページ UI設計意図
1. グリッドレイアウトによる認知的スキャン効率の最大化
本ページではプロ選手の一覧を、明確なグリッド構造で整列させています。これは、HCI分野で言われる「F字型視線パターン」に対応し、ユーザーが視線を水平・垂直にスムーズに移動できるよう設計されたものです。加えて、選手名とローマ字表記を併記することで、日本語・英語双方のユーザーにとっての情報アクセシビリティを高めています。
2. 認知的一貫性と学習コストの低減
JLPGAとJGTOの構造を同一テンプレートで表示することで、UIの一貫性を保ち、ユーザーは「次に何が表示されるか」を予測しながら情報を取得できます。この一貫性は、ユーザーの認知的負荷を軽減し、操作や閲覧における迷いを最小限にすることを目的としています。
3. ビジュアルの優位性を活かした構成
選手情報を文字ではなく写真を中心に構成することで、視覚的印象と記憶への定着を高めています。これは認知心理学における「画像優位性効果」を活かした設計意図であり、ブランドとの結びつきを強く印象付ける狙いがあります。
4. レスポンシブ前提の視覚設計と余白活用
デスクトップ・モバイル双方での表示を意識し、写真と文字の間に適切なホワイトスペース（余白）を挿入。これは「ミニマリズム設計」や「ヒックの法則」に基づき、過度な情報量による混乱を避けながら、選手一人ひとりにフォーカスできるUIを意図したものです。
5. ブランドトーンとエモーショナルデザイン
選手の笑顔や真剣なプレーシーンなど、感情に訴える写真を採用することで、ノーマンの三段階モデルにおける「感情的デザイン」を重視しました。PINGというブランドの信頼性・親しみやすさ・プロフェッショナリズムを同時に体現するビジュアル表現を構築しています。
総括（作成意図のまとめ）
このページは、「PING」というグローバルブランドと契約するプロ選手たちの紹介を通じて、企業の信頼性・製品力・親近感を一貫したトーンで伝えることを目的とし、UI/UX設計においては認知負荷の軽減・視線誘導の最適化・視覚記憶の強化を意識してデザインしています。
