初心者が居酒屋のメニュー表作成を頼まれた時に参考にしたページや作成の要点をまとめてみました

150814_izakayamenyu_0

突如、姉から「こんなメニュー作れる?」とLINEで画像が送られてきました。

デザインは初心者だけど、作ってみたかったので「できると思うよ。「てかやってみたい!」と即答。
そんなこんなで居酒屋のメニュー表を作ることになりました。

ぼくは下調べをネットで調べ尽くして作り始める人なので、早速調べ始めました。
ところが意外にメニュー表の作成についての情報が少ない。
ニーズがあるんじゃないかと思ったので、実際に使用した素材や作成の手順などをまとめてみました。興味のある方は覗いてって下さいね。

今回、作成したのは「居酒屋のメニュー表」

姉の知り合いの方が居酒屋を経営されているようで、そちらのメニュー表を作ることになりました。
やり取りはぼくの方でやっていないので、メインメニューの画像3点、JPGのロゴデータ(元データではない・・・)、現在のメニュー表のデータという残念な状態からのスタートとなりました。

文字メインのメニュー表

1品1品に画像が使われていて、看板メニューはほかのものより大き目に配置してみたいなメニュー表をイメージしていたのですが、さきほどの通り画像は3点、しかもロゴデータはAIデータでもないので使えない・・・なので、文字メインでA41枚にメニューをずらっと並べる手法に切り替えました。

作成の流れ

作成の流れとしては、以下のような流れで作るとスムーズにいきました。
1. メニューの内容を配置する
2. フォントの設定
3. 背景の設定
4. 画像加工
5. 画像の配置
6. 全体のバランス等の微調整
7. 使用したソフトや技術メモ
8. 参考リンク、参考書籍

今回の内容にDTPの内容が入っていないのは、まだ刷る段階までいってないのでよく分かってないのです・・・

1.メニューの内容を配置する

初めにやることは「居酒屋のメニューを配置してみること」です。
メニュー表の目的は、「このお店のメニューは何があって、値段がいくらで、何がオススメなのか」です。
ぼくは目的を見失って居酒屋のメニュー表は背景がこれがいいからこれを配置して・・・とはじめやっていたのですが、これではなかなか進みませんでした。

メニューをA4サイズに収まるように配置してみると、いろいろと問題点が見えてきます。
* 見出しの文字サイズをどうしよう。
* メニューの文字サイズをどうしよう。
* 見出しとメニューの間隔は?
* A4を縦で配置しようか?横で配置しようか?

などなど。まだまだありますが、メニューの内容によっては順番を変えないといけなかったり、ここで始めてメニュー表の原型ができてきます。

2.フォントの設定

フォントは居酒屋の雰囲気を出すために必要不可欠です。
居酒屋のメニュー表はほとんどのものに「筆文字」が使用されていました。
日本語フォントというだけで数が少なくなるのですが、日本語フォントで筆文字という要素も追加されるとさらに限られてきます。ぼくは有料フォントを買えるほどの余裕はなかったので、商用利用可でなおかつ無料のものを探してみました。

「渦筆」という日本語フォントが商用利用無料であったので、とても有難く使用させていただきました。
≪ ainezunouzu ≫ FONT
商用利用する場合は、事前に報告が必要なので詳細は利用規約をご覧ください。
漢字も一部ありますが、すべて使えるひらがなメインで使用しました。

筆文字はIllustratorがあれば、700円で作れる!

Illustratorの機能に「ライブトレース」という機能があって、それを使えば筆文字が簡単に作れちゃいます。
700円というのは、ダイソーで筆などを揃えた場合です。700円あれば習字セットが揃ってしまう凄い時代なんですね。(笑)
持っているよという方は、買う必要はないのでこだわりの筆文字を作ってみてください。

作り方は、半紙に文字を書きます。
それをiphoneなどで写真を撮って、パソコンに取り込みます。
取り込んだ画像をIllustratorで開きます。
メニューの下に「ライブトレース」というメニューがあるので、それをクリックするだけです。
アウトライン化されたデータになるので、あとは微調整すればオッケーだと思います。

3.背景の設定

メニューの配置やフォントが固まった段階で背景をつけると、最初に背景を決めるよりやりやすかったです。
背景は要素が大きいので、背景を変えるだけで大きく印象が変わってきます。
悩んだ挙句、こちらの無料素材 | 紙焼けの褪せた色合いが時の流れを感じるビンテージペーパーテクスチャーに決めました。

4.画像加工

画像加工は、Photoshopを使って行いました。
食べ物を美味しそうに、実際の色味をそのまま伝えるのは正直初心者には難しかったです。
こちらを参考にしました。
【Photoshop】思わずよだれが! 料理写真をより美味しそうに見せる3つのポイント|TECHNICAL BLOG|株式会社エムハンド

出来立てほやほや感を出すために、湯気をつけたり楽しいTipsがとても役に立ちました!

