デザインを勉強したら個人開発がより楽しくなった話
こんにちは。osakanasanです。
エンジニアリングに興味があるデザイナー、デザインに興味があるエンジニア Advent Calendar 2021 20日目が空いていたので投稿してみます！
個人開発の経緯
私ごとではこざいますが、先日結婚式をいたしまして、無事結婚することが出来ました。
その際に、招待状 ~ 当日受付 ~ 当日のメニュー、席次表の案内を一気通貫で全てWebで完結できるよう今年の3月ごろから開発を始めていました。
デザインを8月ごろにBonoで勉強し始めた後、当日受付で受付の管理システムを作ることになりました。
Bonoはこちらです！
で、デザインの勉強記事などはこちらです！
受付システムの機能
簡素なシステムではありますが、下記の機能を盛り込みました。
出席者一覧ページ
出席者の一覧が確認できる
出席者を受付済みのステータスに変えることができる
出席者のお車代を提供済みに変えることができる
出席者詳細ページ
出席者がログインする際のIDを確認することができる
パスワードを変更することができる
何かコメントがあれば、新郎・新婦に残しておくことができる
デザインを勉強前と勉強後の変化
デザインプロセス
Figmaの使い方を大まかに覚えたので、Figmaでデザインする工程を挟みました。
そもそもこの工程はデザイン勉強前には発生しておらず、エンジニアだからCSSフレームワークを使って適当にコーディングしようなどで終わらせていたかと思います。
しかし、デザイン勉強後は色はどれを黒にした方がよいか、灰色にしたほうがよいかなど情報の優先度を正しく検討し、背景も少し今回は緑の要素を入れて、式場に合わせてみようなどアイデアがたくさん湧いてきて、デザインをするのがとても楽しかったです。
コーディングプロセス
勉強前はCSSフレームワークの検討からテンプレートの引用までを考えていました。
しかし、勉強後はフォントや色なども既にデザインで定義してあるので、Figmaの通りに実装していました。
デザインプロセスの中でどういう印象を与えたい、どの情報を優先したいがぱしっと決まると、フレームワークを使わずとも自分でコーディングして実現できるだけの自信になったかと思います。
そう考えると、私の中で、個人開発におけるCSSフレームワークは、デザインに自信がないけど50点を目指したものをつくるための補佐であったかとデザインを勉強して思いました。
実際、デザインを勉強する前に招待状を作っていた時は、Tailwind CSSを利用してそれなりのテンプレートをネットで調べて適用していましたが、今回は利用しなかったことが挙げられます。
作ったもの
プロトタイプがiPadの縦になってしまい、うまくいかなかったのでデザインファイルを置いておきます。
よかったこと
以前にも個人開発をすることが何度かあったのですが、やはり自分のなかでいいデザインができたと思う時は、コーディングをしてできた成果物のテンションも高いことが今回の学びでした。
デザイナーやビジュアルを整える人が自分とは別で担当している会社に所属している人でエンジニアをしている人は、自分がパパッと機能だけ作って見た目を後で整えてもらった後の感動をすることがあるかと思います。
その嬉しさを、プログラムが動いた時の嬉しさも合わせてどちらも自分で作り出せることは何よりも個人開発のモチベーションを上げる意味でも良いものだったなと思います。
まとめ
エンジニアとして技術も高めることを使命としつつ、デザイン力も高めて良い個人開発をしながら来年も技術でお客様の課題解決をすることを目指そうと思います。
この記事が気に入ったらサポートをしてみませんか？