Works
懐かしの味を毎日の食卓へ
二五六区の給食ぱん屋
Website
concept
2023年04月24日開講の256times「フロントエンド案件修行 給食ぱん屋編」に参加し、制作しました。 256timesは「書いて、読んで、ともに学ぶ参加型プログラミング勉強会」(株式会社ドットインストール運営）で、給食ぱん屋編のクラスでは日替わりで伝えられる仕様をもとに、5日間で1ページのサイトを作り上げることが課題でした。ロゴや写真素材、架空案件の設定の提供がありました。 初稿では、５日間という短い制作期間だっため、要素を揃えることと、取り急ぎ見た目を整えることで精一杯となってしまいました。 後日改めて時間を取り、全体的に直線的だったデザインに丸みを持たせたり、イラスト要素を増やして親近感を出せるよう工夫しました。 レスポンシブに対応させ、アニメーションで動きをつける変更をしました。
design
「給食」といえば、給食当番の白衣や、純粋だった子ども心などを連想しました。白と黒、パンをイメージした薄いオレンジを基調としたシンプルな色使いにすることにしました。 お客さんのターゲットは過去を懐かしむ40-50代の大人で、大人びた雰囲気を表すためにセリフ体を使うことにしました。 故郷に帰るような、安心感、親近感を持ってもらえるようなサイト作りができたらと、丸みを持たせデザインを取り入れました。
- ＃FFFFFF
- ＃000000
- ＃FBF8EF
- ＃FDD89D
contents
メインビジュアルの背景にはパンの写真を配置し、「思い出の給食パンを、手軽に、たくさんの人に食べてもらいたい」という創業の想いを「懐かしの味を 毎日の食卓へ」というキャッチフレーズで表現しました。また、キャッチフレーズのテキストが写真の背景に埋もれてしまわないよう、パンをイメージした薄オレンジの図形を敷きました。
商品紹介のセクションでは、イラストを用いたり、PCでは互い違いのレイアウトにするなど、楽しげな雰囲気を演出しました
お店のコンセプト紹介部分は、創業の熱い想いをしっかり伝えるため、背景を濃くしました。スクロールすると代表の似顔絵と吹き出しの言葉が左からアニメーションで出てきて、目を引くよう工夫しました。
ニュースのセクションでは、トップページでは写真とタイトルのみ表示させ、記事は下層ページで読んでもらう構成になっています。クリックしたら記事のページに遷移することが分かるよう、テキストに下線と矢印を付け、PC版ではホバーした時の動きを付けています。
店舗情報のセクションでは、イラストで温かみのある地図を掲載し、より詳しく知るためにGoogle Mapへのリンクボタンを配置しています。また、フッターでは各セクションへのリンクと共に、Instagram, X(旧Twitter), Facebookへのリンクも設置しました。
data
- 制作範囲 サイト設計・デザイン・コーディング
-
制作期間
2023年4月〜5日間（初稿デザインはこちら）
2023年9月〜2週間（デザイン改訂） -
使用ツール
Figma(デザイン),
Visual Studio Code(コーディング） - 使用言語 HTML, CSS, JavaScript
- url https://tomatonft.github.io/kyusyoku-pan/
