【AFFINGER6】企業サイトの作り方｜デモサイト作ってみた！

この記事で解決できる悩み

こんな悩みを解決する記事を用意しました！

ボクの初めてのブログも「30万PV」を超えるメディアに成長しました！

本記事の信頼性

本記事の執筆にあたり、『 AFFINGER6 』でデモサイトを作ってみました！

以前『 SWELL 』で制作したデモサイトの『AFFINGER6』バージョンですね。

『DEMO｜麦わらの一味の求人サイト』を別タブで開きながら、読み進めてくださいね！

そこで、記事の前半で「AFFINGER6を使った企業サイトの作り方〜準備編〜」を。

後半では「ヘッダー・メインビジュアル・フッターを含めたトップページの作り方」について完全解説します。

本記事を最後まで読むことで、専門知識がなくても「企業サイトのトップページ」を制作・公開できますよ！

＼稼ぐに特化したテーマ／

当サイト限定特典プレゼント中

AFFINGER6は企業サイトも作れるWordPressテーマ

『 AFFINGER6 』はその名のとおり、アフィリエイトサイト向きのWordPressテーマですが、企業サイトも作れるんです！

商品名	ACTION（AFFINGER6）
費用	14,800円（税込） 買い切り
上位版	ACTION PACK3：39,800円（税込）
発売	2015年6月（AFFINGER1）
事業者	株式会社オンスピード
開発者	ENJI（@enjilog）さん
支払方法	クレジットカード決済（Visa / Master / JCB）・銀行振込・コンビニ決済
ライセンス	スプリットライセンス 複数サイトに使える（第三者のサイトは不可）
公式サイト	affinger.com

１つ購入するだけで、個人が運営する「複数サイト」に使い放題！

現にボクは、テストサイトやデモサイトふくめ「８サイト」に使用中です。笑

とはいえ、企業サイトを作るなら要注意！

ライセンス違反は10,000円/日の罰金

たとえば、あなたが個人のブログで『 AFFINGER6 』を使用していても・・・

自社のコーポレートサイトを作りたいなら「別途購入する必要がある」ということですね。

正規の方法で購入せずに使用した場合は10,000円/日の使用料を請求いたします。
ライセンス違反の使用料金について

ボクはWebデザイナーでもありますが、『 AFFINGER6 』を使う場合はクライアントに直接購入してもらうようにしています。

＼稼ぐに特化したテーマ／

当サイト限定特典プレゼント中

【AFFINGER6】企業サイトの作り方【準備編】

AFFINGER6を使った「企業サイトの作り方〜準備編〜」は、次のとおり。

この章のもくじ

サーバーの契約も『 AFFINGER6 』の購入も終わってる人は、「ステップ③の初期設定」からどうぞ。

ステップ①サーバーを契約する

レンタルサーバーとの契約がまだなら、『 エックスサーバー 』をおすすめします。

おすすめする理由

企業サイトはとくに「安心・安定の大手」なら間違いないですよね！

当サイトももちろん『 エックスサーバー 』ですが、もう一生「３年ずつ自動更新」するつもりです。

また、コーポレートサイトに必要な「独自ドメイン（例：hebochans.com）」も無料でもらえるんです。しかも、２個！

もちろんWordPressにも対応しているので、『 AFFINGER6 』もサクッとインストールできますよ。

さらに！初回に限り、当サイト経由で「20%割引クーポン」がもらえます。

ちょうど今やっているキャンペーンとも併用できるので、お得にスタートできますよ👇️

＼初期費用無料！／

キャンペーンは予告なく変更・終了する可能性あり

ほかのサーバー会社も気になる人は別記事をどうぞ👇️

関連記事【毎月更新】レンタルサーバー17社のキャンペーン情報まとめ

【毎月更新】レンタルサーバー17社のキャンペーン情報まとめ

ステップ②AFFINGER6を購入する

サーバーとドメインが決まったら、『 AFFINGER6 』を購入しましょう。

