浅賀理生(あさかまさお)
はじめに
全世界で多くの企業や個人に幅広く使われているWordPressですが、市販のテーマでは、オリジナリティに欠けるし、デザインがなんかイマイチ・・と思っている方もいるのではないでしょうか？
特にビジネス用のウェブサイトで、WordPressを使うのであれば、オリジナリティのあるデザインで、競合と比較された際に選んでもらいやすいサイトにする必要があるでしょう。
本日は、WordPressにおけるデザインの自作というテーマについて、Web制作会社の立場から記事を書いていきます。
この記事を執筆・監修する人
浅賀 理生（あさか まさお）
株式会社インスパイアデザイン代表／ディレクター
Web制作に携わって15年以上
主にWordPressを用いて、お客様のWebサイト制作のプロジェクトを進めている立場から、記事を執筆していきます。
WordPressにおけるデザインの自作とは（本記事の定義）
WordPressにおけるデザインの自作について、人それぞれの捉え方に違いがありそうなので、本記事の定義を記載していきます。
まず、本記事では、デザインに焦点を当てたものであり、WordPressテーマを自作する内容（HTML・CSS・PHPのコーディング等）とは切り離しています。また、無料・有料のテーマを用いてデザインしていくような内容でもありません。
従いまして、独自デザインの自作からサイトの公開までを解説した内容ではなく、デザインに焦点を当てた内容ですので、読者層としては、Webデザイナーの方やWebデザイナーを目指す方向けの記事になるかと思います。
※この後、デザインを自作する方法を紹介していきますが、デザインカンプを制作するための方法であり、本記事の内容にコーディング等の内容は含まれておりません。
デザインを自作する3つの方法
1. Adobe XD でデザインする
デザインを自作する方法として、まず初めに紹介するのが、Adobe XD を用いたデザインです。
元々はWebディレクター向けのツールとして使われることが多く、お客様向けにワイヤーフレームを作成したり、プロトタイプ（このメニューボタンを押すと、このページに行きますなどが表現できる）を作成するためのものでしたが、昨今では、Web制作の現場では主流であり、WebデザイナーはAdobe XD でデザインするべき必須なツールです。
特徴としては、とにかくシンプルで、効率よくデザインできる点です。
デザインのしやすさはもちろんのことながら、デザイン業務においてめちゃくちゃ効率的な機能があるため、XDに慣れると他のツールは使えなくなると思います。
デザイナー、ディレクターだけでなく、デコーダー・フロントエンジニアにとってもコーディング時の業務負担を軽くしてくれる素晴らしいツールです。（この後に番外編として紹介するIllustratorの3〜4倍効率的だと、うちのエンジニアたちは話しています）
2. Adobe Photoshop でデザインする
一昔前に主流だったのが、Adobe Photoshop です。
私も10年以上前はデザイン業務を行なっていたのですが、このAdobe Photoshop を使用していました。
ただ、一昔前と言っても、細かい画像修正や画像加工、グラフィックなどの作成は、Photoshop で行うため、現在もデザイン業務には欠かせないツールです。
Webデザイン・制作の流れとしては、ファーストビューと呼ばれる、トップページのメインビジュアルはウェブサイトの顔であり、初めて訪れてきた方に強く印象に残ってもらう必要がありますので、凝ったデザインにすることが多いため、そのような場合はPhotoshop でデザインを行います。
そしてPhotoshop でデザインしたものをXDに読み込んで、ウェブサイト全体をデザインしていくようなイメージです。
Photoshop に慣れてしまっている人は、全てのページをPhotoshop で完結させていると思いますが、XDは是非とも使えるようになるべきです。（私がこのタイプでしたが、効率が飛躍的にアップしますので、学習コストを考えても覚えるべきです）
3. Figma でデザインする
3つめの紹介するのは、ブラウザ上で簡単にデザインができるツールです。（2022年9月にAdobeが買収したことも話題に）
感覚としてXDに近いツールで、ワイヤーフレーム作成などにもよく使用されています。
XDより圧倒的に共同編集がやりやすいとの意見が多いですが、どちらを使うかは、個人の感覚や会社の方針によって違いがあるかと思います。
番外編：Adobe Illustrator でデザインする（昨今では推奨されません）
紙媒体のデザイナー上がりの人に多いのが、Adobe Illustrator を使用してWebのデザインを作るパターンです。
今回あえて「番外編」とした理由は、Webデザインにおいては、Illustrator でのデザインはできる限り行わない方が良いからです。
大きな理由としては、XDなどと比較して、コーディング時の手間が大幅に増えるため、コーダーからは嫌煙され、かつ工数が増えるため、外注する場合、その分のコストが上乗せされるでしょう。
Photoshop 同様、クリエイティブを作り込む場合にイラストレーターを使用し、Webサイト全体のデザインはXDで行うやり方がベストです。
具体的なデザインの進め方
デザインを自作するあたり必要なツールは分かっていただいたと思います。
では、次に Adobe XD を用いた具体的なデザインの進め方について解説していきます。（Web制作の現場での進め方のほうが、より実践的かと思いますので、設計の段階から解説します）
1.サイトマップ作成
サイトマップとは、上記のようなサイトの全体像をまとめた設計図のようなものを指します。
通常は、営業やWebディレクターが、お客様にヒアリングを行いながら、まとめるのが一般的ですが、ご自身でサイトの設計を行う場合や、デザイナー自らがお客様と折衝する場合などもあります。
ツールはエクセルやスプレッドシートなどでも使いやすいもので良いですが、私の場合はXmaindというマインドマップツールを用いて情報整理を行なっています。
2.ワイヤーフレーム作成
ワイヤーフレームとは各ページ（画面）の構成図のようなものです。
こちらもサイトマップ同様、営業時に営業担当者が提案しつつ作成することもありますし、Webディレクターが作成することもあります。（お客様が作るケースもあります。）
この構成図なしでデザインを進めるのは、あまりよろしくないので、必ず作成するようにしましょう。
トップページであれば、昨今スマートフォンからのアクセスも多いため（特にtoC向け）、トップページでは全てのページがざっと見るような設計が望ましいです。
作成するツールは、今回紹介した Adobe XD や Figma などを使う人が多いです。（私はXDを使っています。）
ちなみにですが、ツールを使わずに手書きでも全然OKです！
3.デザイン制作
サイトマップとワイヤーフレームが明確になったらデザインに着手できる状態です。今回紹介したツールを用いて実際にデザインを進めていってください。
デザインした後はどうすればよい？
本記事では、デザインに焦点を当てているため、WordPressにてサイトを公開するまでのフローなどは掲載しておりません
通常デザインを行なった後の流れとしては、コーダーさんがHTML・CSSコーディングを行い、エンジニアがWordPress構築を行い、サイト公開といった流れとなります。
デザインからコーディング、WordPress構築まで一貫して行う人もいらっしゃいますので、デザインができたら次はとりあえず自分でコーディングにチャレンジするか、コーダーさんに外注するかの２択になるでしょう。
デザインの学び方について
デザインを行うにあたり学習方法についても軽く触れていきたいと思います。
私のおすすめはあまりお金をかけずに自走する方法です。具体的には
- YouTube
- Udemy（有料だが、ステップ式で学びやすく、安い）
- 参考書を購入（基礎と応用2冊ずつ）
オンラインスクールもありですが、高額なスクールなどはやめておきましょう。
参考書は、寝る前などにペラペラとめくりながら妄想できたりするので、個人的には結構好きです。「あ、これ明日試してみよ」みたいな
さいごに
WordPressのおけるデザインの自作というテーマで記事を書いていきましたが、要はWebデザインです。
WordPressを用いたCMSサイトの制作フローとしては、
- デザイナーがデザインを起こす
- コーダーがコーディングする
- エンジニアがWordPress化（CMS化）する
こんな流れが一般的です。
デザインとコーディング・WordPress構築を兼任する場合もありますが、独自にデザインして、それをコーディングして、WordPress化まで行う人はあまり多くありません。
デザイナーはデザインを突き詰めていったほうが、品質は確実に向上し、お客様からも職場やパートナー企業からも仕事を発注しやすい存在になるでしょう。
ちなみにWordPressのデザインを外注されたい企業様がいらっしゃいましたら、お気軽にご相談ください。