ロゴ

BE EXCITING!!

IZUKI-lumber-yard
(Original Work)

ターゲット

環境問題や社会貢献活動に関心を持っている30代~50代の方

目的

自社のビジョンや価値観、活動について知ってもらう

情報設計

ブランドの理念や活動を深く知ってもらうことを目的とし、ECサイトは別サイト「WIKA」として構成しました。
「販売すること」が前面に出ることを避け、純粋に会社のビジョンや価値観を共有する設計にしています。

デザイン

泉木材木所の「力強さ」と「自然の重厚感」を感じてもらうため、サイト全体に暗めの背景色を採用し、写真も自然の豊かさや深さを反映するように全体的に暗いトーンで統一しました。
top画面のデザインでは、鬱蒼とした森の写真を大きく配置し、その右側に社名を配することで、圧倒的な自然に対して凛と佇む会社の姿勢を表現し、泉木材木所が自然とともに歩んでいる印象を与えています。
また、topからaboutセクションに向かってスクロールすると、中心がぼんやりと明るくなるアニメーションを設定し、視覚的に自然な変化を生み出すことで、ユーザーが没入感を感じられるよう工夫しています。

制作の取り組み

プロジェクトセクションでは、各文章ごとに異なる風景を表示し、抑揚を持たせるために、Three.jsとGLSLシェーダーを使用して、スライド時に歪む表現を取り入れました。シェーダーの理解はまだ浅いですが、こちらのページを参考にしつつ、クリックをトリガーとして実装しています。

制作期間

3ヶ月

使用ツール & 技術

  • Figma
  • VSCode
  • Gulp
  • Sass
  • Three.js
izuki材木所のpc画面
izuki材木所のsp画面