BE EXCITING!!
IZUKI-lumber-yard
(Original Work)
ターゲット
環境問題や社会貢献活動に関心を持っている30代~50代の方
目的
自社のビジョンや価値観、活動について知ってもらう
情報設計
ブランドの理念や活動を深く知ってもらうことを目的とし、ECサイトは別サイト「WIKA」として構成しました。
「販売すること」が前面に出ることを避け、純粋に会社のビジョンや価値観を共有する設計にしています。
デザイン
泉木材木所の「力強さ」と「自然の重厚感」を感じてもらうため、サイト全体に暗めの背景色を採用し、写真も自然の豊かさや深さを反映するように全体的に暗いトーンで統一しました。
top画面のデザインでは、鬱蒼とした森の写真を大きく配置し、その右側に社名を配することで、圧倒的な自然に対して凛と佇む会社の姿勢を表現し、泉木材木所が自然とともに歩んでいる印象を与えています。
また、topからaboutセクションに向かってスクロールすると、中心がぼんやりと明るくなるアニメーションを設定し、視覚的に自然な変化を生み出すことで、ユーザーが没入感を感じられるよう工夫しています。
制作の取り組み
プロジェクトセクションでは、各文章ごとに異なる風景を表示し、抑揚を持たせるために、Three.jsとGLSLシェーダーを使用して、スライド時に歪む表現を取り入れました。シェーダーの理解はまだ浅いですが、こちらのページを参考にしつつ、クリックをトリガーとして実装しています。
制作期間
3ヶ月
使用ツール & 技術
- Figma
- VSCode
- Gulp
- Sass
- Three.js
