【WordPress】オリジナルテーマ制作に向けてワイヤーフレームを作成しよう
どうも、ナツリンです。
最近は、WordPressのオリジナルテーマを独学で制作した話をしています。
今回のテーマは「ワイヤーフレームの作成」についてです。ワイヤーフレームは、Webサイトの各ページの構成を表現した設計図のようなものです。1つ1つのページ構成をしっかりと考えることで、ユーザーの導線まで意識された素敵なオリジナルテーマを作りましょう！
▼ 関連記事だよ
あわせて読みたい
あわせて読みたい
ワイヤーフレームとは
ワイヤーフレームとは、「Webサイトの画面設計をする際に使われる、どこに何を配置するかをざっくり決めるための“構成図”のこと」です。
特徴として、色や写真・装飾は使わずに、シンプルな線やテキストのみで作成されます。ワイヤーフレームの目的は「ナビゲーション、見出し、文章、画像、ボタンなどの“配置”と“優先順位”を明確にすること」だからです。
いきなりデザインを始めると見た目にばかり意識が向いてしまい、構成がブレてしまうことがあるんですよね。事前にワイヤーフレームを作成することで、全体の設計ミスを減らせて、修正コストも抑えることができます。
装飾的な部分は一旦置いておいて、「必要な機能が満たされているか」「ページを訪れた人がどのような導線をたどるのか」を集中して考えることが大切、ということになりますね。
ワイヤーフレーム作成が必要なページ
私の場合、個人ブログでの活用を目的にオリジナルテーマを制作していたので、以下のページのワイヤーフレームを作成しました。
ワイヤーフレームを作成したページ
- TOPページ
- 投稿ページ（投稿する記事）
- 固定ページ（プロフィール、プライバシーポリシーなど）
- アーカイブページ（カテゴリー、タグごとに記事が一覧で表示されるページ）
- 検索結果ページ
- 問合せページ
- 404ページ（URLが見つからなかった場合に表示されるページ）
どのようなサイトであっても上記のワイヤーフレームは最低限必要になるかと思いますが、オリジナルテーマの活用目的に合わせて、ページを追加していただいてOKです。
ワイヤーフレームの作成手順
それでは、実際にワイヤーフレームを作成した手順を紹介しますね。
手順1：各ページに必要な要素を洗い出す
まず、各ページに掲載したい要素を洗い出します。
全てのページに共通して掲載したい要素と、それぞれのページに特化して掲載したい要素に分けて洗い出しましょう。
共通する要素とは主に、ヘッダーやフッター、サイドバーなどに掲載する、「ロゴ」「メニュー」「カテゴリー」などの項目で、全てのページに同じものをコピーして貼ることができるものです。
一方、それぞれのページごとに特化して掲載する要素とは、例えばTOPページであれば「メインビジュアル」や「カルーセル」、投稿ページであれば「アイキャッチ画像」「目次」「見出し」などの項目で、各ページで見せ方を考える必要があるものです。
■ 全ページに共通する要素
- ロゴ
- メインメニュー
- 人気記事
- カテゴリー一覧
- タグ一覧
- プロフィール
- フッターメニュー
■ TOPページに掲載する要素
- メインビジュアル
- カルーセル（ループする画像）
- 最新記事8つ
- カテゴリーごとに最新記事6つ
■ 投稿ページに掲載する要素
- 記事タイトル
- アイキャッチ画像
- 目次
- 見出し
- 段落
- 引用文
- リスト文
手順2：各ページのレイアウトを作成する
次に優先度を考慮しながら、ページごとに洗い出した要素を並べてレイアウトを作成しましょう。
私はFigmaというデザインツールを活用して、ページごとにPC版（横幅1920px）・スマホ版（横幅390px）の2種類ずつワイヤーフレームを作成しました。
色や装飾は用いずに、洗い出した要素を「優先度に従って」「ユーザーが見やすい導線で」並べていきます。
私は要素を並び替えたり、何パターンか比較したりしながら作成したので、ワイヤーフレームにはかなりの時間を要しました。平日は1日1時間、土日は1日6～8時間ほどやって、2週間で完成したイメージです。
さすが不器用人間、時間かかりすぎですね（笑）
まとめ
以上が、WordPressのオリジナルテーマ制作において、「ワイヤーフレーム」を作成した実際の手順になります。
デザインに入る前にワイヤーフレームを作成しておくことで、全体の設計ミスを減らし、大切な情報が目に入りやすいサイトをつくることができます。
ワイヤーフレームの作成ができたら、次はいよいよデザインの作成に入りましょう！デザインについては次の記事で書いていきます。
今回も最後まで読んでくださりありがとうございました！
▼ 次はデザインを作成しよう
あわせて読みたい
▼ オリジナルテーマ制作の全体像はこちら
あわせて読みたい
