AFFINGER

【アフィンガー】おしゃれサイト作成方法・サンプル・デモサイトあり


パソコンを使う手

WordPress のテーマ「AFFINGER(アフィンガー)」はブロガー向けサイトが作りやすく凝ったオシャレなサイトもコツ一つで簡単に作れます。

オリジナリティあふれるサイトを作ることができる AFFINGER のサンプル(デモサイト)の紹介と、AFFINGER を利用して作る、おしゃれサイトの作り方を解説します。

AFFINGER(アフィンガー)で作ったサンプルサイト(デモサイト)

おしゃれなサイト、ブログ型、サイト型などのサンプル(デモサイト)と、作り方( note で公開中 )です。

(イメージの上にマウスを重ねることで、スクロールして全体を見ることができます)

デモサイト(スタイリッシュ型)

スタイリッシュなデザインを用いた美容院(ショップ型)のデモサイトです。

実際のサイトはこちら

https://wpdemopresents.com/affinger02/

このデザインの作り方は note(こちら) で公開しています(有料記事)

デモサイト(サイト型)

任意の記事を並べたサイト側のデザインを用いたデモサイトです。

実際のサイトはこちら

https://wpdemopresents.com/affinger01/

このデザインの作り方は note(こちら) で公開しています(無料公開中)

デモサイト(クールで大人な演出型)

カクテルを題材にした大人でシックな演出のデモサイトです。

実際のサイトはこちら

https://wpdemopresents.com/affinger03/

このデザインの作り方は note(こちら) で公開しています(有料記事)

デモサイト(ブログ型かわいいパターン)

ピンクを基調に、可愛らしい雰囲気でサイトをかわいく見せたデモサイトです。

実際のサイトはこちら

https://wpdemopresents.com/affinger04/

このデザインの作り方は note(こちら) で公開しています(無料公開中)

デモサイト(シンプル&クール)

AFFINGER の基本機能( CSS 追加なし ) で作るシンプル%クールなデザインです、

実際のサイトはこちら

https://wpdemopresents.com/affinger05/

このデザインの作り方は note(こちら) で公開しています(無料公開中)

AFFINGER(アフィンガー)でオシャレなページを作るポイント

■ おしゃれな画像で魅せる

サイトのファーストビュー(最初に見たイメージ)が魅力的であればあるほど、ユーザー(読者)は一気にサイトの世界に引き込まれます。

トップページのファーストビューとなる場所におしゃれな(クールな)イメージを配置することで、サイトをより魅力的に魅せることができます。

ファーストビューのサンプル

サイトのファーストビューを意識してオシャレに魅せたサンプル

全体をブラックで統一したうえで、真ん中に黄色いカクテルが映え、灯りに照らされた女性バーテンダーの顔が美しさを魅せる、読者の視点を集中させる効果も期待しています。

■ サイト名は、できる限り「ロゴ画像」で作る

ヘッダーに表示する「サイト名」は、文字列(フォント)を利用した場合は(指定のフォントやサイズが利用されない可能性もあり)サイトの雰囲気に合わないこともあります。

サイト名は、別途画像で用意してロゴ画像として表示したほうが、(閲覧しているデバイスに依存せずに)誰が見ても同じようにおしゃれに魅せることができます。

サイト名は画像で用意する

ポイント

サイト名の後ろが単色ではなく、グラデーション色や、なんらかの画像を利用してる場合は、サイト名の画像には「PNG形式」で背景を透過した画像を用意します。

■ 「トップページ」に控えめに動きを出す

ファーストビューで「さりげないアニメーション」を使うと、ユーザーの心を一気につかむことができます。

サイトがポップな場合は、速くシュッと複数の画像を動かし、サイトがクールでシックな場合には、「ゆっくり大きく」魅せることもオシャレな動きのポイントです。

トップページに動きを付けたサンプル

(動画です、再生することで動きを確認できます)

実際のサイトはこちら

https://wpdemopresents.com/affinger03/

ポイント

アニメーションはサイトをおしゃれに魅せる有効な機能ですが、使いすぎると目移りして読みにくいサイトになるため、さりげなく使うのがオシャレです。

■ 幅広のページにする、適切に幅いっぱいにアクセントをつける

一般的に WEB サイトは縦にスクロールするため、横幅が狭いと更に縦長の印象を受けてしまいます。

横幅を広げて、かつ適切に横方向のアクセントをつけることで、縦・横のメリハリがついたおしゃれなデザインになります。

サイトの全体と横に適度にアクセントをつけた例

実際のサイトはこちら

https://wpdemopresents.com/affinger02/

サイトの横幅を広めにとり、かつ、適度に横幅100%に見えるエリアを作ります。

全体を通してみたときに(縦スクロールしたときに)、区切りのあるオシャレなサイトに見えます。

■ 「固定背景」カバーブロックを使う

WordPress の「カバーブロック」を使うことで「おしゃれ」度をアップさせることができます。

「カバーブロック」を使い背景を固定化させることで、「窓効果」を出すことができ、ポイントで使うととてもおしゃれな演出になります。

