- プロジェクト概要
- 日常の風景を舞台に、遊び心あふれるポートフォリオを制作しました。
自作イラストにGIFアニメーションを組み合わせ、散歩によく訪れた河川敷や、慣れ親しんだ海岸、そして新幹線の往来で活気づく駅前──日常の風景を切り取るように表現しました。
デザインからコーディングまで自分で作り、スクロール連動のアニメーションやレスポンシブ対応など、Web制作の基本技術をしっかり盛り込んでいます。
経験はまだ浅いからこそ、実績が少なくても見に来てくれた人に少しでも楽しんでほしい――その思いから、GIFを用いた演出や色味の調整など、細部にまで工夫を重ねました。
地元を知らない方にも「こんな場所やモノがあるんだ」と興味を持ってもらえれば嬉しいです！
- 制作範囲・期間
- イラスト＋GIF制作：約3ヶ月
デザイン：1.5ヶ月
コーディング＆WP実装：2ヶ月
修正：2ヶ月
全体：約6ヶ月
- 実装内容
- TOP +2P（PC／スマホ対応）
スクロール連動アニメーション
カスタム投稿で「制作物」一覧
サイドメニュー＆ハンバーガー
- サイズ
- PCデザイン：幅960px、スマホデザイン：幅375px
- デザインの工夫
配慮した点
- 手描き風イラスト＋アニメーションで温かみと遊び心をプラス
- ベースカラーは落ち着いたベージュ、アクセントにくすんだパステルを配置
- セクションごとにストーリー性を持たせ、地元の風景や文化を演出
（イラストでは多彩な色を使っても調和するよう設計）
- 実装時の工夫
- 自作イラストをGIF化して“手描き感”と動きを両立
- GSAPでスクロールに合わせたフェード／スライド演出
- レスポンシブ＆タップ／ホバーのフィードバックを丁寧に
- ポートフォリオとして今後自分で更新しやすいように設計
- 使用ツール
- Figma / Illustrator / Visual Studio Code
制作物一覧へもどる
