オシャレな印象のWEBサイトを目指しすぎて、友人や知り合いには好評なのにアクセスは一向に増えない・・・（涙）ということを経験してきました。
「オシャレな印象の集客できるサイトをつくりたい！」
お客様からアクセスされない自己満足なサイトを改善するべく、本サイトではSEOに強いAFFINGER5 WINGを採用しています。
こんな方にオススメ
- SEOに強い有料テーマAFFINGER5 WINGを検討中
- デザインがステキな他のテーマが気になっている
- SEOとオシャレなデザインを両立したサイトをつくりたい
女性のみなさんなら「女性らしい印象のオシャレなサイトデザインははずせないよ〜」という方が多いのではないでしょうか？
男性的なかたいイメージがあるAFFINGER5 WINGですが、写真、配色、フォント、効果などの設定によって複雑なつくり込みをしなくても、女性らしい柔らかい印象のサイトデザインにすることができます。
印象がこんなにちがう！
いかがですか？
同じデザインであっても、配色やフォント、画像がちがうだけでこれだけ印象が変わります。
左側は本サイトの女性らしい色やフォント、画像を設定しています。右側は、アフィンガーで提供されているデフォルトのカラー、フォント設定のままでオシャレな画像は入れていません。
ポイントは3つ
- ①オシャレな画像をつかう
- ②女性らしい配色やフォントを設定
- ③やわらかい印象を与える効果
①オシャレな画像をつかうだけで印象が変わる
どんな画像をつかうかでサイトの印象は大きく左右されます。
与えたい印象にマッチする画像を利用するようにしましょう。
ご自身で準備するのが難しい場合は、無料で商用利用も可能な画像ダウンロードサービスがありますのでご活用くださいね。
オススメの画像ダウンロードサービス
②女性らしい配色やフォントを設定する
あなたがターゲットとする読者層に向けたサイトのデザイン、配色やフォントを参考にしましょう。
女性向けで参考になるサイト
雑誌のオンラインサイト
女性向けポータルサイト
エステサロン
お料理教室・クッキングサロン
海外の女性向けワードプレステーマ販売ページ
参考になるサイトや配色のイメージは、Pinterestを利用して保存・整理がオススメ！
一覧をイメージで閲覧することが可能なため、テーマごとにボードを設定して仕分けると効率よく情報を利用することができます。
③フワッと表示させるなどの効果を追加する
オシャレなサイトを訪れたときにページがフワッと表示されることがありませんか？
フワッと表示されるだけで、ページがやわらかく優しい印象になります。
ただし表示効果を設定しすぎると、ページ全体の表示速度が遅くなってしまいページ離脱の原因となってしまうためSEO対策としては適切ではありません。
本サイトでは、過剰にならないよう
- フワッとページ表示する
- アイキャッチ画像にマウスオーバーしたとき拡大する
のみを設定しています。
設定方法
step
1【ダッシュボード】をひらいて、【外観】→【カスタマイズ】を選択
AFFINGER5のカスタマイズ画面が表示されます。
step
2スクロールダウンして【追加 CSS】をクリック
CSSを追加する設定画面が表示されます。
step
3【追加 CSS】ページに以下のコードを追加
CSSコードをコピーして貼りつけてください。
/*------------------------------------------------
ページをフワッと表示
------------------------------------------------*/
body {
animation: fadeIn 2s ease 0s 1 normal;
-webkit-animation: fadeIn 2s ease 0s 1 normal;
}
@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
/*------------------------------------------------
アイキャッチ画像を拡大表示
------------------------------------------------*/
img.attachment-st_thumb150 {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
img.attachment-st_thumb150:hover {
-webkit-transform: scale(1.03);
transform: scale(1.03);
}
「公開」ボタンをクリックして変更を保存。
設定完了です。
まとめ
SEOに強いといわれるAFFINGER5 WINGをつかって、女性向けデザインのサイトにするための3つのポイントは
- センスよいオシャレな画像
- 女性らしい配色やフォント設定
- やわらかい印象をあたえる効果
本サイトはAFFINGER5 WINGの標準版を利用しておりオプション機能の追加などはしておりません。
ターゲットである女性を意識しつつも必要な情報をわかりやすく提供することを目指しています。
AFFINGER5 WINGをつかい女性向けデザインの3つのポイントをおさえて、テーマである「40代、50代の女性がステキに歳をかさねる暮らし」にマッチさせました。
SEO対策とデザインをバランスよく実現して、ステキなサイトをつくってくださいね！
