群馬県北群馬郡吉岡町に拠点を構えるUMEO CREATEは、県内の中小企業へ向けてAIの導入支援や業務システムの開発、社内向けの研修などを手がけています。その公式サイトは、扱う題材の難しさとは対照的に、白と濃紺だけで組まれた静かな画面が最後まで続く構成になっています。
結論から述べますと、このサイトの設計は「AIという曖昧になりがちな話題を、読み手が自分の会社の作業に置き換えられるところまで具体化する」という一点に集約されています。派手な演出で目を引くのではなく、番号・図解・対比といった整理の道具を積み重ねることで、長いページを最後まで読ませる作りです。
ここでは、実際の画面で確認できる範囲に限って、ファーストビューの組み立て、配色と書体の選び方、情報設計、図解表現、問い合わせまでの導線を順に見ていきます。事業内容を伝えるサイトを検討している方にとって、参考になる点の多い一例です。
白と濃紺に絞り込んだトーン＆マナー
このサイトを開いてまず気づくのは、使われている色の少なさです。背景は白と、わずかに青みを帯びた淡いグレーの二種類だけで、文字と差し色には濃紺から明るい青までの同系色が使われています。写真以外に有彩色がほとんど登場しないため、画面全体が落ち着いた印象にまとまっています。
一色に絞った差し色が担う役割
青系の色は、装飾ではなく機能に割り当てられています。セクション冒頭の英字ラベル、リンクの文字、ボタン、図解の面など、読み手に「ここは押せる」「ここが要点」と伝えたい箇所だけが青で示されます。
そのため、本文を読み飛ばしながらスクロールしても、青い文字を追うだけで結論と行き先が拾えます。色数を絞る判断が、そのまま視線誘導の精度につながっている好例です。
明朝体とゴシック体の使い分け
大見出しには明朝体が、本文と小見出しにはゴシック体が使われています。見出しは一文で言い切る短い日本語で組まれており、明朝体で置かれることで主張の強さよりも落ち着きが先に伝わります。新しい話題を扱いながらも、画面が軽くなりすぎていません。
本文側は行間がゆったり取られ、一行の文字数も抑えられているため、専門的な用語が並ぶ説明でも読み進めやすくなっています。書体の対比が、そのまま見出しと本文の役割分担として働いています。
ファーストビューの組み立て方
ファーストビューは、写真の上に文字を重ねる定番の形を取りながら、写真の主張を意図的に弱めた作りになっています。見せたいのは画像ではなく言葉である、という判断がはっきり読み取れる画面です。
写真を淡く敷いて文字を主役にする
背景には、机の上に図面や部品、ノートパソコンが並ぶ明るい室内写真が敷かれています。全体に白いベールをかけたように明度が上げられており、被写体の輪郭はほとんど背景として溶け込んでいます。
その上に、字間を広げた英字のラベルが小さく置かれ、続いて明朝体の見出しが二行で大きく組まれます。ラベル、見出し、説明文、ボタンという上から下への流れが素直なので、初めて訪れた人でも視線が迷いません。
屋号の由来を折り込んだ五本柱のカード
画面の右側には、半透明の白いカードが浮かんでいます。THE FIVE PILLARS と題されたこのカードには五つの英単語と短い日本語の説明が並び、それぞれの頭文字だけが青で強調されています。
頭文字を上から拾うと屋号のつづりが現れる仕掛けになっており、理念の説明と名前の記憶をひとつの要素で兼ねています。カードの背後には枠線がわずかにずらして重ねられ、平坦になりがちな白い面に奥行きが生まれています。
早い段階で顔を見せる構成
ファーストビューの下端には、代表の顔写真が円形で配置され、名前と一言のメッセージが添えられています。誰が担当するのかが最初の画面で分かるため、少人数で運営する事業の信頼感を補う役割を果たしています。
その下にはお知らせの一行が淡い青の帯で置かれ、手が入り続けているサイトであることが静かに伝わります。帯の高さを抑えているので、主役であるファーストビューの印象を邪魔していません。
長い一枚のページを迷わせない情報設計
このサイトのトップページは、スクロール量がかなり多い構成です。それでも現在地を見失いにくいのは、セクションごとに共通の目印が置かれ、背景色の切り替えで区切りが作られているからです。
通し番号と英字ラベルによる現在地表示
各セクションの冒頭には、英字の見出しラベルと、細い枠で囲まれた二桁の通し番号、そして短い横線が並びます。番号は先頭から順に増えていくため、いま全体のどのあたりを読んでいるのかが感覚的につかめます。
英字ラベルは字間を広げた小さめの文字で、その下に日本語の大見出しが続く二段構成です。装飾として英字を置くだけで終わらせず、順序を示す道具として使い切っている点が参考になります。
背景色の切り替えでセクションを分ける
白と淡いグレーの背景が、セクションごとに交互に入れ替わります。罫線で区切るよりも境目が柔らかく、色数を増やさずにリズムを作れるため、縦に長いページと相性の良い手法です。
背景が変わってもカードや文字の配置ルールは変わらないので、切り替わりが読みの負担になりません。統一されたレイアウトと、変化のある背景色の組み合わせが効いています。
読者の状況を入口に置いたカード群
ページの序盤では、訪問者を「何ができるのかを知りたい段階」と「やりたいことが固まっている段階」に分け、二枚のカードで入口を分岐させています。暗く落とした写真の上に白い文字を大きく置いた見出しが、どちらの状態を指すのかを瞬時に伝えます。
続くセクションでは、よくある困りごとを八枚のカードに分け、それぞれに関連ページへのリンクを添えています。抽象的なサービス説明から入らず、読者が自分の症状を選ぶところから始める設計です。
言葉ではなく図で理解させる工夫
このサイトで最も特徴的なのは、説明を文章だけで押し切らず、要所を図解に置き換えている点です。いずれも飾りのイラストではなく、関係や変化を示すための図として機能しています。
三つの円が重なるベン図
強みを説明するセクションには、淡い青の円を三つ重ねたベン図が置かれています。円にはそれぞれ現場の経験、開発の経験、地域への密着といった要素が入り、三つが交わる中心に屋号が置かれています。
文章で三つを兼ね備えていると書くよりも、重なりの面積として見せたほうが早く伝わります。円の塗りを薄くし、線を細くしているため、直前の三段組テキストとトーンがそろっている点も丁寧です。
取り組む前と後を左右に並べる対比表
実績を紹介するセクションでは、業務ごとの変化を横一列で示す表が使われています。左に業務の名前、中央に取り組む前の状況、矢印をはさんで右に取り組んだ後の状態という並びで、行ごとに視線が左から右へ流れます。
変化した後の側だけを青の太字にしているため、表を上から眺めるだけで結論が拾えます。細かい数字の羅列に頼らず、状況を短い言葉で書いていることも理解を助けています。
番号バッジと帯による進行の可視化
相談から定着までの流れは、丸い番号バッジを横一列に並べた図で示されています。濃い青の円に白い数字という構成で、その下に見出しと短い説明が続く、素直な時系列の表現です。
説明会の時間配分を示す箇所では、三分割した横長の帯が使われ、左から右へ青の濃度が薄くなっていきます。所要時間の目盛りを上に添えることで、帯そのものが時間の長さを表す図として読めるようになっています。
不安を先回りして受け止めるコンテンツ設計
企業向けのサイトでは、問い合わせの前に読者が抱く迷いをどこまで想定できるかが成果を左右します。このサイトは、その迷いをそのまま見出しの形にして並べるという、分かりやすい方法を取っています。
質問をそのまま見出しにしたカード
ページの後半には、相談前によく聞かれることを四枚のカードにまとめたセクションがあります。カードの上部は暗く落とした写真に白抜きの短い見出し、下部は疑問文の小見出しと解説文という二段構成です。
中小企業がAIを取り入れるときに最初に着手すること、社内で対話型AIを使うときの情報の扱いといったテーマが並びます。解説文の中の関連語にはリンクが張られ、読みながら詳しいページへ移れる作りです。
開閉アイコンを添えた質問一覧
さらに下部には、想定される質問を一行ずつ並べた一覧が置かれています。各行の右端に下向きの山形アイコンが添えられ、行と行のあいだは細い罫線だけで区切られています。
十を超える項目が縦に並んでも圧迫感が出ないのは、余白と罫線の細さが保たれているためです。見出しだけを目で追いながら、気になる項目を探せる形になっています。
案内役キャラクターの見せ方
画面の右下には、白い角丸のボタンが常に表示されています。中には青い体に丸い目のキャラクターが描かれ、頭の上には小さな花が咲いています。ボタンには短いラベルが添えられ、押せる要素であることが分かります。
このキャラクターはウメという名前で、屋号のつづりと春のはじめに咲く梅から名付けられたとサイト内で説明されています。同じイラストは本文中の補足ブロックにも登場し、左側に青い縦線を添えた引用のような見た目で、読み手への語りかけを担っています。硬くなりがちな話題に、やわらかい接点を用意した設計です。
問い合わせまでの導線とフッターの締め方
ページの最後は、問い合わせフォームで締められています。ここまでの静かな配色から一転して面積の大きい濃紺が使われ、読み終えた読者の視線が自然に集まる作りです。
濃紺の背景に白いフォームカードを重ねる
背景全体が濃紺で塗られ、その上に白いカードとしてフォームが置かれています。見出しは白抜きの明朝体で二行、その下に短い説明文が中央そろえで続きます。
入力欄は角丸の白い枠で、項目名は左そろえの小さな太字です。必ず書いてほしい項目には赤い記号が添えられ、どこまで埋めればよいのかが一目で判断できます。
入力のハードルを下げる細部
各入力欄には記入例が薄い文字で示されており、何を書けばよいかで手が止まりにくくなっています。任意の欄にも、書くことが浮かばない場合の断り書きが例として置かれています。
送信ボタンの下には、チェックマーク付きの短い箇条書きが並び、送ったあとの対応について触れています。フォームの下にはもう一つの連絡手段としてLINEのボタンが用意され、こちらだけは緑で示されているため、別の経路であることが色で伝わります。
フッターの情報整理
フッターは淡いグレーに戻り、左側に屋号と代表者名、所在地、手がけている事業の並びが置かれています。右側には各ページへのリンクと著作権表示が右そろえで配置され、左右で役割が分かれています。
装飾を足さず、文字の大きさと配置だけで整理しているため、長いページを読み終えたあとでも必要な情報を探しやすくなっています。
群馬のAI導入を伝えるサイトの見本として
UMEO CREATEの公式サイトは、色数を絞った配色、明朝体とゴシック体の役割分担、通し番号による現在地の表示、そして図解による説明という四つの手法で、専門的になりがちな内容を読みやすく整えています。演出に頼らず情報設計だけで最後まで読ませる点で、企業向けサイトの見本といえる作りです。
運営しているのは、群馬県北群馬郡吉岡町に拠点を置くUMEO CREATEです。代表の伊藤 龍也様は製造や金型の現場を経験したのち、IT企業でおよそ10年にわたってシステムに携わり、2023年10月にこの事業を開業したと紹介されています。相談から開発、定着の支援までを同じ担当者が通して受け持つ体制で、群馬県全域への訪問に対応し、近県についても相談を受け付けています。
手がけている内容は、AI導入とDXの伴走支援を軸に、業務システムの開発、社内向けのAI研修やリスキリング、中国での生産と調達の支援などへ広がっています。自社の案内役をAIで用意し、その仕組みをサイト上で公開している姿勢そのものが、事業内容を裏づける資料にもなっています。
デザインの参考としても、地域でAI活用の相談先を探すきっかけとしても、実際の画面を見る価値のあるサイトです。群馬でAI研修や導入の相談先を探すときに参考になる公式サイトから、ここで取り上げた表現をぜひ確かめてみてください。