じつは『AFFINGER』って２種類あんねん。

通常版と上位版

とくにこだわりがなければ「通常版」でOK！

じつは『AFFINGER』ってサイトも２種類あんねん。

公式サイトとASP経由

おすすめは絶対「ASP経由」！

なぜなら、当サイト限定特典が「 25個 」ももらえるから。

詳細は次のとおり👇️

主に「ブロガー・アフィリエイター向け」ですが、無料なのでぜひ受け取ってくださいね！

『 AFFINGER6 』には「セール」も「セルフバック」もないので、個人ブロガーから独自特典をもらうのが、いちばんお得ですよ👇️

＼稼ぐに特化したテーマ／

当サイト限定特典プレゼント中

『 ACTION PACK3（AFFINGER6 EX対応） 』も気になる人はレビュー記事をどうぞ👇️

関連記事AFFINGER6 EXその「違い」を完全解説【ACTION PACK3】

AFFINGER6 EXその「違い」を完全解説【ACTION PACK3】

ステップ③初期設定を済ませる

『 AFFINGER6 』を購入したら、インストール・有効化して初期設定を済ませましょう。

長くなるので、まるっと別記事にまとめました👇️

関連記事AFFINGER6の初期設定22選｜ワードプレス初心者に解説

関連記事AFFINGER6の使い方15選｜初心者向け実践マニュアル

ステップ④トップページをサイト型にする

基本的にWordPressテーマは「ブログ型」といって、新着記事が一覧で並ぶ作りになっています。

これを「サイト型」に変更することで、コーポレートサイトを自由に作ることができるんです。

こちらもサクッと別記事をどうぞ👇️

関連記事【13パート】AFFINGER6おしゃれなトップページの作り方ガイド

ここでは「企業サイト向け」の初期設定について解説しますね。

ステップ4.5

『AFFINGERブロック』とは、AFFINGER6専用の公式プラグインのこと。

WordPressのブロックエディタ『Gutenberg』を強化するプラグインですね。

公式サイトの「ACTION（AFFINGER6版）購入ユーザー限定ページ」から無料でダウンロードできますよ。

サイト全体を1カラムにする

「サイト全体を1カラムにする」に✅️を入れて、「Save」をクリック。

これでサイドバーが非表示になります。

企業サイトに「サイドバー」はいらないですよね。

トップページ下のSNSアイコンを非表示にする

SNS設定の「トップページ下のSNSボタンを非表示にする」に✅️を入れて、「Save」をクリック。

これでトップページのSNSシェアボタンが非表示になります。

これもいらないですよね。

これまでの設定を反映したトップページはこんな感じです（ウルトラ・シンプル）。

ステップ⑤トップページの構成を考える

あとは、あなたのサイトの構成を考えて、それに必要な素材を揃えるだけ。

とはいえ、企業サイトの構成にはテンプレートがあります👇️

企業サイトのテンプレート

本記事のために制作したデモサイトもこれに則った構成になっているので、マネしてくださいね！

企業サイトの素材

サイトで使う「画像」や「テキスト」のことですね。

おすすめのフリー画像サイト

『 AFFINGER6 』はメインビジュアルに動画も設定できるので、『 動画AC 』から選ぶのもいいですね。

画像編

当ブログから「画像制作」に特化した記事をまとめました。

サイトタイトルは絶対「ロゴ画像」にしたほうがいいですよ！

【AFFINGER6】企業サイトの作り方【20項目】

AFFINGER6を使った「企業サイトの作り方」は、次のとおり。

この章のもくじ

「デモサイト」の上から順番に並べました👇️

全体カラーパターン

サイトカラーをサクッと設定したいなら、「カラーパターン」がおすすめ。

カラーパターン

「デザインパターン」と合わせることで反映されますよ（リセット以外を選ぶこと）。

デザインパターン

デモサイトは「赤（やさしい） × フラット」にしています。

また、サイトカラーは「カスタマイザー」でも設定できるんです。

