株式会社岐阜流通

公式HP

web

  • Adobe Illustrator

  • Figma

  • Adobe Premiere Pro

  • Adobe After Effects

  • HTML

  • CSS

  • JavaScript

  • PHP

  • Photography

株式会社岐阜流通のコーポレートサイトです。実際の現場で撮影した動画を背景いっぱいに使い、トラックやフォークリフトなどのSVGも一から制作しました。物流会社らしい動きや現場の雰囲気を見せながら、文字や情報が埋もれないよう、映像・アニメーション・レイアウトのバランスを調整しています。

  • 背景動画の演出設計

    撮影した映像をそのまま背景に使うのではなく、一部のカットではロトブラシで人物を抜き、背景だけをモノクロにしながら被写体の色を残す加工を加えました。
    映像自体に動きがあるため、そこへ演出を重ねすぎず、人物や作業の様子がきちんと見える範囲で調整しています。
    現場の雰囲気を残しながら、一般的な背景動画とは少し違った見え方を目指しました。

  • SVGアニメーションを見据えた素材設計

    トラックやフォークリフトなどはIllustratorで一から描き起こし、Web上で動かすことを考えて、パスの数や細部の描き込み量を調整しました。
    細かく作り込みすぎるとSVGのコードやファイル容量も大きくなるため、見た目に必要な特徴は残しながら、アンカーポイントはできるだけ絞っています。
    デザインとして成立させつつ、その後の実装でも扱いやすい素材にすることを意識しました。

  • 背景映像を活かす画面構成

    背景動画を大きく見せながら文字や画像もきちんと読めるよう、映像の上に暗さを調整する要素や道路のアニメーションを重ねています。
    すべてを一つの動画にまとめず、それぞれを別の要素として組むことで、必要な場所だけ明るさや見え方を調整できるようにしました。
    また、スクロールの途中でページを止めても画面全体が不自然にならないよう、各要素の重なり方や表示される位置を確認しながら調整しています。