「デザインの四大原則」で、文字だけでも見やすいメニュー表を作ってみよう！
こんにちは。皆さん、いかがお過ごしでしょうか。
徳島県吉野川市のデザイン事務所 きらきら工房です。
月１回、デザインについてのアレコレを、ビギナーさんにも分かりやすく解説したコラムを書いていますので、良かったら最後まで楽しんでいってくださいね。
日中はまだまだ暑いですが、朝晩は少しずつ涼しくなってきましたね。
いよいよ、食欲の秋到来！新米、お芋、かぼちゃ、栗、きのこ、鮭、秋刀魚…美味しいものだらけで困っちゃいます（想像しただけで幸せ…♡）
10月から11月にかけて、文化祭や学園祭、納涼祭や地域の秋祭り、近年ではハロウィンイベントなどなど、お祭りがたくさんある季節でもあります。
そんなお祭りに欠かせないのが、露店や飲食ブース。
皆さんの中にも、「文化祭の出し物で飲食の模擬店をやる」とか「地域の納涼祭に飲食ブースを出す」という方がいらっしゃるのではないでしょうか。
模擬店やイベント出店、やる側も特別感があってすごく楽しいですよね！でも、慣れていないと準備はいろいろと大変…。メニュー表も作らなくちゃいけないけど、他の準備に追われて商品の宣材写真を撮る余裕がない！なんてこともあるのではないでしょうか。
そこで今回は、メニュー表を自作するときに文字だけでも見やすくするコツを、デザイナーの目線でお伝えします！
パソコンやAdobe Express、Canvaなどのアプリだけでなく、手書きで作るときにも活用できますので、ぜひ最後まで見ていってくださいね！
以前公開したコラム「パワポもチラシも、初心者卒業！デザイナーが教えるデザインの基本ルール4つ」でご紹介した「デザインの四大原則」を使って、文字だけでも見やすいメニュー表を作ってみましょう！
お題：「飲食ブースに出店するカフェのメニュー」
今回のお題設定は、AIチャットサービスのBing AIに手伝ってもらいました！
普段はあまり使わないのですが、架空のお題を考えるときBing AIさんは最強のパートナーになってくれます…！ITの進歩に感謝…！！
さて、詳細はこんな感じです。
【メニュー】
〈ドリンク〉
コーヒー（HOT）…￥500-
紅茶（HOT／レモン・ミルク）…￥500-
オレンジジュース（ICE）…￥300-
〈フード〉
サンドイッチ（野菜とチーズ・ベーコンと卵・エビとアボカド）…￥600-
ポトフ（野菜とソーセージ入り）…￥700-
〈スイーツ〉
クッキー（チョコレート・ナッツ）…￥200-
パウンドケーキ（さつまいも・りんご・かぼちゃ）…￥300-
まずは、一旦この情報を適当に全部入れてみます。
するとこんな感じ。
わざとバラバラに入れてみたんですが…
うーん、なかなかに見づらい…！
ここから見やすく変化させていきます！
情報を整理しよう
適当に全部の情報を入れてみたので、バラバラ過ぎてとっても見づらいですよね。
ここで活躍するのが、「デザインの四大原則」です！
デザインの四大原則
デザインの四大原則とは、「近接」、「整列」、「反復」、「強弱」の４つのルールこと。
「近接」…関連する情報をまとめてグループにする
「整列」…関連する情報をルールに沿って並べる
「反復」…同じレイアウトを繰り返して並べる
「強弱」…メリハリをつけて、注目してほしい要素を目立たせる
（もっと詳しく知りたい方は、過去のコラムをご覧ください）
この「デザインの四大原則」を使って「情報の整理整頓」をすることで、伝えたい内容を伝わりやすくすることができます。
それでは全体を整えていきましょう。
1：グループに分ける（近接）
私たち人間は、近くにあるモノ同士を「グループ」と認識するため、バラバラに配置してあると「どれとどれがグループなのか」が分かりにくくなってしまうんです。
デザインの四大原則「近接」を使って情報をグループ分けしてみると…
〈ドリンク〉〈フード〉〈スイーツ〉がグループ分けされて、少し見やすくなりました。
次は、グループ分けした情報を、ルールに沿って並べていきます。
2：ルールに沿って並べる（整列）
「ただ並べるだけで、そんなに変わる？」と侮るなかれ。
ピシッとそろっていると、情報が分かりやすく、見た目も美しく見えるものです。
デザインの四大原則「整列」を使って、メニューの内容を左揃えや中央揃えにしていくと…
いかがでしょう。
この段階でかなりいい感じになったのではないでしょうか！
次は、同じレイアウトを繰り返して並べていきます。
3：繰り返して並べる（反復）
「整列」の時点である程度は整ったのですが、より見やすくするために、同じレイアウトを繰り返して並べていきます。
同じ色や形のものを繰り返すことで、デザインに統一感を与えて、情報の見やすさをアップしてくれます。
デザインの四大原則「反復」を使って、メニューの内容を整えると…
なかなかいい感じになってきましたね！
次は、メリハリをつけて、注目してほしい要素を目立たせます。
4：メリハリをつけて目立たせる（強弱）
今のままでも悪くはないのですが、「MENU」「ドリンク」「フード」「スイーツ」などの「見出し」が他の情報に埋もれてしまっているのが気になります。
そこで、「見出し」の文字の大きさや太さを変えて強弱をつけることで、見た瞬間に「どこにどの情報があるのか」が分かるようになります。
デザインの四大原則「強弱」を使って、メニューの見出しにメリハリをつけると…
もうこれで完成でもいいのでは？と思うほど、最初の段階と比べてすごく見やすくなりましたね！
せっかくなので、このメニュー表に「あしらい」を加えて、少し個性を出してみたいと思います。
【使用したフォント】
フォント：源ノ角ゴシック（げんのかくごしっく）
・「源ノ角ゴシック（Source Han Sans）」オープンソースのゴシック体フォント｜窓の杜
https://forest.watch.impress.co.jp/library/software/source_hansan/
・source-han-sans/README-JP.md at master · adobe-fonts/source-han-sans · GitHub
https://github.com/adobe-fonts/source-han-sans/blob/master/README-JP.md
番外編：「あしらい」を加える
今回は「かっこいい雰囲気のカフェ」を想定して、かっちりめのあしらいを加えていきたいと思います。
そして、より違いを感じてもらえるよう、「カラーを使わない」という「縛り」を課してみました！
できあがったものがこちら！
なかなかカッコイイ感じになったのではないでしょうか！
左右に余白が多くあったので、余白を活用して窮屈にならない程度に全体を大きくしてみました。
飲食ブースでの出店を想定すると、並んでいるときに「どんなものがあるか」を見やすい方が、来てくれたお客さまも嬉しいですもんね。
余白は、デザインの出来を左右するほど大切なもの。
余白があることで要素が引き立つし、視認性が上がるのです。
なので、「とにかく全部大きくすれば目立つし文字も読みやすいからOK！」というわけではないと覚えておいていただけると嬉しいです…！
並べてみると、「あしらい無し」の方は華奢でオシャレな印象、「あしらい有り」の方は力強くかっこいい印象ですね。
今回は「かっこいい雰囲気のカフェ」を想定してあしらいを加えたので、成功と考えて良いでしょう！
まとめ
「文字だけでも見やすいメニュー表」づくり、いかがでしたでしょうか。
写真やイラストを加えないシンプルなメニュー表だからこそ、「私にも作れるかも！」と感じていただけたのではないでしょうか。
実際に作ってみると、シンプルなものは簡単に作れそうに見えるけれど、「デザインの四大原則」を知らないと、かなり苦戦するんじゃないかなぁ…と感じました。
「デザインの四大原則」は色んな場面で大活躍する知識です！
応用すれば、料理の写真が入ったメニュー表も作れますし、「おすすめ商品」を売り出すときのPOPも作れます。SNS用の宣伝画像も、会社の資料やプレゼン用パワポだって、もちろん同じ方法で作れますよ！
いろんなものを作るときに、ぜひ活用してくださいね！
それでは、次回もお楽しみに！
徳島県吉野川市のデザイン事務所 きらきら工房
モノがあふれるこの時代、「らしさ」を後押しできるのは「デザイン」かもしれません。
デザインで、あなたの未来に“きらめき”をプラスしてみませんか？
お問い合わせはこちらから、どうぞお気軽に。
あなたの近くで、あなたの“キモチ”をカタチにしたい…
そんな思いでデザインするのが、きらきら工房です。