かるーく読むWEBデザイン研究 #1

こんにちは、おいしいハムです。

デジタルハリウッドSTUDIO by LIG 、通称「デジLIG」のWEBデザイン専攻に入りました。

まだ勉強をスタートして1週間も経っていないので、右も左もわからん状態です。
でもとにかくインプットはたくさんしていきたいな！！という気持ちだけあるので、せっかくなら記録に残していきたいなと思います。

まずは続けていけるように、ごく簡単なフォーマットで始めます。(何もわかんないしね…)

今日はこちらの企業サイトです。

Roaster

【機能面】
・トップページに「WE MAKE YOUR LIFE TASTY」(スローガン？)
主なworksの写真がスライドショーで流れる
→写真をタップ
→詳細ページに飛ぶ

・写真でほうほう、となった所でworksのカテゴリーが出現。ここからも詳細ページに飛べる

詳細ページトップに↑と同じ写真、下真ん中のボタンから実際のサイトに飛べる。(①)
→写真の下にPJの説明、再びボタンから実際のサイトに飛べる。(②)


[動きの気づき]
①スクロール→すべての見出しが回転しながら出てくる(アニメーション?)
→一度体験したら上に戻ってまたスクロールしてもアニメーションは繰り返されない。

②写真をタップする→ページに移行

③メニューは「MENU」文字内容とイメージ写真が横からじわっと出てくる、区切り線が左から右に引かれる(アニメーション)

【印象面】
① 洗練
・主なカラー
白(#FFFFFF)、茶(#B87A43)、ブルー(#304956)

② おしゃれ
・フォント
HV MUSE Regular (見出し)

③写真の色味、配置で統一感
全てのPJ紹介のページでは1PJ1写真の羅列
カテゴリー毎にまとまって並んでいない、
まとめページとして見た時に綺麗な色配置に見える(細かいことはまだわからないけど。)
(背景のトーンが揃っていたり、白っぽい写真3つの間に目立つ赤っぽい写真1つ、など)

続けられるように軽めにしていきたいのに、まず慣れないのでこれだけ書くのに合計1時間以上かかってしまった…😭

始めてから思ったけども、初めてなのにちょっと課題にしたサイトが重かったかもしれない。
1枚のLPとかから始めたほうがいいかも。(反省)

まずはちょっとしたことの継続、継続が目標です。

それではまた。