こんにちは!雪田です。今回は、Webサイトのドリンクメニューのカテゴリ表示、生活用品や食品まわりのインフォグラフィック、アプリUIでのエラー・警告を兼ねた容器の案内表示などをスマートに引き締めてくれる、「瓶」の洗練された黒一色のシルエット素材を作成しました!

みほん

瓶の形を表す黒一色のシルエット素材

装飾をおさえた分かりやすい瓶の形なので、文字やほかのアイコンと組み合わせても使いやすいのが特徴です。飲み物メニューの表示、容器の案内、ブログ記事、配信画面や告知画像の小さな装飾など、いろいろな場面で取り入れやすい素材ですよ。

この素材について

この素材は、飲食や日常生活のあらゆる場面で見かけるガラスボトルをモチーフにした、無駄のないスタイリッシュなシルエット素材です。すっと伸びたボトルのネックラインと、安定感のあるボディを黒ベタのみですっきりとまとめているため、看板やメニューに入れたときに文字情報の視認性を一切邪魔せず、必要な意味を直感的に伝えてくれるデザインパーツになっています。

制作の裏話:どんなサイズでも一瞬で判別できる「ボトルの肩の傾斜とネックの太さ」

このシルエットをデザインするときに、わたしが一番試行錯誤したのは、「瓶特有の美しいくびれをキープしながら、どれだけ汎用性の高い『容器の記号』として引き算できるか」という点なんです!
瓶のシルエット素材って、ボトルのネックを細くしすぎたり底面を平らにしすぎたりすると、スマホの小さな画面や印刷物で極小サイズに縮小したときに、ただの「四角い棒」や「筒状の塊」に見えてしまって、何のデータなのか一瞬で判別できなくなっちゃうんですよね。

そこで、どれだけ小さなスペースや解像度で表示しても、ユーザーの視覚が「あ!これは飲み物や液体が入ったボトル(瓶)だな!」と一瞬で理解できるように、ボトルの肩から底にかけてのなだらかな傾斜や、王冠部分のわずかな厚みを1ピクセル単位で徹底的に計算して仕上げました! 通常の素材よりも記号としての意味合いが強く、画面の情報をスマートに整理してくれますよ。

  • 飲み物や容器、リサイクルの意味が文字なしでも一瞬で伝わる、無駄のない洗練されたシルエットデザイン
  • 飲食店のドリンクメニューから生活用品のECサイト、自治体の分別マニュアルまで、どんな誌面にも綺麗に馴染む高い汎用性
  • スマートな造形だから、小さなスペースにたくさん並べても画面がごちゃつかない高い視認性

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

「ドリンクカテゴリ」「リサイクル・環境問題の図解」「調味料やキッチンの案内」など、情報のジャンル分けを直感的に提示したり、画面のレイアウトを美しく整えたいあらゆる場面で便利に大活躍してくれます。

  • 飲食店やカフェのWEBメニュー、テイクアウト用アプリでの、「瓶ビール・ボトルドリンク」「各種飲料」のカテゴリーアイコン
  • ライフスタイルブログや地域情報サイトでの、エコやリサイクルの分別ルール、暮らしの収納アイデア、手作り調味料解説コラムの見出し装飾
  • 動画編集でのテロップ横や、配信画面のワンポイントとして配置する、週末のオンライン晩酌や「Bar風のおしゃべり枠」のメニュー用マーク
  • 「雪田屋」の他のシルエット系素材(各種グラスやキッチン道具など)と組み合わせて並べる、お洒落なインフォグラフィック図解

たとえば、ドリンクメニューの見出し横に置いたり、容器に関する説明の補助アイコンとして使ったり、案内画像の一部に入れて分かりやすさを足したりできます。これまでに配布した「各種シルエット素材」や他のアイコンと組み合わせることで、文章だけが続く単調なリスト表示が、読者さんがハッと目を留める親切で機能的な画面に早変わりしますよ!

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

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

飲み物,食事,趣味,健康,モノ