いわいサイクルモックアップ

実案件

いわいサイクル様
公式Webサイト

ツール

Figma

制作期間

約2ヶ月

担当

企画/デザイン

Target

福岡市内の地域住民(学生〜シニア層まで幅広く)

Concept

「買って終わり」じゃない。生涯付き合える「安心」の提供。

Point

装飾

1

店舗とWebの体験を繋ぐ

実店舗の「レンガ造りの外観」や「看板」から着想を得たトマトレッド・マスタードイエロー・セージグリーンを配色に採用。サイトを開いた瞬間に「あ、あのお店だ」とリンクするよう、リアルとWebのブランドイメージを統一しました。

2

幅広い世代へのユーザビリティ配慮

コントラスト比の高い配色(アイボリー背景×濃い赤)と、可読性の高いフォントサイズを徹底。ファーストビューに店舗外観を大きく配置することで、「入りやすさ・親しみやすさ」を視覚化し、プロショップ特有の敷居の高さを払拭しました。

3

遊び心が記憶に残るアニメーション

フッターには自転車が走るアニメーションを配置。スクロールの最後に「楽しいサイクルライフ」を予感させる遊び心を加え、ユーザーの記憶に残る設計にしました。

装飾

Design

トップ

いわいサイクルpc版トップページデザイン
いわいサイクルpc版商品一覧ページデザイン
いわいサイクルpc版新商品ページデザイン
いわいサイクルpc版商品詳細ページデザイン
いわいサイクルpc版お店紹介ページデザイン
いわいサイクルpc版サービス紹介ページデザイン
いわいサイクルpc版お知らせページデザイン
いわいサイクルpc版お知らせ詳細ページデザイン
いわいサイクルpc版お問い合わせページデザイン
いわいサイクルpc版thanksページデザイン
いわいサイクルpc版プライバシーポリシーページデザイン
いわいサイクルpc版トップページデザイン
いわいサイクルpc版商品一覧ページデザイン
いわいサイクルpc版新商品ページデザイン
いわいサイクルpc版商品詳細ページデザイン
いわいサイクルpc版お店紹介ページデザイン
いわいサイクルpc版サービス紹介ページデザイン
いわいサイクルpc版お知らせページデザイン
いわいサイクルpc版お知らせ詳細ページデザイン
いわいサイクルpc版お問い合わせページデザイン
いわいサイクルpc版thanksページデザイン
いわいサイクルpc版プライバシーポリシーページデザイン
いわいサイクルsp版トップページデザイン
いわいサイクルsp版商品一覧ページデザイン
いわいサイクルsp版新商品ページデザイン
いわいサイクルsp版商品詳細ページデザイン
いわいサイクルsp版お店紹介ページデザイン
いわいサイクルsp版サービス紹介ページデザイン
いわいサイクルsp版お知らせページデザイン
いわいサイクルsp版お知らせ詳細ページデザイン
いわいサイクルsp版お問い合わせページデザイン
いわいサイクルsp版thanksページデザイン
いわいサイクルsp版プライバシーポリシーページデザイン
いわいサイクルsp版トップページデザイン
いわいサイクルsp版商品一覧ページデザイン
いわいサイクルsp版新商品ページデザイン
いわいサイクルsp版商品詳細ページデザイン
いわいサイクルsp版お店紹介ページデザイン
いわいサイクルsp版サービス紹介ページデザイン
いわいサイクルsp版お知らせページデザイン
いわいサイクルsp版お知らせ詳細ページデザイン
いわいサイクルsp版お問い合わせページデザイン
いわいサイクルsp版thanksページデザイン
いわいサイクルsp版プライバシーポリシーページデザイン
いわいサイクルサービス詳細ページ画像
いわいサイクルサービス詳細ページ画像
いわいサイクルサービス詳細ページ画像
いわいサイクルサービス詳細ページ画像
いわいサイクルサービス詳細ページ画像
いわいサイクルサービス詳細ページ画像
いわいサイクルサービス詳細ページ画像
いわいサイクルサービス詳細ページ画像