my portfolio

works  - web -

卒業制作message from me

「thanks to you」のフォーマットを使用し、これから学ぶ方へのメッセージをまとめたWebサイト。

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

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

  • 制作ツール   …  HTML、CSS

  • 掲載物     …  背景イラスト/自作の手描きイラスト2枚(空と芝生、人物)を写真に撮ってPhotoshopで切り抜き、合成

形に残すことの意義

「thanks to you」の説明ページ内にも記したが、卒業制作としたかった作品(当サイト「my portfolio」)は期限に間に合わせることができなかった。しかし6ヶ月間の訓練は頑張ったのだ。それなのに訓練校のWebサイト上に何も残さないのは寂しく思い、既にコーディングを完成させていた「thanks to you」のフォーマットを使用して制作。
理想通りでなくても、現時点でできることをする。それが自身の蓄積のひとつとなり、自信となる。
そんな想いも込めて、訓練校で学び得たことの一部を後進の方々へのメッセージとしてまとめた。

背景画像で変わる印象

背景画像には、自身が手描きで作成したイラストを使用した。この人物イラストはよく「寂しそう」と言われるが、自分としては好きなこと(雨や傘)に触れられる喜びと楽しさを表現した幸せな絵である。訓練という形で自分のしたいことをすることができた喜びを表す意味でこのイラストを使用した。空と芝生の絵は別で描いたもので、その上に人物を合成している。
PC版では合成した絵の全面を使用し、モバイル版では人物のいる左下部分を使用。(画像3、4枚目)
「thanks to you」と同じフォーマットとは言え、使用する素材のテイストを変えることで雰囲気を大きく変えられたのではないかと思う。

読みやすさのためのデザインをストーリー表現に活用

文字色には白に近い色を使いたかった。メッセージの印象を明るく軽やかに見せるためである。しかし背景の水色に重ねると同化して読みづらい。そこで、背景画像の前に半透明のグレーの背景色(バックグラウンドカラー)を重ねてみた。
すると字は読みやすくなったが印象が暗くなる。それこそ雨空のようだ。しかしこれが雨空のように見えるなら、スクロールするにつれて次第に晴れていくように見せるのはどうだろう。そう思い立ち、背景色にグラデーションを設定。後半にかけて晴れ渡っていくようなイメージでグラデーションの位置も調整した。(画像5枚目)
訓練中は大変なこともあったが、最後は晴々とした気持ちで終了していく。読みやすさのためにと設定した背景色だが、イラストと組み合わせることでそんなストーリー性も持たせられたように思う。