2016年10月01日
1059 Views

Ms&Mr理科大コンテストのwebサイト作成

タグ:

ミス&ミスター理科大コンテスト、始まります。


スポンサーリンク

コンセプト

1. 親しみやすい、ポップでキュートなデザイン
2. 候補者のいろいろな「顔」が見れるwebサイト
3. スマートフォンでも綺麗に見えるwebサイト

まず初めに、ユーザーさんが各候補者を身近に感じられるようなwebサイト、を目指しました。そこでポップでキュートなデザインをモチーフに、基本色として、明るく、鮮やかなrgb(236,87,134)rgb(73,183,233)を定めました。また、PCで見た時に、トップページに丸や四角のアニメーションを付けたり、マウスをhoverすると候補者の顔が変化するなど、サイト自体楽しめるように工夫しました。そして、画面遷移をシームレスにつなぐことで、サイト全体の統一感を持たせました。

今回お話をいただいた時にたくさんの写真をいただいたので、ぜひ上手く活用したいと思いました。まるで、候補者が友達のように近くに感じられるように。ミスター、ミス合わせて約600枚の画像を用いることで、ユーザーさんが、各候補者について色々な表情が見られるようにしました。

Google Analyticsによると、このブログを訪れるユーザーさんの80%がスマートフォンでご覧になっているということで、スマートフォンでも綺麗に見えるサイト作りを心がけました。そこで「twitter Bootstrap」を用いて、PC、スマートフォン両方に対応したwebサイトを作成しました。

URL

http://www.unitus.tech/ridaisai2016

miss_mr_01
miss_mr2

スポンサーリンク

合わせて読みたい