【デモサイト】AFFIGNER6（アフィンガー）で作ったコーポレート｜サイト型デザインで企業HPを制作してみた

そんな悩みに答えます。

「SEOに強い」でお馴染みのWordPressテーマ有料テーマAFFINGER（アフィンガー）。

アフィリエイターやブロガーのユーザーが多く、どちらかというとブログっぽいデザインのサイトが多いですよね？SEOが強いとネットで評判のアフィンガーで会社のホームページを作りたいという人も多いはず。

この記事ではアフィンガーシリーズの最新バージョンである「アフィンガー6」で作ったコーポレート系サイトのデモサイトを紹介します。

公式 AFFINGER ACTION（アフィンガー）6公式ページ

【基礎知識】アフィンガーについて

まずはアフィンガーの基礎知識です。

最新版はアフィンガー6です。

アフィンガーの概要
商品名	AFFINGER6 ACTION
販売会社	株式会社オンスピード
テーマ料金	14,800円 税込み価格
料金形態	買い切り
ライセンス	複数サイトOK
販売サイト	アフィンガー公式サイト

アフィンガー6は主にブログで収益化を目指す、ブロガー、アフィリエイターをターゲットにしているWordPress有料テーマです。そのため新着記事がズラズラと並ぶ「ブログ型デザイン」の印象が強めです。

アフィンガー6を販売している公式ONSPEEDサイト上でも、ビジネス系のデザインはほとんどありませんが会社のホームページ的なサイト型デザインにも対応しています。

【デモサイト】アフィンガーで作ったコーポレートデザインのサイト

アフィンガーの最新版「アフィンガー6」でコーポレートデザインのデモサイトを作ってみました。

ブログのデザインだと↓な感じです。

デモサイトは最新版の「アフィンガー6」です。
※アフィンガー5ではありません。

公式 AFFINGER ACTION（アフィンガー）6公式ページ

デモサイトはテーマファイルを一切編集していません

今回サンプル用として制作したアフィンガー6のコーポレートサイトですが、テーマファイルは一切編集していません。

マネれば誰でもアフィンガー6で企業サイトを作れます

アフィンガー6のデモサイトですが、ブログ感のないデザインですよね？

特別なことをしているわけではなく、サイトのトップに固定ページを指定してエディター上でブロックを使ってデモサイトを作っています。トップページを下層ページを作る機能で作っているだけです。

【アフィンガー】横幅を画面いっぱいに広げるカスタマイズ方法｜かんた🌊SWELLマニア｜note

ちなみにアフィンガー6のデモサイトで使用したのは以下のブロックです。

ブロック名	機能
カラムブロック	横並びに画像などをレイアウトするブロック。
カバーブロック	背景に画像や動を設定できるレイアウト系ブロック。
メディアとテキスト	画像とテキストを横並びに配置するブロック。
テーブルブロック	その名の通り、表（テーブル）を作るブロック。 デモサイトでは営業時間・診療時間部分で使っています。
カスタムHTMLブロック	任意のHTMLコードを入力できるブロック。 グーグル・マップの埋め込みに使いました。

企業サイト制作に便利なアフィンガーの機能

アフィンガー6はブログだけでなく、企業サイトも作れます。アフィンガーの特徴をいくつか紹介します。

フォントサイズを細かに指定できる

アフィンガーはサイト内の文字サイズをパーツごとに細かく調整できます。

「見出し」「記事タイトル」「記事内の文字（p）」「行間」を設定できるのですが、この設定をデバイスごとにチューニングできるという特徴があります。

オプション

デバイス

他の有料テーマと比較しても、ここまで細かなオプションがあるのはめずらしい。

タブレット・スマホ対応

アフィンガーはスマホ対応のレスポンシブテーマです。独自のカスタマイズコードを追加しなくても、スマホやタブレット端末などでも表示されます。

コンテンツエリアが縮小されるだけではなく、ヘッダー部分にスマホメニューがしっかり表示されるのも嬉しいポイントです！スマホメニューはPCとは別のリンク先をカスタマイザーから指定できます。

