my portfolio

works  - web -

自主制作Thank you Web9!

「thanks to you」のフォーマットを使用し、クラスメイトそれぞれへのお礼のメッセージを記したWebページ。

  • 制作時期   …  訓練終了直後

  • 制作時間   …  合計約4時間

  • 制作ツール   …  HTML、CSS

  • 掲載物     …  背景イラスト、リンクイラスト/自作の手描きイラストを写真に撮り、illustratorで画像トレースをして着色。

クラスメイトにも感謝を

6ヶ月間ひとつのことに最後まで取り組んだことには、やはり大きな達成感があった。偶然出会って支えあいながら一緒に多くのことを学んできたクラスメイトにもそれぞれお礼を伝えたくなり、職員宛てのWebページのフォーマットを使用して作成。
背景画像のイラストは新たに描き、修了の達成感を表現したく、さわやかな水色を採用。(画像2枚目)

背景画像の固定、解決

職員宛てのWebページのフォーマットを使用するということは、iPhoneで背景画像が固定されない問題を解決させなければならない。ネットでいくつかの設定を試して無事に解決。(画像3、4枚目)
職員宛てのページも直すことができた。(画像5、6枚目)
解決方法は「Thank you Web9!」のページ内に記した。(画像7枚目)

フォバーエフェクトで扉を開かせよう!

「フォバーエフェクトで扉を開かせよう!」と思い立った。というのも、「thanks to you」(職員宛てのページ)を職員室、「Thank you Web9!」(クラスメイト宛てのページ)を教室に見立て、それぞれの部屋へつながるリンクを貼りたいということを元々考えていた。
リンクには扉からキャラクターが顔をのぞかせるイラストをつけるつもりでいたが、「扉が開いてキャラクターが顔をのぞかせたら面白いのでは…!」と思い立って実行。
キャラクターをバックグランドイメージ配置にし、扉を「img」タグで重ねることで実現した。(画像8~11枚目)