WordPressサイトのWebデザインを内製する方法｜デザインカンプの作り方とFigma・Adobe XDの選び方【Webデザイナー向け】

公開日：2026-08-17

WordPressで自分のサイトを作ろうとテーマを探し始めると、多くの既製テンプレートが似たようなレイアウトばかりで、思い描いていたオリジナリティのあるデザインになかなか近づけない、と感じる方は少なくありません。特に、Adobe XDやFigmaといったデザインツールを使ってワイヤーフレームやデザインカンプを自分の手で作り、WordPressサイトの見た目を根本から設計し直したいと考えているWebデザイナーや学習中の方にとっては、「コーディングやテーマ開発の話」ではなく「デザインの進め方そのもの」を体系的に知りたいというニーズが強いのではないでしょうか。本記事では、「wordpress web design」というキーワードで検索する方が実際に知りたい、WordPressサイトのデザインを内製するための考え方と、ワイヤーフレームからデザインカンプ作成までの具体的な手順、そしてFigma・Adobe XDなどデザインツールの選び方を、公式情報と公的統計にもとづいて整理します。コーディングやWordPressテーマ開発とは切り離し、あくまで「見栄えとレイアウトの設計」に焦点を当てて解説します。

WordPressで「自分らしいデザイン」を内製したいと考える人が増えている理由

WordPressは無料テーマや有料テーマが数多く公開されており、インストールしてすぐにサイトを立ち上げられる手軽さが大きな魅力です。一方で、同じテーマを使うサイトが増えるほど「どこかで見たようなレイアウト」から抜け出しにくくなり、ブランドや事業の個性を表現しきれないと感じる場面も増えてきます。こうした背景から、Adobe XDやFigmaなどのデザインツールを使って、自分の手でワイヤーフレームやデザインカンプを作成し、WordPressサイトの見た目を根本から設計し直したいと考える人が増えています。

本記事で想定しているのは、大きく分けて4つの層です。WordPressを使ったWebサイトのデザインを自作したいと考えているWebデザイナーや、Webデザイナーを目指して勉強中の初心者。市販・無料のWordPressテーマのデザインに物足りなさを感じており、デザインツールを使ってオリジナリティの高いサイト設計を行いたい人。WordPressサイトにおけるデザインの進め方やワイヤーフレーム作成の手順を体系的に理解したい学習者。そして、コーディングやテーマ開発とは切り離し、純粋にWebデザインのスキルを高めたいと考えている人です。いずれの場合も、まず押さえておきたいのは「デザインカンプを作る」という工程がWordPress制作全体の中でどう位置づけられ、どのようなツールと手順で進めるのが効率的かという全体像です。

WordPressとは何か・世界的なシェアの実態

デザインの話に入る前に、WordPress自体の位置づけを確認しておきましょう。WordPressはオープンソースで公開されているCMS（コンテンツ管理システム）で、プログラミングの知識がなくてもサイトを構築できる手軽さ、テーマやプラグインによる高い拡張性、無料から利用できるコストの低さなどが特徴とされています［S004］。

Web技術の利用状況を調査するW3Techsの2026年8月時点のデータによると、WordPressは全世界のWebサイトの40.8%で利用されており、CMSを導入しているサイトに限ると市場シェアは59.0%に達しています。2位のShopify（7.7%）、3位のWix（6.1%）と比較しても圧倒的なシェアを持つプラットフォームであることがわかります［S005］。これほど多くのサイトがWordPressで作られているからこそ、「WordPressで実装できるデザイン」を前提に見た目を設計できるスキルには、実務でも高い需要があると考えられます。

出典：WordPress（ワードプレス）とは｜Webデザイン・Webデザイナー専攻｜デジタルハリウッド、Usage statistics of content management systems｜W3Techs

既製テーマ・無料テーマに感じる「物足りなさ」の正体

WordPressテーマの多くは、幅広い業種・用途に対応できるよう汎用的なレイアウトで設計されています。そのため、初期設定のまま使うと、配色やフォント、余白の取り方までテーマ側の標準スタイルに引っ張られやすく、「テーマを変えただけ」の見た目から抜け出しにくいという課題があります。カスタマイズ機能を使って部分的に色やフォントを変更することはできても、情報設計（どの情報をどの順番で、どれくらいの優先度で見せるか）そのものを作り変えるには限界があるためです。

この物足りなさを解消する近道は、WordPressのカスタマイズ画面をいじる前に、白紙の状態から「このサイトはどう見せたいか」をワイヤーフレームとデザインカンプというかたちで設計してしまうことです。先にデザインの完成形を固めてからWordPressに落とし込む順番にすることで、テーマの標準スタイルに引きずられず、オリジナリティのあるレイアウトを実現しやすくなります。

