福岡県遠賀郡水巻町を拠点にドローンでの農薬散布や肥料散布を請け負う川原商店のサイトは、農業に関わる事業のWebデザインを考えるうえで参考になる見本です。クリーム色の地に緑とオレンジを重ねた配色と、曲線や角丸を多用したあしらいによって、機械的になりがちなドローンという題材をやわらかく親しみやすい印象に置き換えています。ここでは、ファーストビューの組み立てから配色、情報の並べ方、問い合わせまでの導線までを順番に読み解いていきます。
ファーストビューで「誰が何をするのか」を言い切る構成
このサイトの第一印象を決めているのは、左に言葉、右に写真を置いた左右非対称のファーストビューです。視線が左上から右下へ自然に流れるよう要素が配置され、スクロールを始める前の段階で事業の中身がつかめるようになっています。ここでは、その組み立てを三つの角度から確認します。
余白を広く取った左側のテキストブロック
左半分はクリーム色の地色をそのまま活かし、要素を詰め込まずに配置しています。小さなオレンジの文字で扱う分野を示し、その下に太いゴシック体で店名を大きく置き、さらに小さめの文字で誰がどのように作業を行うのかを二行で補っています。文字サイズの差がはっきりしているため、離れて眺めても読む順番に迷いません。
店名は文字間をゆったり空けて組まれており、画数の多い漢字が続いても窮屈に見えません。地色と対比の強い濃紺を使うことで、右側の写真が持つ情報量に負けずに名前が印象に残ります。
操作画面をそのまま見せる写真の選び方
右側には、ドローンを操作する端末の画面が画面の端いっぱいまで広がっています。海沿いの段々になった農地を上空から捉えた映像に、飛行ルートを示す点線や方位、高度や速度といった計器の表示が重なり、実際の作業がどのように進むのかが一目で伝わります。
作業風景ではなく操作画面を選んでいる点が特徴的です。読み手にとって未知の技術であるほど、中で何が起きているのか分からないことが不安の種になりますが、数値の並んだ画面を最初に見せることで、感覚ではなく計測に基づいて管理された作業だという印象を先に届けています。
色を一点に絞った入口のボタン
ファーストビューの中で唯一、彩度の高い面になっているのが、左下に置かれた角丸のオレンジのボタンです。周囲がクリーム色と写真で占められているため、押せる場所を探す必要がありません。ヘッダーの右端にも同じ色の問い合わせボタンが置かれ、画面の上部と中央付近の二か所で入口が確保されています。
三つの色で役割を分けた配色とトーン
配色は、地色のクリーム、面として広く使う緑、差し色のオレンジ、そして文字の濃紺という組み立てです。色数を絞ったうえでそれぞれに担当する役割を与えているため、ページが長くなっても全体の印象がぶれません。
緑の面で話題の切り替わりを示す
ページを下へ進むと、クリーム色の区画と鮮やかな緑の区画が交互に現れます。緑は稲や葉の色を思わせるため、農業という題材と無理なく結び付き、単なる背景色以上の意味を持ちます。読み手は色が変わったことで話題の切り替わりを察知でき、見出しを読む前におおよその構成をつかめます。
区画の境目は直線ではなく、ゆるやかな弧を描く形で処理されています。四角い帯が積み上がるときの硬さが和らぎ、上下のセクションが地続きに見える効果も生まれています。
丸い形で統一したあしらい
ボタン、カード、写真の切り抜き、アイコンの台座に至るまで、角の丸い形が繰り返し使われています。写真は円形や大きく丸めた四角形で抜かれ、背景の面も角を大きく落とした形で重なります。この形の統一が、要素の種類が多いページでも散らかった印象を与えない理由になっています。
見出しに使われている書体は、線が太く丸みのあるゴシック体です。連番の数字には「0」に斜線が入る書体が選ばれており、細部まで同じ調子が保たれています。
スクロールに沿って疑問を解消していく情報設計
このサイトは、事業者が伝えたい順ではなく、読み手が知りたい順に近い並びで構成されています。作り手の紹介から始まり、実際の事例、読み手自身の困りごと、選ぶ理由、サービスの中身、依頼後の流れ、そして疑問への回答という順番で進みます。
事例を早い段階に置く判断
店の紹介に続いて、散布事例のカードが四枚横並びで現れます。各カードには写真と市の名前、内容を要約した一文が載り、どの地域でどのような課題に向き合ったのかを短時間で読み取れます。地名を小さく添えるだけでも、近隣の読み手にとっては自分の田畑と重ねて考える手がかりになります。
困りごとを言葉にして受け止める区画
緑の面に切り替わった先では、吹き出しのような形をした白い枠が三つ並び、散布の時期や人手の不足といった悩みがオレンジの文字で書かれています。サービスの説明を続ける前に読み手の状況を言い当てる構成になっており、次に続く強みの説明が、その悩みに対する答えとして読めるようになっています。
交互配置と大きな連番で読ませる強みの紹介
強みの紹介は、円形に切り抜いた写真とテキストを左右交互に置く形で三つ続きます。オレンジの大きな連番が各項目の頭に置かれ、見出しはオレンジの帯に白い文字を乗せた形で二行に折り返されています。マーカーで線を引いたような見え方になり、説明文が続く中でも要点が浮かび上がります。
同じ形を三度繰り返しながら写真の左右だけを入れ替えているため、読み進めるリズムが生まれ、単調さも避けられています。説明文の下には関連する読み物への文字リンクも置かれ、さらに詳しく知りたい読み手だけが深い階層へ進める作りです。
要点だけを抜き出したサービスの概要
サービスを紹介する区画では、細い曲線が縦に伸び、その脇に白い角丸のカードが段違いで並びます。カードには線で描いたアイコンと短い項目名が置かれ、使用機材や対象エリアといった要点だけを拾い読みできる形です。曲線と丸い点が、視線を上から下へ引き継ぐ役割を担っています。
この区画の下には、詳細ページへ進む細長いオレンジのボタンが中央に置かれています。要点を並べる場所と詳しく説明する場所を分ける考え方は、扱う情報が多いサービスを紹介するときに応用しやすい手法です。
依頼をためらわせないためのUIの工夫
初めて依頼する読み手が抱く不安は、手順の分かりにくさと疑問の残りやすさに集まります。このサイトはその二つに対して、図解と折りたたみという別々の手法で答えています。
五つに分けた依頼の流れ
緑の面に置かれた流れの図では、問い合わせから当日の作業までが五つの段階に分けられています。白い円の中に電話や打ち合わせ、圃場、計測、機体を表す線画のアイコンが入り、段と段の間はオレンジの三角形でつながれています。番号と短い説明文が添えられているため、絵と文章のどちらからでも理解できます。
畳んで見せる質問の一覧
質問の区画は、白いカードに質問文だけを表示し、右端の記号で開閉する形です。最初は見出しだけが並ぶので全体の量を把握しやすく、気になる項目だけを開いて読み進められます。カードには淡い影が付き、触れられる領域であることが形から伝わります。
並んだ質問の下には一覧へ進む丸い矢印ボタンが置かれ、続きを読みたい読み手を取りこぼさない作りです。同じ形のボタンは事例や読み物の区画にも繰り返し現れ、サイト全体で操作の意味が一定に保たれています。
読み物とSNSへの入口
読み物の区画では、写真と分類の札を付けたカードが四枚並びます。札は角丸の枠線で囲まれ、扱う話題の違いが形と色で区別できます。その下にはSNSのアイコンを添えた入口も用意され、サイトの外にある発信へも移れるようになっています。
川原商店のサイトから学べること
川原商店は、遠賀郡水巻町を拠点として、ドローンによる農薬散布や肥料散布のほか、苗木の運搬や航空測量なども手がけています。事業所案内には、代表の川原 健作様が農薬指導士と農業ドローン技能認定を持つこと、賠償責任保険に加入していること、DJI AGRAS T70PやT10、Matrice 4Eといった機材を使うこと、福岡県全域と近隣の県に応じることが整理して示されています。
デザインの面では、色数を絞って役割を決めること、曲線と角丸で題材の硬さを和らげること、読み手の悩みを先に置いてから答えを示すことの三点が、そのまま他の業種にも応用できる考え方です。写真も雰囲気を作るためだけの素材ではなく、作業そのものを写したものが選ばれており、説明の裏付けとして働いています。
問い合わせの区画は緑の大きな角丸の面で作られ、白いボタンが中央に置かれています。ページの最後まで進んだ読み手が、迷わず次の行動へ移れる締めくくりです。実際の画面の動きや写真の質感まで含めて確かめたい方は、福岡でドローンによる農薬散布の代行を担う川原商店の公式サイトをご覧ください。
