フロントページを作ろう！
ブログの環境が準備できたら、いよいよコンテンツ制作が始まります！
ここからがいよいよスタートです！
ということで、まずはフロントページと呼ばれるものを作っていきましょう！
フロントページとは、ブログの入り口となるトップの画面です。
ホーム画面とも呼ばれます。
あなたのブログを訪れた時に、ユーザーが最初に目にするページなので、
できるだけ魅力的なものにしたいですよね。
といっても、
フロントページを作るにはどうすればよいでしょう？
どんなデザインやレイアウトが理想的ですか？
いきなり白紙の画用紙を渡されて、
多くの人が見たくなるような魅力的な絵を描いてくださいと
なかなかハードルの高い注文をされた感じではないでしょうか？
イメージができていればいいですが、今からブログを始める人は
きっとそこまで具体的に考えていないはずです。
ということで！
今からフロントページの作り方とあわせて、
デザインを考える為のヒントをご紹介します！
この記事に書かれたヒントを参考に
あなたが理想とするページを作り上げてください！
フロントページの作り方と設定方法
まずは、フロントページの作り方について説明します。
WordPressブログを作成する時には、
固定ページと投稿ページの2種類の素材を使うことができますが、
フロントページは、カテゴリに所属させない単独のコンテンツになるので、
作成する際は固定ページを使うのが一般的です。
ということで、まずは以下を参考に、仮の状態でも良いので
フロントページに使う固定ページを新規追加してみましょう！
また、作成した固定ページですが、そのままではまだ
WordPressがフロントページとして認識できていない状態なので、
続けて以下の手順でフロントページの設定をしましょう！
フロントページの設定手順①
メニューの「設定」＞「表示設定」を選択します。
フロントページの設定手順②
表示設定画面が開いたら、「ホームページの表示」＞「固定ページ」を選択します。
フロントページの設定手順③
固定ページの選択欄の下にある「ホームページ」から作成した固定ページを選択します。
（手順②の図を参照してください。）
固定ページの選択欄には、公開済みのページのみ表示されるので、
見つからない場合は対象の固定ページが下書きのままになっていないか確認しましょう。
もし仮の状態で公開することが少し気になる人は、
ある程度フロントページを作り込んでから作業をしましょう。
フロントページの設定手順④
固定ページを選択したら、画面下にある「変更を保存」ボタンをクリックして
設定をWordPressに反映します。
以上の設定が終わったら試しにブラウザからブログにアクセスしてみてください。
設定した固定ページがトップ画面として表示されるようになっているはずです！
フロントページのデザインパターンを紹介
ここからは、実際にどんなページを作っていくかというお話をします。
まず大切なのは、どんなデザインにしたいのかイメージすることです。
技術的にできるできないというものありますが、それは後で良いです。
調べてできなければ少しずつイメージを修正すればいい話なので、
理想のイメージをまず思い浮かべて、今のスキルで
どこまでそこに近づけるかということを考えましょう！
といっても、右も左もわからない状態で
いきなりデザインを考えるというのは難しいので、
ヒントとしてフロントページのレイアウトパターンをいくつかご紹介します！
また、上記とあわせて、フロントページのレイアウトについては、
WordPressのテーマによってもできること、できないことが
変わってきたりするので、その辺りもしっかり調べておきましょう。
ちなみに、本ブログはCocoonを使っていますが、同じように
Cocconをお使いの方はこちらも参考にしてください。
そして、これからブログを始める、Cocoonを使おうと考えている方は、
Cocoonと公式に提携している以下のエックスサーバーの利用がおすすめです。
ちなみに、本ブログもエックスサーバーで運用しています。
ブログの開設手順についてはこちらでわかりやすく説明しています！
ブランドイメージを重視したレイアウト
あなたのブログをイメージした写真やイラストを背景として
ページを作成するレイアウトです。
メリット … おしゃれでユーザーにインパクトを与えることができる。
デメリット … 記事へのアクセスまでが１操作多くなる。
おしゃれなカフェやセレクトショップなどに入った時と同じように、
ブログがどんな雰囲気で、どんな趣旨なのかを
文章ではなく視覚で瞬時に伝えることができます。
ページ操作としてはシンプルに、メニューやENTERボタンのみ設置して、
具体的なコンテンツは次のページで取り扱うような形になります。
例では画面の下にボタンを設置していますが、中心部に置いたり、
使う画像にあわせて配置を変えてもおもしろいかもしれません。
記事へのアクセスを重視したレイアウト
記事のリストを中心としてページを作成するレイアウトです。
メリット … アクセスした瞬間に記事を見つけることができる。
デメリット … ブログの雰囲気がごちゃごちゃする。
私たちが普段使っているWEBサイトで例えると、
Yahoo!などのポータルサイトや、amazonや楽天などのECサイトに近いイメージです。
記事を中心として、左右にメニューやカテゴリ別の目次、お知らせなどを配置します。
サイト内を検索できるボックスを設けるとさらに使い勝手も良くなります。
サイトの全容をマップで見せるレイアウト
あなたのブログの全容を示すマップを背景として
ページを作成するレイアウトです。
メリット … ブログの全容を視覚的にわかりやすく伝えることができる。
デメリット … カテゴリを追加したり修正する度にメンテナンスが大変。
マップといっても、表現の方法はいろいろあります。
ブログ全体を建物として表現したり、
動物などの生き物にしてもおもしろいかもしれません。
また、背景に設定したマップの画像にあわせて、
該当するカテゴリの画像をリンク付きで配置すれば、
地図や建物の中を移動するようなイメージでブログの記事へアクセスできます。
技術的に少しハードルが高く、
初心者向きではないというのも少し気になるところです。
開催中のキャンペーンをアピールするレイアウト
イベントやキャンペーン情報などをトップ画面で告知するレイアウトです。
メリット … ユーザーをキャンペーンに誘導できる。
デメリット … キャンペーンが目立つことで他の記事の存在感が薄くなる。
キャンペーンに関連する画像を背景にして、リンクを設置することで、
訪問してきたユーザーに確実にキャンペーンの存在を伝えることができます。
ブログの存在を知らない人が先にキャンペーンの内容を読んでも
あまり効果はないかもしれないので、
どんなブログなのかある程度認知されてから適用するのが良いかもしれません。
アニメーションを使って楽しませるレイアウト
画面の背景にアニメーション画像を設定するレイアウトです。
メリット … 見た目が楽しくインパクトがある。
デメリット … 環境によってサイトの動作が重くなる。
画像よりも動画を使う方が、ユーザーへのインパクトとしては大きく、
文章では表現できない内容も伝えることができます。
例えば、企業のホームページだと会社の雰囲気を見せたり、
ブログのジャンルによっては、技術力もアピールできたりします。
また、画面全体にアニメーションを仕込むという方法以外にも、
マウスオーバーなどした際に画像が動くようなギミックを仕込む
という方法も使っていて楽しいかもしれません。
フロントページのデザインガイド まとめ
フロントページの作り方とデザインについて以下説明しました。
・フロントページについて
・フロントページの作り方
・フロントページの設定方法
・フロントページのレイアウトパターン紹介
今回イメージしたフロントページのデザインを作るにあたって、
技術的な問題で実現できなかったアイデアも出てくると思いますが、
あきらめるのはまだ早いです。
これからブログ運営を続けていくうちに
あなたの知識はどんどん広がりスキルも身についてくるので、
いつか実現できる日が来るはずです。
その日までアイデアは大切にとっておきましょう！
