- ポートフォリオサイト
- 就職活動用に初めて作ったWebサイトです。自分がどういう人間か一目で分かるように、トップページに制作物のスライドショーを載せ、興味を持ってもらいたい作品から見てもらえるよう、配置を工夫しました。
アニメーター時代のアナログな感じが制作物と合うと考え、ノートの罫線のようなデザインやテープのワンポイント、ポラロイド写真をイメージしたカードデザインにしています。
緑をメインカラーに使って落ち着いた雰囲気にしつつ、見る人が楽しめるよう、jQueryやaosなどを使い、webならではの動きのある表現も取り入れました。
デスクトップ版から制作を始めたため、レスポンシブ対応に苦戦しましたが、画面幅に合わせたレイアウト調整を行いました。 - 使用ツール
- VSCode、CLIP STUDIO
- 使用技術
- HTML、CSS、Javascript、jQuery、aos
- 制作期間
- ワイヤーフレーム5日、コーディング22日
- ポイント
-
１.ファーストビューのアニメーション
複数のイラストが切り替わる動きをCSSで制作しました。イラストごとにスライドする速さや位置を調整し、短い時間でアピールできるよう工夫しています。
２.作品を楽しく見られる動き
カードを手に取った時のように傾けたり、自己紹介の見出しにテープを貼る動きを入れたりして、見る人が楽しめるようワンポイントを入れています。サイトの雰囲気に合わせ、素朴で可愛い動きにしました。
３.レスポンシブ対応
スマートフォンでも見やすくなるよう、ハンバーガーメニューの実装やレイアウトの調整を行いました。
- ワイヤーフレーム
- 最初はお弁当モチーフの予定でしたが、すでにある制作物をアピールしていこうと考え、今のサイトデザインになりました。
