コーディングを開始する前に、デザインを紙に印刷して全体を把握する

これは大切だと感じてずっと実践していること。
デジタルから入らず、まずはアナログから入るようにしてます。いただいたデザインを紙に印刷して見渡すことにより、サイトの全体像が頭の中に入りやすくなります。

また、共通項目を見つけることができるので、無駄なコーディングを避けることも可能に。「ココとココのスタイル同じだね。じゃあ、こっちコーディングしたらあっちにコピペすればOK。」のような感じで。これってかなりの時間短縮になります。

PC用デザインをもとにブレイクポイントを決める

ブレイクポイントのだいたいの目安はあらかじめ決めてあります。私の制作の場合、スマホは375px以下、タブレットは768px以下にしておいてます。

これはiPhoneとiPadを基準にしてます。ただ、タブレットを横向きにした時にはPCと同じレイアウトで表示されるようにし、スマホを横向きにするという人は少ないかと想定できるので、ブレイクポイントとして意識しているのは各端末の縦向きでの表示です。

あと、PCデザインの各要素を一つずつ見ていって、横幅が余白も考慮されて、きれいにおさまるレイアウトも考えてます。

たとえば、このブログのトップページにあるブログ記事一覧のように３列レイアウトの要素があったとします。タブレット768pxがブレイクポイントだからといって、768pxで2列表示に切り替えようとすると、要素によっては見づらい可能性が出てきます。

3列レイアウトだと余白が少なくて、ちょっと窮屈ですよね。なので、この記事一覧部分だけちょっと大きめの820pxをブレイクポイントとして設定します。

左に画像、右にテキストという配置はよくあるレイアウトですね。この場合でもブレイクポイント768pxでレイアウトを切り替えると、画像の下に変な余白が大きく出てしまって左右のバランスが悪くなるので、もうちょっと大きめの980px辺りからフォントサイズを小さくしてみたり、余白を狭めてみたりして調整したりします。

このように、端末を基準にするのではなく、コンテンツなどの要素を基準にする考え方も合わせて必要になってきます。結構難しく聞こえるかもしれませんが、慣れると「あ！ここ絶対おさまらない。」という感じの感覚が身についてきますので、これに関しては実践あるのみです。

ヘッダーやフッターなどの共通部分は先に完成させておく

HTMLは内の要素からヘッダー、コンテンツ、フッターと上から順番に１ページ毎にコーディングしていたのですが、これやると効率が悪いことが分かり、共通部分だけ先に完成させてしまいます。内、ヘッダーのロゴやナビゲーション、フッター、サイドバーも全ページ共通項目であれば先に作っておいたり、HTMLだけではなく、CSSでデザインもつけちゃいます。

こうして、あらかじめコーディングした共通部分のファイルを、全ページ分複製しておくことにより、無駄な作業を省くことが出来ます。

残りは共通項目以外の、コンテンツ部分を集中して作業すればいいので、気分的にもラクになります。

HTMLとCSSは1ページ毎に1ファイルで1度に作成して、CSSは後でまとめる

私のコーディング方法は特殊かもしれませんが、先述した共通部分のCSSを作成したら、CSSファイルを複製して１ページ毎に用意してます。HTML１ファイルに対しCSS１ファイルというかたちで。

これまで色々なサイトをコーディングしてきて、色々なクライアントとやりとりしてきたのですが、コーディング最中に変更がある事が結構あったのです。コーディング開始後の変更はNGとすべきなのですが、クライアントの要望であればできるかぎり対応したいという気持ちもあり、変更を受け付けているんですが、途中の仕様変更ってCSSファイルがぐちゃぐちゃになりやすい原因の一つでもあったりします。

柔軟に対応するために、CSSは１ページ毎に用意して、WordPressテンプレート化させる前に１つのファイルにまとめるようにしてます。ちょっと手間かかりますが、この流れがきれいなCSSファイルを作るベストな方法でしたので、これでコーディングしてます。

同じスタイルであっても違うページであれば、セレクタは別に設定する

