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 との出会いは、私の開発スキルに新たな一歩を加えました。
-
コメント
0
読み込み中...
シェアする
フォローする
購読する
関連する記事
タグ「フロントエンド」の記事
AI にコードを書かせた後、余計なコードを見つけて消す作業があります。 不毛なことなので、それらの作業を減らすためのお作法を紹介します。 未使用コードを消す 以下でも書きましたが、未使用コードの検査に knip を使うことが多いです。 ht
最近、iframeを使っています。 クライアントサイドで埋め込む想定で、iframeを使おうとしています。 色々と苦労したことがあったので、書いて残しておこうと思います。 レスポンスヘッダー 前提として、ウェブアプリケーションをプロダクショ
紙を積んだイラストをSVGで書こうとしていました。 （当たり前ですが）図形を表現するためには数学の知識が必要で、学生の頃の記憶を思い出したので疲れました。 所感について、諸々書こうと思います。 成果物 実際に完成したのは、以下の画像ができま
2026年02月17日