#32【LINE公式アカウント豆知識】パワーポイントで、思わず押したくなるオシャレなリッチメニューをデザインする方法
こんにちは！
assistデザイナーの全です(/・ω・)/
リッチメニューは基本的にアイコンを使ったわかりやすいデザインが主流ですが、思わず押したくなるようなデザイン要素もとても重要です。
業種によって入れるメニューは変わってくると思いますが、ホームページや店舗に電話、予約などの基本的なアイコンはどうやってオシャレにするんだろうと私もよく悩むことが多いです。
そこで、無料ストックサイトだけでおしゃれなリッチメニューを作れる方法をお伝えしたいと思ってこの記事を作成しました。
前回はGoogleスライドで水彩風のボタンのデザインのリッチメニューを紹介しましたが、
今回はパワーポイントで作る方法についてお話します。
前回の記事は↓より確認できます。
他のデザインツールは使えないよという方でも
簡単に作れるように
パワーポイントの機能だけで、ご紹介したいと思います。
今回使った写真素材はpexelsという無料のストックサイトを利用しました。
無料ですが、とてもクォリティが高くて私もよくお世話になっているサイトです。
リンクを張っておきますので、ぜひダウンロードしてみてください。
お花のフレーム：https://www.pexels.com/ja-jp/photo/3671650/
エステを受ける女性：https://www.pexels.com/ja-jp/photo/3985329/
花びら：https://www.pexels.com/ja-jp/photo/4041251/
Pexelsは商用利用なサイトなので、とことん使って自分だけのリッチメニューを使ってみてはいかがでしょうか？
解説動画も用意しておりますので、こちらもぜひご覧ください！
1. 下段の３つのメニュー作成
お花の写真をトリミング
ボタンになるお花のフレームを挿入して、トリミングをします。
【図の形式】→【トリミング】→【図形に合わせてトリミング】→【楕円】を選択します。
写真自体が縦に長いので、楕円の形も縦長い楕円になってしまいます。
これをお花のフレームの比率に合わせるためには再度【トリミング】を選択します。
そうすると画像の周辺に黒い線が表示されます。
トリミングしたい部分の黒い線をにマウスを
持っていくと、マウスのカーソルの形が「T」を逆にした形(?)に変わります。
その状態で黒い線を切り取りたい部分まで移動させて、正円になるように調整します。
いい感じで正円になったら写真の外側（スライドの空白部分）をクリック、もしくは「Esc」キーを押して固定します。
トリミング時【Ctrl】を押しながら黒い枠をマウスで移動させると上下（または左右）同時にトリミングできます。
外枠がくっきりしているので、ぼかして背景になじませます。
写真を選択して右クリック→【図の書式設定】→【効果】→【ぼかし】→【サイズ：25～30】に指定します。
サイズはお好みで調整してみてください！
お花の色味変更
私は背景をもう少し温かみのある色味にしたくてもうすこし調整しました。
画像を選択した状態で、【図の形式】→【色】→【色のトーン：温度：7200K】に設定します。
そうすると色味が赤みの入った暖かい色に変わります。
色のトーンは左に行けば冷たい青い色になって、右に行くと暖かい色になります。
写真の色を変更したので、背景も淡いピンク色に変更します。
【挿入】→【図形】→【正方形/長方形】を選択します。
リッチメニュー全体のサイズに合わせたら右クリック→【最背面へ移動】させます。
ここで！スポイト機能で色の変更が簡単にできます！
【図形の書式】→【図形の塗りつぶし】→【スポイト】をクリックして、
お花のピンクの背景をクリックすると背景が同じ色に変わります！
とても便利ですよね？
お花のフレームの余白を確保
でもお花が場所をとっていて
アイコンとテキストを入れるにはスペースが足りない気がします。
そこで裏技！！
ぼかした正円を入れることです！
まず、【Shift】を押しながら正円を挿入します。色は先ほど背景の色を変更したのと同じ方法で
スポイトで淡いピンク色を抽出します。
先ほどお花の写真で使ったぼかし機能をここでまた使います！
【図の書式設定】→【効果】→【ぼかし】→【サイズ：10】に指定します。
これでなんとなくなじんでテキストとアイコンを入れる場所も確保できました。
アイコンやテキスト挿入
ここでアイコンとテキストを挿入します。
今回使ったアイコンは明るめのピンクいろですが、私はもうすこしくっきりとした色にしたかったので、
色味を変更しました。
先ほどお花の色味の変更は【色】の項目をいじりましたが、今回は【修整】という項目をいじります。
【図の形式】→【修整】【明るさ：－20% コントラスト：+20%】に設定しました。
これで色がくっきりと目立つようになりましたね。
次はテキストを挿入します。
フォントはGoogleフォントの【Noto Serif JP】をつかいましたが、
お持ちの明朝体のフォントがあればそちらを使っても大丈夫です。
【Noto Serif JP】のリンクはコチラ
２.上段にメインビジュアル画像挿入
次は上段に３枠分を使ってビジュアル的な要素を入れます。
今回はエステを想定して作ったので、エステの写真を挿入します。
【挿入】→【画像】→【このデバイス】より写真を挿入します。
位置や大きさを調整したらはみ出ているところをトリミングします。
もちろん書き出したらはみ出た部分は見えないので、この段階は省いても大丈夫ですが、
私は作成中でも完成に近いイメージで確認したいので、トリミング作業をしました。
でもイメージと背景との境界線があまりにもはっきりとして違和感がありますね。。
ここで裏技！！
グラデーションが入った長方形を入れて境界線をなくします！
こちらの段階は若干難しいかと思いますので、動画も参考しながらご覧ください。（4:04から再生してください）
まず図形の【長方形】を挿入します。
写真の左に配置して、【図形の書式】→【図形の塗りつぶし】→【グラデーション】→６番目の【右方向】を選択します。
そうすると右にグラデーションの分岐点の設定項目が表示されます。
真ん中はいらないので、【グラデーションの分岐点を削除】アイコンを押します。
左の分岐点選択して、【色】→【スポイト】を選択して、背景の色をクリックします。
続いて、右の分岐点を選択して、先ほど同様スポイトで背景の色を選択しますが、ここで違うのが透明度をいじる点です。
【透明度】を【100%】に上げると右の色が透明になったことがわかります。
左の分岐点を右方向に移動して、自然にグラデーションがかかるようにします。
いかがでしょうか？
これで先ほどの違和感がなくなりました！
これでテキストを入れて完成です！
「ファイル」→「ダウンロード」→PNG画像を選択したらダウンロード完了です。
JPGでもダウンロードは可能ですが、画質があまりよくなかったので、PNGデータをおすすめします。
パワーポイントはパソコンによって書き出した際にサイズがずれることがあるので、
ペイントやオンラインサイズ変更サービスを利用して最終的にサイズを1200×810pxに指定してください。
サイズ変更は↓のサイトがおすすめです。
https://www.iloveimg.com/ja/resize-image/resize-jpg
このようにパワーポイントをうまく活用すれば誰でも簡単にリッチメニューを作ることが可能です。
それでも一人では作るには時間がない方やプロにお任せしたい方は
ぜひassistまでご連絡ください！
3. リッチメニューデータ無料でプレゼント
また今回作成したリッチメニューのデータをassistの友だち限定でプレゼントしますので、興味ある方はぜひ下記QRまたはURLより友だち登録してください
友だち登録後、チャットに「おしゃれなリッチメニュー」と入力後、送信してください。ダウンロードURLが発行されるので、そちらからダウンロードしてください。
写真データは付属しておりませんので、下記サイトよりダウンロードお願いします。
お花のフレーム：https://www.pexels.com/ja-jp/photo/3671650/
