子供と遊びながら写真が自然に取れるツールの紹介サイト
見ていて楽しいアニメーションや余白がたくさん使われたサイト
◾️大まかなレイアウト
HERO部 > 商品について > 製品化の背景 > concept movie > アプリ紹介 > メッセージ > クラウドファンディング紹介 > footer
イラストが不規則に配置されているノングリッドデザイン
メイン幅は900px
・HERO部
商品画像を背景に、大きな目がと手がカーソルに合わせて動く仕組み
(カメラを追うイメージ?)
背景に写真を撮るシチュエーションの画像が動いており、hover時にカラーのイラストに変化するという面白い動きつき。
(どうやって実装してるんだろう・・・)
・ 商品について
見出しが格段に大きい。インパクト大。1文字づつ上にあがるウェーブのような動き。
余白がたくさん使われている中で、物足りないところは手書きイラストを埋めるデザイン。
写真とイラストの組み合わせが子供らしさを演出。
・製品化の背景
背景は変わらず、茶色の長方形で囲むデザイン。角が丸く柔らかいイメージ。フレームのハートが特徴的
文字ばかりのエリアなので、線をたすことで見やすくなっている。
・MENU部
大きく画像を設置し、ジャンルを選ぶとそのジャンルの画像に切り替わる仕組み。
フレームはこちらも手書き風。ほっこりかんが出る。
個人的に表題を左右に縦書きで入れるデザインは参考にしたい。
■余白
たくさん設置され、隙間にイラストを挿入することでコンテンツが別れていることを強調できている。
■配色:
メイン:緑 アクセント:黄色
◾️文字組
フォント:遊ゴシック
28px > 20px > 16px >
■あしらい
手書き風イラストを、が豊富に使われている。
見出しのアニメーション
文字が多いコンテンツは下線を用いてメイン見出しとサブ文章が別れていて見やすい。
コメントを残す