CASE STUDY 02
自主制作
ブランドサイト
HTML / CSS / JS

＆FLOW

企画・デザイン・コーディング

https://hiro329biz-cpu.github.io/-FLOW/

＆FLOWのPC・スマートフォンモックアップ — DESKTOP / MOBILEHTML / CSS / JS

PROJECT DETAILSCASE STUDY 02 / ＆FLOW

＆FLOW / CASE STUDY

43°03′N / 141°21′E

ブランドの温度を、動きまで整える。

SURFACE

記憶に残るファーストビュー

手書き文字と鮮やかな差し色を組み合わせ、ブランドの温度感を最初の数秒で伝えます。

PATH

情報を軽やかに整理

サービス・実績・強み・料金・FAQを、視線が自然に流れるセクション構成へ整理しました。

SYSTEM

心地よいモーション

動きの強弱を調整し、内容理解を邪魔せずページを進めたくなるリズムを加えています。

TYPE自主制作 / Individual project
ROLE企画・デザイン・コーディング
TEAM1 person / 全工程を担当
STACKHTML / CSS / JavaScript / Responsive / Motion
DEVICEResponsive

VIEW LIVE SITE ↗

IMPLEMENTATION NOTE

実装・検証内容

HTML・CSS・JavaScriptでサービスサイト全体を実装
サービス、実績、強み、料金、FAQを目的別のセクションに整理
スクロールとホバーの動きを、閲覧を妨げない強度で設計
PC・スマートフォンの主要幅でレイアウトと操作を確認

＆FLOWのPC版全体デザイン — 01DESKTOP1440px VIEW

＆FLOWのスマートフォン版全体デザイン — 02MOBILE390px VIEW