sumiyaのロゴマーク

パン屋の
コーポレートサイト
サイトはこちら →

base data

制作期間
8日
担当範囲
Webデザイン / コーディング
使用ツール
Illustrator / HTML / CSS
URL
http://hirotosumiya.com/hanshinbakery-site

学校課題

パン屋さんのコーポレートサイトのデザインとコーディングを担当しました。コーディングの練習課題を応用し、元のデザインをベースにカスタマイズして、デザインとコーディングの両方を手掛けました。

制作過程

  1. 01.目的、ターゲット

    目的

    女性にフォーカスを当てたパン屋のコーポレートサイトのリニューアル

    ターゲット

    20〜50代の女性

  2. 02.デザイン

    女性らしいサイトにする為、配色は赤色をメインカラーに、メインカラーを引き立たせる為、薄いベージュをベースカラーとして配色しました。
    フォントは親しみやすさ、可愛らしさを持ったゴシック体、そしてメインビジュアルでは装飾として柔らかい雰囲気となるように
    手書き風のスクリプト体を使用しております。
    女性らしく柔らかい雰囲気気に仕上げる為、配色、タイトルのあしらい、イラストの配置などを意識しました。

    Color

    Font

    Noto Sans JP
  3. 03.コーディング

    デザインカンプを忠実に再現することを目指してコーディングしました。
    また、UIとUXを考慮して、ボタンなどのクリック可能な要素にホバーアクションを追加し、
    ユーザーに「クリックできる」と直感的に分かるように工夫しました。

まとめ

コーディングの学習を始めて、最初の実践的な課題としてこの作品を制作しました。
その過程で、デザインを再現することの難しさと大変さを実感しました。
この経験から、デザインカンプを作成する際には、デザイン段階でコーディングの視点を持つことが大切だと理解しました。