全体カラー設定

試しに触ってみてくださいね。

ヘッダー・フッター・スマホロゴ画像

「画像を選択」をクリック。

「ファイルを選択」からロゴ画像をアップロードしてください。

ロゴ画像の設定

「公開」をクリック。

これでヘッダーとフッター・・・

それからスマホのヘッダーにもロゴ画像が設定されますよ。

※視認性が悪いので、この場合は「白」にしたほうがいいですね。

全体サイトアイコン（ファビコン）

「サイトアイコンを選択」をクリック。

「ファイルを選択」からサイトアイコンをアップロードしてください。

サイトアイコンの設定

「公開」をクリック。

これで「ブラウザのタブ」や「スマホのアイコン」が設定した画像になりますよ。

ヘッダーグローバルメニュー

各セクションへのアンカーリンクをヘッダーに設定しましょう。

まずは

「メニューを作成」をクリック。

左の「メニュー項目を追加」から、「カスタムリンク」を追加していきます。

カスタムリンク

「メニューを保存」をクリック。

これを「セクションの数だけ」作りましょう。

ジャンプ先の設定は「見出し」で解説しますね。

メインビジュアルYouTube背景＋マイブロック

せっかくなので、メインビジュアルは「動画」にしました！

おすすめの設定

YouTube動画IDとは・・・

の部分です。

ちなみに『 AFFINGER6 EX 』だと、mp4を直接WordPressにアップロードして流すこともできますよ。

「トップページのヘッダー画像エリアの高さを画面サイズに応じて最大にする（β）※優先」に✅️を入れてください。

これでメインビジュアルが「ユーザーの画面サイズにフィット」しますよ。

また、動画の上に「テキストやボタン」を置きたいですよね！

このなかにテキストやショートコードを書くことで、メインビジュアルの上に要素を追加できるんです。

ヘッダーコンテンツ設定

デモサイトのボタンは「マイブロック」で作ったものを、ショートコードで呼び出しています。

マイブロックの使い方

これで「テキスト＋ボタン」のできあがり！

とはいえマイブロックを設置すると、管理者の画面にだけ「パターン編集」と表示されてしまいます。

「マイブロックのショートコードに編集リンクを表示する」の✅️を外すと非表示になりますよ。

さらに、「Scrollの文字色」を変更したいなら・・・

右上のCopyをクリック

/* Scrollの文字色 */
#st-header-link span {
color: #e6514c!important;
}

上記のコードを「追加CSS」にコピペしてください。

また、デモサイトのようにメニューが多いと改行してしまうかも。

カスタマイズ

メニューの幅をデフォルトの「160 → 150」に下げています。

さらに、メインビジュアルを指定したら「ヘッダーを透明」にするのがオススメ！

「背景色」をクリアにしてください。

こちらも「背景色」をクリアにしてください。

さらに、「文字色」を見やすく「太字」にするのがオススメです。

スマホは「スライドメニュー」のなかで調整できますよ。

スマホでも背景動画が再生されていい感じですね。

セクション見出し

エディタでは「＋」をクリックして、「ブロック」を呼び出します。

トップページの「見出し」を最初にまとめて作ってしまいましょう。

デモサイトの見出し

テキストを入力したら、エディタ右の「半月みたいなマーク」をクリック。

スタイル

デモサイトは「ライン」にしています。

色

テキストを「メインカラー」にすると、統一感が出ますよ。

「HTMLアンカー」に〝グローバルメニューのURL〟に設定したテキストから「#（ハッシュタグ）」を抜いて入力してください。

カスタムリンク

これでグローバルメニューをクリックすると、各見出しまでジャンプしますよ。

さらに「✅️：jsによるスムーススクロールを使用する」で、見出しまでスルーっとスクロールします。

セクションカラム＋バナー風ボックス

「33 / 33 / 33」をクリック。これでカラムが３列になります。

『 AFFINGER6 』で人気のバナー風ボックスですね。

