Figma01

デザインをはじめましょう✨|第1回 Figma入門

著者: 管理者 / 2025-08-06 (更新: 2025-08-06)

user01 Surprised
まあ!先生、最近よく耳にいたします「Figma」というもの、いったい何者なのかしら?デザイナーさんがよく使っていると聞きましたけれど…わたくしにはさっぱり見当もつきませんの💦
user02 Calm
良いご質問ですね。Figmaは、Webブラウザ上で動作する「デザインツール」です。アプリのUIやWebサイトの画面を設計するときに使われるのですが、最大の特徴は「クラウドで共同作業ができる」点なんです。
user01 Happy
まあ!共同作業ですのね✨ WordやGoogleドキュメントのように、複数人で同じ画面を同時に編集できるイメージですか?
user02 Happy
その通りです。Googleドキュメントが文章を一緒に書けるのと同じように、Figmaならデザインを一緒に編集できます。UIデザイン、アイコン制作、ワイヤーフレーム作成など幅広く使われています。

📝 解説:Figmaとは?

Figmaは近年もっとも人気のあるデザインツールの一つです。特にWeb開発やアプリ開発の現場で重宝されています。

Figmaの主な特徴

  • クラウドベース:インストール不要、ブラウザでそのまま使える
  • 共同編集:複数人が同時にデザインを編集できる
  • マルチデバイス対応:Windows、Mac、Linux、さらにスマホアプリでも閲覧可能
  • バージョン管理:履歴が自動で保存されるので安心
  • 無料プランでも十分強力

他のデザインツールと比較

  • Adobe Illustrator / Photoshop:主にグラフィック・写真加工向き
  • Sketch:UIデザイン向きだがMac専用
  • Figma:クラウド・マルチ環境・共同作業に特化している

つまり「デザインのGoogleドキュメント版」と考えるとわかりやすいです。


user01 Calm
先生、つまりFigmaを使えば、デザイナーさんとエンジニアさんが同じ画面を見ながら話し合えるということですのね。なんだか効率がぐんと上がりそうですわ。
user02 Serious
その通りです。例えば、デザイナーがボタンの色を変更した瞬間、それをエンジニアが確認できます。PDFを毎回送る手間もありません。結果として、開発チーム全体のスピードと理解度が向上します。

📝 解説:実際の使いどころ

  • ワイヤーフレーム作成:サイトやアプリの骨組みをざっくり作る
  • UIデザイン:ボタンや入力フォーム、画面全体のレイアウトを設計
  • プロトタイプ:画面遷移をつなぎ合わせ、動きを確認できる
  • 共有レビュー:リンクを送るだけで誰でも閲覧できる

コードを書く前に「完成形のイメージ」を全員で共有できるので、プロジェクトがスムーズに進行します。


user01 Happy
まあまあ!デザインの未来が見えるようで、わくわくいたしますわ🌸 わたくしでも触ってみたくなってまいりましたの。
user02 Calm
それは素晴らしいですね。最初はシンプルなワイヤーフレームから始めると良いでしょう。四角やテキストを並べるだけでも十分な練習になりますよ。

✅ まとめ

今日の学びを整理すると:

  • Figmaはクラウド型のデザインツール
  • 複数人で同時編集が可能(まさにGoogleドキュメントのデザイン版)
  • UI/UX設計・ワイヤーフレーム・プロトタイプ作成に強い
  • 無料で始められるので初心者にも優しい

user01 Happy
本日はとてもすっきりいたしましたわ!Figmaの第一歩がわかりましたので、次はぜひ実際に触ってみたいですの✨
user02 Happy
その意欲があれば大丈夫です。次に試すとしたら「簡単なログイン画面」を作る練習などが良いかもしれませんね。いつでも一緒に学びましょう。