具体的にデザインの修正をしてみました
竹田怜平（たけだ りょうへい）と申します。
フリーのWEBデザイナーとして活動しています。
以前の記事（下記のリンク）でデザイナーが気を遣うポイントを書いたのですが、実際に具体例を出した方が分かりやすいと思い、
今回は"微妙なデザインを修正する"という形で実際にどのようにデザインで気を遣っているかを記事にできたらと思います。
修正する対象のデザイン（LINEリッチメニュー）
今回例として出す、微妙なデザインは
架空の結婚相談所のLINEリッチメニューを添削したいと思います。
LINEのリッチメニューとは？
企業が運用しているLINEで、下記画像の表示部分をリッチメニューと言います。
結婚相談所の要件定義
結婚相談所がLINEを導入している理由は、主催した婚活イベントに参加してもらえるが、次の結婚相談のフェーズに行かなくて困っている。そのためイベント後に公式LINEを登録いただくことで、定期的なクーポンやイベント情報などのアプローチをして繋がりを保つため。
ターゲットは真面目で仕事を頑張っている男性。ただ結婚相談や婚活、マッチングアプリをしたことがほとんどない。漠然と年齢的に結婚を考える歳になり、職場でも出会うきっかけがないため、若干焦り始めている。
メインのターゲットは男性だが、女性登録者も結婚相談に来るため、男性以外にもリーチできるようにしたい。
企業の強みは高い成約率で、その背景には、人が好きで明るく情熱的なオーナー様の存在があり、対応は親切丁寧で、なにより親しみを持って相談者に寄り添う姿勢が圧倒的に他社と異なる。
現在のリッチメニューのデザイン
今回は次のようなリッチメニューを仮定します。
（私が数社のリッチメニューを見る中でデザイン的に気になったポイントを組み合わせて違和感のあるデザインを作り上げています。）
気になるポイント
視認性はあるかどうか
各種コンテンツが押下できるボタンと認知してもらえるか
余白のバランスが安定しているかどうか
優先して目に入ってほしい情報が意図した通りに伝わりそうか（あしらいが文字よりも目立っているなどの状況です）
上記の内容を配慮して、デザインを修正していきたいと思います。
レイアウトを調整
まずは、バラツキの目立つ”枠”を整えてみます。
枠を整えるためにまずは余白の状況を確認しますが、
上下左右の余白（コンテンツの間隔）が空いていたり、詰まっていたりとバラツキがあります。
また、センターラインに対してコンテンツの配置がずれています。
余白がアンバランスなことが分かりましたので、下記のポイントを修正してみます。
余白を左右上下対称にする（特に大枠に対して左右が詰まっている）
印象の強すぎる枠線を細くする
八角形の角が目につく＝尖のある印象のためRを付ける
修正ポイントを反映したデザインが下記になります ↓↓↓
変更した前後でどのように感じますか？
おそらく、すっきりした印象にはなったかと思います。
ただ、枠ごとに整ったのはいいですが、枠内の余白が広く見えます。
枠内の余白を調整
枠内の余白を調整していきますが、特に下段のコンテンツは４つ並べているため、自然と縦長の枠になることで、上下の余白が目立ちます。
また、余白に目を向ける中で気になるのが、
「気になるメニューをタップしてね」という小さな文字ですが、次の理由で外したいと思います。
文字が小さいと、読みにくくストレスになる。
この文字があることで、上下のコンテンツの間に不要な余白ができてしまう。
ただ、この「タップして」という文言が入っている意図として、一部ターゲットの中に機械操作が苦手な方がいるための配慮だと想定されます。
そのため、代案として「タップできるんだ！」と認知を促す工夫をしたいと思います。
併せて気になるのが、本当に枠の形はこれで良いのかどうかです。
特に八角形など多角形で伸びた枠を使用することはほとんど見られません。
また、今回のレイアウトで正八角形を使用した場合、
枠が小さくなり、それに合わせて文字が小さくなることで、文字が読みづらくなってしまいます。
そのため、それ以外の枠を使うのが望ましいため、変更したいと思います。
そして、枠内で一番余白が目立つ「スタッフ紹介」ですが、レイアウトを整えて余計な余白を消していきます。
ちなみに、余白を整えていくと、どうしても文字だけではカバーできない余白が出るため、あしらいも必要になってきます。
あしらいを付けるにも、全体の雰囲気を崩さないように気をつけながら入れていきます。
この様な形で余白を調整していきますが、皆さんでしたら、どんな余白の調整をしますか？
※余談ですが、リッチメニューは基本的に６つのコンテンツに収めるのが望ましいです。
リッチメニューはスマートフォンと一部タブレットのみの対応のため、小さい枠内で文字を読んでボタンを押下してもらう必要があります。
そのため、ストレスなく押せて、文字も読めるサイズとなると６つのコンテンツまでが使いやすいと感じるためです。
余白を整えてみたデザインがこちらになります ↓↓↓
修正したことで、
窮屈に見えない
悪目立ちした余白がない
状態にできたかと思います。
また、下記のポイントを併せて調整しています。
スタッフ紹介枠に「タップできる」と認知ができるようにボタンを入れています。
全ての枠に僅かにですがドロップシャドウを入れて、立体感を出して押下できる雰囲気を出しています。
背景の花が文字よりも強い印象だったため、薄くしています。
文字の間隔（"スタッフ"の文字など）を整えています。
「スタッフ紹介」と「無料面談」の枠内の背景を濃くして、白文字を読みやすくしています。
すでにあるイラストのテイストと大差ないイラストを追加しています。
「無料面談」のイラストが他とテイストが異なるため、類似の雰囲気のイラストに変更しています。
「無料面談」をアーチの枠に変更しています。
→これはデザインの4原則にある「反復」をさせてストレスなく読んでもらうためです。
「初めての方はこちら」にあった初心者マークが目につくため、枠内に背景として馴染ませています。
墨黒の文字は浮いて見えるため茶色に変更しています。
料金にあるアイコンが黒ベタのため、文字よりもアイコンが目立っていたことから、白字に黒枠のアイコンに変更しています。
「ご成婚者の体験談」の背景に薄くグレーが入っていますが、意図が読めず分からないため、他の枠と同じ白にしています。
※全体的に余白を整えつつ、視認性を上げながら雰囲気を損なわないように調整しています。
※また、余談ではありますが、枠はわずかに角丸を付けています。
これの意図としては、世の中にあるボタンで特に最近の形状は角が90度のものがあまりなく、若干でもアールが入ったものが多いためです。
意図した動きをしていただきたい場合は世の中で多くの人がイメージしやすい形状に併せた方が、意図したアクションをしてもらいやすいためです。
（ただ、目的や世界観によっては角が90度でももちろんありえるため、正解というわけではありません。）
もし、あしらいを控えたデザインにしたら
ちなみにですが、視認性を最優先して試しに全ての枠を四角にして、あしらいを控えた場合、下記のような雰囲気になります。
文字が目につきやすいですが、印象が結婚相談所ではなく、法律相談所の雰囲気に感じます。。。
今回は結婚相談所のため、硬い印象にならないようにするためにも、
下段の枠はアーチ形状にすることで、柔らかく動きのある雰囲気に。
あしらい（花などの線画）を入れることで、優しく、文字の強い印象を抑える。
という点で工夫をしています。
振り返り
いかがでしたか？
今回は元の雰囲気は変えずに、レイアウトや余白を整えていくことでデザインをブラッシュアップしてみました。
Before
After
BeforeとAfterを比較すると、Beforeは意図した読み方をされない可能性があると思われます。
それは、
「スタッフ紹介」の文字が小さく、背景のグレーも薄いため、印象が弱い。
反対に初心者マークの色味が強いため、目につきやすい。
「初めての方はこちら」と「料金」の枠が太すぎるため目にとまる。
というポイントからです。
LINEのリッチメニューはZ字に目線が動くのですが、本来の目線の動きとは違い、「スタッフ紹介」を飛ばして「初めての方はこちら」を1番初めにタップする可能性があります。
そのため、あしらいや余白に注意しないと、本来の意図とは異なる動きをされてしまうため、こういった配慮をしながらデザインをする必要があります。
また、「スタッフ紹介」はAfterでは、人物を大きくしていますが、次の理由のためです。
文字よりも写真の方が人は目につきやすい
オーナー様の人柄が企業の強みのため、オーナー様が目に留まりやすいようにする
また、「スタッフ紹介」の文字は他のフォントとは異なります。
他は丸ゴシックで柔らかい印象でしたが、「スタッフ紹介」は角ゴシックを使用しています。
これは作業する中で角か丸のどちらが良いかを試した結果ですが、角の方が締まりがあり、背景のグレーに馴染んだためです。
それは、フォントの太さが角ゴシックの方が空間に余白が少なくそれによって締まりを感じます。
反対に丸ゴシックはフォントを太くしていくと野暮ったく本当に太って見えるため、角ゴシックにしています。
この様な考え方で今回はデザインを修正していきました。
元デザインのテイストについて
今回はレイアウト、あしらい、余白などを調整する形でしたが、元のデザインで良かったポイントとしては、
オーナー様の「明るい」雰囲気が背景の黄色い花から出ている。
真面目な30代男性がターゲットになるため、落ち着いた雰囲気のアースカラーで統一されている。
また、アースカラーで「親しみ」がもてる。
結婚相談所ということでやわらかい雰囲気になる様にアーチの枠を使用している。
これらの理由でテイストは変えなくても大丈夫なデザインと判断しました。
ただ、気になるポイントとして、
リッチメニューの目線の動きを考えると、ボタンの並びはこれでいいのか？（結婚相談所は決して安くないため、恋愛を積極的にしていない人にとって、価格の価値に納得できるかが怪しい。それを考慮すると「料金」は別の位置がいい可能性がある）
気になりますが、下段の4つの並びを考慮したら「料金」の場所が絶対的におかしいとはならないため、
このまま進めてLINEのリッチメニューはタップ数を計測できるため、計測結果から改めてデザインを修正するのでも良いかと思います。
最後に
今回はデザインの修正だけで、ターゲットに対するテイストは問題なさそうでしたのだ、雰囲気はそのままでした。
では、もし同じ業種ですがターゲットが異なる場合、どの様な配慮の仕方が必要になるか。
次回は同業の結婚相談所ですが、企業の強みやターゲットを変えてLINEのリッチメニューをデザインしてみたいと思います。
ご興味いただけましたら次の「竹田怜平の公式LINE」に友だち登録いただけると幸いです。
以上になります。
ありがとうございました。