バナー風ボックスの使い方

デモサイトは「暗く」しています。

ほかにもボックスに「リンク」をつけることもできますよ。

セクションタブ＋会話ふきだし

タブの「スタイル」は次の５つ👇️

スタイル

タブのカラーはあらかじめ設定する必要があります。

以下４つを設定してください。

デフォルト設定

デモサイトはこの「タブ」の中に「会話ふきだし」を入れています👇️

会話風アイコンは８個まで登録して、呼び出すことができますよ。

会話ふきだしの使い方

設定は以下から行ってください。

アイコン名と画像を登録するだけ👇️

会話アイコンの設定

デモサイトは以下すべてに✅️を入れています。

カスタマイズ

エディタ上で「向きを反転」することもできますよ。

セクションFAQ（よくある質問）

企業サイトに必須の「よくある質問」も用意されています。

スタイル

デモサイトでは「丸」にしています。

カスタマイズ

FAQは「折りたたむ（アコーディオン）」こともできますよ。

SEOに強い「構造化データ」がデフォルトで実装されているのも、ありがたいですね。

セクション記事一覧（ブログ）

ブログメディアを持っている企業サイトは、トップページに「ブログ記事一覧」を入れましょう。

記事のIDは「投稿一覧」のいちばん右で確認できますよ。

ブロック「AFFINGER：カテゴリー記事一覧」を呼び出すのもいいですね。

「PC閲覧時も記事一覧（トップ・アーカイブ・関連記事）の抜粋を非表示にする」に✅️を入れると・・・

本文の抜粋が非表示になって、スッキリしますよ。

記事一覧の下には「READ MORE」ボタンをつけています。

自由自在

『 AFFINGER6 』のボタンは、まさに自由自在！

セクションYouTubeを埋め込み

YouTubeのURLをコピペして、「埋め込み」をクリックするだけ！

「埋め込みコード」じゃなくて「URL」でいいんです。

デモサイトでは、YouTube動画の下にも「AFFINGER：カスタムボタン」を置いています。

セクションテーブル＋カスタムHTML

「50 / 50」をクリック。これでカラムが２列になります。

左には「テーブル」で会社概要を設置してみましょう。

テーブルの設定

「表を作成」をクリック。中身を入力してください。

スタイル

デモサイトは「ストライプ」にしています。

右には『Googleマップ』を埋め込んでみました。

『Googleマップ』でコピーした「HTMLコード」をペーストするだけです。

右上のCopyをクリック

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3256.800189781866!2d139.6921217762315!3d35.28609380157813!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60181554462ab7e1%3A0xc74e206b65ec1d93!2z54y_5bO2!5e0!3m2!1sja!2sjp!4v1725767326749!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

デモサイトは〝モンキー・D・ルフィ〟だけに「猿島」を埋め込んでいます。

セクションお問い合わせフォーム

お問い合わせフォームはプラグインで実装します。

おすすめプラグイン

「確認画面の実装とサンクスページへの遷移」のために、もう一つプラグインが必要です。

お問い合わせフォームの内容

とはいえ、長くなるので以前書いた別記事をどうぞ👇️

関連記事SWELLお問い合わせフォームの作り方｜Contact Form 7で簡単

その前に、『SWELL』とはデザイン用のコードが変わるので・・・

以下を「追加CSS」にコピペしてくださいね👇️

右上のCopyをクリック

/* テキストを太字 */
label {
    font-weight: bold;
}
/* テキストエリア上に余白 */
.wpcf7-textarea {
    margin-top: 5px;
}
/* テキストエリア内の余白 */
textarea {
    padding-left: 15px;
}
/* ラジオボタンの余白 */
.wpcf7-radio span {
    margin: 30px 0 ;
}
/* ボタンのカスタマイズ */
.wpcf7-submit,
.wpcf7-previous {
    display: inline-block;
    width: 240px!important;
    padding: 1.2em 1em!important;
    border-radius: 50px!important;
    background: #e92f3d;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.2em;
    line-height: 1;
    color: #fff!important;
}
/* 必須マーク */
.required {
    color: #fff;
    background: #e92f3d;
    padding: 0.3em;
    border-radius: 0.5em;
}
/* サンクスメッセージを非表示 */
.wpcf7-response-output{
    display: none;
}

