11. SFチックな天気予報サイト
作品概要 #
動きのあるサイトやテーマ色の強いサイトに興味があり、日々の生活を彩るため、そういったものをより多く日常で見るWebサイトやアプリに取り入れさせたいと思っている。
その身近なものの一例として、天気予報に動きや世界観を取り入れさせることにした。
そのテーマとして、伝わりやすく、動きも多く取り入れられそうなSF風のデザインを取り扱うことにした。
ここでいうSF風デザインとは「アイアンマン」や「マトリックス」などの映画作品に出てきそうな、少し古い近未来的なイメージのデザインのことである。
このSF風のデザインを日常的に使う天気予報に盛り込むことで、不変な日々にアクセントを加えることがこの作品の目的である。
プレゼンテーション動画 #
アピールポイント #
1つ目はロード画面の表示。JSONで天気予報のデータを取得しているため、表示するまでにラグがあり、空のデータが一時的に表示されるようになってしまっていた。それを解決するのにロード画面を取り入れたが、ロード時間に合わせて他のアニメーションの調整も必要となり、自然に見せるのに結構な手間がかかった。
2つ目は雲量、湿度、風向などのメーターの表示。これらは取得したデータに合わせてゲージの幅や示す方角が変化するようになっている。
3つ目は両側の傾き。SF風な要素の一つに立体表現がある。平面的な画面で立体表現をするために両側の要素を傾け、コックピットのようにすることで立体表現をした。
制作者 #
- 島田 真実
- フロントエンドエンジニア志望
- HTML+CSS、JavaScript
- GrowGroup賞、ワンダーズ賞、Clap賞、MTG賞、アイ・セプト賞、トガル賞、アンティー・ファクトリー賞
制作者感想 #
今回はアニメーションや世界観をストレスなく実用的なものに取り入れることの難しさを実感した。
見た目を世界観通りに再現することはスムーズにいったが、それを利便性を損なうことなくデザインに取り入れることは難しかった。
目的ありきのデザインであるため、それは当然のことではあるが、それを乗り越えた上でのデザインはたくさん存在している。そこに至るには想定以上の努力が必要になっていることを実感した。
また、今回はアニメーションはほとんどソースコードを借りたものだが、それらを見てアニメーション一つでも手間暇かかっていることを感じた。
ただ借りるだけでなく、アニメーションを自分で作れるようにもなりたいなとも思った。
- 次の作品: Testwork
- 前の作品: お菓子で人々を笑顔に
コメント #
作品ならびにプレゼン動画の閲覧ありがとうございました。
さらに学生作品への評価・アドバイス、感想などコメントいただけると、今後の制作、就職活動の励みになります。よろしくお願いいたします。