コーポレートサイト
サイトはこちら →
base data
- 制作期間
- 8日
- 担当範囲
- Webデザイン / コーディング
- 使用ツール
- Illustrator / HTML / CSS
- URL
- http://hirotosumiya.com/hanshinbakery-site
学校課題
パン屋さんのコーポレートサイトのデザインとコーディングを担当しました。コーディングの練習課題を応用し、元のデザインをベースにカスタマイズして、デザインとコーディングの両方を手掛けました。
制作過程
-
01.目的、ターゲット
目的
女性にフォーカスを当てたパン屋のコーポレートサイトのリニューアル
ターゲット
20〜50代の女性
-
02.デザイン
女性らしいサイトにする為、配色は赤色をメインカラーに、メインカラーを引き立たせる為、薄いベージュをベースカラーとして配色しました。
フォントは親しみやすさ、可愛らしさを持ったゴシック体、そしてメインビジュアルでは装飾として柔らかい雰囲気となるように
手書き風のスクリプト体を使用しております。
女性らしく柔らかい雰囲気気に仕上げる為、配色、タイトルのあしらい、イラストの配置などを意識しました。Color
Font
- Noto Sans JP
-
-
03.コーディング
デザインカンプを忠実に再現することを目指してコーディングしました。
また、UIとUXを考慮して、ボタンなどのクリック可能な要素にホバーアクションを追加し、
ユーザーに「クリックできる」と直感的に分かるように工夫しました。
まとめ
コーディングの学習を始めて、最初の実践的な課題としてこの作品を制作しました。
その過程で、デザインを再現することの難しさと大変さを実感しました。
この経験から、デザインカンプを作成する際には、デザイン段階でコーディングの視点を持つことが大切だと理解しました。