製造業に向けてAI・データ活用の支援を行うKnowBreWの公式サイトは、濃紺と白のコントラストでつくる落ち着いた画面と、読み手の状況から入口を選ばせる情報設計が印象に残ります。扱う内容は専門性が高いのですが、見出しの階層とカードの粒度がそろっているため、初めて訪れた人でも全体像をつかみやすい構成になっています。ここではWebデザインの見本という視点から、ファーストビュー、配色、書体、レイアウト、導線の順に読み解いていきます。
ファーストビューがつくる静かな第一印象
結論から述べますと、このサイトの第一印象は写真の力ではなく、余白と文字の大きさで組み立てられています。目を引く装飾を置かず、大きな見出しと広い白い面によって、読み手が言葉を追うことに集中できる状態を用意しています。ここでは冒頭画面の要素の絞り方と、その配置の意図を見ていきます。
明朝体の見出しと、抑えた要素数
冒頭には、AIとデータの活用を現場で使える力に変えるという趣旨のメッセージが、明朝体の大きな文字で2行に分けて置かれています。文字色はほぼ黒に近く、背景の白との明度差が大きいため、視線は迷わず見出しへ集まります。
その下には短い段落が3つ続き、手元にあるデータから始める姿勢や、小さく試してから広げるという進め方が簡潔に説明されています。1つの段落が2文程度に抑えられているので、縦に読み下すリズムが崩れません。
2種類のボタンで示す導線の優先順位
本文の下には「相談する」と「課題から探す」という2つのボタンが並びます。前者は濃紺で塗られた面のボタン、後者は白地に細い枠線を持つボタンで、塗りと線の差だけで主導線と副導線が見分けられます。
2つは大きさと形をそろえたうえで色の強さだけを変えているため、画面が騒がしくなりません。すぐに相談したい人と、まず自社の課題に近い情報を読みたい人の両方を、同じ位置で受け止める作りになっています。
画面の外周を囲む濃紺のフレーム
もう一つ特徴的なのは、コンテンツの外側に濃紺の帯が回り込み、白い本体が一段浮かんで見えるフレーム状のレイアウトです。上部のヘッダーと最下部のフッターの濃紺が呼応し、長くスクロールしても画面の輪郭が失われません。
この枠があることで、白と淡いグレーを交互に使うセクション構成でも印象が散らばらず、1冊の資料をめくっているような統一感が生まれています。ヘッダーは白地で、左にロゴ、右に5つのメニューと濃紺のボタンを置いた簡潔な構成です。
配色と書体から読み取れるトーン＆マナー
配色は3つの明度差で組み立てられており、装飾のための色はほとんど使われていません。書体の使い分けも役割がはっきりしていて、見出しと本文で読み手の姿勢を切り替える設計になっています。ここでは色の層と、書体の役割分担を順に確認します。
濃紺・白・淡いグレーという三層の使い分け
基調になっているのは、フレームやフッターに使われる濃紺と、読むための面である白、そしてセクションの背景に敷かれる淡いグレーです。濃紺は締めの役割、白は本文を読ませる面、淡いグレーはひとまとまりを示す面として、それぞれ持ち場が決まっています。
背景色を白と淡いグレーで交互に切り替えているため、区切り線を増やさなくてもセクションの境目が伝わります。色数が少ない分、内容の切り替わりが背景の変化だけで理解できる状態です。
リンクの青とロゴのオレンジという2つのアクセント
アクセントカラーは2種類に絞られています。セクションのラベルやテキストリンクには落ち着いた青が使われ、押せる場所と読むだけの場所が色で見分けられます。
もう一つはロゴに入るオレンジです。山のような形のシンボルと、社名の後半の文字に暖色が使われており、濃紺中心の画面の中で一点だけ体温のある色として働きます。本文側でオレンジを使っていないため、ロゴの存在感が薄まりません。
明朝体の見出しとゴシック体の本文
見出しは明朝体、本文と補足はゴシック体という使い分けが、全体を通して徹底されています。明朝体の抑揚が、技術寄りの内容に硬さと落ち着きを与えています。
一方で本文のゴシック体は行間が広めに取られており、説明が長くなっても視線が迷いません。書体を切り替えるだけで主張と説明の区別が付くため、飾りに頼らない見出し表現が成り立っています。
二重の入口を用意した情報設計
このサイトの情報設計でとりわけ参考になるのは、同じ支援内容へ課題からもサービスからも辿り着ける点です。読み手が自分の検討段階に応じて入口を選べるため、専門用語に馴染みがない段階でも先へ進めます。ここでは2つの入口と、全体像を示す仕掛けを取り上げます。
状況に近いカードを選ばせる課題起点の一覧
上部のセクションでは、現場で起こりがちな悩みが4枚のカードに整理されています。どのカードも、太字の悩み、数行の説明、対応する支援テーマへの矢印リンクという同じ型で作られています。
カードの見出しは、不良の原因を突き止めたい、検査や手戻りのムダを減らしたいといった当事者の言葉で書かれているため、読み手は自分の状況と照らし合わせながら選べます。専門用語ではなく業務の言葉を入口に置いた点が、この設計の要になっています。
4つの入口に収めた6つの支援テーマ
サービスのセクションでは、支援テーマが4つの入口に振り分けられています。すでに手元にデータがある場合、これからデータを取る場合、社内で継続して活用したい場合、そして生成AIを業務に取り入れたい場合という具合に、検討段階そのものが見出しになっています。
各カードの右上には、データ分析系と生成AI系のどちらに属するかを示す小さなタグが添えられます。カードの中では支援テーマ名と一文の説明、詳細ページへの矢印リンクが横並びに置かれ、6つのテーマを見比べやすい形にまとまっています。
数字の帯と番号付きのステップ表示
冒頭画面のすぐ下には淡いグレーの帯があり、製造業の支援先が約20社、累計の支援テーマが30件超、支援経験のある業界が11という3つの数字が、大きな明朝体で並びます。数字と小さなラベルを上下に組み、縦の区切り線で分けた読み取りやすい構成です。
帯の右側には補足の説明文が置かれ、実績には代表の前職での支援を含むという注記も同じ帯の中に小さく添えられています。数字を強く見せながら前提も同じ場所で示す扱いは、信頼性の設計として参考になります。
ページ後半の進め方のセクションでは、01から05までの番号を大きく置いたステップ表示が横に並びます。初回の相談から、課題やテーマの整理、詳細なヒアリングとデータの確認へと進む流れが順を追って示され、番号が目印になるので長い工程でも現在地を見失いません。
読み進めやすさを支えるUIの細部
ページの縦が長いにもかかわらず読み疲れしにくいのは、繰り返し使われる小さな部品が統一されているからです。セクションの入口、カード、リンクという3つの部品が、同じ規則で作られています。ここではその反復の作り方を見ていきます。
短い横線と小さなラベルでそろえたセクションの入口
各セクションの冒頭には、短い横線と小さな青文字のラベルが必ず置かれています。ラベルの語がヘッダーのメニュー名と対応しているため、いま画面のどのまとまりを読んでいるのかが分かります。
その下に明朝体の大きな見出しが続く形も共通で、読み手は同じリズムで次のセクションへ入っていけます。装飾を足さず、反復だけで秩序を作る素直な手法です。
タグと点線で情報の層を分ける
支援イメージのカードでは、業種や扱うデータの種類が角の丸いタグで示され、その下にタイトルと一言の補足が続きます。タグ、見出し、説明という3つの層が視覚的に分かれているため、一覧の中から自社に近いものを探しやすくなっています。
製造業のデータ活用が難しい理由を挙げたセクションでは、番号と見出しと説明の下に点線が引かれ、その先に対応する考え方へのリンクが置かれています。点線が、課題とその先の答えを分ける仕切りとして働いています。
矢印付きのテキストリンクで次の行き先を示す
サイト全体を通して、リンクは矢印を伴うテキストとして表現されています。塗りのボタンは相談への導線に絞られ、それ以外は控えめな青文字と矢印に統一されているため、押すべき場所の優先順位が崩れません。
ページ下部に置かれた濃紺の帯では、白い明朝体の2行見出しの下に、白いボタンが1つだけ配置されます。色を反転させた面の中で選択肢を1つに絞る作り方によって、読み終えた直後の行き先が明確になっています。
専門的なテーマを分かりやすく見せる言葉の設計
デザインの評価というと視覚要素に目が向きがちですが、このサイトでは言葉の粒度もあわせて設計されています。扱えるデータや支援の範囲を先に開示する姿勢が、読み手の期待値を整える働きをしています。ここでは複合的なテーマの見せ方を2つの角度から確認します。
官能評価のような感覚データの扱いを明示する
扱えるデータの種類をまとめたページでは、表形式のデータや画像、音や波形、時系列のログと並んで官能評価が取り上げられています。味や匂い、触感、見た目といった人の感覚による評価について、人によって基準やばらつきが異なる点を補正したうえで、数値として分析に使える形へ整えると説明されています。
官能評価のAI活用には、評価する人の主観や体調で数値が揺れやすく、そのままでは学習の材料にしにくいという難しさがあります。予測に関する支援テーマのページでも、対応できるデータとして評価者の差の補正が挙げられており、どのデータで何ができるのかを先に一覧で示す構成は、専門的な内容を扱うサイトの見せ方として学ぶところが多いといえます。
研究開発の実験データに向けた分析支援の示し方
研究開発の現場で実験データの分析支援に求められるものは、集計や可視化にとどまりません。このサイトでも、手元のデータで何が言えるのかを先に確かめる考え方と、これから取るデータの設計から関わる考え方が、それぞれ別の支援テーマとして分けて示されています。
できることだけでなく、対応が難しい要望をあわせて掲げている点も特徴的です。範囲の内と外を同じ画面で示す構成は、読み手が自社の状況と照らして判断しやすく、問い合わせの前に認識をそろえる効果があります。
運営者の顔が見える構成
支援を依頼するサービスのサイトでは、誰が担当するのかが判断材料になります。このサイトは代表の紹介にひとつのセクションを充て、経歴を4つの軸に整理して見せています。ここでは人物紹介とフッターの作りを確認します。
レイアウトは、左に正方形の顔写真、右に明朝体の見出しで氏名と立ち位置を置き、その下に現場、設計、データ分析、理論という4つの区分を横罫線で区切って並べる形です。代表の影山 祐介様がどの領域を歩んできたのかが一覧で読み取れるため、長い文章を読まなくても要点が伝わります。
フッターは濃紺の面で、左にロゴタイプと短い説明、右にサービス、支援イメージ、会社という3つのまとまりでリンクが並び、サイトの構造がそのまま地図のように示されます。運営はKnowBreW合同会社で、東京都中央区銀座に拠点を置き、AI・データ活用の定着支援を軸に、受託分析や調査業務、講演会やセミナーにも対応する事業内容が掲げられています。
まとめ：情報量の多いサービスサイトを整理して見せる見本
KnowBreWのサイトは、濃紺のフレームと明朝体の見出しで落ち着いたトーンを作りながら、課題起点とサービス起点という二重の入口によって、専門性の高い内容を選びやすく整理したコーポレートサイトです。色数を絞り、カードとリンクの型を統一し、背景色の交互配置でセクションを分けるという基本的な手法だけで、情報量の多いページを最後まで読み進められる状態にまとめています。
制作の参考にする場合は、装飾よりも先に情報の並び順と入口の設計を決めるという順序が学べます。読み手の検討段階ごとに入口を用意し、どの入口からも同じ支援テーマへ辿り着ける構造は、扱うサービスの数が多いサイトほど効果を発揮します。
実際の配色や余白の取り方、カードの粒度は、画面で確かめると理解が早くなります。詳しくは、官能評価のAI活用まで扱うKnowBreWの公式サイトをご覧ください。