WordPressサイトのデザイン制作フロー全体像

WordPressサイトのデザインを内製する場合も、進め方の基本は一般的なWebデザインの制作フローと変わりません。大きく分けると、次のような流れで進みます。

本記事で扱うのは、この中でも「ワイヤーフレーム作成」から「デザインルールの整理」までの、コーディングに入る手前までの工程です。ここまでを自分の手で作り込めるようになれば、既製テーマのカスタマイズだけでは実現できないオリジナルのデザインを、コーダーやテーマ開発者に正確に伝えるための設計図として活用できます。

ワイヤーフレーム作成の手順とポイント

ワイヤーフレームは、色や装飾を省いたグレースケールの線画で、ページ内の情報の配置と優先順位を検討するための設計図です。デザインカンプを作る前にワイヤーフレームを固めておくことで、配色やフォントといった見た目の議論に入る前に、情報設計そのものの過不足を確認できます。

一般的な作成手順としては、まずページの目的とターゲットユーザーを確認したうえで、掲載したいコンテンツを箇条書きで洗い出します。次に、それぞれの情報の重要度に優先順位をつけ、ファーストビューに何を置くかを決めます。そのうえで、四角形とテキストラベルだけを使い、グレースケールでレイアウトのラフを作成していきます。トップページだけでなく、下層ページや問い合わせフォームなど複数ページを横断してテンプレート化しておくと、後工程のデザインカンプ作成やWordPressへの実装がスムーズになります。デジタルハリウッドのWebデザイナー専攻でも、フリーランス向けのカリキュラムの中でワイヤーフレームとランディングページ制作を扱う内容が含まれており、実務を意識した設計力の習得が意識されています［S003］。

出典：カリキュラム｜Webデザイン・Webデザイナー専攻｜デジタルハリウッド

デザインカンプ作成の手順とポイント

デザインカンプ（デザイン・コンプリヘンシブ・レイアウトの略）とは、ワイヤーフレームをもとに、配色・フォント・余白・画像まで含めた完成形のビジュアルを再現した「最終確認用の見本」です。コーディングやテーマ実装を担当する人にとっては、このデザインカンプが仕上がりの判断基準になるため、実務では細部まで作り込んでおくことが重要になります。

作成の流れとしては、まずワイヤーフレームをベースに、ブランドカラーやメインで使うフォントを決定します。次に、ヘッダー・フッター・カード型コンテンツ・ボタンといった繰り返し使うパーツを先にコンポーネント単位で作成し、ページ全体で使い回せるようにしておきます。WordPressはブロックエディタ（Gutenberg）を中心に、パーツ単位でコンテンツを組み立てる仕組みになっているため、デザイン段階からパーツ単位で整理しておくと、後工程での実装や再利用がしやすくなります。あわせて、PC・タブレット・スマートフォンそれぞれの見え方を確認できるよう、レスポンシブ対応のカンプを複数用意しておくことも欠かせません。最後に、レイヤー名やフォルダ構成を整理し、誰が見ても意図が伝わる状態にしてから完成とします。

デザインツールの選び方：Figma・Adobe XD・Photoshop/Illustratorの違い

ワイヤーフレームやデザインカンプの作成に使うツールとしては、Figma、Adobe XD、Photoshop、Illustratorなどが候補に挙がります。それぞれの特徴を整理すると、次のようになります。

この中でAdobe XDについては、2023年1月に単体プランの新規販売が終了し、大型の機能アップデートを伴わない保守運用（メンテナンスモード）に移行していると報じられています［S006］。これから新しくツールを学び始める場合、実務では実質的にFigmaが標準的な選択肢になっていると考えてよいでしょう。デジタルハリウッドのWebデザイナー専攻でも、1ヶ月目の学習内容としてIllustrator・PhotoshopとあわせてFigmaの操作を基礎から習得するカリキュラムが組まれています［S002］［S003］。画像加工やバナー制作といった具体的なテーマを通じてFigmaの基本操作を学べるため、ツール選びに迷っている段階の方にとっても、実務で使われる標準ツールを軸に学習を進めやすい環境といえます。

出典：Webデザインスクールで未経験から学ぶ｜Webデザイン・Webデザイナー専攻｜デジタルハリウッド、【続報】「Adobe XD」単体プランの販売は終了 ～メンテナンスモードに｜窓の杜

WordPressサイトのデザインで意識したい3つのポイント

通常のWebデザインとWordPressサイトのデザインで大きな考え方の違いがあるわけではありませんが、WordPressに落とし込むことを前提にデザインカンプを作る場合、意識しておくと後工程がスムーズになるポイントが3つあります。

