ナツリンブログ

【WordPress】オリジナルテーマ制作に向けたコンセプト作り(デザイン編)

【WordPressオリジナルテーマ制作体験談】デザインのコンセプト作り

どうも、ナツリンです。

今回はWordPressのオリジナルテーマ制作に向けて行った「コンセプト作り」のデザインに関する話をしていきたいと思います。

コンセプトの段階からデザインのイメージを決めておくことで、後に迷いなく作業を進めることが出来ます。私の経験が「オリジナルテーマを独学でつくってみたい」と考えている方の役に立ったら嬉しいです。

▼ 「コンセプト作り(概要編)」はこちら

あわせて読みたい
【WordPress】オリジナルテーマ制作に向けたコンセプト作り(概要編) どうも、ナツリンです。 趣味でWordPressのオリジナルテーマをつくる中で、一番最初に行ったのがコンセプト作りで…

コンセプト作成の段階でやったこと

オリジナルテーマ制作においては、コンセプトの段階から、デザインの方向性をしっかりと決めておくことが大事だと考えています。

「こういう風にしたい」というざっくりとしたデザインのイメージがあるだけでも、後々の作業工程で迷いを減らすことができて、一貫性のあるテーマをつくることができるからです。

私が実際に行った「コンセプト作りにおいて必要なデザインに関する作業」の全体像は次のようになります。以降で、各内容について詳しく見ていきましょう。

  1. デザインリサーチ
  2. ポジショニングマップの作成
  3. ムードボードの作成

デザインリサーチ

最初にして最も大切なのが、「デザインリサーチ」です。

「良い見本なくして良いテーマをつくることは出来ない」という考えのもと、たくさんの参考デザインを集めていきました。

雑誌・Webサイト・広告・イラスト・写真など、ジャンルを問わずにオリジナルテーマに合いそうなデザインを集めていきます。

私の場合は、Pinterestという様々な分野のデザインを収集できるサイトや、SANKOU!というWebデザイン専門のサイト集が役に立ちました。

集めた画像をFigmaにペタペタと貼っていくと、何となく「自分ってこんなデザインが好きなんだ」というイメージが見えてくると思います。

デザインリサーチのイメージ画像
収集したデザインをFigmaに貼ったイメージ

ポジショニングマップの作成

次に、先ほど収集したデザインを分類・整理して、デザインの方向性を明確にする作業を行います。

ここで活用するのが「ポジショニングマップ」と呼ばれる方法で、「デザインの方向性や印象を2軸で分類・可視化し、方向性を明確にするための図」のことです。

私は先ほど収集した参考デザインを、「女性的↔男性的」「ゴテゴテ↔すっきり」の2軸で分類しました。Figmaでポジショニングマップの型を作って、参考デザインをイメージに合ったポジションにペタペタと貼っていきます。すると不思議なことに、目指すべきデザインの方向性が見えてきます。

「男性的なのは今回のテーマには合わないな」「ゴテゴテしすぎてるのは好みじゃないな」など、収集したデザインの中でも、より細かなイメージをすり合わせることができるようになるのです。

このようにして、今回作りたいデザインのイメージを言語化できるようになったら、次のステップに進みましょう。

ポジショニングマップのイメージ画像
決めた箇所を丸で囲ってます

ムードボードの作成

最後にムードボードを作成して、作りたいデザインのイメージを確立させます。

ムードボードとは、「画像やテキスト、イラストなどを組み合わせてアイデアを視覚化したコラージュ」のこと。ムードボードを作成することで、デザインの方向性をより明確にすることが出来ます。

私は「写真」「フォント」「ロゴ」「テクスチャ」を織り交ぜで、Figmaで3種類のムードボードを作成しました。

メインカラーを何色にするか、どのようなロゴを作成するか、長い間迷っていたのですが、カラーやフォントの組み合わせを変えたムードボードを3つ作成し比較したことで、「今回のテーマに合うカラーはこれだ」「モダンなイメージのロゴをつくろう」と決めることが出来ました。

ここまでしっかりとデザインの方向性が決まれば、後々のデザイン作業もかなり進めやすくなります。

ムードボードのイメージ画像
3種類のムードボードを作成し印象を比較

まとめ

以上が、私がオリジナルテーマ制作において「コンセプト作りで実際に行ったデザイン作業」の全容になります。

コンセプトの段階から「デザインの方向性」をしっかりと決めておくことで、この後の作業がかなり進めやすくなると思います。

慣れないときこそ良質な参考デザインをたくさん集めて分類し、良い部分を取り入れてイメージに合ったデザインをつくっていきましょう。

今回も最後まで読んでくださりありがとうございました!

▼ 次はサイト構成を考えよう

あわせて読みたい
【WordPress】オリジナルテーマ制作に向けてWebサイトの構成を考えよう どうも、ナツリンです。 最近は、WordPressのオリジナルテーマ制作について語らせてもらってます。今回のテーマは…

▼ オリジナルテーマ制作の全体像はこちら

あわせて読みたい
【WordPressオリジナルテーマ制作体験談】独学で制作した実際の手順
【WordPress】意外とシンプル!オリジナルテーマを独学で制作した実際の手順 どうも、ナツリンです。 前に書いた『不器用人間がオリジナルテーマを独学でつくったワケ』に続き、今回は「WordPre…