デモサイトではスマホメニューのアイコンを左にしていますが右側に変更も可能。サイト内検索の虫眼鏡のアイコンも表示・非表示を調整できるオプションがあります。

SEOプラグインが不要

アフィンガー6はSEO系プラグインなしでもSEOのチューニングができるテーマです。

SEOオプション

オプション	サポート
meta title
meta description
noindex
canonical

プラグインは入れすぎるとサイトの表示スピードが遅くなったり、競合して正常に動作しないといったデメリットがあります。アフィンガーはSEO系のプラグインによるパフォーマンス低下の心配はいりません。

プラグインによるトラブル

簡単プリセット機能

「プリセット」とは予め用意されているデザインと配色パターンのことです。

アフィンガーは他の有料テーマ同様に、カスタマイザーと呼ばれる管理画面から各パーツの設定や色をアレンジできます。慣れている人や、やりたいことが明確な場合はゼロベースで作っても良いかもしれません。

初心者であまり難しい設定をする自信がない人は、アフィンガー6のプリセットから選ぶだけでサイト運営をスタートすることができます。

プリセット：カラーパターン

プリセット：デザインパターン

プリセットで初期設定を一括設定した後に、各パーツを個別にアレンジすることもできます。

レイアウト機能が豊富

アフィンガーのレイアウト機能はオプションが豊富です。

ただ、ちょっと多すぎるのと何がどこにあるのかわかりにくいという印象を持ちました。アフィンがーは直感的に操作するというテーマではなく、しっかりとマニュアルを読みながら作業するのが懸命です。

公式サイトにWebマニュアルがありますが一般ユーザーは閲覧不可です。

アフィンガーでオシャレな企業サイトを作るコツ

アフィンガーはアフィリエイトブログのユーザーをターゲットにしたテーマです。そのまま使うと、どうしてもブログっぽいデザインになってしまいます。

会社のHPのようなサイト型デザインにするための「コツ」と便利な「機能」を紹介します。

ポイント

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

サイト型デザインで企業サイトを作るときに大事なポイントです。

固定ページをトップに指定しましょう

何も設定していない初期状態だと、トップページに投稿が新着順に表示されるブログデザインになります。会社のHP向けにサイト型デザインに変更するには、固定ページをトップページに指定するのが最初のステップです。

固定ページ機能で新規にページを作成し、トップページに指定するだけなのでプログラムのスキルは不要です。トップページに指定したトップページは、固定ページのエディターから自由に編集できるようになります。

アフィンガーで企業サイトを作るなら指定したトップページは1カラムにするのがおすすめです。

1カラムはデモサイトのようにサイドバーのないレイアウトのことなんですが、最近流行りのモバイルファーストなデザインを作りやすいメリットがあります。

全画面のメインビジュアルでインパクトを与える

「メインビジュアル」は文字通りサイトの顔です。メインビジュアルの作り込みでサイトの印象が決まります。高解像度ディスプレイでもボヤけてしまわないよう、解像度の高い画像を配置しましょう。アフィンガーはメインビジュアルにロゴやメニューを重ねる透過式をサポートしています。

歯科クリニックデモサイトのようなファーストビューも、プログラムの知識なしで実現できます。

個人的におすすめなのは背景画像を設置しヘッダーを透過式にする構成です（ロゴ、グロナビの背景が透明になる）。アフィンガーのメインビジュアル機能を一切使わず、固定ページのエディター上でカバーブロックを使い動画を埋め込むのもインパクトがあります（カフェのデモサイトの構成）。

背景画像でオシャレな質感を出す

背景の「白」が続くと、退屈な印象になってしまいます。

エステサロンのデモサイトではピンク色の背景画像を適度に配置し、オシャレ度を上げる演出をしています。背景画像はWordPressの基本機能であるカバーブロックを使っています。

カバーブロックは標準機能なんですがオプションがメチャクチャ豊富。サイト制作時には必ずと言っていいほど使うブロックです。