5.画像の配置

A41枚にメニューがずらっと並んだ中に配置するのですが、適当に配置したのではしっくりこないので、一度オブジェクトを灰色で作成して、しっくりくる位置に配置してみます。

6.全体のバランス等の微調整

とりあえず完成したら、全体の文字や画像のバランスを見ます。
画像の上に文字を乗せて、文字が見づらかったり、何が伝えたい情報なのか分かりづらいは微調整をしていきました。
文字が見づらいときは、光彩(外側)をつけて文字の周りに白い枠をつけたりすると見やすくなり、少し雰囲気も出ていい感じになりますよ♪
お店の一押し商品には、「おすすめ」などをアイコン化してみると、一気に見やすいメニュー表に早変わりしちゃいます。

7.使用したソフトや技術メモ

使用したソフトはPhotoshopとIllustratorです。
画像加工はPhotoshopでIllustratorはDTPデザインで使いました。
ぼくはPhotoshopがガイドがひきやすい、px単位のデザインがしやすいという点からよく使ってました。
今回は印刷物のデザインだったので、あまり使ったことのないIllustratorを使用して作成しました。
使ってみるとメリットばかりで今までなんで使わなかったんだろうと思いましたね。
アートボードごとにデザインできるし、Web用のデザインも設定を変えれば対応可能、ベクターデータなので拡大・縮小しても粗くならない、データが軽い、レイヤー構造が少なくて済む(背景、テキスト、オブジェクトの3つあれば対応できる)などあげればキリがないです。ただ、デメリットもありました。オブジェクトなどを配置すると端数がでるときがあります。それを数値で整数にし直しても、また端数に戻ってしまうことがありました。ピクセルグリッドに整合にチェックが入っていることが原因でした。


こちらのtande labさんの記事を参考にしました。
[Illustrator] mm 単位での制作で数字がずれる時の対処法 | tande lab.

また、画像をそのまま配置してもいいのですが、うっすら消えるような処理を施すと背景となじんでいかにも居酒屋!っぽくなります。
不透明マスクを使えば、それが実現できます。東京都のWeb制作会社のブログを参考にしました。
イラレで透明グラデーション:マスクの作り方 | 東京都のWeb制作会社のブログ

参考リンク、参考書籍

そのほか、使える参考リンクをカテゴリごとにまとめてみました。

参考リンク

◆売れるメニュー表のポイント
メニューブック作成の秘訣|カタログ制作 パンフレット作成PRO
簡単作成 らくらく飲食店メニュー Vol.1 商品紹介 メニュー作成の極意 上手なメニューの作り方

◆テンプレ・素材系
おしながき職人 – Wordテンプレート素材 無料ダウンロード
エクセルで作る飲食店メニュー 無料 飲食店メニュー デザインテンプレート A4横タイプ
飲食店で利用できそうなお品書き(メニュー表)アプリ・ソフトまとめ – NAVER まとめ
【和風素材.com】七夕、金魚、花火、ホタル。夏の無料イラスト – 暑中見舞い・残暑見舞いに。 /和のフリー素材集/和風イラスト/浮世絵壁紙/和紙テクスチャ/和のクリップアート

◆フォント
【永久保存】和風な日本語のフリーフォント40選|ferret [フェレット]
漢字対応!個人&商用利用可能な日本語フリーフォントのまとめ | ホームページ制作のR-design
筆文字フリー素材/商用筆文字(商品ロゴ・店舗ロゴ等)オーダー【花子の筆文字屋】

◆ブラシ(Illustrator)
イラストレーターブラシライブラリ「fudeline(フデライン)」|show-hey.com

◆デザイン事例
居酒屋はちやグランドメニュー
居酒屋 メニュー デザイン実績02|カタログ制作 パンフレット作成PRO
ターゲットによって変えるべし!センスの光る「メニューブック」のデザイン事例集 | OMISE Lab

参考書籍

デザイン学校を出たわけでもないぼくが最終的に納得できるデザインが作れたのは、この本のおかげです。
たまたま本屋で見つけたのですが、本の表紙に書いてある通り「センス、経験、一切不要!」です。
初心者の方が読んでも読みやすい。しかも、結構分厚い割に定価1,850円と安くお得でした。

ぼくのオススメの読み方は、Capter1の「デザインを始める前に」とCapter2の「レイアウトの基本ルール」を読んで、あとは必要な時に読む。画像のデザインに悩んだら、Chapter3の「写真と画像」を読めばいいし、文字に悩んだらCapter5の「文字と書体」を読めばいい。使い勝手も抜群でしたよ!

150814_izakayamenyu_0

大画面でサクサクプレイ
【徹底解説】これからPC版を始めるあなたに送るシャドウバースPC版の圧倒的メリット3つ

もっと大画面でサクサクプレイしたい。高画質で動画配信をしてみたい。新たにカードを引いて、新しく始めたい。そんな方におすすめ!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です