PICK UP

LuggGo!

北海道情報大学Webデザインコンテスト2026年度 応募作品です。(結果は6月中旬以降公開予定)

主に、企画案提案、ワイヤーフレーム、React/Next.jsによる実装を担当しました。

このサイトを見に行く

制作時期: 2026年 5月

  • React/Next.js
  • HTML/CSS
  • GSAP
  • 外部API連携
LuggGo! サムネイル
Journey
  • 企画段階。今回のコンテストのテーマは、「観光をテーマに、AIを活用して便利になる仕組みをWeb上で表現する」というものでした。
    私たちは「手ぶら観光」という荷物を持たずに観光できるサービスの利用促進を図ることで、オーバーツーリズムの混雑問題の解消と観光客の旅行体験の質の向上を同時に目指そうと考えました。

  • デザイン。ワイヤーフレームは私が作り、デザインは前年度の「フードドライブってなんですか?」も共同制作した先輩が制作してくださりました。
    先輩のデザインを見るたびに、デザインを学んでいる人が作るデザインはやはりすごいなと痛感しています。

  • 「AIプランナー」機能では、ユーザーが自身の旅行のスケジュールを入力すると、そのスケジュールにぴったりな「手ぶら観光カウンター」の利用スケジュールを提案してくれます。
    この機能によって、ユーザーは自分の旅程に合うカウンターをいちいち調べなくても、ぴったりなカウンターを見つけることができ、より手ぶら観光カウンターの利用ハードルを下げることができると考えています。

  • 検索機能では、地域、サービス(一時預かり/配送など)、フリーワード検索ができるようにしました。アプリ開発はまだ始めたての私にとってかなり難易度が高かったですが、とにかく時間を費やして考えることで、なんとか完成させることができました。

フードドライブってなんですか?

北海道情報大学Webデザインコンテスト2025年度 最優秀賞作品です。

主にコーディングを担当しました。

このサイトを見に行く コンテストの講評ページへ

制作時期: 2025年 5月

  • HTML/CSS
  • JavaScript
  • GSAP
北海道情報大学 メディアデザイン展 2025 ティザーサイト サムネイル
Journey
  • 企画段階①。何のサイトにするのか、ざっくりどんなデザインにしていくのか、など。

  • 企画段階②。ターゲットやサイト制作の目的、掲載内容、フードドライブについての情報収集など。

  • デザイン(一部)。よく見るとテキストで会話してた跡が。

  • 相方の先輩が描いてくれた最高なイラスト達。

  • 自分から「こんなことできますよ!」と相方の先輩にプレゼンしておきながら、一番実装に苦戦した横スクロールギミック(GSAP)。

HERBS FOR YOU

大学の留学プログラムの一つである「国際コラボレーション」で制作したWebサイトです。
タイの学生と情報大の学生と共同制作しました。
私はTOPページ以外のコーディングを担当しました。

タイのハーブ療法に使われるハーブを、症状から分かりやすく検索できるサイトです。

このサイトを見に行く

制作時期: 2025年 9月

  • HTML/CSS
  • JavaScript
HERBS FOR YOU サムネイル
Journey
  • まず初めに、タイの高齢者と日本の高齢者が抱える問題について、タイの学生とブレインストーミングを行いました。その結果、タイの高齢者は健康面や金銭面、情報面での問題を抱えてることが多いということが分かりました。

  • その後、タイの高齢者に実際にインタビューを行い分析した結果、タイのハーブ療法が高齢者のWellnessを支えると考え、「ハーブの情報を視覚的に分かりやすく探せるWebサイト」を制作することにしました。そして、機能面を本格的に考える前に作成したペルソナがこちら。

  • 機能面のアイデアを付箋に書いて貼っていきます。この中から、Webサイトに実装する機能を選んでいきます。

  • デザイン。高齢者向けのサイトなので、文字の大きさを大きめに。

  • トップのイラスト内にある、体の部位のポイントをクリックすると、その部位に効果のあるハーブがモーダルで表示されます。

全作品はこちらから

私について

私のアイコン

安田 愛唯

Yasuda Mei

北海道情報大学 情報メディア学部 情報メディア学科 テクノロジー専攻

斎藤一ゼミ 3年

Webサイト制作、Webアプリ制作を中心に勉強しています。開発するのも好きですし、新しいアプリのアイデアを考えるのも大好きです。
元々デザイン専攻を目指していたので、Figma、illustratorなども勉強していました。特にFigmaはお気に入りで、Webデザイン制作、企画構想、プロトタイプ制作は全てFigmaで行っています。
また、小さいころから楽器を弾くことや音楽を聴くことが好きです。ピアノ、シンセサイザー、ベース、電子管楽器などを楽しんでいます。また、DAWを触って曲作りしていた時期もあります(ちなみにDAWはAbleton Live)。

Skills

HTML/CSS
JavaScript
React/Next.js
Design (Figma)
WordPress

Others

  • TypeScript
  • Tailwind CSS
  • GSAP
  • jQuery
  • 外部API連携
  • PHP
  • SQLite
  • MongoDB
  • Linux
  • Git
  • GitHub
  • Vercel
  • Railway
  • Node-RED
  • illustrator
  • Photoshop

私のAIとの向き合い方

プロトタイプ構築や技術の調査には、AIを積極的に利用しています。しかし、開発では、今のところなるべく自分でコードを書くようにしています。AIを適切に開発に利用できるようになるためには、まず自分の開発スキルを身につける必要があると考えているからです。

当ポートフォリオサイトに掲載している作品も、明記していない限りは、AIをメインでは使用しておらず、エラー対処など補助的な使用に留めています。

History

お手紙

下の手紙をクリックするとメールアプリが開きます。
感想でも、ご連絡でも、ちょっとした会話でもお気軽にお送りください。

※メールアプリが開くのに数秒かかる場合があります。