趣味デザイナーがWordPressテーマを作ったフロー

みなさまこんにちは、YAMINABE RECORDSのいしぐろ（@YR_ishiguro）です。

初回の記事でWordpressテーマについて語っていましたが、今回はどのような手順で制作していったかのお話。
https://yaminabe-records.com/management/battari-theme/

といっても、私はPHPに詳しいわけでなくHTML+CSSでWEBのレイアウトが作れる程度。もちろん1からWordpressテーマを作った経験はありません。

そんな私ですが、思いついて4日程である程度形になるテーマを自作できたので備忘録を兼ねてまとめたいと思います。

実際に行った制作の流れ

• どのような情報を載せるかを洗い出す
• Adobe XDでデザインカンプを制作する
• HTML+CSSでコーディングする
• Localでローカル環境を構築
• Underscoresを元にWordpressテーマ化

上記のような流れで制作しました。
ちなみに構想とカンプ作成を同時進行で行って1日、HTMLコーディングに1日、Wordpress化に2日という時間配分になっています。

また4日で出来たと言っていますが個人用に作っているので納品する物のようにシビアではなく、ある程度形になってから修正を重ねていく予定なので実際はもう少しかかるかな？という印象。

構想を練る

皆さんはデザインの構想を練る時、どのようなデバイスを使って行っていますか？

私が使うのは方眼ノートにボールペンという組み合わせで、デザイン作業の他作曲の際のコード進行、仕事のメモ、落書きなど全部このノートで行っています。

今回はブログのテーマなので、まず必要な情報をざっと書き出してそれをデザインラフに落とし込んでいきました。

走り書きで文字が驚愕の汚さですが、それはご愛嬌ということでよろしく。

Adobe XDでデザインカンプを制作する

今回はじめてXDを使ってみたのですが、かなり使いやすい。

デザインカンプは主にPhotoshop等の画像編集ソフトで制作される事が多いのですが、正直カンプを作る程度に対しては高機能すぎる。

その点XDは必要な機能だけを厳選しているため非常にシンプル、Adobeソフト初心者でも直感的に操作できそうな感じ。

シンプルといっても要所は抑えており、要素を繰り返し利用出来るリピートグリッド機能や、作ったデザインをスマートフォン用XDアプリで簡単に確認出来るなど、シンプルなのに高機能という気づかい上手なツールです。

HTML＆CSSでコーディング

特にコレといったことは無く普通にエディタでコーディングします。

今回はモバイルデザインを先にコーディングし、後からmediaqueryで横幅480px以上のタブレット端末やPCでの表示方法を記載しています。

ちなみに、私がコーディングに使用するのはAtomというGitHub製のテキストエディタ。ブログを執筆する際もAtomです。

Localでローカル環境を作る

完成したHTML+CSSファイルをWordpressテーマ化する前にローカル環境を用意しましょう。

自分のPC内でサーバーを建てて、そこにWordPressをインストールする訳です。

ローカル環境を用意しないと、FTPソフト等で毎回毎回上書きしたファイルをアップロードしないといけないですし、何よりも未完成の物をWeb上に上げるのは衛生上良くない。

Localはローカル環境構築ソフトの中でも極めてシンプルで、設定など特に弄る必要もないので簡単に構築できます。Windows・Macどちらも対応しています。

ブランクテーマUnderscoresを使って爆速テーマ作成

Wordpressテーマを1から作ろうと思うと、特有の関数を書いたりファイルを用意したりとかなりの労力が必要です。

そこで活躍するのがブランクテーマ。

ブランクテーマというのは、限りなく最小限の構成で作られたWordpressテーマで、これを元にカスタマイズしていく事で1から作るよりも早く制作することが可能です。

一般的に公開されているテーマのように装飾はされていないので前項目で制作したCSSを追加してあげるだけで、修正箇所を抑えることが可能です。

これが完成したテーマをカスタマイズしていく形になると、不要なデザインを取り除く作業が必要になってくるので面倒ですし、無駄なコードが残ることになるのでサイトの表示スピードにも関係してきそうですよね。

テーマユニットテストで表示確認

テーマを作っている段階ですと、記事の内容が無いため表示確認が出来ません。かといってサンプル記事を用意するのも面倒…

ということで公式のWordpress Codexにテーマ表示確認用のテストデータが用意されているので利用してみましょう。

きちんと日本語のデータが用意されているのも嬉しいですね。

意外と出来る？Wordpressのテーマ作成

ブランクテーマを利用しているので厳密に言うと1から作成したわけでは無いのですが、HTML+CSS程度の知識しか無い私でも個人で使えるレベルのWordpressテーマが制作出来ました。

オリジナリティという点では既存テーマをカスタマイズするより効率も良さそうかな？と思います。

気になる方は試してみてくださいね。