ProFitのLPサイト

自主制作アプリProFitのLPサイトを制作しました。〇〇×習慣化を自主制作アプリのテーマの1つとしており、習慣化の観点から記録するハードルを下げ、自分の成長が単一指標で見れるようにしている点が伝わるようにデザインしています。文章はiPhoneの商品サイトのように自分が使っているところをイメージしやすいような文面を意識しています。製品の企画からLPデザインとコーディングを担当しました。

企画 : 1週間
デザイン : 2週間
コーディング : 1週間

制作ツールとライブラリ

サイトを見る

概要

筋肥大目的の自分の成長がみやすいアプリをデザインした後に、このアプリのLPサイトを作成しました。多い情報をシンプルに伝えるにはどうしたら良いか？をテーマに制作を進めました。

課題や要望

‐他のトレーニング記録アプリよりも記録が見やすいことをアピールしたい
‐筋肥大に特化している情報を優先的に知らせたい
‐自分が成長していることが一目でわかることをアピールしたい

ターゲット

‐トレーニングを習慣にしたい人
‐特に筋肥大を目的としてトレーニングをしている人
‐主に20代前半～30代前半で若く、フィットネスに興味があり、ボディビルやフィジーク選手などをフォローしている人

アイデア・戦略

ターゲットをより深堀りする

アプリ自体は、筋肥大を目的としてデザインしています。この時点で、ある程度使って欲しい層は絞れましたが、よりLPの方向性を決めるためにペルソナを明確に設定しました。筋肥大を目的にトレーニングをする人は、ボディビルダーやフィジーク選手のような身体に憧れがあると想定しました。また、インフルエンサーの影響でジムに通い始めた20代前半の大学生や、もともと趣味で身体を鍛えていて仕事に慣れて時間が確保でき健康により意識を向けるようになった20代後半～30代前半の社会人をターゲットとしました。

訴求したい情報の整理

アプリの特徴として伝えたい情報の優先順位を決めました。

‐漸進性過負荷の法則のワード（ボディビル選手などの動画で言及される、身体を大きくするために重要視される概念なため）
‐自分の成長が確認しやすいこと
‐記録が簡単にできること

デザインの実装

訴求したい情報が見やすいBento UIを採用

近年のアプリは機能が多く、ユーザーに訴求したい情報も多いと考えています。ですが、情報量が多いと何が他のアプリと異なり、なぜ使うべきかが伝わり難くなります。また、ターゲットに設定しているZ世代は、情報取得にタイパを求めていることもあり、できるだけシンプルに必要な情報を伝える必要があります。そこで、情報を塊として認識しやすく、整理しやすいBento UIを採用しました

情報を段階的に表示して認知負荷を軽減

一度に多くの情報を表示せず、スクロールに応じて適量の情報を表示することで、ユーザーが内容を理解しやすくなることを狙い、Intersection Observer APIを用いて、スクロールアニメーションを実装しました。

他のアプリと比較できるように

PCサイトでアプリを比較する際に、一つの画面で横並びにすることを想定して、サイト内の要素の横幅は画面の横幅に応じて相対的に変化するように設定しました。

サイトを見る

学び

制作後に感じたことですが、画像がメインのサイトの方が直感的にわかりやすい構造のBentoUIと相性が良いのではと思っています。
株式会社カリーナフードサービスのサイトの様に、料理など写真映えするような素材が使える場合は、BentoUIはひとつの手段として使えると認識しています。他には、美容系のサイトなどにも適用できそうだと感じました。
今回のようにデザインのパターンを自主的に試して行くことで、自身のデザインの引き出しを増やすことができるので、これからも続けていきます。

参考記事

Bento UIとは？機能性とデザイン性を両立させた新トレンドを解説!

Точки

CSS Grid Layout を極める！（基礎編）

グリッドレイアウトのボックス配置

【CSS】“Grid”だけで折り返しの横並びレイアウトを作れる