アフィンガーで作るおしゃれな女性向けサイトのカスタマイズ方法

お悩み犬

SEOに強いと言われるワードプレスのテーマ「Affinger5」を使ってみたいけど、女性向けのビジュアルに訴えかける事が出来るサイトにカスタマイズ出来るか知りたいです

こんにちは！HIROHIRO（ヒロヒロ）デザインのTAEです。SEOに強く、多くのブロガーやアフェリエイターの方に好まれているワードプレスのテーマアフィンガー ５を使って女性向けのサイト型のホームページを作るメリットや理由をお伝えしたいと思います。

TAE

アフィンガー ５の基本情報

アフィンガー の魅力的な特徴

• SEOに強く、収益が発生しやすい
• 無料配布のテンプレートが豊富
• 「見出しのデザイン」「関連記事」「カテゴリ」「SNSアイコン」など細かい部分も個別に色やデザインの指定が出来る

お悩み犬

アフィンガー５がブロガーやアフェリエイターにとってとても魅力的なのは分かったよ。でもさ、ライオン！？なんか怖い雰囲気のテーマだね。作りたいのは柔らかい、女性らしいサイトなんだけどこんな「戦う」雰囲気で出来るの？？

怖いよね。私も初めてみた時は好みのデザインじゃ無いな、と失礼ながら思ったよ。そしてテーマをインストールした時の初期の状態がコレ

TAE

お悩み犬

。。。。。

それを最終的にこんな感じのトップページにする事が出来るよ。しかもカスタマイズだけで追加CSS無し。私は基本的にコーディングをしないwebデザイナーだからカスタマイズでどこまで世界観が表現出来るかをとても重視してテーマを選んでいるよ。色々なテーマを見たけどその中でもアフィンガー5は細かなデザインパーツの設定までこだわる事が出来るのがとても優れているなとデザイナー目線で思っているよ

TAE

お悩み犬

カスタマイズだけでこんなに変わるの！！？すごい！女性向けの世界観を表現できるカスタマイズのコツを教えて！

アフィンガー ５で作るおしゃれなトップページのカスタマイズ方法

女性向けサービスを展開している個人事業主様のサイトを例にしてトップページのカスタマイズ方法のコツを解説していきます。例えば、サロンや、オンラインサービスを展開している個人事業主様の場合、サイトのトップページで見せる世界観がとても重要になります。女性は第一印象で思った視覚的な印象でそのサイトを読み進んで行ってくれるかが決まります。「この人のセンス好きだな」「この人のサービス受けてみたいな」と思わせるヘッダー画像の作成。そしてトップページにサービスの「コンセプト」を持ってくる事でサイトやサービスの意図を説明する事が大事です。

パララックス効果を使ったヘッダー画像でサイトの世界観を表現

アフィンガー ５のヘッダー画像設定の中に「パララックス効果（視差効果）」があります。これは、ヘッダー画像の後ろに背景画像を設定する事で背景が止まっていてその上をヘッダー画像が動いている様に感じる効果になります。

設定場所は外観＞カスタマイズ＞ヘッダー画像の中で背景画像をヘッダー画像それぞれを設定します。アフィンガー ５はWixやTCDのテーマに比べて動きが少ないテーマなのでパララックス効果を使う事で印象的なヘッダーを作る事が出来ます。

注意　パララックス効果はPCのみに適用されますのでスマートフォンやタブレットでの見え方はチェックしながら設定する必要があります。

固定ページをトップページにする事でデザインの自由度を上げる

パララックス効果で印象的なヘッダー画像を設定した次は、トップページを整えていきます。以下、アフィンガー５の公式サイトで公開されているサンプルサイトです。ちなみにこちらはテンプレートが無料配布されています。

このサンプルサイトの様に、ヘッダー画像の下に４つまでの画像を配置してそれぞれリンク先を設定する

「ヘッダーカード」という機能もアフィンガー ５のカスタマイズ機能の特徴の一つです。

ブログ型でカテゴリ別に印象的に表示する場合や、サイト型サイトでも、最新講座やメルマガ登録フォームへの誘導などトップの初めに持ってきたいリンク先がある場合はとても効果的に使う事が出来ます。

現在私のサイトではヘッダーカードを使用していませんが、今後コンテンツの内容が増えて来たり、サービス内容が変わって来たら取り入れたいと思っている魅力的な機能です。

ヘッダーエリア下にサイトの「コンセプト」や「目的」「サービス内容」を自由な順番で表示させていく為には「固定ページ」をトップページにする、という方法があります。

あらかじめトップページ用の固定ページを作成しておき、設定します。

まずはAFFINGER管理＞トップページ＞固定ページの番号と指定します。

次に外観＞カスタマイズ＞ホームページ設定からトップページに表示する固定ページを指定します。

私は、以前AFFINGER管理の設定だけして、カスタマイズのホームページ設定をしていなかった為、サイトSEOが検索時に反映されないという事がありました。私の失敗を踏まえて皆さんは必ず両方設定してくださいね。

購入特典付きアフィンガー ５を購入する方法

こちらのページのリンクボタンからアフィンガー ５を購入すると今なら女性向けサイトへのカスタマイズ方法を納めたコツの５つの動画をプレゼントしています