製造業やEC物販の中小企業に向けて、現場業務のAI自動化支援を届けるサービスが「ゲンバAI」です。この記事では、ジッソウLABが運営するゲンバAIのランディングページを取り上げ、Webデザインの見本として、色彩や情報設計、UI/UXの工夫を読み解いていきます。
結論から述べますと、このサイトは森の緑と濃紺を土台にしながら、差し色のオレンジで行動を促す配色と、番号付きの章立てで長い縦スクロールを迷わせない情報設計が持ち味です。デザインを探している方が参考にしやすいポイントを、順番に確認していきます。
ファーストビューで示す「現場×AI」の世界観
ページを開いてまず目に入るのは、森の緑がやわらかくぼける写真の上に、濃紺のジャケットを着た人物を右側へ配したファーストビューです。背景に自然光の写真を敷くことで、無機質になりがちなAIというテーマに、親しみと落ち着いた印象を添えています。
左寄せに置かれた白い見出しでは、御社の“一番めんどう”な作業を、AIで小さく片づけていこうという趣旨の一文が大きく組まれ、文字の一部の下にはオレンジのマーカー風の帯が重ねられています。太めのゴシック体と手描き風のラインが、堅くなりすぎない現場目線のトーンをうまく表しています。
見出しの下には「FAX・PDF注文を一覧化」などの要点を、白い角丸のタグで3つ横並びにして、サービスの中身を一目で伝えています。さらにその下では、オレンジで塗りつぶした相談ボタンと、線だけで描いた枠線のボタンを左右に配し、主となる導線と次点の導線を色の強さで見分けられるように設計しています。
森の緑と濃紺、差し色オレンジで組み立てた配色設計
このサイトの配色は、役割分担がはっきりしています。全体の土台には濃紺やダークなティールを据え、セクションの背景には淡い水色や白を敷いて、読みやすさと信頼感を両立させています。
そのうえで、押してほしいボタンや見出しの番号、要点のタグにはオレンジを効かせ、視線が自然と行動につながるように誘導しています。相談導線のなかでもLINEのボタンだけは緑にして、他の入口と機能を色で区別している点も、迷いを減らす工夫として参考になります。
SAFETYやROI、最下部のCTAといったセクションでは、背景を濃紺のダークトーンに切り替えています。明るい水色の章で情報を読みやすく見せ、暗い章で安心や決断のムードを引き締めるという、明暗のコントラストによる緩急づけが効いています。
番号付きセクションで導く縦長構成の情報設計
縦に長いランディングページでありながら、読み手が現在地を見失いにくいのは、章立てが番号で整理されているからです。CHECK、EFFECT、APPROACH、SAFETY、ROI、PRICE、COMPARE、MODEL CASE、ABOUT US、FLOW、FAQという11の章が、01から順番に並んでいます。
英字ラベルと番号で作る見出しのリズム
各章の頭には、小さな番号と短い横線を組み合わせたキッカーが置かれ、その下に大きな英字ラベルが続きます。さらにその下へ日本語の問いかけ見出しを重ねる三層構造にして、章の始まりを視覚的にはっきりと知らせています。
英字を大きく、日本語を読ませる文にするという役割分担によって、装飾性と可読性の両方を確保しています。同じパターンを全章でくり返すことで、スクロールしても一定のリズムが保たれます。
背景の明暗を切り替えて章を区切る
章ごとに背景の明るさを切り替える手法も、区切りを伝えるうえで役立っています。淡い水色の章と濃紺の章が交互に現れることで、長いページでも「ここから別の話に移った」と直感的に理解できます。
情報を整理して見せるカードと表組みのレイアウト
このサイトは、数字や比較といった込み入った情報を、カードと表で丁寧に整理しているところに強みがあります。文章で長々と説明するのではなく、視覚的なまとまりに落とし込む姿勢が一貫しています。
変化を対比させるビフォーアフターのカード
EFFECTの章では、白い角丸カードのなかで、取り消し線と矢印を使って作業の前後を対比させています。オレンジのタグで補足を添えることで、何がどう変わるのかを短時間で読み取れる作りです。
APPROACHの章では、望遠鏡や芽などの絵文字アイコンを添えた3枚のカードを横並びにし、①②③の順で進め方を示しています。アイコンと番号を組み合わせることで、手順が頭に入りやすくなっています。
横スクロールに対応した表組み
PRICEやCOMPAREの章では、サービスの進め方や他の選択肢を、行と列に整理した表組みで見せています。スマートフォンでは「横にスクロールできます」という案内を添え、狭い画面でも表が破綻しないように配慮している点が実務的です。
MODEL CASEの章では、代表的な進め方を2枚のカードに分け、困りごととやること、結果を段階的に並べています。ROIの章でも、導入によって作業がどう変わるかの目安を、規模のイメージ別にダークな背景のカードでまとめており、抽象的な説明を具体的なイメージへ橋渡ししています。
余白とコピーで生み出す安心感のトーン＆マナー
ゲンバAIのサイトは、情報量が多い一方で、余白を広めにとって圧迫感を抑えています。段落は2〜3文でこまめに区切られ、読み手が一気に読み進められるテンポを保っています。
SAFETYの章では、機密の扱いや確認の流れを、濃紺の背景に白抜きのカードで並べ、慎重さを落ち着いたトーンで伝えています。FAQの章はアコーディオン形式の質問リストで、知りたい項目だけを開いて読める構成です。
最下部のCTAでは、破線の枠で囲んだ短いフレーズを並べ、大きな白い見出しへとつなげています。その下にオレンジと緑の2つのボタンを配し、相談への入口をはっきりと示す締めくくりになっています。
実物写真と顔出しで支える信頼感の演出
このサイトが信頼感を生んでいる大きな理由は、実物の写真と担当者の顔出しを積極的に使っている点にあります。ファーストビューの人物写真から、担当者が前面に立つ姿勢が伝わってきます。
ABOUT USの章では、代表と開発担当の2名を、丸い顔写真とそれぞれの担当領域を添えて紹介しています。誰が対応するのかを見える形にすることで、はじめて訪れる方の不安をやわらげる効果が期待できます。
フッター周辺には、ジッソウLABが運営元であること、大阪を中心とした関西圏に対応していることなど、運営者情報が自然な形で置かれています。会社概要や運営者のページへ導く導線もあり、E-E-A-Tを意識した情報設計になっています。
ゲンバAIのデザインから学べることとサイトの見どころ
ゲンバAIのランディングページは、専門性の高いサービスを、親しみやすい写真とはっきりした配色、番号付きの章立てで分かりやすく見せる好例です。カードと表組みで情報を整理し、実物写真と顔出しで信頼感を補強する組み立ては、同じようにサービスを訴求したい方の参考になります。
製造業やEC物販の現場に寄り添うトーンと、迷わせないUI設計をあわせて確認したい方は、ぜひ実際の画面をご覧ください。大阪で製造業のAI導入を検討している方は、ゲンバAIの公式サイトで、レイアウトや導線の実物をチェックしてみてください。
