F46a243bb241948f

架空パン屋さんサイト【要件定義・デザイン・実装】

OVERVIEW

はじめてつくったWEBサイトです。オンラインスクールの卒業制作として提出しました。 クライアントのモデルは、私が学生時代にアルバイトをしていたパン屋さんです。

YEAR 2021

目次

 1.前提

 2.要件定義

 3.デザインイメージ

 4.デザインカンプ

 5.工夫した点

 6.コメント

WEBサイトを見る


1.前提

制作期間 : 2021.11.07 - 2021.12.29

所要時間 : 約83時間30分(要件定義・デザイン・実装)

対応機デバイス: パソコン、スマートフォン(横幅375px)

使用機材 : Panasonic Let’s note


2.要件定義


3.デザインイメージ


4.デザインカンプ


全体のレイアウト : Photoshop  /  ロゴ ・MAP: illustrator  /  画像調整 : Lightroom

WEBサイトを見る


5.工夫した点

全体

  • ゆったりした時間を過ごしてほしい → 全体的にゆったりとしたアニメ―ションをつけた
  • 伝えたい印象を明確化し、それを表現する(フォント、画像の形、配色、地図、アイコン、アニメーション等)
  • 文字の色 黒は使用せず、#402B1Dを使用 やさしく、おしゃれな印象に

ヘッダー(上部に固定)・メインビジュアル

  • 海外からの観光客も多かったため、外国語にも対応
  • メインの画像が3パターンある → 退屈させない、直帰率を下げる
  • メインの画像の形 → パンをこねるイメージ

各セクション

  • 白いもくもく背景 あたたかくてほっこりしたイメージ → 小麦が舞う、パンを焼く時やコーヒーを入れたときの湯気
  • パンがはっきり見えるように、切り抜き画像を使用


6.コメント

 疑問点を調べながらの制作だったこともあり、特にコーディングで時間がかかってしまいました。デザインの面では、配色とレイアウトが課題です。作成の計画を立てることの大切さを学びました。

 特に難しかった点は、コーディング・サーバーにアップするという点です。ひととおりやってみることで、流れや方法を知ることができました。

 伝えたい印象を常に考えながら作成し、表現することができました。


WEBサイトを見る


WEBSITE