高単価の案件に挑戦できるようになる！LINEリッチメニューをPhotoshopで作る5ステップ
「リッチメニューって作れるようになった方がいいの？」
結論から言うと、はいです。最近、クラウドソーシングでも直接受注でも、リッチメニュー制作の依頼が増えています。単価は高いものだと3万円ほど。通常のバナー制作より比較的作りやすいのに、単価が高い——そんな案件です。
今回は、公式LINEのリッチメニュー制作の全工程をPhotoshopでお見せします。デザイン初心者の方でも、この記事を見ながら一緒に作っていただけるよう、手順をまとめました。
リッチメニューとは？
公式LINEに登録すると、トーク画面の下からメニューが出てくることがありますよね。レストランやファッションブランド、スクールのLINEなどでよく見かけます。そのメニューがテキストだけでなく、デザインされた画像になっているものが「リッチメニュー」です。
タップするとお申し込みページや詳細ページに飛んだり、SNSに遷移したりできます。企業・個人事業主の方が情報発信や集客に使うアイテムとして、最近急速に普及しています。
今回作るもの
架空のコーチングセッションを行う個人の方を想定したリッチメニューです。
リッチメニューの構成内容
コーチングセッション
個別カウンセリング体験
お申し込みはこちら
Instagram / YouTube / Facebook
サイズ：横2500px × 縦1686px（解像度72、RGBカラー）
レイアウト：上1枠＋下3枠の構成
Step 1｜カンバスを作る
Photoshopを開いて「新規」から、サイズを2500×1686px、解像度72、RGBカラーで作成します。
Step 2｜上下のレイアウトを取る
上1枠・下3枠のレイアウトを作るため、まずガイドを引いていきます。
定規を表示（メニュー「表示」→「定規」にチェック）して、上の定規からドラッグしてカンバスの真ん中にガイドを引きます。
下3分割は、測るのが面倒なので以下の方法で簡単に取ります。
背景レイヤーを複製する
複製したレイヤーをシフトを押しながら横に潰す（細長い四角にする）
カラーオーバーレイで色をつけて見やすくする
オプションを押しながらドラッグして複製し、3つ並べる
3つ選択してガイドに沿わせる
これで均等な3分割ができます。
定規を使ってガイドで区切るだけで、正確な3分割が一瞬で完了します。
Step 3｜上部（メインエリア）を作る
テキストを配置する
横書き文字ツールで以下の3つのテキストを入力します。
コーチングセッション（一番大きく）
個別カウンセリング体験（中程度）
お申し込みはこちら（小さめ）
テキストの大きさはコマンドT（変形）で調整します。全部同じ大きさだとつまらないので、強弱をつけましょう。
フォントを変える
今回は「キリギリス」というデザインフォントを使っています。
こういった個性的なフォントを使うと、一気におしゃれな印象になります。
フォントを変えるだけで雰囲気が大きく変わるので、ぜひ色々試してみてください。
文字間はオプション+矢印キーで詰めることができます。
フォントによっては文字間が開きすぎるので、必ず調整しましょう。
座布団（背景）を敷く
長方形ツールで文字の下に座布団を作ります。
不透明度を少し下げると、さりげなく背景に馴染みます。
文字は白にすると見やすくなります。
写真を配置する
右側に写真を入れます。
右クリック→「スマートオブジェクトに変換」にしておくと、拡大・縮小しても画質が劣化しません。
写真を上半分だけ表示させるには、マスクを使います。
長方形選択ツールで上半分を選択した状態で、レイヤーマスクを適用するだけです。
写真の位置はマスクとレイヤーのリンクを外すことで個別に動かせます。
シャドウで立体感を出す
コーチングセッションのテキストにドロップシャドウをかけます。
水色系の影をつけると、文字が少し浮き出て目立つ印象になります。
強くかけすぎず、さりげない程度が上品です。
ボタンを作る
「お申し込みはこちら」のボタンは、境界線をつけて色を加えます。
三角の矢印を小さくして添えると、ボタンらしさが増します。
Step 4｜下部（SNSメニュー）を作る
ベースとなる枠を1つ作る
長方形を作り、レイヤースタイルでカラーオーバーレイ（薄い水色）と境界線（水色）を設定します。
枠が浮いているような「アイランド感」を出したいため、少し縮小します。
テキストとアイコンを追加する
横書き文字ツールで「Instagram」と入力。フォントをキリギリスに変えます。
下に角丸の座布団を敷きます。角丸は長方形ツールのアピアランスで数値を入力（30程度）するだけで簡単に作れます。
SNSのアイコンはFreepikからダウンロードします。
イラストレーターのデータとして持ってくると、ベクターなので拡大しても綺麗なままです。
コマンドCでコピーして貼り付け、スマートオブジェクトに変換してから配置します。
複製して3つにする
1つ完成したら、フォルダにまとめてオプション+ドラッグで複製します。
3つ並べてテキストとアイコンを差し替えるだけで完成です。YouTube・Facebookに変更します。
Step 5｜仕上げ
背景にグラデーションを入れる
何もないレイヤーを一番下に追加して、グラデーションの塗りつぶしを適用します。
マスクをかけて右から光が当たっているような処理をすると、全体がまとまった雰囲気になります。
写真を少し明るくする
全体が仕上がってから写真の明るさを調整します。
少し明るくするだけで、光って見える効果が出ます。
全体を確認して完成
引きの目で全体を確認して、バランスを整えたら完成です。
制作のポイントまとめ
枠組みはガイドで正確に
上下の分割をしっかり取ることが、全体のバランスのベースになる。1つ作って複製する
下3枠は全部個別に作るのではなく、1つを完成させて複製する方が圧倒的に効率的。フォントと文字間にこだわる
フォントを変えるだけで印象が大きく変わる。文字間は必ず詰める。スマートオブジェクトを使う
写真やアイコンはスマートオブジェクトに変換しておくと、拡大・縮小しても画質が落ちない。Canvaより差別化できる。
Canvaでも作れるが、Photoshopならではのシャドウ・マスク・グラデーションを使うことで、オリジナル感のある仕上がりになる。
もっと学びたい方へ
▼Photoshopをもっとうまく使いたい方に、「Photoshop最強テクニック集」を無料プレゼントしています。ぜひこちらで、制作の質とスピードを上げてくださいね。
▼WEBデザインのスキルを身につけてお仕事にしたいという方に、WEBデザイナーを4500名以上育ててきた久保から20レッスンをプレゼントします。音声と記事でしっかり学べる超優良級のコンテンツなのでぜひ登録して受け取ってください。
そして、WEBデザイナーとしての働き方について、
無料のオンラインセミナー（3時間）で詳しくお伝えしています。
講師から直接学びたい！という方はこちらにご参加ください。
↓ ↓ ↓ ↓ ↓
↓この記事はYouTube動画をまとめています。
動画もぜひチェックしてみてください。
最後まで読んでいただき、ありがとうございました。
日本デザインスクール代表 久保なつ美
久保なつ美（くぼなつみ） 日本デザインスクール代表。現役WEBデザイナーとして活動しながら、未経験からWEBデザイナーを目指す方に向けた実践的なスクールを運営。スクール設立から10年、累計4,500名以上の受講生を輩出。YouTubeでは学習方法や業界のリアルな情報を発信中。
