個人開発

個人開発者なのに、デザインできないんですか?

デザインプロトタイプ

フロントエンドのエンジニアをやってます、とといぬです。

かなり煽りタイトルを付けてしまいましたが、
デザインのできない個人開発者は、ライターを持たずにサバイバルに出かけるようなものです。

無くてもできますが、あれば圧倒的に開発が加速します

デザインツールは頑張れば半日程度で習得できるスキルです。

今回はデザインとそのツールを学ぶことで、得られるメリットや、おすすめのツール(Figma)をご紹介していければと思います。

今回の対象読者

個人開発したサービスを、多くの人に届けたいすべての人へ

なぜデザイン?

さっそくですが、なぜデザインが重要なのでしょうか?

「サービスなんて機能すればいいんだから、デザインって本当に必要?」
そう思われる方は多いと思います。

しかし、デザインが悪ければユーザーは継続して使ってくれませんし
求められる最低ラインのデザインというのは確実にあると思います。

『質問箱の開発者 せせりさん』も「ユーザーが感じるデザインの最低ライン」について言及されてましたので、興味があればこちらの記事も読んでいただければと思います。

デザインがユーザーの中にある「最低でもこれくらいじゃないと無理」ってライン以下だったり使いづらいサービスだと、どれだけ素晴らしいものでも使われなくなってしまう。
(以下の記事より引用)

ユーザーに安心して使ってもらう

例えば、

  • レイアウトの崩れたサービスに安心してプライベートなメモを残せますか?
  • 色使いが滅茶苦茶なサービスに課金したいと思いますか?

このように、デザインを整えることはサービスの信頼向上につながります

ユーザーに長く安心して使っていただくには、デザインは不可欠なのです。

デザインする側のメリット

デザイン(もといデザインツールを使うこと)には
より良い見た目にすることを超えた設計的なうまみもあります!!

  • やらないより、見た目に統一感を出せる
  • プロトタイプに比べると、圧倒的に手軽
  • 手書きに比べると、実装時にとても楽

やらないより、見た目に統一感を出せる

統一感というのは、ユーザーに見た目に違和感を持たせないという意味で
デザインの中でも大事なことです。

例えば、余白の大きさが各ページで適当に設定されていると
どこか違和感を感じる見た目になってしまうこともあります。

もっとわかりやすく言えば、さっきまで使っていた色がちょっと変わった?
といった違和感があれば「個人開発かな、ちょっと不安だな」となりますよね。

デザインツールには、こういった違和感をなるべく減らせるよう
統一感を出すための方法が、機能に落とし込まれています。

色管理 設定した色に名前を付けて管理、各所で参照できる
グリッドライン 表示されるラインを見ながら作れば、任意のpx数の倍数で余白や要素幅を作りこめる(よくあるのは8pxの倍数)
コンポーネント管理 要素のまとまりに名前を付けて管理、各所で参照できる(勿論まとめて編集も可能)

プロトタイプに比べると、圧倒的に手軽

デザイン不要派の中には、プロトタイプをサクッとやればいい
とお思いの方もいると思います。

確かにそれでサクサクできるなら、実装にも流用できるかもしれませんし良いでしょう。

しかし、後で見た目についてレビュー・修正(ブラッシュアップ)を入れる場合に手戻りが大きく発生します。

その場合、見た目作りが数倍早い(CSSも書かなくて良いですし)デザインツールに軍配が上がります。

(デザインレビューがなくとも、データや機能の設計に不足があれば、大きくUIは変わりて戻る可能性もあります)

手書きに比べると、実装時にとても楽

デザインツールで作る際は、実装時のスタイルをうすらと考える必要があります。

(明確なCSSを考える必要はありません)

それさえできていれば、このようにCSSを勝手に生成してくれるため、実装時にはとても参考になります。

FigmaはCSSスタイルを自動生成してくれる

デザインしなくてもいいサービス…

勿論すべてのサービスについて、デザインが必要とは言いません。

そこは、あなたなりの判断でやっていただければ問題ないと思います!

  • 身の回りの人しか使わない
  • 機能そのものの強みが既にユーザーに伝わっており、期待が高まっている
  • 自己学習を目的としている

おすすめの学習教材

デザインツールの選択肢

今はデザインツールの選択肢が豊富で迷うことも多いと思います。

  • Figma
  • Adobe XD
  • Sketch
  • etc…

それぞれにメリットデメリットはありますので、詳しくは以下の記事をご参照ください。

ただ、個人開発について私は「Figma」を使うようにしておりますので
今回オススメする教材はFigmaに絞らせてください。

※Figmaを選んでいる理由

大きなデメリットとしては、無料プランでは共同編集ができないことが挙げられます。

しかし、こと個人開発においてはデメリットにはなりませんので、
ブラウザ上で手軽に編集出来て、諸々の管理もしっかりとできるというメリットが残ります。

個人開発者にとっては、最高の選択肢ではないでしょうか?

Udemy

こちらの講座は、
スマホアプリのデザインを作るというハンズオンを通じて、Figmaの使い方を一通り網羅してくれるものです。

スマホアプリに限らず、WEBサービスのデザインに十分使える知識なので、是非こちらで学んでみてください。

半日も使えれば、コアな機能部分については一通り学習できます!

Youtube

こちらのYoutubeチャンネル(デザインを解説するカイクン)では、
Figmaの機能をかなり網羅した素晴らしい再生リストがあります。

Udemyで有料で学ぶのはちょっと…2,000円程度とは最初は出したくない…
という方は、こちらの「Figmaチュートリアル」(再生リスト)で学習してみてはいかがでしょうか。

補足:個人開発の捗るスキル

今回は個人開発をする上で、特に早めに修得しておきたいスキルとして「デザイン」を挙げました。

ですが、個人開発はもっと幅広い領域を一人でやる必要があるものです。
諸々代替案はあるものの、以下のようなスキルが求められます。

要件定義+設計力 ER図 / 機能一覧 / 画面遷移図
WEBデザイン Figma / Adobe XD
デザイン再現力 HTML / CSS / UIフレームワーク
フロントエンド React / Vue / Angular
バックエンド Laravel / Rails / Django
インフラ構築力 AWS / GCP / サーバーレス
プロジェクトマネジメント力 (無理のない計画を立てる)

※2列目はほんの一例にすぎません。

勿論全部を学びきるなんてことをしてたら、いつまで経ってもリリースできませんし

個人的には、できない時こそサービスを作るべき。
サービスとともに成長していくのが理想
だと思っています。

こちらのロードマップを見てわかる通り、あらゆるスキルには代替があり
個人開発の目的が「価値を届けること」なら手間をわざわざかける必要はありません。

しかし、代替でも作り続けているうちに、実践して使いづらい箇所を理解するようになります。
それが大きな「のびしろ」となり、今後新しい知識を吸収する土台になるのではないでしょうか。

今後も、少しずつ使えるスキルの幅を広げていければ素敵ですね✨

まずは第一歩として、あなたも半日ほどデザインに足を踏み入れてみませんか?😉