これで『 AFFINGER6 』でも同じデザインが反映されますよ。

フッターフッターメニュー

フッターにもメニューを設定しましょう。

まずは

「メニューを作成」をクリック。

左の「メニュー項目を追加」から、以下を追加してください。

固定ページ

※あらかじめ固定ページを作成していないと表示されません。

このあたりを設置するのが一般的です。

「メニューを保存」をクリック。

フッターも透明にしたいなら、「背景色」をクリアにしてくださいね。

スマホ固定フッターメニュー

つづけて、最下部に固定できる「スマホ用」のフッターメニューも作ってしまいましょう！

メニューを作成

「メニューを作成」をクリック。

左の「メニュー項目を追加」から、好きなものを追加してください。

任意

「カスタムリンク」を使えば、リンク先を自由にカスタムできます。

カスタムリンクのURL

これでOK！とはいえ、スマホフッターメニューは作成するだけでは表示されないんです。

「スマホフッターメニューを表示する」に✅️を入れることで、表示されますよ。

また、メニューに「アイコン」もつけたいですよね？

まずは、「FontAwesomeIcons4.7.0の読み込み」に✅️を入れてください。

『Font Awesome 4』でアイコンを選びましょう。

キーワードで検索

こんな感じのコードが表示されるので、コピーしてください。

右上のCopyをクリック

<i class="fa fa-angle-double-up" aria-hidden="true"></i><br>TOP

「ナビゲーションラベル」のテキストの前にペースト。

あいだに「<br>」タグを入れて、改行しています。

また、メニュー右上の「表示オプション」をクリックして、「リンクターゲット」に✅️を入れると・・・

ナビゲーションラベルの下に「リンクを新しいタブで開く」が選べるようになりますよ。

「スマホフッターメニュー」のカスタマイズはここからできます。

カスタマイズ設定

デモサイトはアイコンサイズを「200%」にしています。

フッターコピーライト

フッターのCopyrightには、デフォルトでは「開設した年」と「サイトタイトル」が入ります。

変更したい場合は、以下に入力してください。

ここに入力

これで「© 2018 HEBOCHANS」と表示されますよ。

全体フォント

『 AFFINGER6 』はフォントの設定も自由自在（おそらくWordPressテーマでナンバーワン）！

フォントのサイズ

それぞれの「サイズと行間」をpxで細かく指定できます。

フォントの種類

ほかに『Googleフォント』も呼び出せますよ。

右上のCopyをクリック

font-family: Noto, "Hiragino Sans", Helvetica, Arial, sans-serif;

デモサイトは「その他」に上記のフォント・ファミリーを指定しています。

全体追加CSS（最終調整）

固定ページで作った部分（背景動画の上の白い部分）ってデフォルトでは狭くないですか？

また、各見出しの上下の幅もキツく感じるので、広げてみます。

最終調整

気にならない人はスルーしてOKです！

「PC閲覧時のサイトの幅」がデフォルトは「1060px」と少し狭いので、「1280px」に広げています。

右上のCopyをクリック

main {
background-color: rgba(255, 255, 255, 0.9);/* 背景の透明度 */
padding-bottom: 70px!important;/* 下部の内側の高さ */
}
h2 {
margin: 60px 0 30px!important;/* 見出し上下の高さ */
}

また、CSSで「背景の透明度」と「上下の幅」を広げてみました。

そのままコピペすれば反映されますよ。

その他プラグイン

スマホに「アプリ」を入れるように、WordPressには機能を拡張する「プラグイン」が必要です。

最低限は次の５つ👇️

	プラグイン	機能
