AFFINGER6で農業向けサイトを作成する手順-初心者向け-

AFFINGER6で農業サイトを作成してみました。

サンプルサイトはイチゴ農園をイメージして作成してあります。

こんな感じです→○○いちご農園

「農業サイトを作りたい」

そう思っても初心者の方は何をしていいのかわからないと思います。

そこで、基本的な農業サイトが手順に沿って完成できるように詳しく解説していきます。

まずは基本的なサイトを作り、自分なりにデザインを工夫していくのが、初心者の方にはお勧めです。

ちなみにAFFINGER6のバージョンは「AFFINGER6EX： 20250802 」です。

上位版のEXを利用していますが、サインプルサイトは通常版で作成可能です。

\\ 　このテーマ！ AFFINGER6で作成しました //

事前準備

知識ゼロからサイトを作成する方向けに事前準備として以下の２点の設定を確認しておいてください。

問題ないよって方は飛ばして次のステップに進んでください。

• 投稿コメントの設定
• パーマリンクの設定

①　投稿コメントの設定

記事への投稿コメントを表示しないように設定しておきます。

「設定」→「ディスカッション」を選択します。

「新しい投稿へのコメントを許可」の項目のチェックを外して設定を保存してください。

②　パーマリンクの設定

「設定」→「パーマリンク」で「投稿名」を選択して保存しておきます。

サイトデザインの全体設定

事前準備が完了したら、本格的にサイト作成に進みます。

基本となる次の設定します。

• 全体のメインカラーを設定する
• サイト全体を１カラムに設定する
• 固定ページの「投稿日」「更新日」を非表示にする

①　全体のメインカラーを設定する

メニューのAFFINGER管理から「全体設定」でカラー等を設定します。

ここでは農業系サイトをイメージしてカラーパターンを「緑」で選択してあります。

デザインパターンは「フラット」を選択しています。

②　サイト全体を１カラムに設定する

サイト全体を１カラムに設定します。

同じく「全体設定」の「サイト全体のレイアウト一括設定」で設定することが可能です。

③　固定ページの「投稿日」「更新日」を非表示にする

固定ページで「投稿日」「更新日」が表示されないようにします。

AFFINGER管理の「投稿・固定記事」で設定します。

必要なページを固定記事で作成する

まず農業向けサイトで最低限必要な記事を作成して土台を作っておきましょう。

農業向けサイトで最低限必要なページはこちら７項目です。

• トップページ
• 農園紹介ページ
• 商品紹介ページ
• お問い合せページ
• アクセス情報
• 特定商取引に基づく表記
• プライバシーポリシー

まずはトップページはいったんスルーしてその他のページを作成していきます。

ページは固定ページで作成していきます。（固定ページ→固定ページを追加を選択）

農園紹介ページを作成する

農園紹介ページのサンプルはこちら→　農園紹介 - ○○いちご農園

まずはコンテンツを作成していきます。

①　タイトル

タイトルを入力します。

ここでは「農園紹介」とでも入力しておいて問題ないです。

②　見出し

見出しは記事の表題です。

農園紹介ページには次のような見出しで作成するのがお勧め。

• 農園のコンセプト
• 農園の風景と施設について
• 栽培方法や栽培している作物の種類
• 生産者

見出しの作成はブロックツールの「見出し」を選択してください。

見出しはH2～H6まで設定可能ですが、ここではH2で作成してください。

AFFINGER６では見出しのデザインを変更することも可能です。

見出しについてや見出しの作成方法についてよく解らない方はこちらの記事をご覧になってください。

③　画像

画像を表示するにはブロックツールの画像を選択して表示させたい画像をアップロードします。

AFFINGER６では画像にいくつかの効果を与えることができます。

サンプルサイトでは画像にポラロイド風の効果を設定してあります。

画像を掲載することで、見やすいサイトを作成することができます。

AFFINGER6の画像挿入について詳しくはこちらの記事でも解説しています。

④　段落

文字を利用するときに通常利用するのがブロックツールの段落です。

AFFINGER6では文章を強調する為にこんなマーカーを簡単に利用できるので、活用してみてください。

⑤　余白

余白を入れるのはブロックツールの「スペーサー」を選択してください。

適度にスペースを入れることで、ユーザーが読みやすいページになります。

⑥　リスト

見やすい記事にする為にリストの活用が有効です。

AFFINGER6はリストのデザインも変更可能です。

⑦　画像とテキストを並べる

画像とテキストを並べて表示させる方法がわからない方の為に念の為、解説しておきます。

いくつか方法はあるのですが、ここではブロックツールの「メディアとテキスト」を利用しています。

