my portfolio

works  - web -

自主制作thanks to you

訓練校職員のみなさんそれぞれへお礼のメッセージを記したWebページ。

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

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

  • 制作ツール   …  HTML、CSS

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

感謝を形にして伝えたかった

訓練終盤は多くの時間が作品制作に充てられた。その間、私は所用で訓練を10日ほど休むことになり、卒業制作が遅れる。本来であれば当サイト(「my portfolio」)を卒業制作にする予定であったが、修了までには間に合わせられなかった。
しかし、熱心に指導・支援をしてくださった講師や職員のみなさんに言葉だけでなく何か学びの成果がわかる形でお礼を伝えたいと考え、このWebページを作成。
講師・職員のみなさんそれぞれへのメッセージを記している。
QRコードを作って受講生からの寄せ書きに貼り、それを私からのメッセージとした。

簡単な構成だけれども、見やすく明るく

構成は、ヘッダーとフッターの間にセクションがひとつのみ。背景画像を全面に配置したうえで固定し、文章だけがスクロールする形に。
イラストを上下に配置して間を空白にすることで、文章を読みやすくするよう工夫をした。
学ぶことができた喜びを表現したく、背景には若干赤みの入った黄色を使用。
文字が目立つよう、イラストも含めた背景画像全体は、illustratorで白色を半透明にした画像を重ねて作成した。(画像2枚目)

さくさく作れて初めての公開も完了!と思ったら…

構成を簡単にしたとはいえ、初期のころはなんとなくで入力していたコードも意味理解したうえでさくさく入力することができ、我ながら成長を実感。サーバーも自分で契約してそこにアップロードすることにした。
修了式の朝、アップロードが完了。自分で作ったWebサイトを公開することはこれが初めてだった。PCのブラウザにURLを入力して開いてみると、イメージ通りに映った!とてもうれしく感動した。
モバイル版も確認しなければと思い、自分のiPhoneでも開いてみる。すると、背景画像が拡大されている。しかも固定されていない。(画像3、4枚目)
なぜ?!と落胆しながらも自分のPCを持ってひとまず訓練校へ。修了式が始まる前までの間に急いで調べると、どうやらMacOSでは効かない設定を使っていたらしい。MacOSにも対応するような設定に変えなければと焦りながら試行錯誤するが、修了式開始には間に合わず。
式内での受講生謝辞にて寄せ書きはそのまま講師の手に渡り、その日は修正を諦めた。