①	AFFINGERブロックプラグイン	Gutenbergを強化
②	Contact Form 7	お問い合わせフォーム
③	Contact Form 7 Multi-Step Forms	確認画面の実装・サンクスページへの遷移
④	WP Multibyte Patch	文字化けの防止
⑤	SiteGuard WP Plugin XO SecurityでもOK	セキュリティ強化

ほかにも「サイトマップの生成・送信」や「バックアップ・復元」するプラグインもありますよ。

くわしくは別記事でまるっと解説しています👇️

関連記事【おすすめ】AFFINGER6に必要・便利・不要なプラグイン20選

その他アニメーション

プラグインを使えば、ブロックに動きをつけることも可能です。

圧倒的に『Blocks Animation』がおすすめ！

とはいえ、アニメーションをつけること自体おすすめしません。

なぜなら、サイトが重くなるだけだから。

とはなりませんからね。

とはいえ、「SWELLバージョンのデモサイト」にはバカみたいに動きをつけてみました👇️

関連記事【プロが実演】SWELLを使ったコーポレートサイトの作り方

WordPressであなたのホームページを作ります！

専門知識がなくても、企業サイトのトップページが作れるように完全解説しました。

とはいえ、「やっぱり自分で作るのは難しい・・・」と思った人もいるかも。

企業サイトでも、ブログサイトでもOK！

売れるサイトを作ります

Webデザイナー兼ブロガー「歴６年」の〝知識と経験〟をすべて注ぎ込みます🙌

サービス料金には商品代は含まれておりません。予め、WordPressテーマ「AFFINGER6（14,800円税込）」（及び必要に応じて専用プラグイン）をお客様自身にて公式サイトよりご購入（ https://on-store.net/affinger6/ ）頂く必要がございます。

WordPressテーマ「AFFINGER（アフィンガー）」及び専用の有料プラグインを当方で用意することは規約違反の為、できません。
AFFINGER6公式サイト

まずは、お気軽にお問い合わせくださいね👇️

＼33万PVブロガー／

当サイト限定特典プレゼント中

SWELLでもあなたのホームページを作ります！

WordPressテーマはAFFINGER6じゃなくて、『 SWELL 』でも承っています。

AFFINGER6	SWELL
カスタマイズ性が高い	カスタマイズなしでオシャレ
自分で購入する	購入しなくてOK
デモサイト	デモサイト

なぜなら、SWELLのライセンスは「100% GPL」だから。

かんたんに説明すると、ボクの『 SWELL 』であなたのサイトを作れるってこと。

つまり、WordPressテーマ代が浮くんです。

くわしくは「もっとくわしく」をクリック👇️

＼33万PVブロガー／

実質SWELLがもらえる！

【Q&A】AFFINGER6の企業サイトの作り方に関するよくある質問

AFFINGER6の企業サイトの作り方に関する「よくある質問（Q&A）」は次のとおり。

この章のもくじ

順番に見ていきましょう！

Q1：企業サイトに必要な下層ページは？

A企業サイトに必要なページは、一般的にこの４つです。

下層ページ

デモサイトでは「お問い合わせフォーム」もトップページに入れましたが、分ける場合もあります。

すべて「固定ページ」で作り、トップページからリンクしましょうね。

Q2：AFFINGER6のサイト作りに役立つ記事は？

A「AFFINGER6に関する記事」をまとめて置いておきますね。

AFFINGER編

とくに「⑧：デザインテンプレートの設定方法」以降は、企業サイトにも役立つと思いますよ！

【まとめ】AFFINGER6の企業サイトの作り方を完全解説！

「AFFINGER6の企業サイトの作り方」について解説しました。

まとめ

本記事の作り方をマネすれば、初めてでも「おしゃれな企業サイト」を作れますよ。

どうしてもできなかったら「ヘボ」に頼めばいいので、安心してチャレンジしてみてくださいね！

＼33万PVブロガー／

当サイト限定特典プレゼント中

AFFINGER6を導入したい方へ