bread Citta Allegra

架空のクロワッサン専門店

タイトル クロワッサン専門店「Citta Allegra」のサイト。
サイトURL https://bread.mitsu130kg.work/index.html
制作年 2021年（制作期間3か月）
サイト紹介文 架空のクロワッサン専門店「Citta Allegra（チッタ・アレッグラ）」のサイト。4つのページ内リンクのある1ページもののWebになっています。
ターゲット 世代を問わないファミリー向け。サクサクふわふわのクロワッサンをPRして集客に繋げたい。
担当範囲 企画/デザイン/制作
制作ツール Dreamweaver、illustrator、Photoshop

jQueryプラグインのslickを使って、ページ内に動画と画像の2種類のスライダーを実装しました。

PC版サイトにはスムーズなページ遷移を実現するためにcssスプライトを使ったサイドナビメニューを実装しました。

読み手を飽きさせないためにJavaScriptライブラリーのaos.jsを使ってページをスクロールさせると画像や文字がアニメーションする仕組みを実装しました。

トップビジュアルでは商品への興味を沸かせるためにクロワッサンの完成までの工程や子供がクロワッサンを食べる様子などjQueryプラグインslickを使って5種類の動画をスライダーにして実装しました。

メニュー画像をホバーすると画像が拡大・浮き上がるマウスオーバーエフェクトとjQueryプラグインのlightboxを使い、メニューをクリックすると拡大画像と目ニューの詳細が表示される仕組みを実装しました。

jQueryプラグインslickを使ったスライダーでクロワッサンの質感をアピールしました。なお店内写真の一部はPhotoshopで画像を編集してあります。

＊画像をクリックするとサイトに遷移します。

＜PC＞

＜モバイル/タブレット＞