【WordPress】オリジナルテーマのデザインを初めて作成した実際の手順
どうも、ナツリンです。
私がWordPressのオリジナルテーマつくったときに、一番こだわりを詰め込んだのがサイト全体のデザインです。せっかくなら自分らしさを存分に発揮したテーマを作りたいと考えていたため、細かい部分まで何度も推敲しました。
オリジナルテーマ制作において「デザインを作成した方法」を、私の実際の経験をベースに書いていきたいと思います。参考になったら嬉しいです！
▼ 関連記事だよ
あわせて読みたい
あわせて読みたい
ワイヤーフレームを作成する
まず初めにWebページの骨格となる「ワイヤーフレーム」を作成しました。
ワイヤーフレームとは「何をどこに配置するかを決めるWebサイトの設計図」のことです。いきなりデザインを作成すると見た目にばかり意識が向いてしまい、構成がブレてしまうことが多々あります。そのため最初にWebページの骨格を決めておくことが大切なのです。
それぞれのページで、何の要素をどこに配置したいのかを、色と写真を使わずに、シンプルな線とテキストのみで作成していきます。
作り方については別の記事で詳しく解説しているので、そちらが参考になるかと思います。
あわせて読みたい
レスポンシブ対応のブレイクポイントを考える
次に、Webページのブレイクポイントを考えました。
ブレイクポイントとは「Webページの表示レイアウトを切り替えるタイミングとなる画面幅（デバイス幅）」のことです。PC・タブレット・スマホの3種類のデザインを用意しておき、画面幅がいくつになったときにデザインに切り替えるのかを、事前に決めておくことともいえます。
ブレイクポイントはpx（ピクセル）という単位で決めることが多く、一般的に採用されているブレイクポイントで対応させるのがおすすめです。
私は次のサイズで対応させることにしたので、もしブレイクポイントを決めかねているのであれば参考にしてみてくださいね。
- PCデザイン： 1024px ～ 最大サイズ
- タブレットデザイン： 768px ～ 1023px
- スマホデザイン： 最小サイズ～767px
デザインの方向性を決める
続いて、デザインの方向性を決めていきました。
全体的なイメージおよび、カラー・フォント・写真のテイストなどを決めておくことで、迷いなくデザインすることができるからです。
デザインの方向性を決めるためには、ムードボードと呼ばれる「画像やテキスト、イラストなどを組み合わせてアイデアを視覚化したコラージュ」を作成することがおすすめです。ムードボードを見ながらデザイン作成を進めることで、全体的にブレない一貫性のあるデザインを作成することができます。
ムードボードの作り方については『【WordPress】オリジナルテーマ制作に向けたコンセプト作り（デザイン編）』で解説しています。
あわせて読みたい
デザインを作成する
ここまで準備が出来てようやく、デザイン作成に入りました。
ワイヤーフレームをつくって、ブレイクポイントを決めて、デザインの方向性を固めたことで、ようやくデザインをつくる土台が出来たのです。
デザイン作成は、Figmaでつくったワイヤーフレームに、そのまま装飾をしていくイメージで進めていきます。色を付けたり、写真を加えたり、角を丸くしたり、フォントにこだわってみたり…。ムードボードで作成したイメージに近づけられるように、細かいところにこだわってみましょう。
私は以下の順番で作成しました。まず主役となるTOPページを作成して、次にトップページのデザインを展開させる形で投稿ページ、固定ページ、アーカイブページ…とデザインをつくっていきます。
- TOPページ
- 投稿ページ
- 固定ページ
- アーカイブページ
- 検索結果ページ
- 404ページ
- 問合せページ
後々コーディングがしやすくなるように、PC（1920px）・タブレット（768px）・スマホ（390px）のそれぞれに対応したデザインをつくります。
私は1か月ほどかけて、何とか全てのデザインをつくり終えました！
まとめ
WordPressのオリジナルテーマのデザインを作成した手順は以上になります。
やることが多くて大変に感じるかもしれませんが、急がば回れです。焦っていきなりデザイン作成から入っても、構成がぐちゃぐちゃになったり、デザインの方向性がブレてしまったりします。
1つ1つの手順を着実に進めることで、一貫性のある素敵なデザインをつくっていきましょう。
ざっくりとした流れの話になってしまったので、おすすめのフォントや画像などは、また別記事で書いていこうかなと思います。
今回も最後まで読んでくださりありがとうございました！
▼ 次はコーディングをしよう
あわせて読みたい
▼ オリジナルテーマ制作の全体像はこちら
あわせて読みたい