窓効果で魅せるカバーブロックのサンプル

AFFINGER(アフィンガー)のサイトデザインを作っていくおすすめ手順

AFFINGER は多くの機能、設定があるため、どこから手を付けていけばよいのか最初は迷います。

おすすめの設定する順番を紹介します。

ポイント

(※ AFFINGER にはデザインを拡張できる設定がたくさんありますが本記事では最低限必要な部分に絞って設定手順を順番に紹介します。)

■ Step.1 全体設定(カラーパターンとデザインパターン)

設定場所:「AFFINGER 管理」→「全体設定」

全体設定画面

「赤(エレガント)」や「青(ビジネス)」など10種類以上のパターンが用意してありますので、お好みのカラー配色で設定できます。

※ こちらは全体的な配色を決める場所です。後で部品ごとに配色などの設定を変更することができます。

カラーパターン

(イメージをクリックすることで大きく表示します)

赤(エレガント)

赤(エレガント)

青(ビジネス)

青(ビジネス)

緑(ナチュラル) 

緑(ナチュラル) 

オレンジ(元気)

オレンジ(元気)

ピンク(可愛い)

ピンク(可愛い)

グレー(ダーク)

グレー(ダーク)

赤(やさしい)

赤(やさしい)

 青(やさしい)

 青(やさしい)

緑(やさしい)

緑(やさしい)

オレンジ(やさしい)

オレンジ(やさしい)

 ピンク(やさしい)

 ピンク(やさしい)

 グレー(やさしい)

 グレー(やさしい)

デザインパターン

(イメージをクリックすることで大きく表示します)

デフォルト(グラデーション横)

デフォルト(グラデーション横)

ビジネス(グラデーション縦)

ビジネス(グラデーション縦)

フラット(シンプル)

フラット(シンプル)

キューティー(ストライプ)

キューティー(ストライプ)

ブログ(初心者おすすめ)

ブログ(初心者おすすめ)

■ Step.2 ヘッダーエリアを設定

ヘッダー部分を設定(作成)していきます。

AFFINGER はヘッダーに関わる設定箇所が複数ありますので、次の順番で必要な設定を入れていきます。

1.設定場所:「外観」→「カスタマイズ」→「基本エリア設定」→「ヘッダーエリア」

ヘッダー部分(メニューの上)の背景色や背景画像などを設定します。

2.設定場所:「外観」→「カスタマイズ」→「各メニュー設定」→「PCヘッダーメニュー」

メニュー部分の背景色やメニューの横幅などを設定します。

3.設定場所:「外観」→「カスタマイズ」→「ヘッダー画像」

メニュー下に画像を表示する場合の設定です。

画像を利用する場合は、「背景画像を幅100%のレスポンシブにする」のチェックを付けたほうが横幅一杯に表示しオシャレに見えます。

4.設定場所:「AFFINGER管理」→「ヘッダー」→「ヘッダーエリア」

ヘッダー部分(メニューの上)の細かい設定を行います。

5.設定場所:「AFFINGER管理」→「ヘッダー」→「ヘッダー画像エリア」

メニュー下に表示する画像などの設定となります。

メニュー下の「ヘッダー画像エリア」は「記事スライドショー設定 > ヘッダーコンテンツ設定 > ヘッダー画像エリアのウィジェット > ヘッダー画像(画像スライドショー)」の順番で有効になります(より有効な設定が採用されます)。

記事スライドショー設定「ヘッダーに記事をスライドショーで表示する(※画像スライドショーより優先されます)」をチェックした場合に有効
ヘッダーコンテンツ設定「ヘッダーコンテンツ設定」に入力を行った際に有効
※「外観」→「カスタマイズ」→「ヘッダー画像」で設定した画像の上に表示する
ヘッダー画像エリアのウィジェット「外観」→「ウィジェット」の「ヘッダー画像エリアウィジェット」でコンテンツを設定した場合に有効
※「外観」→「カスタマイズ」→「ヘッダー画像」で設定した画像の上に表示する
ヘッダー画像(画像スライドショー)「ヘッダー画像をスライドショーで表示する(※記事スライドショー有効化時は選択できません)」をチェックした場合に有効

■ Step.3 フッターエリア設定

WordPress の管理画面から「外観」→「メニュー」を選択し、フッターメニューを作成します。

■ Step.4 サイドバー設定

サイドバー部分を設定(作成)していきます。基本的にウィジェットを配置していきます。

  • サイドバートップに必要に応じてウィジェットを配置(プロフィールなど)
  • サイドバーに必要に応じてウィジェットを配置(検索・カテゴリーなど)
  • スクロール広告用に必要に応じてウィジェットを配置(検索・おすすめ記事など)

■ Step.5 記事エリア設定

記事エリアの各パーツの配色などを設定していきます。

最初の「カラーパターン」と「デザインパターン」で基本的な配色などはできているため、微修正をしていきます。

特に記事エリア内で最初に設定しておきたいパーツは <H>タグです。

設定場所:「外観」→「カスタマイズ」→「見出しタグ(hx) / テキスト」

見出しタグの設定画面