1つ目は、ブロックエディタを意識したコンポーネント設計です。見出し・テキスト・画像・ボタンといった要素をパーツ単位で整理し、組み合わせでページを構成できるようにしておくと、WordPress側でも再現・運用しやすいデザインになります。2つ目は、レスポンシブとブレークポイントの明確化です。PC・タブレット・スマートフォンでレイアウトがどう変化するかをデザインカンプの段階で示しておくことで、実装時の解釈のズレを防げます。3つ目は、表示速度や画像最適化を前提にしたビジュアル設計です。大きな画像や複雑な装飾を多用しすぎると、実装後の表示速度に影響するため、デザインの段階から画像サイズや装飾量のバランスを意識しておくと、公開後の手戻りを減らせます。こうしたポイントは、コーディングの知識がなくても「実装されることを想定してデザインする」という意識を持つだけで反映できるものばかりです。

コーディングと切り離して「デザインだけ」を学ぶという選択肢

WordPressサイトのデザインを内製したいと考えても、HTML/CSSなどのコーディングまで一度に学ぶのはハードルが高いと感じる方もいるでしょう。実際には、ワイヤーフレームやデザインカンプの作成は「見た目とレイアウトの設計」というデザイン領域の作業であり、コーディングの知識がなくても取り組める工程です。

デジタルハリウッドのWebデザイナー専攻のカリキュラムでも、1ヶ月目にIllustrator・Photoshop・Figmaといったデザインソフトの基礎を学び、HTML/CSSなどのコーディングは2〜3ヶ月目から扱う構成になっています［S003］。つまり、学習の順序としてもデザインの基礎を先に固めてから実装に進む流れが組まれており、まずはデザインカンプが作れるようになることを目標に学習を進めることも可能です。すでにグラフィックデザインの経験がある方向けには学習内容を調整した「グラフィック経験者プラン」も用意されており、WordPress自体の使い方に絞って学びたい場合は、2ヶ月間でWordPressの基本操作を学べるオプション講座（105,600円・税込）を単独で受講する選択肢もあります［S002］。

Webデザイナーという仕事・年収の実態

デザインスキルを学ぶ先にある働き方についても、公的統計から確認しておきましょう。厚生労働省の職業情報提供サイト（job tag）によると、Webデザイナーの令和7年賃金構造基本統計調査による平均年収は539.6万円（平均年齢39.1歳時点）と報告されています。就業形態は正社員が39.6%である一方、自営・フリーランスとしての就業形態が62.3%と多数を占めており、パソコンとインターネット環境があれば場所を選ばずに働きやすいという特性がうかがえます［S001］。

業務内容としては、Webサイトのコンセプト決定（実施率90.0%）、デザイン・レイアウトの仮案作成（同90.0%）、HTML・CSSなどを用いたコーディング（同80.0%）まで、一人のWebデザイナーが幅広く担う実態が示されています［S001］。この数字からもわかるとおり、実務では最終的にコーディングまで担当する場面も少なくありませんが、コンセプト決定やレイアウトの仮案作成といったデザイン領域の実施率がコーディングを上回っていることから、デザインスキルそのものが業務の中核を占めていることがうかがえます。デザインカンプを作る力を先に身につけておくことは、将来的にコーディングを学ぶかどうかにかかわらず、実務で評価されやすいスキルだといえるでしょう。

出典：Webデザイナー（Web制作会社）｜職業情報提供サイト（job tag）／厚生労働省

こんな人にWordPress×Figmaのデザイン学習が向いている

ここまでの内容を踏まえると、WordPressサイトのデザインをFigmaなどのツールで内製する学び方は、次のような方に向いていると考えられます。既製テーマのカスタマイズだけでは物足りず、ワイヤーフレームの段階から自分でサイト設計を行いたい方。コーディングやテーマ開発よりも先に、見た目とレイアウトの設計力を体系的に身につけたい方。そして、実務で標準的に使われているFigmaを軸に、デザインツールの選び方や使い方を学びたい方には、特に相性がよいでしょう。

一方で、すでにデザインの基礎ができており、WordPressのテーマ開発やコーディングそのものを重点的に学びたい場合は、デザイン工程よりもコーディングやプラグイン活用の学習に時間を割いたほうが効率的な場合もあります。自分がどの工程に課題を感じているかによって、優先して学ぶべき内容は変わってくるため、迷った場合は無料のスクール説明会でカリキュラムの進め方を確認したうえで判断することをおすすめします。

よくある質問

※説明会無料・オンライン参加可・個別相談OK