📝 目次
・ 概要
・ こだわったポイント
・ 苦戦したポイント
・ 今後の課題
▼ 概要
架空の題材として、広島県尾道市で開かれる「まち歩きイベント」の紹介ページを作成
しました。
まちを散策する「ワクワク感」を引き立てるため、アニメーションの実装に力を入れま
した。 ※ アニメーションはコーダーに一任する仕様でした。
このほか、ピクセルパーフェクトによるデザインの忠実な再現など、細部まで丁寧なコ
ーディングに取り組みました。
サイトURL
https://blueleaf-masuke.com/portfolio/onomichi/
[ Basic認証 ] ユーザー名：demo ｜ パスワード：demo
担当範囲： コーディングのみ
使用言語： HTML CSS（Sass） JavaScript
制作時間： 95時間（実働15日）
バージョン管理ツール： SourceTree
▼ こだわったポイント
✅️ 雰囲気を引き立てるアニメーション
デザインの「ポップで楽しげな印象」をアニメーションで強調しました。特にこだわっ
たのは「猫の足跡」の表現です。トコトコ歩く可愛らしさで親近感を高めるほか、ユー
ザーの視線の流れをサポートするなど、UXを意識しながら実装しました。
✅️ お問い合わせフォームの使いやすさ
autocomplete属性による自動入力できる設定や、Tabキーでフォーカスを移動できる
設定など、ユーザーが入力しやすく作りました。また、正しく入力されたらエラーを
瞬時に解除するようにし、インタラクティブな操作感にこだわりました。
＊その他、タッチデバイスではホバーアクションさせない設定や、「モーダルの外側」を
クリックして閉じられる設定など、直感的に操作できるように実装しました。
▼ 苦戦したポイント
🌀 ピクセルパーフェクトでの実装️
デザインに装飾要素が多く、レスポンシブ対応やピクセルパーフェクトに苦戦しまし
た。丁寧で正確な作業を心がけた結果、完成後、現役コーダーさんからは「とても綺麗
なコーディングで、ほぼ指摘はありません！」とのレビューをいただきました。
▼ 今後の課題
💡 実践的なノウハウの習得
Swiperのカスタマイズなど初めて実装するパーツが多く、制作に時間を要しました。
実践的なノウハウを身に付けて制作時間を短くするため、今後はアウトプット中心の
学習に注力し、多種多様なページ制作に取り組みたいと考えています。
💡 GSAPを使ったアニメーションの実装
画像を遅延読み込みしても、ローディング時間がかかってしまいます。待ち時間のスト
レスを「ワクワク感」に変えるためにも、GSAPを使ったローディングアニメーション
の実装を学びたいと考えています。