左側の設定で「配色」や「形」を指定します。変更すると同時に右側の画面も変わりますので、実際の見た目を見ながら設定可能です。

■ Step.6 トップページ設定

トップページはサイトの顔ともいえる重要なページです。サイトデザインの腕の見せ所ですね。

固定ページを利用してデザインしていくのがおススメです。

  • 固定ページでトップページのデザインを作成する
  • 作成した固定ページをトップページに設定する

設定場所:「外観」→「カスタマイズ」→「ホームページ設定」

固定ページをトップページに設定する

「ホームページの表示」を「固定ページ」に変更します。

トップページをオシャレに魅せるコツ

  • ファーストビュー(最初にユーザーに見える場所)でユーザーの心をつかむ演出を入れる
  • 横方向に広がりを感じるデザインを意識する
  • さりげないアニメーションを入れる
  • 全体の色合い(配色)を統一する(全く違う奇抜な色のパーツを使わない)
  • トップページの画像とテキストのバランスに気を付ける(テキストばかり、画像ばっかりにしない)
  • おすすめ記事への導線を意識する
  • ユーザー(読者)の使いやすさを重視する

■ Step.7 トップページ設定

AFFINGER では、そのほかにも細かいデザインの設定ができます。必要に応じてデザイン設定を行ってください。

AFFINGER のヘッダー構成を解説

■ ヘッダーの自由度が高い(難しい)

AFFINGER は多様なデザイン表現ができます。特に「ヘッダー部分」に工夫が多く、企業サイトから個人ブログまでカバーできる自由度がありますが、その分、ヘッダー回りの構成がやや難しい仕組みで作られています。

ヘッダーまわりのデザインに対する事前知識を紹介します。

■ ヘッダーの構成

AFFINGER はヘッダーの構成が2重になっています。下層には「header」エリア、上層には細かい各ヘッダーエリアが並んでおり、たとえば、下層の「header」エリアに設定した画像などは、上層が透過設定している場合のみ表示されます。

ヘッダー構成図

ヘッダーの構成を理解して適切な場所に画像などを設定していきます。

基本的には、「header」で設定した背景画像などは上書きされますが、背景を透過したメニューなどを作る場合には「header」エリアの設定が必要になります。

ポイント

簡単にサイトを構築した場合、「ヘッダー」「メニュー」「ヘッダー画像」の3か所の設定だけでも十分です。

■ ヘッダー関連の設定箇所が複数ある

AFFINGER はヘッダー関連の設定箇所が複数あります。ちょっとわかりにくいので、設定箇所を覚えておくと使いやすくなります。

1.設定場所:「外観」→「カスタマイズ」→「ヘッダー画像」

ヘッダー画像設定

主に「ヘッダー画像」エリアの画像などを設定します。

2.設定場所:「外観」→「カスタマイズ」→「基本エリア設定」

基本エリア設定

「header」エリア、「ヘッダー」エリア、「ヘッダー画像エリア上 / 下」などの背景色や背景画像などを設定します。

3.設定場所:「外観」→「ウィジェット

ウィジェットの設定

ヘッダー箇所に設置するウィジェット類を指定します。

3.設定場所:「AFFINGER管理

AFFINGER 管理

「AFFINGER管理」の中にある「ヘッダー」、「ヘッダー下 / おすすめ」でヘッダー回りの AFFINGER ならではの細かい設定が可能です。

ポイント

AFFINGER のヘッダー回りの設定ができるようになると、デザインの幅が一気に広がり、よりオシャレなサイトを作れるようになります。

まとめ

WordPress のテーマ「AFFINGER(アフィンガー)」はブロガー向けサイトが作りやすく凝ったオシャレなサイトもコツ一つで簡単に作れます。

デモサイト(クールで大人な演出型)

カクテルを題材にした大人でシックな演出のデモサイトです。

実際のサイトはこちら

https://wpdemopresents.com/affinger03/

このデザインの作り方は note(こちら) で公開しています(有料記事)

AFFINGER を使いこなして、オリジナリティあふれる素敵なサイトを作ってくださいね。

WordPress のおすすめテーマ



  • SEO に強く【集客力強化】が望める
  • かっこいい(かわいい)ホームページを作りやすい
  • 初心者でも使えて、上級者になっても満足できる


本気でブログアフィリエイトを戦うなら、使うテーマは「AFFINGER」!

WordPress ブログの最上級おすすめテーマ「AFFINGER」をお試しください。



AFFINGER の紹介はこちら




AFFINGER(アフィンガー)テーマは「ここ」がすごい!【WordPress 初心者必見!】

AFFINGER テーマを使うと「オシャレなサイト」を作りやすくなります。オシャレなサイトは、ユーザーの滞在時間が増え、サイト評価があがり、サイトの露出が増えて、さらにユーザ(読者)を呼び込む好循環を実現します。WordPressのテーマ「AFFINGER」を徹底紹介します。

続きを見る


WordPress のテーマ「AFFINGER」の情報、テクニック一覧はこちらをクリック!










ブログランキング・にほんブログ村へ  




Presented By Irojiro Haraguro .Com