ここまで、TopPage Menu Staff Access のデザインを作成してきました。次に、BlogList と BlogPage の2つのページを作成します。
この2ページは、あとで学習するWordPressの「投稿」機能につながるページです。
WordPressでは、ブログやお知らせなどの記事を「投稿」として登録すると、登録した記事を一覧で表示したり、1件ずつ詳細ページとして表示したりできます。
今回作成する2ページは、
BlogList ＝ 投稿された記事を一覧で表示するページBlogPage ＝ 選択した1件の記事を詳しく表示するページ
という役割になります。
Figmaでは見た目をデザインしますが、実際にWordPressで制作するときは、記事タイトル・日付・カテゴリー・アイキャッチ画像・本文などが、WordPressに登録された投稿データから表示されるようになります。
WordPressでは記事を1件ずつHTMLで作るわけではありません
通常のHTMLサイトであれば、記事を増やすたびに新しいHTMLファイルを作成する方法もあります。
WordPressでは、管理画面から新しい記事を投稿すると、その内容をもとに一覧ページや詳細ページが自動的に表示されます。
例えば、新しい記事を追加すると、一覧ページには、アイキャッチ画像 記事タイトル 投稿日 カテゴリー 抜粋などが表示されます。
その記事をクリックすると、詳細ページへ移動し、
記事タイトル 投稿日 カテゴリー アイキャッチ画像 本文
などが表示されます。
つまり、今回Figmaで作るのは1件ずつの記事そのものではなく、「投稿データが入ったときにどのように表示するか」というページのひな形です。この考え方を意識しながらデザインしてみましょう。
BlogList｜投稿一覧ページを作成しよう
まず、ブログの記事を一覧で表示する BlogList を作成します。
今回の見本では、ページ左側に記事一覧、右側にサイドバーを配置しています。
記事一覧には、アイキャッチ画像 記事タイトル 投稿日 カテゴリー 抜粋 And Moreボタン を配置しています。
同じ形式の記事が縦に繰り返されるため、1つの記事パーツを作成して複製する方法や、これまで学習したコンポーネントを利用する方法も考えてみましょう。
WordPressでは記事数が増えていくため、同じデザインで複数の記事が並んだときに見やすいことも重要です。
記事一覧では情報の優先順位を考えよう
一覧ページでは、記事のすべての内容を表示する必要はありません。
まず、「どんな記事なのか」が分かり、興味を持った人が詳細ページへ進めるデザインにします。
見本では、画像を大きく見せ、その横に記事タイトル・日付・カテゴリー・短い文章・ボタンを配置しています。画像、タイトル、本文の文字サイズをすべて同じにするのではなく、どの情報を最初に見てほしいのかを考えながらデザインしましょう。
サイドバーを作成しよう
BlogListの右側にはサイドバーを配置します。
今回の見本では、検索 新着情報 カテゴリー タグ バナー を配置しています。
これらもWordPressではよく使用される内容です。
検索では記事をキーワードから探し、カテゴリーやタグでは記事を分類して探しやすくします。
新着情報では、最近投稿された記事を表示することができます。
現時点では実際に検索できる機能を作る必要はありません。Figmaでは、それぞれの機能がどの位置に、どのような見た目で配置されるかをデザインします。
ページネーションも考えてみよう
記事が増えてくると、すべての記事を1ページに表示すると非常に長いページになります。
そこで、一覧ページの下部にはページを切り替えるためのページネーションを配置します。
見本では、1 2 3 4 とページ番号を表示しています。
WordPressで制作すると、実際の記事数に応じてページを分割して表示することができます。
BlogPage｜投稿詳細ページを作成しよう
次に、1件の記事を詳しく表示する BlogPage を作成します。
BlogListから記事を選択すると、このような詳細ページへ移動することを想定しています。
詳細ページでは、記事タイトル 投稿日 カテゴリー アイキャッチ画像 記事本文 を配置します。
一覧ページとは異なり、ここでは記事を読むことが目的になるため、本文を読みやすく表示することを意識してデザインします。
一覧ページと詳細ページの違いを考えよう
BlogList と BlogPage は、同じブログ記事を扱っていますが役割が異なります。
BlogList は、複数の記事から「読みたい記事を探すページ」です。
BlogPage は、選択した「1件の記事を読むページ」です。
そのため、一覧ページでは複数の記事を比較しやすいレイアウトにし、詳細ページでは1件の記事に集中して読めるレイアウトにします。
この違いを意識して作成してみましょう。
詳細ページにも共通のサイドバーを配置しよう
BlogPageにも、BlogListと同じようにサイドバーを配置します。
検索 新着情報 カテゴリー タグ バナー
など、複数のブログページで共通して使用する部分です。
BlogListで作成したサイドバーを再利用すると、ページごとに一から作成する必要がありません。
これまで学習したコンポーネントとインスタンスをどこで利用すると効率がよいかも考えてみましょう。
記事の前後へ移動するナビゲーションを配置しよう
詳細ページの下部には、<< 前のページ 投稿一覧 次のページ >>を配置します。
記事を読み終わった人が、前後の記事を読んだり一覧ページへ戻ったりできるようにするためのナビゲーションです。
ページの一番下まで読んだあと、次にどこへ移動できるかが分かるようにしておきましょう。
WordPressではテンプレートとして使用します
今回Figmaで作成する BlogList と BlogPage は、WordPressではページのテンプレートとして考えることができます。投稿一覧では、登録されている複数の記事を同じデザインで繰り返し表示します。
投稿詳細では、同じレイアウトを使いながら、表示する記事によってタイトル・画像・本文などが変わります。
WordPressのテーマ制作では、用途によって home.php や archive.php などが記事一覧に使われ、投稿の詳細ページには single.php が使われます。
今はPHPを書く必要はありませんが、「あとでWordPressのデータがここに入る」ということをイメージしながらFigmaでデザインしておきましょう。
完成したら確認しよう
レイアウトガイドを非表示にして、2ページを並べて確認します。
- BlogListは複数の記事を探しやすいレイアウトになっているか
- BlogPageは1件の記事を読みやすいレイアウトになっているか
- 記事タイトル・日付・カテゴリーなどの情報に統一感があるか
- 記事一覧の画像やカードの大きさが揃っているか
- サイドバーの幅や位置が揃っているか
- 共通するパーツを再利用できているか
- ヘッダー・ページタイトル・フッターがインスタンスになっているか
- ページ全体の余白や左右位置が揃っているか