こんにちは！雪田です。今回は、飲食店のデジタルメニューや居酒屋風のカテゴリーお品書き、週末の雑談・晩酌配信の画面装飾などを、楽しげな乾杯の空気感でいっぱいにしてくれる、「ビールジョッキ」の洗練されたミニマルアイコン素材を作成しました！

みほん

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

PNG形式

SVG形式

ジョッキに入ったビールの形が分かりやすく、ひと目でビールやお酒、乾杯のイメージを伝えやすいのが特徴です。シンプルなアイコンなので、文字やほかの料理・飲み物素材と組み合わせても見やすく、飲食系のデザインに取り入れやすくなっています。

この素材について

この素材は、居酒屋やお祭りの主役である生ビールをモチーフにした、無駄のないスタイリッシュなアイコン素材です。たっぷり注がれたビールともこもことした泡の層、そして頑丈なジョッキの取っ手のシルエットをすっきりとまとめているため、飲食系の賑やかな雰囲気を出しながらも、画面の中で重くなりすぎないのが特徴です。

制作の裏話：極小サイズでも喉が鳴る「黄金比の液体バランスと泡のくびれ」

このアイコンをデザインするときに一番こだわったのは、「ジョッキ内のビール液面と、上にこんもり載った泡の絶妙な境界線（比率）」です！
ビールジョッキのマークって、ガラスの透明な厚みや液体の波紋をリアルに描き込みすぎると、スマホの小さなメニュー画面などに縮小したときに線がごちゃごちゃに潰れて、ただの「マグカップ」や「スープカップ」に見えてしまうんですよね。

そこで、どんな極小サイズや解像度で表示しても、ユーザーが一瞬で「あ！キンキンに冷えた美味しそうな生ビールだな！」と直感できるように、泡のふっくらとしたくびれ感や取っ手の四角いエッジを1ピクセル単位で徹底的に計算して仕上げました。普通のグラス素材よりも「みんなでワイワイ乾杯する楽しさ」を、スマートに画面へ伝えてくれますよ！

  • ビールやお酒の意味が文字なしでも一瞬で伝わる、無駄のない洗練されたミニマルデザイン
  • 飲食店のデジタルメニューからグルメブログのアイキャッチまで、どんなスペースにも綺麗に馴染む高い汎用性
  • ドリンクメニューの一覧表示など、小さなスペースにたくさん並べても画面がうるさくならない高い視認性
  • 単色パーツだから、定番の麦わらゴールド、黒ビール風のビターなブラウン、サイトに合わせたグレーなど自由に変色OK
  • 手軽に配置できる透過PNG形式と、どれだけ拡大・縮小しても境界線が絶対にぼやけないSVG形式を同梱

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

「アルコール類」「おつまみメニュー」「晩酌・お祭りイベント」など、飲食に関するカテゴリーやリンク導線をスッキリと見せたいあらゆる場面で便利に大活躍してくれます。

  • 飲食店やバーのWEBサイト・タブレット注文画面での、「アルコール・ビール」「本日のおすすめ」の見出しアイコン
  • グルメブログや地域情報サイトでの、美味しい居酒屋探訪、ビアガーデン特集、ご当地グルメ解説コラムのアイキャッチ装飾
  • オンライン飲み会の招待状バナーや社内親睦会の告知ポスターでの、乾杯の合図を盛り上げるための図解パーツ
  • 動画編集でのテロップ横や、配信画面のワンポイントとして配置する、週末の雑談配信や「宅飲み・晩酌枠」のテーマ用マーク
  • 「雪田屋」の他のグルメ系素材（料理やおつまみなど）と組み合わせる、美味しいペアリングを整理したインフォグラフィック

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

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

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

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

加工・アレンジの例

無駄を削ぎ落としたアイコンは、色や背景との組み合わせ次第で、バルのようなお洒落さから大衆居酒屋の元気な雰囲気まで色んな表情を演出できます。

  • 鮮やかなイエローや輝くようなゴールドに変更して、ビアガーデン告知やオンライン飲み会募集の主役を飾るポップなバナーにする
  • 優しいパステル調の背景の上にこのアイコンを白抜きで配置して、スマホアプリの注文メニューみたいな押しやすいUIボタンにする
  • 2つのジョッキを少し傾けて左右対称に並べて配置し、お互いが「カチン！」と楽しそうに乾杯しているようなシーンを表現する
  • 「カレンダー」の素材の横に小さく重ねて並べて、「今週の金曜日は社内懇親会！」というスケジュールを視覚的に分かりやすくする

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

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