中嶋悟
名前：中嶋 悟（なかじま さとる） ニックネーム：サトルン 年齢：28歳 性別：男性 職業：会社員（IT系メーカー・マーケティング部門） 通勤場所：東京都千代田区・本社オフィス 通勤時間：片道約45分（電車＋徒歩） 居住地：東京都杉並区・阿佐ヶ谷の1LDKマンション 出身地：神奈川県横浜市 身長：175cm 血液型：A型 誕生日：1997年5月12日 趣味：比較記事を書くこと、カメラ散歩、ガジェット収集、カフェ巡り、映画鑑賞（特に洋画）、料理（最近はスパイスカレー作りにハマり中） 性格：分析好き・好奇心旺盛・マイペース・几帳面だけど時々おおざっぱ・物事をとことん調べたくなるタイプ 1日（平日）のタイムスケジュール 6:30 起床。まずはコーヒーを淹れながらニュースとSNSチェック 7:00 朝食（自作のオートミールorトースト）、ブログの下書きや記事ネタ整理 8:00 出勤準備 8:30 電車で通勤（この間にポッドキャストやオーディオブックでインプット） 9:15 出社。午前は資料作成やメール返信 12:00 ランチはオフィス近くの定食屋かカフェ 13:00 午後は会議やマーケティング企画立案、データ分析 18:00 退社 19:00 帰宅途中にスーパー寄って買い物 19:30 夕食＆YouTubeやNetflixでリラックスタイム 21:00 ブログ執筆や写真編集、次の記事の構成作成 23:00 読書（比較記事のネタ探しも兼ねる） 23:45 就寝準備 24:00 就寝
figmaとワードプレスの違いを徹底解説〜基礎から実務までの使い分け
まず最初に理解してほしいのは、figmaとワードプレスは目的が根本的に異なる道具だということです。figmaはUIデザインを描く道具であり、画面の見た目や動き、反応を試す場所です。コンポーネントと呼ばれる再利用可能な部品を組み合わせて、実際のアプリやサイトの見た目をリアルタイムで作り直すことができます。クラウド上で同時編集ができ、コメントをつけてデザインを修正しやすいのが特徴です。デザインシステムを作成して色や字幅、間隔といった規則を統一することで、後の開発者が同じ図面を見て同じ解釈で作業できます。ハイライト機能やフレーム、オートレイアウトなどの機能を使えば、スマホ・タブレット・PCの三重構造も一つのファイルから検証可能です。デザインの段階でのコラボレーションが進むほど、成果物の誤解が減り、実装時の仕様を揃えやすくなります。対してワードプレスはウェブサイトを実際に動かす土台であり、記事やページ、テーマ、プラグインを組み合わせて公開します。テンプレートファイルとデータベースを使って、誰が何を読んだか、どのページが人気かといった情報を蓄積し、表示を動的に変えます。これにより、ブログ・ECサイト・企業サイトなど、目的に合わせて柔軟に構築できます。
学習コストは操作の範囲によって大きく変わります。figmaはデザインの直感とUI/UXの理解があると覚えやすい一方、初心者は最初の操作で混乱します。WordPressは基本操作は比較的シンプルですが、テーマ選び・セキュリティ・SEO対策・サーバ設定といった技術的要素が必要です。
実務の現場では、デザインと開発の境界を意識して作業を分担します。まずFigmaで画面デザインを完成させ、色・字体・間隔・ボタンの反応を明確にします。次にデザインチームと開発チームでブリーフを共有し、開発者はそのブリーフをもとにWordPressのテーマを作成します。ここで重要なのは、Figmaのアセットを適切にエクスポートしてCSS変数やフォントファントを再現することです。実務では「デザインから実装へ」という循環を短く回すことが求められ、ピンポンの回数を減らすためのルールを決めておくと良いです。例えば、レスポンシブの基準を最初から決め、Figmaのミニマップに三段階のブレイクポイントを設定しておくと、開発側はWPのテーマやブロックエディタで同じ設計を再現しやすくなります。公開後にはデザインの修正が出ることもあるので、FigmaとWordPressの間でルールを更新する流れを作っておくと混乱を防げます。
| 項目 | Figma | WordPress |
|---|---|---|
| 目的 | UIデザインとプロトタイピング | ウェブサイトの構築・公開 |
| 主な出力物 | デザインファイル・プロトタイプ | 公開サイトのページ・テーマ・投稿 |
| 連携の形 | デザイン指示・仕様の共有 | 実装コード・データベース・SEO設定 |
| 学習難易度 | 直感的だがUX理解が必要 | 基本操作は簡単だがサーバ・セキュリティ等の知識が要る |
より実践的な使い分けのポイントと具体的なワークフロー
雑談風に言えば、Figmaは設計図の現場、WordPressは実際の建物の現場です。デザインと公開の現場を分けることで、誰が何を作るのかを明確にできます。実務の王道は、まずFigmaでUIの基本形を固め、その後WPで自分のサイトに合わせたパーツを作ることです。プロジェクトの初期段階で、デザインと実装の担当者が同じ用語で話せるように、フォント名・カラーコード・スペーシングのリストを共有します。次に、FigmaからCSS変数を参照するリファレンスを作る、SVGアイコンを適切なサイズでエクスポートする、ボタンの状態を表にしておく、などの手順を設けると開発の混乱が減ります。もし予算が限られていれば、WPのページビルダーを使ってデザインを再現するのも有効です。ただし、コードの最適化・SEO・アクセシビリティの考慮はWP側で必ず行い、デザインはそれに合わせて微調整します。要するに、Figmaは創造と検証の場、WordPressは公開と運用の場として、それぞれの役割を明確に分けて使うのが最も効率的です。
デザインシステムは、色やフォント、間隔といったデザインの規則を一箇所に集め、Figmaの部品として再利用できる仕組みです。友人と雑談するとき、私はこう例えます。設計図がしっかり決まっていれば、実際の建物を作る人は同じ図面を見て同じ話をしてくれます。Figmaで部品を共有しておけば、開発者はそれをそのまま参照してコードに落とし込みやすくなります。デザインと開発の橋渡し役として、デザインシステムの文書化と、デザインから実装へつなぐ手順の整備が鍵です。これがあると、後の修正もスムーズに進み、サイトの一貫性が長く保たれます。
ITの人気記事
