梨農園のホームページ、デザインへのこだわり。９割がスマートフォンから見られるサイトの作り方

2026年10月24日 07:58

NDシステムズは、福岡県久留米市藤山町の梨農園「梨屋さん」のホームページの構成とデザインを担当しています。検索から訪れる方の9割以上がスマートフォンで見ているため、スマートフォンで見たときの読みやすさと、どのページでも同じ印象で読めることを特に大切にしてきました。今回は、スマートフォンの画面を中心に、比べやすいようにパソコンの画面も並べながら、ページごとに気をつけていることをご紹介します。

梨屋さんについて

梨屋さんは、福岡県久留米市藤山町で梨を栽培・直売している梨農園です。幸水や豊水・甘太をはじめ、時期ごとに個性の異なる多彩な品種を育てています。店舗での直売のほか、全国発送も承っています。

ホームページの「農園・店舗案内」では、農園を次のように紹介しています。

当園は山あいにあり、水はけと日当たりを大切にしながら栽培しています。
久留米市内を遠くまで一望できる、自然豊かな里山です。
個性豊かな梨や最新品種をお楽しみいただければ幸いです。
手間を惜しまず育てた、おいしく珍しい梨をぜひご賞味ください。

梨屋さんホームページ「農園・店舗案内」

1988年から直売を続けており、ホームページは2021年に開設しました。

NDシステムズが担当したこと

梨屋さんのホームページでは、NDシステムズが次の作業を担当しています。

載せる情報の整理
構成とデザイン
ホームページの制作
内容を更新する仕組みづくり
販売の時期ごとの見直し

読む方は、店頭で梨を買う方と、発送を依頼する方の2種類に分かれます。店頭で買う方には「農園・店舗案内」「新着情報」「ギャラリー」を、発送を依頼する方には「品種」「価格表」「送料」「お見積」「ご注文」を用意し、どちらの方も必要な情報まで迷わずたどり着けるように構成しました。

9割以上がスマートフォンから

Google検索からのクリックのうち、約92%がスマートフォンからでした（Google Search Console、2026年6月30日〜9月29日の92日間）。パソコンは約6%、タブレットは約2%です。

画面の幅に合わせて並びや形を変える作り方を、レスポンシブデザインと呼びます。梨屋さんのホームページでは、パソコンで見栄えのする形を先に作ってスマートフォン用に縮めるのではなく、まずスマートフォンで読みやすい形を土台にしています。そのうえで、次に多いパソコンでは、広い画面を活かしてきれいに映えるように組み立てています。

スマートフォンを土台に、パソコンでは広さを活かす

見る方の多くがスマートフォンを使っているため、どのページもスマートフォンの表示を先に決めています。パソコンは同じ内容を、広い画面に合わせて並べ直しています。

スマートフォンの画面では、次のことを守っています。

内容を1列に並べ、上から順に読める
案内やボタンは、指で押しやすい大きさにする
横にスクロールさせない（送料の表は地域ごとのカードに組み替える）
写真は画面の幅いっぱいに見せ、拡大の操作をなくす
ページの一覧は「メニュー」のボタンにまとめる

パソコンの画面では、広さを次のように活かしています。

上の帯にすべてのページの名前を並べ、どこからでも移れる
梨畑の写真を横長に大きく見せる
トップの4つの案内や、4か月分の営業カレンダーを横に並べ、一目で見渡せる
品種とギャラリーは3〜4列に並べ、写真を押すと拡大する
送料は地域を横に並べた表にし、地域ごとの違いを比べやすくする

どちらの画面でも、色・書体・カードの形は同じにしています。スマートフォンで見た方がパソコンで開き直しても、同じホームページだと分かるようにするためです。

トップ：開いてすぐ、画面いっぱいの梨畑

開いてすぐ、画面全体に梨畑の写真を出しています。写真の高さは、スマートフォンのアドレスバーを除いた画面の高さに合わせ、写真の下が切れたり、余白が出たりしないようにしています。写真が届くまではロゴの画面を出し、届いたらふわっと写真に切り替えます。

写真の下には、丸いボタン「梨屋さんについて」を置いています。押すと、すぐ下の概要まで移動します。ボタンの矢印はゆっくり上下に動きますが、端末で「視差効果を減らす」などの設定をしている方には動かしません。

概要の見出し「個性豊かな梨をお届けします」は、狭い画面でも語の途中で折り返さないようにしています。その下に、「農園・店舗案内」「品種」「価格表」「送料」の4つの案内を、指で押しやすい大きさのカードで並べました。スマートフォンでは1列、タブレットでは2列、パソコンでは4列に並びます。

色と文字：梨畑から取った色

サイト全体の色は、梨畑から取っています。

梨の葉の、落ち着いた緑
梨の果肉の、温か味のある白色
土と樹皮を思わせる茶色
熟した梨の黄色

文字は丸みのある書体にし、農園のやわらかい雰囲気に合わせました。どのページも同じ色と書体を使うことで、スマートフォンでページを移っても、同じホームページを読んでいると感じられるようにしています。

品種：農園主が仕上げた写真と説明

品種のページの写真と説明は、梨屋さんの農園主が手がけています。写真はすべて、農園主が本格的なカメラで撮影したものです。収穫の時期・糖度・由来・特徴の説明も、細かいところまで農園主が確認し、仕上げています。

NDシステムズは、その写真と説明が、スマートフォンでもそのまま伝わる形にすることを担当しました。

ページの最初に、品種ごとの収穫の時期を横の帯で並べたカレンダーを置いています。青梨系は緑、赤梨系は茶色にし、色で見分けられるようにしました。

このカレンダーは、パソコンとスマートフォンで描き方を変えています。パソコンでは、品種名に読みがなを添え、店休日を淡い赤、営業期間外を灰色の帯で重ねて、マウスを重ねると説明が出るようにしています。スマートフォンでは、狭い画面で帯が細かくなりすぎないよう、読みがなと店休日・営業期間外の帯を省き、品種名と収穫の時期の帯だけをはっきり見せています。

同じカレンダーを、パソコンでは詳しく、スマートフォンでは要点に絞って描いています

品種ごとに1枚のカードを作り、写真、収穫の区分、平均糖度、収穫の時期（出始め・最盛期・終盤）、由来、特徴を載せています。収穫の区分と平均糖度は上の札にまとめ、時期と由来は「ラベル｜内容」の2列にそろえました。由来は交配の組み合わせで長くなるため、札にはせず、下の欄で折り返して読めるようにしています。

スマートフォンでは、写真を画面の幅いっぱいに大きく見せます。パソコンでは写真を押すと拡大し、カードは画面の幅に応じて4列・3列・2列と並びが変わります。ページの最後には「収穫期や糖度は気象によって大きく変わることがあります」と書き添えています。

価格表：表の前に、何の価格かを伝える

表を読む前に、「こちらは全国発送（宅配便でのお届け）の価格表です」と目に入るようにしています。店頭での価格と取り違えないようにするためです。

品種や詰め合わせごとのカードには、「詰め合わせ」「単品」と、受付の状況（受付中・受付終了など）を色の札で示しています。発送期間は「7月30日頃」の途中で折り返さないようにし、狭い画面では日付をまとめて次の行に送ります。表の中で長い「5kg箱（特選品）」だけは、「（特選品）」の前で折り返せるようにしました。