カバーブロックオプションの一例

キレイな素材を使う

「素材」とはサイト内で使う写真、アイコン、動画などのことです。

オシャなサイトは素材のクオリティーが高い。当たり前のことですよね？

オシャレなサイトを作りたい場合は、クオリティーの高い素材を使いましょう。素材は無理に自分で撮影したりする必要はありません。手元に素材がなければ、無料の素材サイトを利用しましょう。最近はクオリティーが高い素材が大量に公開されています。

公式サイト「写真AC」
公式サイト「イラストAC」

動画を使う

アフィンガーはコンテンツエリア内に動画ファイルを埋め込むことができます。歯科クリニックのデモサイトでこの機能を使っています。動画を埋め込むメリットはずばり「目立つ」！

人間の習性でどうしても動くものに目が行きます。

動画を入れることでサイトの離脱率が低下します。積極的に動画を組み込みましょう。

公式サイト「動画AC」

【注意】サイト型デザインで失敗しやすいポイント

アフィンガーでサイト型デザインを作るさいに、僕が悪い意味でハマってしまったカスタマイズです。

ヘッダーまわりのオプションがわかりくい

企業サイトはロゴ、グロナビ、メインビジュアルのあるヘッダーまわりの調整が大事です。アフィンガー6の管理画面にヘッダーまわりの設定オプションがあるんですが慣れないと混乱します。

なぜなら似たような名称のオプションがあるから

似ているオプション

「Headerエリア」と「ヘッダーエリア」ですよ。日本語か英語に違いでしかありませんが、アフィンガーでは別物なんです。ちなみに各メニューの中身を見てみても、同じようなオプションが並んでいることがあります。

メインビジュアル部分でヘッダーを透過式にして、背景画像を画面いっぱいに広げるといった設定はけっこう難易度高めです。

管理画面が2つに分かれている

アフィンガーは設定画面が2つに分離しています。

カスタマイザーに設定オプションがないなと思ったら、「AFFINGER管理」から設定する必要があるなんて時もあります。「カスタマイザーで設定しても反応がない」と思ったら、「AFFINGER管理の設定が優先される」といったオプションもあります。

アフィンガーの設定はなんとなく直感を頼りに作業をしても抜け出せません。購入者限定のWebマニュアルに解説があるので、しっかり確認しながら作業しましょう。

アフィンガー向けプラグイン

アフィンガーでのサイト制作に役立つプラグインと、相性の悪いプラグインを紹介します。相性の悪いプラグインを使ってしまうと、サイトの一部が表示されないなどの不具合の原因になります。

企業サイト制作に役立つプラグイン

おすすめプラグイン

ブロックエディタープラグイン

このプラグインはアフィンガー専用です。

アフィンガー専用プラグイン「Gutenberg 用ブロックプラグイン2」はブロックエディターでサイトを運営するなら必須です。プラグインを有効化すると、ブロックエディター環境でアフィンガー専用ブロックが利用できるようなります。

テーマを購入しファイルをダウンロードすると含まれています。アフィンガー公式サイトに会員登録すると、何度でも最新バンをダウンロードできます。

クラシックエディタープラグイン

アフィンガー6はグーテンベルグ対応テーマです。

アフィンガー配布元の公式サイトからブロックエディター対応プラグイン「Gutenberg 用ブロックプラグイン2」をダウンロードしてブロックエディター環境でページを作成できます。

旧式のクラシックエディターに慣れている人で、どうしてもブロックエディターは使いたくない場合はClassic Editorプラグインを有効化して運用しましょう。

アニメーション系プラグイン

「ふわっと表示させる」「下からスライドインさせる」

ちょっとした演出をサイトに加えてブランディングサイトのような仕上がりにしたい人向けです。

問い合わせフォームプラグイン

企業サイトだと定番の問い合わせフォームです。アフィンガー6のテーマには問い合わせフォームを作る機能はありません。問い合わせフォームを導入したい場合はプラグインが必要です。

