Contents
はじめに
個人開発でプロダクトを作っていると、必ずぶつかる壁があります。
「機能はあるのに、なんかダサい」
今回、SNS「Procom」のデザインを大きく作り直しました。
単なる見た目の調整ではなく、
- 構造
- レイアウト
- ユーザー導線
まで含めた“全面リニューアル”です。
この記事では、
- なぜデザインを変えたのか
- どこをどう変えたのか
- 実際にどう変わったのか
を、個人開発目線で具体的に解説します。
なぜProcomのデザインを変えたのか
結論から言うと、
「第一印象で離脱されていたから」
です。
問題だった状態
以前のProcomはこういう状態でした。
- 情報はあるが、整理されていない
- UIが“古いWeb感”になっていた
- 何ができるサービスか一瞬で伝わらない
つまり、
価値はあるのに伝わっていない状態
でした。
これは個人開発ではかなり致命的です。
今回のデザイン改善の方針
今回やったことはシンプルで、
「直感で理解できるUI」に全振り
です。
具体的には以下の3つ。
① 視覚優先（テキスト削減）
- 説明文を減らす
- 画像・ビジュアル中心にする
「読む」から「見る」に変更
② スマホ前提の設計
- PCではなくスマホ基準で設計
- 縦長コンテンツに最適化
実際のユーザー行動に合わせる
③ “できること”を一瞬で理解させる
- 機能説明をカード化
- 1セクション1メッセージに統一
認知負荷を下げる
実際に変えたポイント
ここが一番重要な部分です。
1. ヒーローエリアの刷新
変更前：
- テキスト中心
- 何のサービスかわかりづらい
変更後：
- ビジュアル＋短いキャッチ
- 一瞬で用途が理解できる
最初の3秒で伝える設計に変更
2. 「できること」セクションの再設計
変更前：
- ただの説明リスト
変更後：
- カードUI
- 画像＋短文
- レイアウトにメリハリ
さらに、
- 縦長コンテンツ（スマホ表示）
- 横長コンテンツ（メディア表示）
で意図的に比率を変えています。
視覚的に「重要度」をコントロール
3. ユーザーページの主役を“画像”に
これはかなり大きい変更です。
変更後は
最初に大きなスライド画像を表示
にしました。
理由はシンプルで、
- プロフィールは“視覚で判断される”
- テキストは後で読まれる
からです。
個人開発でデザインを変えると何が起きるか
ここが一番リアルな話。
良かったこと
- サービスの理解速度が上がる
- 離脱率が下がる
- 「なんか良い」が増える
言語化できない価値が強くなる
悪かったこと
- 作業量が爆増する
- 細かい調整が終わらない
- 「これでいいのか？」がずっと続く
正直、かなり不安になる
個人開発者に伝えたいこと
これはかなり重要です。
デザインは“最後”じゃない
多くの人が
- 機能作る → 最後にデザイン
をやりますが、実際は逆です。
デザイン＝伝え方
なので、
- 価値をどう見せるか
- どこで理解させるか
の方が重要になります。
今後の改善予定
まだ途中です。
今後やる予定：
- スクロール導線の最適化
- CTAの改善（登録導線）
- コンバージョン測定
デザインは一回作って終わりではない
まとめ
今回のリニューアルで一番大きかったのはこれです。
「伝わるデザイン」に変えたこと
個人開発は、
- 作る力より
- 伝える力
の方が結果に直結します。
Procomについて
Procomは、
- ダンサー
- YouTuber
- フリーランス
などが、自分の活動をまとめて見せられるSNSです。
