SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

フロントエンド開発者に贈る、個人開発のファーストステップ

個人開発を始めてみよう──個人開発の楽しさと大きなメリットは?

フロントエンド開発者に贈る、個人開発のファーストステップ 第2回

  • X ポスト
  • このエントリーをはてなブックマークに追加

使えるサービスを生む出すために必要な観点──デザインとマネタイズ

デザイン - センスではなくロジックが鍵

 個人開発におけるデザインは、「守り」と「攻め」の2つに大別できます。「守り」は、「個人が作ったサイトはバグやセキュリティが心配だから使わないでおこう」といった理由で離脱する人を減らすことを目指します。「攻め」は、「このプロダクトは格好良い。非常にクールだ!」と感じてもらえるようなデザインを目指します。個人開発においては、最低限「守り」の部分を実現できていれば、デザインとしては問題ないと言えるでしょう。ここでは、「守り」のデザインを実現するための方法を簡単にご紹介します。

 私が最初のWebサイトを作成した時、世界に公開する以上、個人が趣味で作ったように見えるデザインにはしたくありませんでした。しかし、私はデザインの勉強をしたことがなかったため、どの要素をどのように配置すれば直感的に理解しやすく、使いやすいサイトになるのかが全くわからない状態でした。そこで友人から『ノンデザイナーズ・デザインブック』という本を勧められ、その内容を実践すると、自分が納得できるデザインを作り上げることができました。

 この本を有名にした主張は「デザインには、近接・整列・反復・コントラストの4つの原則がある」というものです。近接とは、関連する要素を近くに配置すること(グルーピング)。整列とは、縦横のラインを合わせること。反復とは、ある特徴を繰り返し用いること。コントラストは、強弱をつけることです。これらを意識すると、まとまった画面を作ることができます。具体的なデザインの例は、「ノンデザイナーズ・デザインブック 4つの基本原則」で検索するとたくさん出てくるのでここでは省略します。

 また、デザインについて調査する中で目から鱗が落ちたのは、「デザインはセンスではなくロジックに基づく」という視点を知った時でした。それまで私は、デザインとはセンス豊かなデザイナーが自身の感覚に基づいて良質な作品を作り出すものだと考えていました。しかし、良いデザインには必ず背景となる意図が存在し、それは言葉でロジカルに説明できるのだと理解したことで、自分でも一定のレベルのデザインが可能であると自信を持つことができました。

 特に、フロントエンドエンジニアが個人開発を通じてデザインを学ぶと、その知識はすぐに実務に活かせます。『ノンデザイナーズ・デザインブック』の「近接」の原則を意識してパディングやマージンを調整したり、整列や反復を意識したりして、コンポーネントとして区切る部分やPropsをうまく選定したりできます。何より、デザイナーが作成したデザインをコードで実装する際、何か違和感があれば、それを言語化しデザイナーにフィードバックできるようになることが、最も実務に役立ちます。

 「何か違和感があるから直して」というフィードバックが、例えば近接という観点を取りいえると「文字と他の要素のマージンが狭すぎて窮屈に見えるので、ゆったりとした気持ちで長時間滞在してもらいたいこのサイトのブランディングとは相いれないです」という具体的な指摘に変わります(ただ、このレベルであればデザイナー間のレビューで指摘されるとは思います)。デザインの基本的な知識を身につけることで、フロントエンドエンジニアとしてのスキルも向上すること間違いありません。

 デザインはマーケティングの一部門であるブランディングと直結します。「良いデザイン」とは、「伝えたいメッセージを、意図した形で受け手に伝える」ことです。そして、デザインを支えるのはセンスではなくロジックです。ロジックであれば、それはエンジニアが得意とする領域です。「守りのデザイン」に自信が持てた方は、インプットを増やし、自分自身が納得でき、ターゲットに訴えかけ、マーケットで特定のポジションを確立できる「攻めのデザイン」にもぜひ挑戦してみてください。

