【自主制作】自動車整備会社のホームページ

トップ、下層2ページ

-

【担当範囲】

ワイヤーフレーム作成、配色やフォントの選定、画像補正、デザインカンプ作成、ロゴ作成、レスポンシブ対応、AIエージェントを使用したコーディング

-

【使用言語、ツール】

 ・HTML/CSS

・JavaScript

・Photoshop

・Illustrator

・Figma

・Google Antigravity

・GitHub Desktop

-

【概要】

地方にある個人経営の車の整備会社の新規サイト制作

・目的

  自社の存在やサービスを知ってもらい、集客につなげること  

・ターゲット

　30代〜50代の男女

・印象

　イラストやアイコンなどで親しみやすさを出しつつ清潔感も与えるデザイン

-

【ポイント】

 ユーザーが知りたい情報に最短でアクセスできることを意識

・修理を頼みたい人はそのお店がどんなサービスを提供しているか、今日は営業しているのか、どこにあるのかを知りたいことが多いと考え、その中でも一番気になるのが営業時間とアクセスだと思ったのでボタン形式にして目立たせました。

・ヘッダーナビには全てのコンテンツへのアクセス項目を並べました。

・ページ全体は縦に長くしすぎず、表示領域になるべく情報が収まるようにして見やすさを重視しました。

-

【アニメーションについて】

スムーススクロール（アンカーリンク）

タブ切り替え（サービス内容）

フェードイン（コンテンツが下からふわっと浮き上がる動き）

ボタンやカードのホバー時のアニメーション