🦔

個人開発のデザインを考える時に気をつけたこと

に公開

プログラミングの学習をある程度終えて、現在はポートフォリオとして個人開発に取り組んでいますが……正直、デザインってかなり難しくないですか?

私は先日、あるデザイン勉強会に参加しました。この記事では、そこで学んだことや、初学者として感じた気づきをまとめてみたいと思います。

とにかくパクれ(※参考に)

言い方がちょっとアレかもしれませんが、デザインはとにかく「パクる」ことが大事だと感じました。もちろん、そのまま丸パクリするのはNGです!

ここで言う「パクる」は、既存のサービスやアプリの

  • 画面の構成
  • ボタンの配置
  • 配色や余白の取り方

などを参考にするという意味です。

ありがたいことに、今の時代は検索すればプロが作った美しいUIをすぐに見ることができます。初心者がゼロから考えるより、まずはそういったUIをお手本にするのが一番早くて、それっぽく仕上がります。

Before / After 比較

参考までに、私が実際に手を入れる前のデザインと、いろいろなアプリを参考にしながら改良した後のデザインを並べてみます。
(細かいところはまだ荒削りですが、なんとなくで見ていただければ!)

比較画像

左はスッキリしているものの、1画面内に表示されている情報が少なすぎるんですよね。
Vlog動画・地図・旅行リストなど、複数の情報をまとめて扱いたかったのですが、「動画要素ってどこに入れるの?」と詰まってしまいました。

右は、いくつかのアプリを参考にして要素の配置や構成を調整してみた結果、1画面で多くの情報を整理して扱えるようになりました。情報量が増えたのにゴチャつかず、スッキリして見えるのも工夫の成果です。

パクリ先の見つけ方

「参考にするのが大事」と言っても、どこを見ればいいのか迷いますよね。
私がよく使ったのは以下の3つです。

1. UI Pocket

UI Pocket は、いろんなアプリやWebサイトのUIをまとめたギャラリーサイトです。
「旅行」などカテゴリで絞って探せるので、自分の作っているジャンルに近いアプリを見つけやすかったです。

https://www.ui-pocket.com/mobile/apps/app-category/trip

2. ChatGPTなどAIに聞いてみる

ChatGPTを使って「複数情報を左右分割で表示している旅行アプリを教えて」と聞いたところ、
Stipplwanderlog を教えてもらいました。

どちらもすごく参考になりました。特に海外のアプリは日本語で検索してもなかなか出てこないので、AIにざっくり聞くのはかなりアリだと感じました。

3. 普段使っているアプリを見直す

あとは、自分がいつも使っているアプリを改めてじっくり観察してみるのもおすすめです。

気づかないうちに「使いやすい」と感じているデザインには、ちゃんと理由があるんだなと実感します。

最後に

デザインって、初心者にとっては本当にハードルが高いと感じる分野です。
でも、「全部自分で考えなきゃ」と思わずに、まずは参考になるものを見て真似してみることで、ぐっと作りやすく、仕上がりも良くなることに気づきました。

この記事が、デザインに悩む初学者の方のヒントになれば嬉しいです!

Discussion