画像とテキストを並べて表示させることができます。

他にも「カラム」の機能を使えば、リストの表示など自由度の高い表示が可能になります。

以上で農園紹介ページのコンテンツ作成が完了しました。

ここではざっくりとしたコンテンツですので、自分なりに工夫をしてみてください。

AFFINGER6は記事作成機能が豊富ですので、初心者の方は試しながら豊富な機能を覚えていってくださいね。

次に公開する前に以下の設定をしておきましょう。

• メタディスクリプションの記述
• スラッグの変更

メタディスクリプションの記述

AFFINGER6には標準でSEO対策機能があります。

記事作成画面の下部に様々な設定項目がありますが、「メタディスクリプション」の欄は入力をしておきましょう。

メタディスクリプションは簡単に言えばその記事の説明文になります。

SEO対策として必須の設定です。

何を記述すればいいの？

例としてこのページは農園紹介ページですので

「○○いちご農園の紹介ページです。安心・安全にこだわった甘いイチゴを栽培。イチゴ狩りや直売所での購入も楽しめます。家族みんなで笑顔になれる農園へ。」

と、こんな感じでページの説明文を記述しましょう。

メタディスクリプションについて詳しく知りたい方はこちらの記事をご覧になってください。

スラッグの変更

次にスラッグの記述を変更しましょう。

何もしない場合はスラッグはタイトルが記述されています。

この記述を英語表記に変更します。

「農園紹介」という日本語表記を「farm-introduction」と変更します。

単語と単語の間はハイフンで区切るようにしてください。

何で変更するの？と思うかもしれませんが、詳しい説明はこちらの記事をご覧になってください。

以上２つの設定は、この後も他のページを作成した際に同じように設定します。

この後の解説では説明は省略しますが、ページを作成したら必ず設定をするようにしてください。

これで、農園紹介サイトが完成したのでページを公開しましょう。

公開したらPCとスマホで実際の表示を確認して、おかしな表示・見にくい表示はないかを確認して修正するようにしましょう。

次にお問い合せページを作成します。

お問い合せページを作成する

お問い合せページのサンプルはこちら→　お問い合せ - ○○いちご農園

①　電話でのお問い合わせ

電話での問い合わせがあると、お客様への安心にもつながります。

電話からの注文にも繋げることができます。

②　メールでのお問い合わせ

問い合わせフォームを設置する場合は、なくても大丈夫です。

③　お問い合わせフォーム

お問い合せフォームの設置はプラグインの「Contact Form7」を利用します。

プラグインの追加画面で「Contact Form7」と検索すれば表示されるので、インストールして有効化してください。

「Contact Form7」を有効化したらコンタクトフォーム追加から新しいコンタクトフォームを作成します。

赤枠のタイトルに「お問い合せ」と入力し、その他の設定は何もしないで保存して大丈夫です。

保存が完了すると、ショートコードが作成されます。

このショートコードをお問い合せページの表示させたい位置にコピペするだけで、お問い合せフォームが設置できます。

コピペはブロックツールのショートコードを選択してコピペしてください。

お問い合せフォームの送信に不具合がないか、実際に送信して確認しておきましょう。

④　注意事項

お問い合わせフォームだけを設置でもいいですが、ユーザーの立場にたって必要な情報を記載するようにしましょう。

ユーザーの不安を払拭することで、信頼性をアップさせることができます。

商品紹介ページを作成する

サンプルの商品紹介ページは直売所やネット販売を想定して作成してあります。

→　商品紹介 - ○○いちご農園

①　商品紹介

商品紹介は特に写真の映えが重要です。

こだわりのある写真を掲載して、魅力的な商品をアピールしましょう。

サンプルページではタブで商品切り替え表示ができるデザインにしてあります。

ブロックツールの「AFFINGER：タブ」を利用すればサンプルページのような表示が可能です。

「AFFINGER：タブ」の詳しい使い方はこちらの記事をご覧になってください。

②　販売所の案内

販売所で他の商品がある場合など、ページでしっかりとアピールしましょう。

また、いちご狩りといった体験コースについてのご案内を入れてもいいですね。

③　購入方法

直売所の営業時間や購入方法のご案内で販売に繋げるようにしましょう。

購入に繋げる為に問い合わせページへのリンクを設定しておきましょう。

また、決済システムを導入して本格的なネット販売を構築するのもお勧めです。

アクセスページを作成する

アクセスページのサンプルはこちら→　○○いちご農園へのアクセス - ○○いちご農園

アクセスページはそれぞれの交通手段を記載してあげましょう。