WordPressで使える無料の問い合わせフォームはかなり出回っています。海外のデベロッパーが開発したプラグインも多く、英語版のほうが種類が豊富です。「日本語のマニュアルがどうしても必要だ」という人はプラグインの開発者が日本人で、マニュアルが充実しているContact Form7がおすすめです。

Contact Form7は入力した後の確認画面が表示されないタイプです。

確認画面がどうしても必要な場合は、MW WP Formがおすすめです。Contact Form7のほうが設定がシンプルで簡単です。MW WP Formは確認画面以外にも、細かなオプションがあるので、ちょっと上級者向けという印象。

高速化プラグイン

サイトのスピードを早くするのが高速化プラグインの役割です。

企業サイトをオシャレに仕上げるために、画像や動画を使うことってありますよね？キレイに見せるためには画質の良い素材を使うのが普通ですが、どうしてもファイルが大きくなってしまいます。あまり大きいサイズを使ってしまうと低速回線のユーザーにとってはストレスになってしまいます。

そんな時に便利なのが高速化プラグインです。

高速化のプラグインは色々あります。アフィンガーで試したところ一番効果が出たのは有料のWRロケットというプラグインでした。アフィンガー6は高機能なためモバイルでの表示が遅いなと感じていました。WPロケットプラグインを導入したのですが、ビックリするぐらい早くなりました。

相性の悪いプラグイン

不具合を引き起こすプラグイン

Disable Right Click For WP

Disable Right Click For WPはサイト上で右クリックを禁止するプラグイン。サイトの情報をコピーしたり、画像をダウンロード抑止する役割です。

このプラグインを有効化すると、トップページのメインビジュアルが表示されなくなります。

カスタマイザー上でレイアウトまわりの設定をしているさい、プレビュー画面上では設定が反映されているように見えるんですが、サイト上では反映されないといった不具合が発生します。

右クリックを防止するプラグインは他にもあるので、どうしてもインストールしたい場合は他のプラグインにしましょう。

企業サイトに盛り込むべきコンテンツ

企業サイトを作る場合に必要となってくるコンテンツ例を紹介します。アフィンガー6に限らず企業サイトを作るときに大事なので、しっかり抑えておきましょう！

企業情報を明確にする

どこの誰が運営しているサイトなのかを示すのは基本中の基本です。サイト訪問者がサイト上に掲載しているサービスや商品に興味を持ってもらっった場合、どんな会社が運営しているか不明な場合は問い合わせに発展しません。

企業情報の一例

特別なことは何もありません。企業サイトでよく見かける情報ですよね？

企業に関する情報は特別な情報は必要ありません。「どこの誰が運営しているのか？」「実在する会社なのか？」「問い合わせ先はちゃんとあるか？」。このへんをカバーできていれば十分です。代表者挨拶や企業の成り立ちなどはなくてもOKです。

NGなパターン

見込み客は「怪しい」と不審に思ったら即座にサイトを離脱します。

運営者情報がなかったり、画像化してわざと隠すような方法をとっていると感じたら不信に感じますよね？

なんで隠す必要があるんだろう…
何か悪いことをしている会社なんじゃないだろうか？

こんな風に思われたら終わりです。

一般のブログなら運営者情報がないといって程度でダメージはありませんが、サービスや商品を販売している企業サイトで運営者情報を明記しないのはNGです。

アフィンガー6で企業サイトを作っているばあいは、固定ページ機能で企業情報ページを作りフッターに導線となるリンクを設置しましょう。

問い合わせ手段を複数用意する

「電話はちょっと怖い」という見込み客向けに、メールで連絡が取れるようにしておくのが基本です。可能な限り問い合わせフォームを設置しましょう。

メールアドレスだけを掲載すると、「何を書けばいいだろう？」と悩んでしまい、その結果問い合わせをしない見込み客もいます。必要事項を入力するだけで問い合わせができるよう問い合わせフォームの設置がおすすめです。

