[ Web Design ] 森のクマさん

□ 使用ツール：Adobe Illustrator,Photoshop,XD

□ 所要時間：13時間

企画

□ ブランドの特徴

「忙しい毎日だけど少しだけ一休みしませんか？」というテーマのもと、作られたクッキー専門店のブランドサイト。

ブランド名は童謡『もりのくまさん』から。森に迷い込み突然出会ったくまとの楽しい様子が歌われているように、たまには日常から目を逸らしてほっと一息つけるような時間を過ごすお供になるようにと願いを込めて命名。

→日常の癒しとなるような商品のビジュアルを伝え、童謡の持つ可愛らしさを表現できるようなサイトに。

※お菓子作りが趣味なので、ビジュアルのお菓子は自作しました。そちらも見ていただけますと幸いです☺️

情報設計 / 印象設計

□ コンセプト：「ある日森の中 クマさんに出会った...クッキーを持ったクマさんに」

□ ターゲット

・忙しい日常を送る現代人。

・可愛いものが好きな10代からの女性。

・童謡をモチーフにしているところから、子育て中の方。

□ 目的

・商品のビジュアルだけでなく、ブランド名に込められた想いを伝えられるように。

・サイトそのものだけ見ても「かわいい！」と感じられるような、一つの絵本を読んでいるような印象を抱いてもらえるに。

□ 印象

・絵本のような可愛らしさ。

・森、クマ、クッキーの要素から優しい印象になるように。

ロゴデザイン

・漢字＋ひらがな＋カタカナでもゴチャついた印象にならないように文字間隔を調整。

・メインのロゴはサイトのトップページにメリハリをもたせるために縦組みに。

・装飾で木々が生い茂っている様子を表現。

制作物

□ WEBサイト(PC)

※XDのテストサイトへ移動します。

・絵本をめくる様子を表現したかったため、横スクロール型に。１ページずつ物語を進めていくようなワクワク感を感じていただけたら幸い。(ぜひサイトに飛んで体験してみてください！)

・柔らかさや優しさを与えられるように、不規則な曲線や手書きのイラストを使用。

□ ラッピング

ブランドの持つ「ゆったり感」を印象付けられるように、クマが横になっているイラストを使用。ロゴデザインの持つ可愛らしさとは雰囲気を変え、シンプルで写真映えするようなラッピングに。

□ 看板

"Designed by rawpixel.com / Freepik"

□ ショップバック

"Designed by Aleksandr_Samochernyi / Freepik"

□ イラスト

ゆったりのんびりしたクマの様子をデザイン。デッサンを抽象化し丸みを持たせ、柔らかい雰囲気のキャラクターに。またシルエットにすることで、子供っぽくなりすぎないように心掛けた。

ビジュアルの方向性

□ フォント

・本文・ロゴには、ゴシック体の中でも一際丸みが特徴的で、どこか懐かしいような印象をもつZen Maru Gothicを使用。

・欧文では、こちらも丸いシルエットが印象的なBryant(Bold Alternate)を使用。

□ カラー

・文章全体は＃5F5F5Cに統一。

・背景色として#FAF9F5・#DADECBを使用。

・ロゴ・サイト装飾には緑系である#BFC9A8・#8E9275・#7F9C75を使用。