• お車でお越しの方
• 電車でお越しの方
• バズでお越しの方
• 徒歩でお越しの方

Googleマップの表示

アクセスページにはGoogleマップを埋め込んでおきましょう。

「どうやってGoogleマップを埋め込むの？」

と思う方向けにGoogleマップを埋め込む方法を解説しておきます。

Googleマップの埋め込み方法

①　Googleマップにアクセスする

②　農園の住所を検索

例：「○○いちご農園 ○○市」などを検索して表示します。

③　共有メニューを開く

④　「地図を埋め込む」を選択

「リンクを送信」と「地図を埋め込む」のタブが出ますので、「地図を埋め込む」をクリックします。

⑤　サイズを選択してコードをコピー

小・中・大・カスタムサイズから選べます。

表示されている iframeコード をコピーします。

⑥　記事にコピーしたコードを貼り付ける

コードを貼り付ける際には、ショートコードを選択してください。

特定商取引に基づく表記ページを作成する

ネット販売（イチゴや加工品の通販）を行う際に必須となる 特定商取引法に基づく表記ページ です。

サンプルページは基本的な項目を記載してあります。

実際にページを作成するときに参考にしてみてください。

→　特定商取引に基づく表記 - ○○いちご農園

プライバシーポリシーページを作成する

サンプルページでは一般的なサイトで必要な内容（個人情報の利用目的、第三者提供、クッキーの利用、免責事項など）を含めています。

実際にページを作成するときに参考にしてみてください。

→　プライバシーポリシー - ○○いちご農園

ここまでで、トップページ以外を作り上げることができました。

次にトップページを作成する為の準備をしていきます。

サイト完成まであと少しです！頑張りましょう！

メニューを作成する

農園紹介ページや商品紹介ページなど、必要な固定ページを作成することができました。

しかし、これらの固定ページは独立しているのでページ同士の繋がりを持たせる為にメニューを作成します。

メニューは「外観」→「メニュー」で作成します。

①　ヘッダーメニューを作成する

①　まず「メニュー名」を入力します。

ヘッダーメニューを作成するので、「ヘッダー」とでも入力しておきましょう。

②　メニューの位置を設定します。

ここでは以下にチェックを入れておいてください。

• ヘッダーメニュー（PC※960px以上）
• ヘッダーメニュー（横列）
• スマホスライドメニュー

③④　メニューに設定するページを選択する

メニューに設定したいページをチェックすると上画像の④の位置に表示されます。

以下のページを選択してください。

• ホーム
• 農園紹介
• 商品紹介
• アクセス
• お問い合せ

順番はドラッグすることで、変更できます。

設定が完了したら保存するのを忘れないようにしてください。

ヘッダーメニューの表示はこんな感じです↓

AFFINGER6のメニュー作成方法について、詳しくはこちらの記事をご覧になってください。

②　フッターメニューを作成する

次にフッターメニューを作成します。

作成手順はヘッダーメニューと同じです。

メニューの位置：フッターメニュー

設定するページ：特定商取引に基づく表記・プライバシーポリシー

フッターメニューの表示はこんな感じです↓

トップページを作成する

トップページの作成は通常の記事作成と違って特殊な面があるので、初心者がつまずきやすいポイントです。

トップページをデザインする方法はいくつかありますが、ここでは初心者でもわかりやすいAFFINGER6の「マイブロック」機能を活用した作成方法を解説していきます。

①　マイブロックでコンテンツを作成する

「マイブロック」→「新規マイブロックを追加」を選択します。

マイブロックで作成した場合、タイトルは表示されないので管理しやすい記述で大丈夫です。

「トップページ」とでも入力しておきましょう。

あとは普通の記事を作成する要領でトップページのコンテンツを作成してください。

コンテンツが完成したら「公開」をクリックしてください。

②　マイブロックのコードをトップページに貼り付ける

マイブロックを作成後に表示されるショートコードをコピーします。

AFFINGER管理の「トップページ」で挿入コンテンツの欄にコピーしたショートコードを貼り付けます。

設定を保存すれば、トップページにマイブロックで作成したコンテンツが表示されます。

トップページのコンテンツを変更したい場合はマイブロックのコンテンツを変更して保存すれば反映されます。

以上で基本的な農業サイトの作成は完了です。

これを基にデザインなどを色々と工夫してみるのがスムーズです。

初心者向けに出来る限り詳しく解説したので、農業サイトを作成したい方は是非参考にしてみてください。

\\ 　このテーマ！ AFFINGER6で作成しました //

AFFINGER6の使い方

AFFINGER6：関連記事