Developing Designer's Diary

未経験からUI/UXデザイナーを目指して勉強中です。

パンをモチーフにしたLPを制作（課題）

学校の課題 BONO

今週の木曜日の授業で、LP（ランディングページ）制作の課題発表がありました。

 

題材は、先生が設定したもの（＆画像や文章）でもいいし、自分で考えてもいいということでした。

 

先生が設定したテーマを使った方が、デザインに集中できてもいいかなと思ったのですが

昔、母が自宅でやっているパン教室のロゴをつくったことがあったので、どうせならそれを使えればと思い

パン教室でLPを制作することに。

 

実際に母がやっているものは、知り合いの口コミなどで紹介されてという方がほとんどの小規模なパン教室なんですが

それだとLPの存在意義と結びつかないので、「オンラインパン教室」にサービスを拡大したという設定に。

 

内容は細かく指定されてなかったので、受講の手順とか月額料金とか具体的な部分は

いったん考えずにつくることにしました。

（本当は考えた方がよかったんでしょうが、なんせ、課題が知らされてから提出まで１週間しかなかったもので。。。）

 

つくったもの

こんな感じです。

（母の個人情報が特定されそうな部分は消してます！）

 

制作手順としては以下。

 

  • まず、ターゲットを決める。
    • 実際のパン教室よりは年齢層を低めに、30代前半ぐらいの女性を想定。
    • 「消費に疲れ、生産に憧れを感じ始めた」人に向けていくイメージです。
    • なんとなく、丁寧な暮らしとか、ライフスタイル系のセレクトショップ（代官山とか代々木上原にありそうな）っぽい感じかな〜と思い浮かべていました。

 

  • Figmaでざくっと全体のレイアウト、要素、文面を実際に書き出してみる。
    • 提出データはpsd形式という指定がありました。
    • まずは動作が軽いFigmaで描いてみましたが、興が乗って作り込み過ぎてしまい、psd互換したときに面倒くさいことになった。

 

  • SANKOU!、Web Design Clipなどで50個ぐらいのLPを見る。
    • 上記のターゲットに合いそうなサイトを探す。
      • といいつつ、やはり自分好みなデザインを選びがちに。
      • 特に気に入ったのがBEAMS×JTBのこのサイト。情報量が多く、雑誌っぽい感じや、マットな色使いに細い線をアクセントに使うデザインがすごく好みでした。
      • あと、無印良品のこのサイトは特に想定しているターゲットに近そうな感じがしました。
      • LPをこんなに色々意識してみたことはあまりなかったんですが、最近のものはアニメーションを使ったり、縦にスクロールしているのに横に動いたりと、一方向の単調な目線の動きの中で意外性を持たせるさまざまな工夫がされていることを知りました。

 

  •  ↑のサイトの良いと思った要素（線っぽい感じと、色味が少なく淡々とした感じ）を取り入れ、再度デザインを考える。
    • 線で囲むフラットなデザインが可愛いと思ったので、まずトップのパン型の枠のイメージが思い浮かびました。あと、実際のメニューを食パンの形に載せて紹介するイメージ。
      • （もともと、トップは画面一杯に写真を使っていましたが、参考サイトを見て方針転換しました）
    • そのほかの部分にも線っぽい感じ、フラットな感じをどう当てはめていけるか？を考える。同時に、スクロールという単調な目線の動きの中で、ちょっと面白いレイアウトになるようにいろいろやってみる。
    • 背景の切り替えの感じをやわらかい曲線にしたり、メニュー上の「●月」の装飾を色々試したり（旗にする前は吹き出しやリボンなど迷っていました。。。）など、細かいところを調整。

 

ここまでやった状態で学校に持っていき、授業内で少し制作の時間があったので

そこで先生に「なんか寂しい感じがする…」と相談したところ、

  • 同系色でまとまりがよすぎるので、アクセントカラーを入れてみる
  • 上2枚のメインビジュアルがどちらも寄りなので、「ABOUT」のところは人の顔が写っている引きの画像にしてみる

というアイデアをいただきました。

 

そのアドバイスを受け、「ABOUT」と「PAGE TOP」の文字をやさしいグリーンにし

「ABOUT」の写真を手元のアップのものから引きのものに変更し、提出しました。

 

先生からのFB

完成品に対し、先生からは

  1. ABOUT部分の本文とPOINT以下の本文の文字が急に変わり過ぎている
  2. 最重要な「申し込む」ボタンが溶け込みすぎていて気づかれにくい

という2点の指摘をいただきました。

 

 

1について。

ABOUTの本文：太字・文字サイズ16

に対し、

POINT以下の本文：細字・文字サイズ18

になってました。。。

 

「ABOUTとは情報の種類が違うから細字になるのはわかるけど、その割に文字サイズはでかくなるの！？」

という違和感…。

 

言われてみたらその通りすぎますよね。

初歩的なミスですが、画面に慣れてしまって気づけなかった…。

 

2は、私的には「申し込む」ボタンは影をつけたりして

他と違うことを示したつもりだったんですが、それだけでは全然足りないとのこと。

特に、近くに同じ細線・白枠のオブジェクトがあったりするので、紛らわしいとおっしゃっていました。

 

たしかにその通りではあります…。

 

一方で、

  • トップ画像の感じがかわいい
  • 太い枠線で統一されている感じもかわいい
  • 「ABOUT」の本文部分が、太字＆ハイライトで読みやすくする工夫がされていて、その説明的／親切な雰囲気が「教室」というサービス内容に合っている
  • 偶然かもしれないが、写真にちょくちょく入っている水色がアクセントとして映えている

など、お褒めの言葉もたくさんいただきました！

 

FBを踏まえた改善

上記のFBを踏まえて、修正したものがこちらです。

 

まず1.の文字組み（文字サイズ＆細字）問題。

ABOUTの本文はそのまま、POINT以下の文章を太字に＆サイズを小さくしました。

劇的に読みやすくなった…。

 

そして2.の「申し込む」ボタン問題ですね。

これは、やっぱりこの世界に突然テカテカしたデカバナーを入れるのはちょっと違う気がして

デザインは大幅には変えず、色だけ目立つ色にしてみました。

先生にお褒めいただいた、鮮やかめな水色に。

合わせて「ABOUT」「PAGE TOP」の文字色も、元のアクセントカラーのグリーンから変更しました。

 

割とみやすくなったと思うんですけど…。

LPとしてはもっと目立った方がいいのかもしれないですね。

 

そこは美よりビジネスを追求しなきゃなのでしょう。

もちろん、一流のデザイナーは美とビジネスをしっかりと融合させるんだと思いますけど…。

 

課題の発表から締切まで１週間というタイトな時間で、提出日の前日は睡眠時間を削って頑張りました。

 

まだまだですが、まあまあ気に入る出来になってよかったです！