-Web Site-

  • 使用ツール
  • XD
  • Illustrator
  • Photoshop
  • はんしんベーカリー
  • 制作期間:60時間
コンセプト
毎日食べても飽きない自然食材のパンさん
住宅街の中や公園の近くにある
コンセプトワード
オーガニック、森、自然、散歩、木の実、太陽、シルバニア
ターゲット
20代~60代
中流の家族連れや夫婦、子ども
制作ポイント
老若男女問わず親しまれるよう青やピンクではなく、
中性的な印象で自然を感じられるようなアースカラーを使用しました。
また、区切りに曲線を使用する事で子どもらしさと親しみやすさを表現しています。
  • Step 01
  • カラー決定&ワイヤーフレーム作成

カラーは制作ポイントでも記入した通り、オレンジを中心に親しみと安心感を与える色を選んでいます。性別での隔たりが出そうな青やピンク等のカラーを避ける事で、ターゲット層である家族連れや夫婦、子ども達、老若男女問わず誰にでも気軽に来て頂ける印象にしました。

  • Step 02
  • ロゴ作成

様々なロゴのデザイン案を出し、改めて目的やターゲット、コンセプトに合っているかを意識して選びました。パンが美味しそうに感じられるロゴを元に少し手直しをして、イラストレーターでイメージカラーにマッチする色を付けました。

  • Step 03
  • デザインカンプ作成

1stビューを大切にし、見やすくなるように意識して作成しました。美味しそうなパンの写真を前面に押し出して、食欲促進し「行ってみたい」「買いたい」と思えるようなデザインにしています。また、丸や曲線を使用する事でナチュラルな印象になるようにしています。

  • Step 04
  • コーディング&プログラミング
  • html

  • css

  • js

※画像選択でモーダルウィンドウ表示

デザインの時点ではコーディングの事を考えていなかったので、かなり苦戦し、試行錯誤しました。 自分だけがわかるようなコーディングではなく、他のコーダーが見ても分かりやすような綺麗で整ったコーディングを意識しました。

制作過程から学んだ事
初めてペルソナの決定からコーディングまでを一通り行った作品です。目的をしっかりと見据えて進めていく事、ただデザインするだけでなくUIUXの視点を持つ事、チームとしての仕事であると意識する事、デザインするだけでは分からなかったコーディングの難しさを身に染みて実感する事が出来ました。それと同時に自分のコーディングの実力を知る事が出来たので、今後の作品作りの為に実装したいタグは自分で積極的に調べてアウトプットするよう心掛けています。