Web Site
Client Work
自主制作のコーポレートサイト
Work
Original
制作期間
約 １ヶ月半
SP版
あり
使用言語
HTML、CSS、jQuery
使用ツール
VS Code、Photoshop、Illustrator
ターゲット
- 20代〜50代の女性
- 猫好きの人
- 猫に癒されたい人
- 女性やファミリー
- 店舗と同じ地域に在住の人
制作時のポイント
- リニューアルデザインなので、既存サイトの機能はなるべく継続して使えるようにする。
- サイトのメインカラーは水色、ベージュ。
- フォントは丸ゴシックで親しみやすさを演出。
- 簡略地図を作成することで見やすくし、Google Mapの多用を避けた。
ページ構成
- トップページ
- コース
- ねこちゃんの紹介
- マナー
- 店舗案内
- ご予約・お問い合わせ
- プライバシー・ポリシー
- サイトマップの作成
- thanksページの作成
制作ワークフロー
- ヒヤリングシート作成 [ 手書き ]
- ガントチャート作成 [ Googleスプレッドシート ]
- サイトマップ作成 [ Illustrator ]
- ワイヤーフレーム作成 [ 手書きラフ図 ]
- プレゼン用スライドショー作成 [ Googleスライドョー ]
- カンプ作成 [ Illustrator ]
- コーディング [ Visual Studio Code ]
制作内容
- 2カラムレイアウト
- グリッドレイアウト
- レスポンシブデザイン
- トップ・メニューボタンの実装
- ナビゲーションバーのアニメーション
- 予約・お問合せフォームの設置
- Google Map 埋め込み
- QRコードの設置
- 電話番号発信リンク
- パンくずリスト
- イラスト作成svg画像：猫ちぐら [ Illustrator ]
- 看板イラストsvg画像：店舗看板からトレース [ Illustrator ]
- 簡略地図作成svg画像 [ Illustrator ]
- 使用画像の選定・調整 [ Photoshop ]
- Font Awesomeの使用
- Google Fonts の使用