--- title: "WordPressテーマファイルを制作する順序と内容" canonical_url: "https://olein-design.com/blog/create-wordpress-theme-flow" language: "ja" date_published: "2016-07-05T11:25:10+09:00" date_modified: "2016-07-05T11:25:10+09:00" content_type: "post" author: "久野晃司" taxonomies: category: - "WordPress" post_tag: - "WordPress" - "コーディング" - "デザイン制作" --- # WordPressテーマファイルを制作する順序と内容 岐阜でひっそりとWordPressを利用したホームページの制作・開発を行っておりますオレインデザインです。 ちょっと時間が作れそうなので、**「WordPressテーマの作り方」**というような記事を書いていこうと考えています。その際に、どのような順序で紹介していくか悩んでいて、まずは「一般的な制作の流れを書き出してみよう！」と思い、記事にまとめようと思います。 制作の方法とか流れっていうのは、かなり個人差もあるとは思いますので、一概にこれが正解というわけでもありません。ですが、何かしらの参考になれば幸いです。 ## 企画・仕様の決定 まずは、**何のために作るのか**を明確にすることが必要となります。ここがブレてしまうと、全てがダメになってしまう可能性もあるため、いい加減に考えてはいけません。そして、時間が必要なのであればしっかりと時間をかけます。 ここでいう仕様というのは、この時点で予想できる将来的な拡張も含めた**やりたいこと**を書き出して、それらに必要な予算、環境、技術などを明確にしていきます。もう少し噛み砕いて言うと「この機能を実装するには予算オーバーだからこのプラグインを検討しよう」とかそういうことをできるだけ明確にします。 あとから変更になることも少なくありません。しかし、制作してしまって使わない機能が出てくるということは、それは無駄なコストとなってしまうため、そういったことが起きないように決められることはしっかりと決めておきます。（決めたからといって柔軟性は持つようにしてます） あと、カスタマイズのし易さとか拡張性云々に関しては全てをしっかりと決めておけるものでもありません。ですから、可能な限り拡張性のあるデザインであったり、コーディング方法などはちゃんと注意して取り入れるようにしています。 ## デザイン制作 仕様が可能な限りまとまったら、それらで行ったヒアリング内容を元にデザイン制作を進めていきます。 ここでいう**デザイン制作**というのは、早速イラレやフォトショを起動してもじもじするということではなく、**ワーヤーフレームからしっかりと検討しながら制作していく工程**を指しています。 自分の遊び半分のプロジェクトであれば、ワイヤーフレームなんかは頭の中にざっくりとあって、それをもとにイラレやフォトショでデザイン作ってしまうということは多々あります。が、クライアントを相手に制作をする場合はそんないい加減なことはしていられません。 しっかりとワイヤーフレームを見せて確認します。可能であれば打ち合わせ時に手書きのワイヤーフレームを見ていただき、少しでもたたき台として機能させておいて、ちゃんとしたワイヤーフレームを後ほど制作する流れが個人的には一般的です。ワイヤーフレームで構造を固めたあと、ビジュアル部分のデザイン制作（イラレやフォトショ）を行っていきます。 全てのページをデザイン制作するかどうかは、**クライアントの要望と予算**によって決定するようにしています。予算が少なければトップページと他に確認したいページを選んでいただいてそのページ分だけのデザイン制作費で押さえておく、とかします。何度か一緒にお仕事をさせていただいているクライアントさんの場合は、僕が作るデザインの雰囲気などもある程度把握してくださって「トップページだけであとはお任せします」と言ってくださるクライアントさんも多く見えます。そういう点は、長くお付き合いさせていただくから実現できるコストダウンと言えるでしょう。 ## コーディングとWordPress実装 最終的にWordPressテーマにする場合は、最初からWordPressの中で制作するようにしています。 以前はHTML/CSS/JavaScriptでコーディングし終えてから、WordPressテーマに変換していく方法で制作していましたが、静的HTMLをそっくりそのままWordPressテーマ化できるというわけでもないので、最近では最初からローカル開発環境にWordPressをインストールし、テーマを設定してからコーディングを行っています。（コーディング環境はCoda2.5+Prepros+MAMP） ## 動作確認とバリデーション 現在のコーディング環境はとても気に入っていて、Codaでコーディングし、PreprosでSassをコンパイルし、リアルタイム表示させています。そして、レスポンシブデザインに対応したコーディングを行う場合には、特別な理由がなければモバイル環境からコーディングを始めるのですが、動作確認には最新ブラウザとiOS Simulatorも利用します。 バリデーションに関してはちょっと良い方法が思いついていなくて、実際に出来上がったソースコードを[The W3C Markup Validation Service](https://validator.w3.org/)で検証したりしています。何か別の良い方法がないかなぁと探しているところです。 WordPressテーマとしてのバリデーションは[Theme Check](https://ja.wordpress.org/plugins/theme-check/)というプラグインを利用して、エラーが発生しないようにしています。最低限こちらのプラグインでチェックしておけば、**WordPress公式ディレクトリ登録への申請ができるレベル**にはあるという認識でいます。 ## まとめ このような流れで僕の場合はWordPressテーマ制作を行っています。他にも色々と良い流れもあると思いますし、もっと効率化を図れる方法があればご指導いただきたいと思います。ご参考になれば幸いです。