【WordPress】意外とシンプル！オリジナルテーマを独学で制作した実際の手順
どうも、ナツリンです。
前に書いた『不器用人間がオリジナルテーマを独学でつくったワケ』に続き、今回は「WordPressのオリジナルテーマを独学で制作した実際の手順」について書いていきます。
私はHTML・CSS・JavaScript・デザインを細く長く勉強してきた人間なので、「Webの基礎知識がある人が初めてオリジナルテーマをつくった場合」だと仮定して読んでもらえたらうれしいです。
▼ 前回の記事はこちら
あわせて読みたい
Index
オリジナルテーマ制作の全体像
全体としては完成するまで6ヵ月というスケジュールで進めていきました。次からは、1つ1つのフェーズについて詳しく見ていきたいと思います。
- コンセプト作成（2週間）
- ワイヤーフレーム作成（2週間）
- デザイン作成（1ヵ月）
- コーディング（1ヵ月）
- WordPress化（2ヵ月）
- 調整（1ヵ月）
1. コンセプト作成（2週間）
まず最初に行ったのがコンセプト作成です。
やり方としてはGoogleスプレッドシートに、目的・目標・ターゲット・独自性などの項目を箇条書きにして、ブログの全体的なイメージをまとめていきました。
コンセプトをまとめる作業をしている間に、明確に決まっていない項目があったり、イメージが湧かない部分が出てくると思います。そんな時は、「マインドマップ」を作成して自分の好きなものをキーワードで洗い出してみたり、「ムードボード」を作成してネットで集めた写真をコラージュしたりして、イメージを具体的にしていきました。
とはいえ、最初から完璧なコンセプトをつくることは難しいですし、その必要もないと思います。ここは2週間くらいでザクッと切り上げてしまって大丈夫です。
ブログは更新していくうちにコンセプトが決まっていくことも多いと思うので、細かいことは気にせずに進めちゃいましょう。
あわせて読みたい
あわせて読みたい
2. ワイヤーフレーム作成（2週間）
次に行ったのがワイヤーフレーム作成です。
「ワイヤーフレーム」とは、Webサイトのどこに何を配置するのか、イメージした図のことです。私は必要なページのワイヤーフレームを、PC版・タブレット版・スマホ版のそれぞれ3種類ずつ作成しました。
自分が好きなサイトだったり、直感的にいいなと思うWebサイトをたくさん見て、Figmaというデザインツールを使って作成していきます。
ここは2週間に縛られず、じっくりと時間をかけた方が良いと感じました。ワイヤーフレームはサイトの骨格となるものなので、しっかりとしたものを作ることをおすすめします。
あわせて読みたい
あわせて読みたい
3. デザイン作成（1ヵ月）
次に行ったのがデザイン作成です。
先ほどと同じくFigmaを使って、作成したワイヤーフレームに装飾をしていきます。
デザインにおいては、コンセプトの段階で「こんなサイトにしたい」というイメージをしっかりと膨らませていることが大事だと感じました。特に「ムードボード」を作っておくと、サイトに合った色・写真・フォントなどを事前に集められるので、デザインで手が止まることが少なくなるかと思います。
ワイヤーフレームと同じく、PC版・タブレット版・スマホ版の3種類ずつ作成しましょう。
私はデザイン作成をしたことがあるので1ヶ月くらいで完成しましたが、初めて作成する人だと倍以上かかるかなという所感でした。
あわせて読みたい
4. コーディング（1ヵ月）
次はコーディングを進めていきます。
デザインしたページをPC・タブレット・スマホに対応したレスポンシブ対応でコーディングしていきます。こだわってデザインしたものが形になっていく、非常に楽しいフェーズですね。
私の場合、コーディングについては独学に毛が生えたレベルだったので、勉強した本を読み返しながら進めて1ヵ月かかったという感じでした。年末年始休みの間に結構進めたので、ボーナスタイムもありました。
コーディングの経験がない人は、1～2冊本を読んで勉強してからとなると、2～3ヶ月はかかる想定でいた方が良いかもしれません。
あわせて読みたい
5. WordPress化（2ヵ月）
次にようやくWordPress化を行っていきます。
WordPress化とは、先ほどコーディングしたHTMLファイルを、PHPファイルに変換していく作業を指しています。PHPファイルに変換することで、WordPressと連携させることができるようになるのです。
私はPHPについて全く知らない状態だったので、本を読んで勉強するのに1ヵ月、実際に作業を行うのにまた1ヵ月、合計すると2か月ほどかかりました。
ただ2年ほど前から、「Cocoon」や「SWELL」など既存のテーマを使ってWordPressを触っていたので、WordPressに対する理解はそこそこあった状態でした。そのため、WordPress自体が初めてという方はもっと時間がかかるかもしれません。
可能であれば事前にWordPressに慣れておいた方が、スムーズに進められるフェーズであると思います。
あわせて読みたい
6. 調整（1ヵ月）
やっとオリジナルテーマが完成しました。
最後は、実際に記事の作成をしてみて、気になる点があれば調整するフェーズに入りましょう。
私の場合、ローカル環境という実際に公開されることがない開発環境の中で、20記事ほど書いて細かい調整をしていきました。実際に記事を書いてみると、考慮が充分ではなかった部分に気づくことができます。
ここは焦らず、自信をもって公開できる状態にするために、1ヵ月ほどかけて楽しみながら進めていくのが良いでしょう。
そして公開しても問題がないと思った時に、公開されているサイトのテーマを、オリジナルテーマに置き換えました。これにてようやく、オリジナルテーマ制作全体が完了となります！
あわせて読みたい
オリジナルテーマを制作してみて
以上が、不器用人間の私が「WordPressのオリジナルテーマを独学で制作した実際の手順」になります。
オリジナルテーマをつくるためには、HTML・CSS・JavaScript・デザインの勉強が必要だったり、WordPressの仕組みや操作に対する理解が必要になります。私も全部を網羅するのに何年もかかってしまってすごく大変だったのですが、時間をかけた分オリジナルテーマが出来上がった喜びはものすごく大きいですし、自信にもなりました。
次回以降は、それぞれのフェーズで実際に行った作業を細かく分けて書いていけたらと思っています。
今回も最後まで読んでくださりありがとうございました！
▼ 次の記事はこちら
あわせて読みたい