ブログの場合、トップページとカテゴリページの記事一覧は同じスタイルであることが多いです。なので、CSSセレクタは同じにしちゃってもいいかなと思いがちですが、後々レイアウト変更があった際に、作業しづらくなります。

サイト運用をしていると「トップページの記事一覧だけレイアウト変えたい。」といったような部分的な変更が入る可能性があります。こういった場合に、セレクタを同じにしているとカテゴリ記事一覧も同じように変更されてしまうので、CSSだけではなくHTML（WordPressテンプレートPHP）の変更も必要となります。

変更作業者が同じ人であれば、まだすぐ理解できるのですが、他の人である可能性もあります。なので、引き継ぎしやすいWordPressテンプレートを制作するためにも、同じスタイルであってもセレクタは別に設定しておくことをおすすめします。

WordPress化させる前にCSSだけは完成させておく

１ページ毎に作成しておいたCSSファイルは、WordPressテンプレート化する前に、すべてまとめて完成させておきます。後から部分的な変更が入る事があるので、それに関しては別途CSSを修正しますが、テンプレートを作成し始める前にCSSファイルをさわらなくてもいいくらいに完成させておきます。

逆に、この時点でCSSコーディングをしなくてもいい状態に完成しているはずです。むだな工程をふやさないためにも、これを意識して作業してます。これ結構重要です。

ただ、WordPressプラグインを使った場合にCSSコーディングが必要なケースが出てきます。これに関してはある程度仕方ないかな、と割り切ってますが、事前に準備できるものはしておいてます。

一番利用するのが問い合わせフォーム用のプラグイン『Contact Form 7』。事前にセレクタを調べてあるので、テンプレートを用意しておいてコピペで対応してます。

wpcf7-text

テキスト

wpcf7-textarea

テキストエリア

wpcf7-email

メールアドレス

wpcf7-url

URL

wpcf7-tel

電話番号

wpcf7-radio

ラジオボタン

wpcf7-checkbox

チェックボックス

wpcf7-date

日付

wpcf7-submit

送信ボタン

こんな感じであらかじめセレクタが分かっていれば、HTMLを作成している時にCSSコーディングしておけますからね。

WordPressテンプレート化は必要な分の空ファイルを先に用意しておく

WordPressテンプレート化を開始する際に、まず初めに必要な分の空ファイルを用意しておきます。タスク管理ですね。先を見ながら作業することで効率化を図ることができるので、あらかじめ必要な分のファイルを用意してます。

手間のかかるものを後回しにして、簡単なものから完成させる

以前はトップページからナビゲーションに並んでいる順番にコーディングしていたのですが、これ結構効率悪いんですよね。

WordPressテンプレートのコーディングは、ある程度対応できるようになってきてスムーズに進行できるようになってきたのですが、それでもたまにハマる事があります。この前は、固定ページに記事一覧を表示させる際に、ページネーションをつけるやつでハマりました…。あれ結構めんどいです。

ハマると色々調べたり、検証したり、何気に時間がかかるものです。これやっていると時間があっという間に過ぎていき、かなり焦ってきます。精神的によろしくない。

なので、このページはちょっと危険そうだなと思われるページは後回しにして、即完成できそうなページからコーディングしてます。私の場合は、この方が何気に順調に進むんですよね。

クライアントに進捗説明する時も、「もうここまで進んでるの！」って感じになりますし。序盤でハマってしまうと進捗を知らせるのも微妙になりますからね。

WordPressブログだけなら丸１日でコーディングできる

これは仕様にもよるのですが、一般的なWordPressブログをコーディングするのは１日あれば終わります。効率的に作業するポイントさえおさえておけば、意外にできるものです。

今回いろいろなポイントをご紹介しましたが、この中で最も大切なのは、どのようなサイト構成であっても、かならずデザインを紙に印刷して全体を見渡すこと。全体を把握していないとほぼ確実に無駄な作業が出てきますから。

コーディングする前にどんな準備をするかで、効率は変わってきます。この作業を怠った時はいつも後悔しているので、みなさんも気をつけた方がいいですよ。

今回ご紹介した８つのポイントでした。

みなさんの爆速コーディングポイントも、ぜひ教えてください。