2018年08月17日 WordPressテーマ制作

【WordPress】１からオリジナルテーマを制作してみた話 （デザイン制作）

前回はWordPressでオリジナルテーマ制作の事前準備でした。

【WordPress】１からオリジナルテーマを制作してみた話 （事前準備）

今回は、ブログのデザインを作っていく段階をまとめてみました。
細かな手法は省きますが、流れを段階的に紹介して行きます。

スポンサードサーチ

デザイン制作の前に考えること

サイトのイメージ

「シンプル、わかりやすい」

あまりごちゃごちゃしたものが好きではないので、この点に重点を置いて参考にするサイトを探しました。

探すのに使ったサイト&方法

・https://sankoudesign.com/category/simple/

・http://muuuuu.org/

・googleでひたすら検索（原始的、、）

結局、メインビジュアルもいらないかなと思い、他の皆さんのブログをところどころ参考にしました。

構成はどうするか

全体の構成は下記のように考えました。

HOME
｜ーアーカイブ（タグ、カテゴリー共通。→カテゴリは、「Web」「雑記」）
｜ー記事詳細
｜ープライバシーポリシー
｜ー問い合わせ
｜ープロフィール
｜ーサイトマップ

同時に、手書きでワイヤーフレームを作成しました。
（裏紙に書いていたので、デザイン制作後に捨ててしまいました。。）

制作が必要なページは何か

実際に制作が必要なページを洗い出します。

1. front-page.php（HOME）
2. archive.php（投稿一覧ページ）
3. single.php（記事詳細ページ）
4. page.php（固定ページ）
5. 404.php（404ページ）

「問い合わせ」や「プロフィール」、「プライバシーポリシー」など、頻繁に更新を行わないページは、固定ページで作成します。

どういう機能を入れたいか

必要な機能をリストアップします。

• 投稿機能
• お問い合わせフォーム
• 検索機能
• 月別アーカイブ
• 人気記事の表示
• 関連記事の表示
• サイトマップ

これでデザイン制作が必要な箇所を把握します。

デザイン開始

手書きのワイヤーフレームや上に書いたことを踏まえて、デザインを制作していきます。

前回も書いたのですが、使用したツールは、「Figma」です。

こんな感じで作成しました。

※現在のデザインと違うのは、完成後に何度か修正を行っているからです。

デザインするにあたって困った３つのポイント

実際にデザインをしてみて、困ったことは多かったのですが、特に悩んだのがこの３つです。

グローバルナビには何の項目を入れるか

見に来てくれた人が見やすいように、考慮する必要がありますが、ヘッダーのグローバルナビに何を入れるかは悩みどころです。

最初はカテゴリだけ入れておこうと思ってましたが、そこまで増えないだろうと思い、結局、自己紹介などの固定ページも含んだ形にしました。

ただ、他の箇所にも固定ページのリンクは設置しているので、カテゴリが増えてきた場合は、その都度改修して行こうと思います。

スマホ版のグローバルナビはどうするか

PC版ヘッダーに項目を表示させていますが、スマホ版で常に表示させるのは邪魔なので、ハンバーガーメニューにしました。

また、メニューを表示させる時のアニメーションもどうしようか考えた結果、現在のように、右上のアイコンをクリックすると、スライドして表示させるようにしました。

レスポンシブは何段階で設定するか

普段の業務では、２段階（スマホ、PC）のみで組むことが多いです。
対応するデバイスは多い方が良いのですが、その分、手間もかかり、費用もかさむ為
です。

しかし今回は、そんなこと気にしなくても良いので、最終的に３段階で設定しました。
段階は下記の通り。

• スマホ〜iPad縦
• iPad縦〜PC小さめ
• PC

これが絶対的な正解ではないので、その時々に合わせて変えて行こうと思います。

スポンサードサーチ

終わりに

これでなんとかデザインは完成。

普段自分でデザイン制作をしてるわけではないので、いざデザインするとなると難しくもあり、楽しくもありました。

実際やってみて思うのは、デザインはサイトを運営していく上で欠かせないスキルだということ。

ということで、デザインが完成したので、次回はコーディング編をお送りします。