マネタイズ(ビジネスモデル)- ロマンとソロバン

 個人開発について語る際、マネタイズの話題を避けては通れません。ただ、私はマネタイズに成功した経験がないので、ここでは具体的な手法ではなく、考え方の部分だけをご紹介します。

 事業は、お金を稼ぐことなくして継続は難しいです。企業は赤字が続けば倒産します。個人開発も一人で始められる事業だと捉えると、お金を稼げた方が良いでしょう。お金の話をするとなんだか汚いように思われる方がいると思うので、ここで一つ思考実験をしてみます。

 全ての個人開発者は、多くの人々に自分の作ったサービスを使用してもらいたいと思っています。では、実際にサービスが爆発的にヒットしたとしましょう。素晴らしいサービスだとしてTwitterでバズり、Yahoo!ニュースのトップページに掲載されたとします。もし1日に何万人もの人々がサービスを利用するとなれば、前編で紹介したSaaSの無料枠はすぐに消費しきってしまいます。

 そうなれば、有料のプランを選択しなければならず、そのプランが従量課金制であれば、人気が出れば出るほど赤字になってしまいます。赤字になってしまえば続けるモチベーションが下がるどころか、思考実験なので極端なことを考えますが、出費が本業の月給を超える可能性もあります。このため、個人開発では利用者の増加を見越してお金を稼げるところ、つまりマネタイズポイントを考えていた方が良いでしょう。

 マネタイズの方法としては、都度課金や定額課金、広告表示やアフィリエイトが一般的です。モバイルアプリでは、月額課金で広告を非表示にする手法が有名です。これであれば広告が表示されていても気にしない人は無料のまま使えますし、広告を消したい人は課金してくれます。また、自作サービスに対する課金額が増えていくと自分の生計を立てられるようになり、自分の時間すべてを自分が作ったソフトウェアの開発に充てることができるようになるかもしれません。

 初期のスタートアップの世界では、「ロマンとソロバン」という言葉がよく用いられます。ロマンとは、未来をもっとよくしたい創業者が語るビジョンのことです。ソロバンは、そのビジョンを実現しながらお金を稼ぐビジネスモデルのことです。前述のようにお金を稼げなければ、素晴らしいビジョンがあっても事業を継続することはできません。そして、事業を継続することなくして世界を変えることは不可能です。個人開発も1人で始められる事業だと捉えることで、マネタイズの重要性を理解してもらえるかなと思います。

最後に

 前編では素早くリリースすることの重要性、後編では個人開発を通して、世の中の事業の仕組みが学べると紹介しました。後編は分野が多岐にわたり、しかもエンジニアの方にとって普段なじみのない分野であるので、個人開発に対してハードルを感じられたかもしれません。

 しかし、後編は私がいくつか個人開発でサービスをリリースした後に全くヒットしないので、どうすれば多くの人に使ってもらえるのだろうかといろいろな分野の考え方を調べたことのまとめでしかありません。しかもその後もヒットするものを生み出せていません(笑)。このため、後編の内容をハードルに感じる必要はなく、思いついたらパッと作ってみてください。

 個人開発自体での成功はまだ得られていません。一方で、個人の時間を使って開発をした経験やヒットするビジネスの裏側について調べたことが、本業において確実に役立っている実感があります。

 個人開発を通してコードを書くに当たり設計を工夫してみたり、テストコードをしっかり書いたり、インフラを選定したり、無料の新しいSaaSを触ってみたり、流行りだといわれているフレームワーク・ライブラリを試したりして得た経験がそのまま本業に活用できているからです。そのような技術面ばかりだけでなく、個人開発を通じて「顧客が本当に欲しいものは何か」を自問し続ける経験は、本業でも顧客志向のエンジニアになる手助けになることは間違いありません。

 個人開発における唯一の失敗は、リリースしないことだけです。人々に使ってもらえないこと自体は、失敗とは言えません。成功するまで続ければ、それは必ずや糧になっているはずです。ぜひ何か思いついたら1つサービスを作って公開してみてください。前後編にわたってお付き合いいただきありがとうございました。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
フロントエンド開発者に贈る、個人開発のファーストステップ連載記事一覧
この記事の著者

プログラミングをするパンダ(プログラミングヲスルパンダ)

 https://twitter.com/Panda_Program/ フロントエンドエンジニア。元々サーバーサイドエンジニアだったが、個人開発を機に HTML, CSS, JS に興味を持つ。特に React、Next.js に熱中しフロントエンジニアに転向。TDD、XP、DevOps が好き。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/18249 2023/09/11 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング