本文
エレノア代表の豊島と申します。
このたび、エレノアのホームページをリニューアルいたしました。従来はLP（1ページで構成するランディングページ）にサービスと料金の情報を集約しておりましたが、今回のリニューアルにより、サービス・料金、実績、ブログ、会社概要をそれぞれ独立したページに分割いたしました。
リニューアルにあたり、国内のITベンチャー35社のホームページを1社ずつ確認し、背景色や見出しの形式、お知らせの掲載方法などを集計いたしました。本記事では、本調査から見えた共通点と、エレノアのホームページに採用した設計方針をご紹介いたします。
ホームページのリニューアルをご検討中で、デザインの方向性にお悩みの皆様のご参考になれば幸いです。
本記事の内容
- 国内のITベンチャーのホームページに多いデザイン（背景色・見出し・お知らせ・お問い合わせ導線）
- 海外のIT企業のサイトとの違い
- エレノアのリニューアルで採用した4つの設計方針
ITベンチャー35社のホームページに共通するデザイン
本調査の結果、国内のITベンチャーのホームページには「白い背景に、大きな英字の見出し」という明確な傾向が見られました。
調査の対象は、SmartHR、freee、LayerX、10X、estieなど、国内のITベンチャー・SaaS・AI企業35社のコーポレートサイトです。知名度の高い企業に加え、Webデザインのギャラリーサイト（SANKOU!、MUUUUU.ORG）でIT企業として紹介されているサイトからも選定いたしました。調査期間は2026年9月26日から29日までです。
集計結果は以下のとおりです。
| 項目 | 社数 |
|---|---|
| 背景色が白 | 35社中29社 |
| 背景全体が黒 | 20社中0社 |
| ファーストビュー（最初の画面）に写真・動画を使用していない | 35社中23社 |
| 大きな英字の見出しに、小さな日本語の見出しを併記している | 30社中16社 |
| ページの途中に濃い色の帯を配置している | 35社中21社 |
| お知らせを「日付・分類・題名」の1行で掲載している | 28社中19社 |
| ページ末尾に大きな「CONTACT」の領域を設けている | 35社中12〜15社 |
分母が35社でない項目は、その項目を確認できた企業の数を分母としております（お知らせの項目は、お知らせ欄を設けている28社が対象です）。
背景色：白が主流
35社中29社が白い背景を採用しており、背景全体を黒くしたサイトは、確認した20社の中に1社もございませんでした。調査前は、ITベンチャーのサイトには黒を基調としたデザインが多いと想定しておりましたが、結果はその逆となりました。
比較のため海外のIT企業のサイトも6社確認したところ、5社が黒い背景を採用していました。「IT企業らしい見た目」の捉え方は、日本と海外で大きく異なることがうかがえます。
見出し：大きな英字と小さな日本語の併記
多く見られたのは、「SERVICE」「NEWS」のような大きな英字の下に、「サービス」「お知らせ」と日本語を小さく添える形式です。見出しの形式を確認した30社のうち、16社がこの形式を採用していました。英字には太すぎない書体が使われており、色は黒または濃紺がほとんどでした。
お知らせ：日付・分類・題名の1行表示
お知らせ欄を設けている28社のうち19社が、日付、分類、題名の順に1行で掲載していました。お知らせの末尾に「一覧を見る」のリンクを設けている企業は、28社中25社にのぼります。
ファーストビュー：写真を使用しない構成が多数
ファーストビューに写真や動画を使用していない企業は、35社中23社でした。写真の代わりに、大きなキャッチコピーと図形、または製品の画面で構成するデザインが中心です。
ページ末尾：「CONTACT」の領域によるお問い合わせ導線
ページの最下部に「CONTACT」と大きく表示した領域を設け、お問い合わせへ誘導する構成も目立ちました（35社中12〜15社）。
リニューアルで採用した4つの設計方針
エレノアのサイトは、上記の型を手本として設計いたしました。そのうえで、色、動き、料金の表示方法、読みやすさの4点については、独自に方針を定めております。
1. コーポレートカラーの設定
コーポレートカラーには、エレノアが開発するアプリ「SONO-HINO」と同じ、紫からピンクへのグラデーションを採用いたしました。ロゴマークも同じ3色で構成しております。
グラデーションの上に白い文字を配置する箇所に限り、色をやや濃い紫とピンクに変更いたしました。明るい色のままでは文字が背景に埋もれ、可読性が低下するためです。
2. アニメーションの停止機能
トップページのリボンと、その下を流れる英字には、ゆっくりとしたアニメーションを設けております。画面の動きが苦手な方に配慮し、「動きを止める」ボタンでアニメーションを停止できるようにいたしました。また、iPhoneの「視差効果を減らす」のように端末側で動きを減らす設定をされている場合は、最初からアニメーションを再生しない仕様としております。
調査した35社のうち、停止ボタンを設けていたのは1社のみでした。この点は調査結果を手本とせず、独自に追加しております。自動で開始して5秒より長く続く動きに停止手段を設けることが、Webアクセシビリティの国際的なガイドライン（WCAG 2.2の達成基準2.2.2）で求められているためです。
3. 料金と条件の併記
料金を大きく表示する箇所では、そのすぐ下に「税抜」や「保守プランとセットで申し込む場合の料金」といった条件を記載しております。金額だけが目立ち、条件が離れた場所に小さく記載されていると、誤解を招くおそれがあるためです。消費者庁の「打消し表示に関する表示方法及び表示内容に関する留意点」（PDF）においても、強調した表示と条件を近くに、わかりやすく記載するよう示されています。
料金は、すべて1か所のデータから生成しております。料金を変更すると、料金表と特定商取引法に基づく表示が同時に更新されるため、ページによって金額が異なるという事態が生じることはございません。
4. コントラスト比の確認と改行位置の調整
文字と背景色のコントラスト比は、WCAG 2.2で定められた基準（達成基準1.4.3）に基づき、通常の大きさの文字は4.5:1以上、大きな文字は3:1以上としております。調査した35社のうち17社では、本文中にこの基準を満たさない文字が見られました。薄いグレーの小さな文字は洗練された印象を与える一方で、読みにくくなる傾向がございます。エレノアでは、色を変更するたびに、公開前にコントラスト比を自動で計算し、確認しております。
日本語の改行位置も調整いたしました。「お申し込みい／ただく」のように語の途中で折り返すと読みにくくなるため、文節の区切りで改行する仕組みを導入しております。
よくある質問
ITベンチャーのホームページに多いデザインは何ですか？
白い背景に、大きな英字の見出しと小さな日本語の見出しを組み合わせたデザインです。国内のITベンチャー35社を調査したところ、29社が白い背景を採用しており、見出しの形式を確認した30社のうち16社が「英字＋日本語」の見出しでした。
ホームページの背景色は白と黒のどちらが適していますか？
日本のお客様に見慣れた印象を与えたい場合は、白い背景が適しております。国内のITベンチャーでは、確認した20社の中に背景全体が黒いサイトはございませんでした。黒い背景は海外のIT企業に多く、比較した6社のうち5社が採用していました。
ホームページにアニメーションを取り入れる際の注意点は何ですか？
アニメーションを停止する手段を用意することです。自動で開始して5秒より長く続く動きには、停止手段を設けることがWCAG 2.2で求められています。端末で動きを減らす設定をされている方に対しては、最初からアニメーションを再生しない設計とすることが望ましいと考えております。
文字の読みやすさはどのように確認すればよいですか？
文字と背景のコントラスト比が、4.5:1以上（大きな文字は3:1以上）あるかをご確認ください。コントラスト比は、WebAIMのContrast Checkerなどの無料ツールで計算できます。
まとめ
- 国内のITベンチャーのホームページは、白い背景に大きな英字の見出しを組み合わせた構成が主流（背景が白いサイトは35社中29社）
- 背景全体を黒くしたサイトは、確認した20社中0社（海外のIT企業は6社中5社が黒い背景）
- エレノアのリニューアルでは、この型を手本としつつ、色・動き・料金の表示方法・読みやすさについて独自の設計方針を採用
本ブログでは、店舗や中小規模の事業者の皆様に向けて、ホームページ運用に役立つ情報を順次発信してまいります。LP制作やホームページ制作の料金は、サービス・料金のページに掲載しております。ホームページのリニューアルやLPの制作をご検討の際は、お問い合わせよりお気軽にご相談ください。