ポートフォリオmei.y

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

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

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

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

企画段階①。何のサイトにするのか、ざっくりどんなデザインにしていくのか、など。

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

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

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

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

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

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

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

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

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

企画メモの一部分。サイト案からデザインコンセプトまで一貫性をもたせることを意識しました。

診断機能の分岐をつくっているところ。すべての観光スポットを診断結果として出せるように分岐を考えるのが大変でした。

サイトデザイン。背景にイラストを入れることでお子さんにも親しんでもらえるように心がけました。
また、サイトのオリジナルキャラクター「えべっち隊長」を何度も登場させることで、サイトを覚えてもらえるようにしました。

子ども向けの観光スポット診断。子どもにも分かりやすい言い回しを意識しました。また、イラストを入れることで選択肢の内容をイメージしやすくしました。

子どもに観光スポットの魅力を直接伝えられるように、各観光スポットに子ども向けの一言コメントを添えました。

今回私たちが新しく実装した「資格取得ガイド」。元々PDFで掲載していたものをWeb形式に変更しました。デザインは同じゼミの先輩が制作してくださりました。もちろんレスポンシブも対応しています。

資格取得ガイドは、今後大学のスタッフの方々などが運営していくため、WordPress画面から誰でも入力できるように作りました。
また、TOPページは元々WordPressの管理画面から編集ができなかったのですが、今回、WordPressの管理画面から入力できるように改修しました。

デザイン。シンプルかつ奇抜なレイアウトを目指しました。

ポイントのプログレスバー。メインサイト公開まで日に日にバーが進んでいく仕様にしました。

デザイン。相方の先輩が作ってくれました。←ちなみに「フードドライブってなんですか？」を一緒に作った先輩です。実はティザーサイトも一緒に制作しました。

新しく追加した展示会情報エリア。これでゼミの展示会情報などをまとめて掲載できるようになりました。

新しく追加したフッターのリンクエリア。WordPressの画面から誰でも追加/削除ができるように実装しました。

デザイン。3DCG作品に合う色選びにこだわりました。背景に真っ白(#FFF)以外を使い始めた最初のサイトです。

基本的なマルチページサイトをマスターするために制作。シンプルな作りですが今でも結構気に入っています。

制作後、WordPressに移植して実際に投稿ができるようにしてみました。

デザイン。白黒を基調に。Figma上でパスを使ってハスキーを描くの難しかったです。

超重要ポイントのリキッドアニメーション×パララックス。作り方を検索しても出てこなかったので、一から自分で実装方法を考えました。

ホバーするとコーヒーが注がれているように色が変わるヘッダーのページ内リンク。

デザイン。授業で制作しました。せっかくなので試しにトップページをコーディングすることに。

初めてオリジナルで作ったハンバーガーメニュー。今見てみると作りが少し粗いです。当時はまだハンバーガーメニューの実装に慣れていなかったため、5時間ほど苦戦した記憶があります。