こんにちは!雪田です。今回は、洋風バルのデジタルメニューやカフェバー風のドリンクお品書き、少し落ち着いた大人の晩酌・雑談配信の画面装飾などを、スマートで小粋な乾杯の空気感で満たしてくれる、「ビールコップ」の洗練されたミニマルアイコン素材を作成しました!

みほん

ビールコップを表すミニマルアイコン素材

ジョッキよりもすっきりした印象のビール素材なので、控えめにお酒や飲み物の雰囲気を加えたい場面にも取り入れやすいのが特徴です。シンプルな形でまとまっているため、文字やほかの料理・飲み物と並べても見やすくなっています。

この素材について

この素材は、スタイリッシュなタンブラーグラスに注がれたビールをモチーフにした、無駄のないスタイリッシュなアイコン素材です。直線的でスマートなコップのラインと、その上にふわっと載ったきめ細やかな泡のシルエットをすっきりとまとめているため、洗練されたお洒落なバーの雰囲気を出しながらも、画面の中で主張しすぎずに使えるのが特徴です。

制作の裏話:ジョッキと徹底差別化!すっきり見せる「グラスの傾斜と泡のボリューム感」

このをデザインするときに一番こだわったのは、「さっき作ったビールジョッキの賑やかさとはガラリと印象を変えて、どれだけ大人でスマートなグラス感を醸し出せるか」という点です!
コップに入ったお酒のマークって、グラスの輪郭をただのストレートな長方形にしてしまうと、縮小したときにビールではなく「お茶」や「ジュースが入ったプラスチックコップ」に見えてしまって、お酒席特有の特別感がパッと伝わりにくくなっちゃうんですよね。

そこで、どんな極小サイズや解像度で表示しても、ユーザーが一瞬で「あ、これは大人の時間を楽しむ上品なグラスビールだな」と直感できるように、底に向かって絶妙に細くなるコップの傾斜や、泡のフラットなトップラインを1ピクセル単位で徹底的に計算して仕上げました。大衆居酒屋風の豪快なジョッキ素材よりも、都会的でスッキリとした「乾杯のひととき」を、スマートに画面へ伝えてくれますよ!

  • ビールやバーのモダンな雰囲気が文字なしでも一瞬で伝わる、無駄のない洗練されたミニマルデザイン
  • 洋風バルのお洒落なメニュー表から大人の雑談配信まで、どんなクリエイティブスペースにも綺麗に馴染む高い汎用性
  • ドリンクメニューのスマートな一覧表示など、限られた横長スペースに並べても圧迫感を与えない高い視認性
  • 単色パーツだから、クラフトビール風の深い琥珀色、爽快なシトラスイエロー、資料用のグレーなど自由に変色OK
  • 手軽に配置できる透過PNG形式と、どれだけ拡大・縮小しても境界線が絶対にぼやけないSVG形式を同梱

こんな場面で使ってみて!おすすめの活用法

「アルコール類」「各種ドリンク」「バー・晩酌テーマ」など、メニューの品目をスタイリッシュに整理したり、上品な大人のリラックス感を足したりしたいあらゆる場面で大活躍してくれます。

  • お洒落なカフェバーやダイニングのWEBメニュー、スマホ用注文アプリでの、「クラフトビール」「ドリンク一覧」の見出し
  • ライフスタイルブログや大人の趣味サイトでの、おすすめの地ビール紹介、家飲みを楽しくするグラス選び、おつまみレシピコラムのアイキャッチ
  • 大人の社交場をイメージした交流イベントの告知バナーや、週末の「週末バー開店」「夜のまったり晩酌枠」の配信画面用マーク
  • 「雪田屋」の他のグルメ系素材(料理やおつまみなど)と並べて配置する、コースメニューやおすすめのセットプランを整理したインフォグラフィック

たとえば、ドリンクメニューの見出し横に置いたり、飲食イベントの告知画像に添えたり、配信画面の飾りとして使ったりしやすい素材です。料理、グラス、瓶、ジョッキ、あるいはこれまでに配布した各種ミニマルアイコン素材と組み合わせることで、画面全体の役割や優先度の流れもさらに綺麗に整理しやすいですよ!

PNG形式とSVG形式の使い分け

【PNG形式】
背景が最初から透明になっている画像データなので、ブログ記事の本文に直接貼り付けたり、イベントのタイムスケジュールを載せたプレゼン資料、動画のテロップ横などにそのままポンと配置して手軽に使いたいときにぴったりの形式です。

【SVG形式】
どれだけ拡大・縮小しても境界線が絶対にぼやけないベクターデータです。Webサイトのスマートなメニューナビゲーションやアプリのシステムパーツとして組み込んだり、さっきのビールジョッキ素材と並べて大きさをミリ単位でそろえたり、お店のテーマカラーに合わせて見た目を100%最適化したりしやすい形式です。

加工・アレンジの例

無駄を削ぎ落としたアイコンは、色や背景との組み合わせ次第で、オーセンティックなバーの知的さからポップなビストロ風の可愛さまで色んな表情を演出できます。

  • 深みのあるアンバー(琥珀色)やビターなブラウンに変更して、地ビールフェアや大人の隠れ家バーのようなシックで高級感のあるバナーにする
  • 優しいパステル調的背景の上にこのを白抜きで配置して、スマホアプリのメニューみたいな押しやすいUIボタンにする
  • さっき配布した「ビールジョッキ」のと並べて配置し、「大衆居酒屋プラン」と「プレミアムバルプラン」を視覚的に分かりやすく分けるメニュー見出しにする
  • 「カレンダー」の素材の横に小さく並べて、「今週の土曜日はオンラインバー配信!」というイベントスケジュールをスマートに可視化する

ビールコップは、ビール、飲み物、お酒、居酒屋、バー、乾杯、飲食店メニューを表したいときに誰もがリラックスできる定番のモチーフだからこそ、飽きのこない使いやすさに徹底的にこだわりました。皆さんの分かりやすくて優しいデザイン作りに、たくさん役立ててもらえると嬉しいです!

食事,料理,イベント,趣味,健康,モノ,リクエスト