WebGallery

Webデザインの初心者がスマートフォン対応しているWebサイトを淡々と紹介していくサイトギャラリーです。

*

動画・写真を活用した重厚感のあるデザインの酒造会社のサイト4選!

   

先週から暑い日が続いていますね…最近は「暑い」しか言っていない気がします。
夏の暑い時期こそキンキンに冷えた日本酒を飲みたい!という方も多いのではないでしょうか!

一人でも二人でも、大人数でも楽しめる日本酒…なんでしょうか?
(私の味覚はまだお子様なので、お酒を楽しめることができていないのですが…)

今回は、そんな日本酒を製造している会社のサイトを4つご紹介します!

 

ヤヱガキ酒造株式会社

真っ白いファーストビューと黒いロゴやテキストのコントラストがとても印象的な酒造会社のサイトです。
大胆に余白を空けていたり、ロゴタイプが筆で描いたような力強いフォントに対して、右側のキャッチフレーズは明朝体で細いフォントで対照的です。

トップページの下は、写真と文章が交互に配置されているレイアウトになっています。
画面幅いっぱいに写真を使い、その分文章のコンテンツの余白を大きく取ることで、上手くバランスを取っています。

 

株式会社丸山酒造場

画面に雪を降らせたアニメーションがインパクトのあるサイトです。
「雪中梅」の銘柄を印象づけるために、中央には銘柄のマークがくるくると回るアニメーションも使用しています。背景の酒瓶のラベルのように配置されており、さらに瓶の部分はスライダーにもなっています。

雪中梅の銘柄について紹介しているページでは、歴史とともに銘柄の詳細を知ることができます。
お酒の味について紹介している部分では、背景に梅の木のイラストを配置し、その上に商品の写真を重ねるように配置しています。
スクロールすると梅の花がぱっと咲くようになっているようになっていて、商品がさらに華やかに見えますね!

 

千代の亀酒造株式会社

こちらはファーストビューに動画を使って、自然豊かな土地でお酒が作られているということが伝わってきます。

千代の亀酒造について紹介しているページでは、筆で描いたようなロゴタイプに合わせて写真も加工しています。切り抜き部分を筆で描いたような加工にすることで、サイト全体に統一感が出ています。

 

北雪酒造

こちらはロゴをファーストビューで際立たせたレイアウトになっています。
左寄せにするのではなく、中央に配置し左右に余白を取ることで、よりロゴに注目度が集まります。

北雪について紹介しているページでは、写真の上に黒のグラデーションを乗せて文字を読みやすくするだけでなくページ全体に重厚感が出ています。
このページでマークについて紹介していますが、とてもこのロゴマークを大切にしていることが伝わってきますね!

 

動画や写真で歴史ある酒造会社を紹介するだけでなく、配色を抑えて重厚感を出しています。
こういったデザインは余白のとり方や行間・文字間の空け方で変わってくるので、余白の取り方という面でもとても参考になるデザインが多いです!

以上、動画や写真を活用して重厚感のある酒造会社のサイト4選でした!

 - 写真で表現, 映像で表現 , , , ,

  関連記事

見る人を飽きさせず、旅の目的ごとにお勧めスポットが分かる構成

  利賀芸術公園の特設サイトです。大きく3つの写真を用いたブロックで分 …

装飾を使わずレスポンシブしやすいデザインに

建築会社「TASSAY」のホームページです。 写真などでブロック化されたコンテン …

綺麗になれそうな美容外科

東京都豊島区にある美容・形成外科「エルテ大塚クリニック」のホームページです。 フ …

コンテンツの背景に京都の写真を使ったサイトのデザインが大胆でおしゃれ!

京都府京都市にある「株式会社らくたび -洛を旅するらくたび-」のホームページです …

エイプリルフールに公開されたサイトをご紹介!第三弾「ロート製薬 NEXT SMART LIFE」

ロート製薬がエイプリルフールに公開した「NEXT SMART LIFE」の特設サ …

写真を用いて地元の魅力を最大限に出す

新潟県長岡市の「川口」を観光地として川口観光協会が紹介している「えちご川口」のホ …

高級感だけでなく、馴染みやすいデザインを加えることでターゲット層を増やす

  新潟県にある株式会社サルーンが経営する「ビフテキバル極」の公式ホー …

商品のイメージカラーを使い、統一感を出す

  森永乳業の「ピノフォンデュカフェ」の特設サイトです。ピノのパッケー …

訪問看護事業のサイトが、従業員の写真をたくさん使っていて親しみやすい!

東京都江戸川区と沖縄県豊見城市に事務所をかまえる訪問看護事業「ウィル訪問看護ステ …

水色を使って清潔感・清楚感を出したコンタクトレンズの企業サイト4選

普段仕事しているときはコンタクトをつけているのですが、瞬きをするのをついつい忘れ …