フォームはできるだけシンプルにするのがポイント。

フォームの入力項目例

あまりに入力項目が多すぎると離脱されてしまいます。アフィンガー6にはフォームを作る機能はありませんが、無料で使える問い合わせフォームプラグインを使えばノーコードで導入できます。

アフィンガー6向けのレンタルサーバー

アフィンガー6で会社のHPを作る場合に使うサーバーについてです。

ITスキルがあるスタッフがいて、環境が揃っている事業者であれば事務所内に自前でサーバーを作ることも可能でしょうが、現実問題レンタルサーバーを借りてしまった方が安全です。

レンタルサーバー会社を10社以上使った経験がありますが、アフィンガーで会社のHPを作るならエックスサーバーの「スタンダードプラン」がおすすめです。

公式 エックスサーバー「スタンダードプラン」

スタンダードプランの料金は月額ざっくり千円

スタンダードプランの料金は月額ざっくり千円です。スマホなんかと同じで長期契約すると安くなる仕組み。月額料金とは別に契約時に初期手数料が必要です。

	料金
初期費用	3,300円（税込み金閣）
月額料金	990円（税込み金閣）

会社のHPに必要な独自ドメインもエックスサーバーでまとめて取得できます。お名前.comなんかの外部サービスでドメインをすでに取得済みであれば、そのドメインをそのままエックスサーバーで使えます。

アフィンガー6には「WordPress5.7」が必要

アフィンガー6はWordPress上で動かすソフトウェアです。必然的にWordPressが使えるレンタルサーバーが必須なんですが、レンタルサーバーによってはWordPressが使えないものがあります。

特に注意したい点として、WordPressでサイトを構築できる契約プランが一部に限られているといってケースがあります。

アフィンガー6用にレンタルサーバーを契約したけど、WordPressが使えないプランだった。

そんな失敗をしないよう契約前にWordPressに対応しているかチェックしましょう。

アフィンガーの動作環境

	バージョン
PHP	PHP7.3推奨※7.4まで確認（※7.3以上必須）
WordPress	5.7

WordPress5.7以上で、PHPが7.3という要件です。

公式 エックスサーバー「スタンダードプラン」

アフィンガー6導入後に登録すべきWebツール

テーマの導入、テーマの基本的な設定が完了したらサイトの運営前に以下の作業をしておきましょう。

グーグルアナリティクスの導入

Google Analyticsはアクセス解析するWebツールです。名前で想像がつく通り検索エンジン大手グーグルが提供しているツールなんですが、単純なアクセス数だけでなく、どういったキーワードでアクセスがあったかなど、サイトの改善に役立つ情報を記録してくれます。

グーグルアナリティクスは英語で書くとGoogle Analytics。
頭文字の「G」と「A」をとってGA（ジー・エー）と呼ばれています。

グーグルアナリティクスをアフィンガー6に導入する方法

グーグルアナリティクスを導入するざっくりした流れです。

導入の流れ

サーチコンソールへの登録

Google Search Consoleはグーグルアナリティクスと同じくグーグルが提供している無料ツールです。名前が長いので略して「サチコ」と呼ばれることがあります。

サーチコンソールには以下のような機能があります。

サーチコンソールの機能

サーチコンソールを使う流れ

サーチコンソールを使うざっくりした流れを紹介します。サーチコンソールを利用するためにはグーグルアカウントが必要です。グーグルアカウントの作成・維持は無料です。

導入の流れ

サーチコンソールを導入するとき、プログラムコードを編集するようなスキルを必要とする作業は一切ありません。アフィンガー6導入後はサーチコンソールを導入しましょう。

まとめ

WordPress有料テーマ「アフィンガー6」を使ったコーポレートサイト制作についての紹介でした。

プログラムのスキルがなくても会社のホームページを作ることができます。ぜひお試しください。

公式 AFFINGER ACTION（アフィンガー）6公式ページ

今回紹介したアフィンガー6は、記事執筆時に利用可能な最新バージョン（20210927）を利用しています。