Figmaと仲良くなる
これまで、デザイナーの方々が作成した素晴らしい Figma の成果物を参考にしながら、Web フロントエンドの実装を行ってきました。 何度もこれを経験するうちに、私も Figma を使いこなせるようになりたいと思うようになりました。
CSS フレームワークへの依存
これまでの個人開発においては、Bootstrap や Material UI などの CSS フレームワークを利用して、見た目が整った Web アプリケーションを開発していました。 「Bootstrap っぽさが強すぎる」と感じることもしばしばありました。しかし、オリジナリティ溢れる Web の見た目を良くする方法を知らなかったのです。 数年前からは Tailwind CSS がトレンドとなり、より自由なスタイリングを目指したくなりました。 さらに、業務で Figma を使ったデザインから React のコードに落とし込む作業が増え、自らスタイリングを行うことが多くなりました。 それが、Figma を自分で使いたいと思うようになったきっかけです。
コンセプトの策定
いきなり Figma を開始するのではなく、まずは描きたい Web アプリの目的やターゲット、解決したい問題などを大まかに考えました。 私が個人開発している「bochi bochi」という食材価格比較サービスを例に、これらを思考しました。
デザインシステムの参照
コンセプトがある程度固まったら、デジタル庁のデザインシステムを参考にしました。 タイポグラフィ、カラー、スペーシングなどの基本的なスタイルから、ボタンやテキストフィールドなどのコンポーネントまで、使えそうなものを参考にします。
Figma の使い方を学ぶ
プロジェクトを Figma で開始した際、最初は PC やタブレットのレスポンシブデザインを考慮せず、 スマートフォン向けのデザインに焦点を当てました。 Figma の操作には当初苦労しましたが、繰り返し使用することで徐々に機能への理解が深まりました。 特に、スタイルやコンポーネントの定義と再利用の便利さを実感しました。 中でも Auto Layout 機能は格別で、その使い勝手の良さから頻繁に利用しています。
実際にデザインを行う
実際にデザイン作業を行い、デザインの前後で大きな変化を実感しました。 以前 Figma を使っていた時は、基本的な形状を積み重ねたり、手書きでラフなスケッチをする程度でした。 しかし、現在はより構造化された、ちゃんとしたデザインが作成できるようになったと感じています。
以下は、Figma を使わずに実装したbochi bochiの見た目です。
そして、この数日間で取り組んだ Figma を使用したbochi bochiの新しいデザインです。
どちらが優れているかは一概には言えませんが、個人的には新しいデザインに満足しています。
まとめ
これからは、Figma で作成したデザインを React のコードに落とし込み、既に稼働しているbochi bochiにデザイン適用していく予定です。 Figma との出会いは、私の開発スキルに新たな一歩を加えました。
-
シェアする
フォローする
関連する記事
タグ「フロントエンド」の記事
最近、ヒューマンインターフェース ガイドライン（HIG）という言葉を知りました。 「ヒューマンインターフェイスガイドライン」には、どのAppleプラットフォームでも優れた体験を設計できるようにするためのガイドとベストプラクティスが含まれてい
2026-01-24
主にWeb関連の個人開発をしている際に心がけていることを書きます。 月末に近づくにつれ、AIの利用上限に達してしまうことがあります。 その状況になった時、以下のいずれかの選択肢が私の中では残っています。 課金して利用上限を増やす 無料モデル
個人サイトをリニューアルをしています。 ノート風のデザインを目指して、スタイルを調整していました。 ノートの見た目は、現実にあるノートを再現しようとCSSを書いていました。 現在、以下の画像のようなノートになっています。 ノート風デザインの
2026-01-20