見出し画像

妄想ウェブサイト#9 ジャムねこ本舗

ナツデザインではデザインのサンプルとして、様々な架空の企業やサービスのWebサイトを制作・公開しています。「妄想ウェブサイト」シリーズと題して、1本ずつどんな妄想(設定)から生まれたサイトなのか、制作のこだわりポイントなどご紹介していきたいと思います。
第9回目は、思わずほっぺがふニャーンとゆるんでしまう、おいしいジャムのお店のECサイトです。

https://natsudesign.main.jp/jamnekohonpo/
(上記URLより実際に操作できる状態のサイトをご覧いただけます)

ホーム
ジャムねこ本舗について
レシピ

今回のサイトの設定

日本有数の果物王国〇〇県。
〇〇県産の果物をふんだんに使ったジャムねこ本舗のジャムは毎日のお食事のお供にはもちろん、大切な人への贈り物にもおすすめです。
元々は地元で普段使いやお土産として人気のあった商品を、このたび通販で全国に販売することにしました。
贅沢な味わいをぜひご自宅でもお楽しみください。
————という設定で今回は架空のジャムのECサイトを制作しました。

みなさんはどんなジャムが好きですか。
今回制作したサイトの商品はイチゴやブルーベリーなどポピュラーなものを中心にしているのですが、実はこうした定番以外のジャムも美味しいことに最近気がついてしまいました。
数ある変わり種ジャムの中でも、特にボンヌママンのマロンクリームが美味しく、初めて食べた時は「白あんの味がする!」と衝撃を受けました。洋食の代表格であるパンも、これを塗ると一気に和風の親しみやすい味になる気がします。

そんなボンヌママンはWebサイトも素敵。
日本版もフランス本国のサイトも乙女心くすぐるデザインです。

エスビー食品による日本版ボンヌママンのWebサイト
https://www.bonnemaman.jp/?moved=1

本国のボンヌママン公式サイト
https://www.bonne-maman.com

ボンヌママンに限らず、海外の甘いものやお菓子のサイトは可愛いものがたくさんあります。最近のお気に入りはTunnock(タンノック)というイギリスのティーケーキのWebサイトです。

https://www.tunnock.co.uk

サイトにはタンノックをモチーフにしたグッズ販売もあり、ラインナップにカフスボタンがあるのがイギリスだなあと感じました。日本のお菓子で表現すると、ブラックサンダー型のカフスボタンといったところでしょうか。なかなか茶目っ気のある商品です。
もし将来イギリスに行くことがあれば、このティーケーキも忘れずお土産にしたいと思います。


デザインのポイント

今回サイトに使用したジャムの瓶や箱の画像は、Adobe Dimensionという3Dソフトで制作しました。

自分でモデリングをしなくても、あらかじめ用意されている形や質感を組み合わせて手軽に3D画像を作ることができる優れモノ。
追加の素材を入れない状態で形のテンプレートが73種類、素材(表面の質感)が73種類あり、単純な計算でも5329通りの組み合わせが可能です。
ペットボトルや缶などちょっとしたモックアップなら、この基本素材だけで十分それっぽいものが作れると思います。

こういうシズル感あるモデルもあります!
水滴がついているだけで、なんだかおいしそうです。

豊富なテンプレートの中にも、残念ながら今回作りたいジャム瓶のものはなかったので、複数の素材を組み合わせて「ジャム瓶のような形」を作ることにしました。

①まずはジャム瓶の形を作ります。瓶本体には「ジャー(ふた付き)」の下半分、ふたには「缶(ふた付き)」の下半分を使います。

そのまま組み合わせるとサイズが合わないと思うので、
上図のようになるまで大きさや角度を調整します。


②ジャム瓶に質感をつけます。瓶の素材は「ガラス」、ふたの素材は「メタル」を使用して色を濃いグレーにしました。ジャム瓶本体はこちらで完成です!

ふたの色です。
真っ黒に色指定すると素材のツヤも消えてしまうため、
黒い物体に見えて、なおかつツヤも消えないギリギリのラインを攻めます。
今回は#3D3D3D を使用しました。


③中にジャムを入れるとよりそれらしくなります。今回ジャムの形は「円柱」、質感は「溶けた雪」を使いました。

透き通った素材は「ゼラチン」や「ビール」など他にもあるのですが、
「溶けた雪」が表面のぼこぼことした質感が果肉らしくておすすめです。
完成した画像をレンダリング(出力)すると上図のようになります。
編集画面と出力される画像の見た目が少し異なるので、こまめに画像を出力して確認すると安心です!

今回はデフォルトで用意されている素材を使用しましたが、自分でモデリングした素材を読み込んだり、Adobe Stock(Adobeが運営する素材サイト)から追加素材をダウンロードすることもできるようです。

次回以降、自作モデルや追加素材を使用する機会があればまたnoteでレポートしたいと思います。Creative Cloudを入れているけど、Dimensionは一度も開けたことがないな…という方はぜひこの機会に触ってみてください!


おまけ

サイト内には掲載できなかったのですが、ロゴにも使われている猫のようなキャラクターはこんな設定を考えていました。

ジャムねこ
ジャムが大好きで、いつも顔に色とりどりのジャムをくっつけている(つまみ食いをするため)。ジャムを好んで食べることや、後ろ足だけで歩くこと、人間の言葉を話すことなどから、ジャムねこを知る人の間では「本当は猫じゃないのでは…?」ともっぱらの評判である。

この記事が参加している募集

つくってみた