2026

アプリ・Web

ν-Portal(大学ポータルサイトの改善提案)

大学の学内ポータルを、学生の目線で使いやすく作り直した提案プロトタイプです。

担当
UI設計・開発
人数
2人(インタビューなどのユーザー調査を2人で行い、設計と開発を担当)
道具
React・TypeScript・Vite・Tailwind CSS・Radix UI・Supabase・Python
補足
ユーザー調査(インタビューなど)は、宮内康希と共同で行いました。画面内のキャラクター画像は画像生成AIで作成したものです。

帯を引くと、ここで動かせます。

体験専用の版です。サーバーにはつながず、表示される人物・お知らせ・時刻表などはすべて架空のものです。操作した内容は、再読み込みすると元に戻ります。

別のタブで開く

現行の学内ポータルの課題を解決するために制作したプロトタイプです。学生へのインタビューで、いまのポータルの使われ方と困りごとを調べ、その結果をもとに設計しました。

ホーム画面は、時計・次のバス・今日の授業・学食メニューなどのウィジェットを自分で追加・並べ替えでき、よく使うサービスへのクイックアクセスも編集できます。お知らせはカテゴリで絞り込み、ブックマークできます。

学生同士が発信できる場として、プロフィール・投稿・告知の機能も用意しました。

学生に実際に操作してもらうユーザーテストを行い、「新着件数が分かるので確認漏れを防げる」「スクロールで流し読みできる」といった評価と、バスや学食の情報をもっと詳しく、といった要望を得ました。

工夫した点

  • 現行のポータルには手を入れない

    現行のポータルを書き換えるのではなく、そこから必要な情報だけを取り出して表示する、別のシステムとして作りました。お知らせを取り込むスクリプトはPythonで書いています。

  • スマホのホーム画面と同じ操作で並べ替える

    クイックアクセスとウィジェットは、スマホのホーム画面と同じように、長押しすると編集の状態になり、ドラッグで並べ替え、×で外せます。

  • お知らせの一覧を軽くする

    お知らせは1件ごとの表示を独立させ、既読やブックマークが変わった項目だけを描き直すようにしました。ウィジェットは、使うものだけを後から読み込みます。

現行のポータルとの違い

1年生へのインタビューで聞いた内容をもとにしています。現行のポータルの画面は、2026年10月に撮影したものです。

現行のポータルで聞いた声ν-Portal での作り
お知らせ大事な連絡ほど目立たず、見逃しやすい。たどり着くまでのクリックが多い。一覧とタグが分かりにくく、探すときは検索に頼っている。ホームの中央にお知らせの一覧を置き、スクロールで流し読みできるようにした。重要なものは赤で示し、未読には印を付ける。カテゴリのタブ、キーワード検索、ブックマークで絞り込める。
リンクリンク一覧のページは、あまり使われていない。自分がよく使うものだけを集めたい。クイックアクセスとしてホームに置き、自分で追加・並べ替え・削除ができるようにした。
移動の多さ用を済ませるのに、あちこちのページへ移動しなければならない。1つのページで済ませたい。次のバス、今日の授業、学食のメニュー、図書館の開館時間を、ウィジェットとしてホームに並べた。必要なものだけを選んで置ける。
スマホスマホではレイアウトが崩れ、画像が小さくて読めない。そのため、PCでしか使っていない人が多い。スマホの幅でも崩れない配置にした。メニューとウィジェットは、左右のスワイプで出し入れできる。