米国注目20社の公式サイトを分解。参考枠Xまで見るデザイン入門

デザインとは、見た目を飾ることではありません。「何を先に見せ、何を選ばせ、どこへ進ませるか」を決めることです。

その判断を学ぶため、アメリカの注目企業20社とXを、トップ・カテゴリ・詳細の順に見ます。PCとスマホを並べ、画面で確認できる事実と「なぜそうしたのか」という推測を分けました。

全部を順番に読む必要はありません。まず気になる3社を選び、最後の「20社を並べて見えたこと」へ進んでください。会社ごとの違いから、自分の画面を考える質問が見つかります。

この見方は、Apple、Nike、NOT A HOTELを比べた前回の3サイト分析から続いています。

まず、1社につき5つの質問で見る

各社で、トップ、カテゴリ／一覧、詳細／導入の3URLを開きました。Xの3URLを加えた計63URLです。取得できた62ページをPC 1280×720とスマホ375×812で撮影し、元の記録は124枚です。Broadcomの詳細URLが404だったため、そのPC／スマホ画像2枚は本文から外し、PCとスマホの違いを文章で示しました。Intelの製品一覧1ページだけは、今回のブラウザで取得できませんでした。

Cookieの同意画面が出たサイトは、同意してから撮り直しました。地域選択やログイン案内など、同意後も残る入口はそのまま記録しています。

画像を見るときは、次の5つを順に問いかけます。

1. ヘッダー： 最初に使える入口は何か
2. トップ： 会社がいま主役にしているものは何か
3. カテゴリ： 読者に何を基準に選ばせているか
4. 詳細： 決める前の不安を何で減らしているか
5. PCとスマホ： 何を残し、何をメニューへ畳んだか

トップ、カテゴリ、詳細は、企業ごとに対象者も内容も違います。ページの優劣ではなく、「最初に見せる」「次に選ばせる」「最後に決めさせる」という役割を比べます。

見方は前回と同じです。

• 観察： 画面に表示された言葉、位置、数、PCとスマホの差
• 推測： なぜその順番や入口にしているか。公式の意図ではなく、画面から考えた仮説
• 学び： 自分のサイトで使える設計条件
• 未確認： 会社の意図、効果、A/Bテスト、実際のクリック率など

迷ったら、事業全体を見せるAlphabet、検索から選ばせるTexas Instruments、注文へ進ませるTeslaの3社を読み、最後の総括へ進んでください。

なぜこの20社を選んだのか

これは株価やデザインの順位ではありません。市場で注目された企業を、異なる種類の公式サイトを比べるための観察対象にしました。

• 01〜15は、2026年5月1日のETF.comの記事が挙げたS&P 500の上昇寄与15社
• 16〜18は、同じ記事で指数を下押しした企業として挙げられたMeta、Microsoft、Tesla
• 19は、AIサーバーという異なる製品の選ばせ方を見るために加えたSuper Micro Computer
• 20は、2026年6月11日に新規株式公開の価格を発表したSpaceX
• Xは20社に数えず、利用者・広告主・開発者で入口が変わる参考例

S&P 500への寄与とは、代表的な500社で作る株価指数を、個別企業の値動きがどれだけ押し上げ、または押し下げたかという意味です。AIインフラは、AIを動かす半導体、メモリ、サーバー、電力などを指します。

株価、時価総額、上昇率は日々変わります。選定は2026年8月13日時点です。投資判断ではなく、公式サイトの構造を学ぶためのデザイン研究として扱います。

20社の一覧

一覧を飛ばして、20社の詳しい比較へ ↓

複数事業と専門技術の入口をどう分けるか

01｜Alphabet（GOOGL）

公式サイト：abc.xyz

選定枠：S&P 500寄与 / AIプラットフォーム

ヘッダーで見ること

観察： PCでは企業全体、事業、投資家向け情報へ分かれる入口が見えます。スマホではそれらがメニューへ畳まれ、本文の主役を広く見せます。

推測： AlphabetはGoogleだけでなく複数の事業を持つため、最初から個別サービスへ押し込まず、会社全体の地図を置いているように見えます。

学び： 事業が多いサイトでは、入口を増やす前に「会社を知る」「事業を見る」「数字を見る」を分ける。

1. トップページ：企業全体の入口

URL：https://abc.xyz/

観察： 企業の考え方と主要な取り組みを、1つの会社の話として見せます。

推測： サービスの一覧より先に会社の方向を置くことで、Google以外の事業も含めて理解させたいのだと考えられます。

学び： 複数の活動を紹介するときは、最初に共通する目的を1つ置く。

2. カテゴリページ：事業の一覧

URL：https://abc.xyz/products/

観察： 会社全体の話から、事業や製品を選ぶ画面へ移ります。

推測： 同じ会社でも、読む人の目的が違うため、事業単位で入口を分けています。

学び： 一覧は、項目を並べるだけでなく「どの単位で比べるか」を決める。

3. 詳細ページ：投資家向けの情報

URL：https://abc.xyz/investor/

観察： 詳細ページでは、ブランドの印象よりも決算・資料・イベントを探す入口が中心になります。

推測： 投資家は読み物を最初から読むのではなく、必要な資料へ早く進みたいからだと考えられます。

学び： 詳細ページでは、世界観より「確認したい情報へすぐ行けること」を優先する。

3ページの考察： Alphabetは、トップで会社の方向、カテゴリで事業、詳細で数字へ進む順番を作っています。

未確認： この順番が投資判断や滞在時間に与える効果は確認していません。

02｜Broadcom（AVGO）

公式サイト：broadcom.com

選定枠：S&P 500寄与 / AIインフラ

ヘッダーで見ること

観察： PCでは製品、ソリューション、サポート、企業情報へ進む入口が見えます。スマホでは詳細分類をメニューへ畳み、検索やメニューを残します。

推測： Broadcomは部品名だけでなく用途や業界から探す人がいるため、最初に製品群とソリューションの両方を用意していると考えられます。

学び： 技術企業では、専門用語だけでなく「何に使うか」から入れる道を作る。

1. トップページ：技術領域の入口

URL：https://www.broadcom.com/

観察： 企業名だけではなく、製品・ソリューション・ニュースへ進める構成です。

推測： 初めて来た人と、すでに製品を探している人を同じトップで受け止めています。

学び： 初心者向けの説明と、目的が決まった人の近道を同時に置く。

2. カテゴリページ：AI製品のまとまり

URL：https://www.broadcom.com/products

観察： 製品を技術領域や用途のグループとして見せます。

推測： 製品数が多い場合、製品名をいきなり並べるより、カテゴリを先に選ばせるほうが迷いにくいと考えられます。

学び： 一覧の前に、選択肢を減らす分類を置く。

3. 詳細ページ：AIインフラの説明

URL：https://www.broadcom.com/solutions/ai-solutions/ai-infrastructure

元のURLは404ページだったため、Not Found画面の画像は外しました。正しいAIインフラページで、PCとスマホの違いを文章で示します。

PCで見える違い： 上部にProducts、Solutions、Support and Services、Company、How to Buyが横並びで表示されます。AIインフラの説明、注目技術、関連資料を横に見渡せます。

スマホで見える違い： 上部の入口はメニューに畳まれます。AIインフラの説明、注目技術、関連資料は縦に並び、本文を読みながら順番に進みます。

PCとスマホの設計差： PCは会社全体の入口と複数の情報を同時に見せ、スマホは本文と次のリンクを優先します。内容を縮めるだけでなく、最初に残す入口を変えています。

観察： 詳細では、技術の説明と問い合わせ・資料への入口が近くに置かれます。

推測： その場で購入するより、企業の担当者が仕様を確認して相談する流れを想定しているように見えます。

学び： 企業向けの詳細ページでは、購入ボタンだけでなく、相談・資料・仕様確認を行動として残す。

3ページの考察： Broadcomは、技術領域、製品群、相談に進む順番で難しい情報を段階化しています。

未確認： どの入口が最も成果につながるかは未確認です。

03｜Amazon（AMZN）

公式サイト：About Amazon

選定枠：S&P 500寄与 / クラウド・コマース

ヘッダーで見ること

観察： PCでは会社のニュース、事業、AWSなど複数の入口が見えます。スマホではメニューにまとめ、記事を読む入口を広くしています。

推測： Amazonはショッピングサイトだけではないことを、企業サイトでは事業とニュースの両方で伝えています。

学び： 同じ会社でも、消費者向けサイトと企業紹介サイトは目的が違う。最初に対象読者を決める。

1. トップページ：会社を知る入口

URL：https://www.aboutamazon.com/

観察： 会社の出来事、サービス、社会への取り組みが記事の入口として並びます。

推測： 商品を売るだけでなく、会社の活動を継続的に知らせるメディアとして設計しています。

学び： 企業ブログは、ニュースを並べるだけでなく、会社を理解する入口を作る。

2. カテゴリページ：事業を分ける

URL：https://www.aboutamazon.com/what-we-do

観察： 小売、クラウド、デバイスなどを事業単位で整理します。

推測： 事業の幅が広いため、個別の記事からではなく、事業の分類から入れるようにしています。

学び： 記事が多いサイトほど、記事の前にテーマの地図を置く。

3. 詳細ページ：AWSへ進む

URL：https://aws.amazon.com/

観察： AWSでは、企業紹介からサービス、料金、導入へ情報の粒度が変わります。

推測： 同じAmazonでも、利用を検討する人には、会社の物語より解決したい課題とサービス選択が必要だからです。

学び： 詳細ページでは、会社の説明を繰り返さず、利用者の次の判断に合わせる。

3ページの考察： Amazonは、企業メディア、事業の地図、専門サービスという3段階を使い分けています。

未確認： About AmazonとAWSの導線がどれほど行き来されるかは未確認です。

専門製品を用途からどう選ばせるか

04｜NVIDIA（NVDA）

公式サイト：nvidia.com

選定枠：S&P 500寄与 / AIインフラ

ヘッダーで見ること

観察： PCでは製品、ソリューション、開発者、ニュース、サポートなど複数の入口が見えます。スマホではメニューに畳み、検索・地域・ログインなどを残します。Cookie同意後も、地域選択が本文より先に出ます。

推測： NVIDIAはゲーマー、企業、開発者、研究者が同じサイトを使うため、対象別の入口をヘッダーで分けていると考えられます。

学び： 読者が複数いるサイトでは、1つの大見出しで全員を説明しようとせず、目的別の入口を用意する。

1. トップページ：いま見せたい技術

URL：https://www.nvidia.com/en-us/

観察： 大きな技術ビジュアルと短い説明の下に、記事や製品へ進むボタンがあります。

推測： 最初に全製品を説明せず、いま注目してほしい技術を主役にしてから、詳細な分類へ送っています。

学び： 専門情報が多いサイトでも、トップでは主役を1つに絞る。

2. カテゴリページ：製品と用途を選ぶ

URL：https://www.nvidia.com/en-us/products/

観察： GPU（AIや映像の計算を担う半導体）、データセンター、AI、ゲームなどの用途や製品群が分かれます。

推測： 製品名を知らない人でも、使い道から入れるようにするためです。

学び： カテゴリは会社の組織図ではなく、読者が選びやすい基準で作る。

3. 詳細ページ：1つの製品を理解する

URL：https://www.nvidia.com/en-us/geforce/graphics-cards/40-series/rtx-4090/

観察： 製品の価値、性能、仕様、購入・販売パートナーへの入口が順番に現れます。

推測： いきなり仕様表を見せず、「何ができるか」から「どの製品か」へ進めています。

学び： 詳細ページでは、機能、違い、仕様、行動の順に情報を積む。

3ページの考察： NVIDIAは、複雑な技術を、注目技術、用途、製品詳細の3段階に分けています。

未確認： 地域選択が本文より先に出ることで、初回の理解に与える影響は未確認です。

05｜Intel（INTC）

公式サイト：intel.com

選定枠：S&P 500寄与 / 半導体

ヘッダーで見ること

観察： PCでは製品、サポート、ニュース、企業情報の入口が見えます。スマホでは製品分類をメニューへ移し、検索やサポートを残します。

推測： 製品を探す人と、ドライバーや技術情報を探す人がいるため、購入前後の入口を同じヘッダーに置いているように見えます。

学び： サイトの入口は新規訪問者だけでなく、使い続ける人の再訪目的も考える。

1. トップページ：製品とニュース

URL：https://www.intel.com/content/www/us/en/homepage.html

観察： 製品情報と会社・技術のニュースがトップから分かれています。

推測： 製品を探す目的と、Intelの技術動向を知る目的を同時に受け止めています。

学び： 入口が2つあるときは、同じ見出しで混ぜず、役割を分けて表示する。

2. カテゴリページ：製品一覧

URL：https://www.intel.com/content/www/us/en/products.html

PC/スマホのキャプチャは、今回のブラウザ側でERR_BLOCKED_BY_CLIENTとなったため未確認です。

観察： URLは製品一覧ですが、今回のブラウザでは画面を取得できませんでした。

推測： 製品カテゴリの実際の並びやモバイルでの折りたたみは、取得できる状態で再確認が必要です。

学び： 開けなかったページを想像で埋めない。未確認をデータとして残す。

3. 詳細ページ：プロセッサー情報

URL：https://www.intel.com/content/www/us/en/products/details/processors/core-ultra.html

観察： 製品の特徴、世代、仕様、サポートへ進む情報がまとまります。

推測： 製品を理解したあと、比較・購入・サポートのどこへ行くかを選ばせるページです。

学び： 詳細ページでは、性能だけでなく、次に必要になるサポートの入口も置く。

3ページの考察： Intelは、トップから製品とサポートへ広げ、詳細で一つの製品を深く読ませます。

未確認： 製品カテゴリページのPC/スマホ表示は未取得です。

06｜Micron Technology（MU）

公式サイト：micron.com

選定枠：S&P 500寄与 / メモリ・AIインフラ

ヘッダーで見ること

観察： PCでは製品、ソリューション、技術、会社、投資家向け情報へ進めます。スマホではメニューに分類を畳みます。

推測： メモリを部品名だけでなく、データセンターや自動車など用途で説明する必要があるためです。

学び： 部品を紹介するときは、その部品が入る場面をカテゴリにする。

1. トップページ：メモリ技術の入口

URL：https://www.micron.com/

観察： 技術ニュースや製品・用途への入口を、企業の大きなテーマから見せます。

推測： 専門部品を知らない人にも、まずメモリが必要な世界を想像させています。

学び： 専門サイトのトップでは、製品より先に「何を支えているか」を見せる。

2. カテゴリページ：製品群

URL：https://www.micron.com/products

観察： メモリやストレージを用途・仕様別に探せます。

推測： 購入者の条件が容量、速度、用途などに分かれるため、カテゴリを先に使わせています。

学び： 製品一覧の前に、選ぶ条件を見せる。

3. 詳細ページ：大容量データを高速処理するメモリ（HBM）

URL：https://www.micron.com/products/memory/high-bandwidth-memory

観察： 技術の特徴、用途、関連製品へ順番に進む構成です。

推測： 専門用語を説明しながら、最後に問い合わせや製品確認へ進ませたいのだと考えられます。

学び： 詳細ページでは、用語の説明と行動への入口を離しすぎない。

3ページの考察： Micronは、メモリの意味、製品群、技術詳細の順で理解の段差を小さくしています。

未確認： 読者がどの分類を最初に選ぶかの実測値はありません。

07｜AMD（AMD）

公式サイト：amd.com

選定枠：S&P 500寄与 / AIアクセラレータ（AI計算を高速化する半導体）

ヘッダーで見ること

観察： PCでは製品、ソリューション、サポート、開発者向けの入口が並びます。スマホでは詳細メニューを畳み、検索やメニューを残します。

推測： ゲーム、個人PC、データセンター、AI開発者で必要な情報が違うため、目的別の分類を残しています。

学び： 同じ製品でも利用者が違う場合、利用者の言葉をカテゴリに使う。

1. トップページ：製品の主役

URL：https://www.amd.com/en.html

観察： 大きな製品・技術の紹介と、製品群への導線が組み合わされています。

推測： 新しい技術への関心を作りながら、目的が決まった人には製品へ進ませています。

学び： トップでは感情を動かす主役と、すぐ探すための近道を両立させる。

2. カテゴリページ：プロセッサー一覧

URL：https://www.amd.com/en/products/processors.html

観察： Ryzen、EPYCなど、用途や利用者に合わせて選択肢が分かれます。

推測： 製品名を全部覚えていなくても、PCかサーバーかという用途から入れるようにしています。

学び： 比較表より前に、自分に関係するカテゴリを選ばせる。

3. 詳細ページ：EPYCの製品情報

URL：https://www.amd.com/en/products/processors/server/epyc/9005-series.html

観察： 性能、仕様、用途、関連資料へ進む情報をまとめています。

推測： 企業向け製品の検討では、短いキャッチコピーより、仕様と導入判断に必要な資料が重要です。

学び： 読者が最後に決めることを想定して、詳細情報の順番を決める。

3ページの考察： AMDは、熱量のあるトップ、用途別カテゴリ、仕様の詳細へ読者を移します。

未確認： 各ボタンのクリック率や問い合わせへの影響は未確認です。

08｜Exxon Mobil（XOM）

公式サイト：corporate.exxonmobil.com

選定枠：S&P 500寄与 / エネルギー

ヘッダーで見ること

観察： PCでは事業、気候、ニュース、投資家向け情報など、企業を理解する入口が並びます。スマホではメニューへ畳まれます。

推測： エネルギー企業は製品を買う人だけでなく、地域、投資家、政策、環境に関心を持つ人が見るため、対象別の入口が必要です。

学び： 商品販売だけではない企業は、関係者ごとに入口を分ける。

1. トップページ：企業とエネルギー

URL：https://corporate.exxonmobil.com/

観察： 企業のニュース、事業、エネルギーの課題がトップに置かれます。

推測： 社名を見せるだけでなく、社会の大きな課題の中で自社を説明しています。

学び： 企業サイトのトップでは、製品名ではなく、その会社が関わる問題を主役にできる。

2. カテゴリページ：事業を分ける

URL：https://corporate.exxonmobil.com/what-we-do

観察： 探鉱、製造、販売、技術など、会社の仕事を事業単位で見せます。

推測： 石油会社という一言だけでは今の事業全体を説明しにくいため、活動を分けています。

学び： 会社を説明するときは、肩書きだけで終わらず、具体的な仕事へ分解する。

3. 詳細ページ：気候ソリューション

URL：https://corporate.exxonmobil.com/climate-solutions

観察： 特定の課題に対する技術や取り組みを詳しく説明します。

推測： 批判や疑問が生まれやすいテーマだからこそ、事業名だけでなく背景と方法を説明しているように見えます。

学び： 説明が必要なテーマでは、結論だけでなく、なぜそれをするかをページに残す。

3ページの考察： Exxon Mobilは、企業の立場、事業の実体、社会課題への説明という順番を作ります。

未確認： 表現が読者の信頼や評価をどう変えるかは未確認です。

09｜Caterpillar（CAT）

公式サイト：caterpillar.com

選定枠：S&P 500寄与 / 産業・データセンター周辺

ヘッダーで見ること

観察： PCでは製品、サービス、業界、販売店、会社情報への入口が見えます。スマホでは製品分類を畳み、検索や販売店への導線を残します。

推測： 大型機械は製品名より現場や用途から探すため、業界別・用途別の入口を用意しています。

学び： 企業向け製品は「何を買うか」より「どこで使うか」から探せるようにする。

1. トップページ：機械と現場

URL：https://www.caterpillar.com/

観察： 大型機械、現場、会社のニュースがビジュアルと短い説明で示されます。

推測： 製品単体ではなく、使われる現場を想像させてから商品を探させています。

学び： 製品の大きさを伝えたいときは、スペックだけでなく使われる場面を見せる。

2. カテゴリページ：製品一覧

URL：https://www.cat.com/en_US/products.html

観察： 機械を種類や用途で分け、条件を絞って探せます。

推測： 製品数が多いため、一覧を見せる前に利用目的を絞らせています。

学び： 商品一覧は、検索窓だけに任せず、よくある選び方を先に出す。

3. 詳細ページ：新しい機械を検討する

URL：https://www.cat.com/en_US/products/new/equipment.html

観察： 機械の特徴、仕様、販売店や相談に進む導線があります。

推測： その場で購入するより、見積もりや販売店との相談が最終行動になるためです。

学び： 高額な製品では、次の行動を「購入」だけにせず、相談・見積もりも主役にする。

3ページの考察： Caterpillarは、現場のイメージ、製品分類、導入相談へ段階を踏ませます。

未確認： 製品検索から販売店への実際の遷移は未確認です。

10｜SanDisk（SNDK）

公式サイト：sandisk.com

選定枠：S&P 500寄与 / ストレージ

ヘッダーで見ること

観察： PCでは製品カテゴリ、用途、サポート、購入への入口が見えます。スマホでは製品分類をメニューにまとめ、検索や購入への近道を残します。

推測： ストレージは容量や接続先で選ぶため、製品名より用途から探す道を用意しています。

学び： 選び方が複数ある商品は、カテゴリを商品名の前に置く。

1. トップページ：記録する場面

URL：https://www.sandisk.com/

観察： 製品と、それを使う写真・動画・ゲームなどの場面が入口として表示されます。

推測： 容量の数字だけでなく、保存したいものを想像させることで選ぶ理由を作っています。

学び： 数字の商品でも、使う瞬間を先に見せると理解しやすい。

2. カテゴリページ：用途別製品

URL：https://www.sandisk.com/products

観察： ポータブルSSD、メモリーカード、USBなどをカテゴリで分けます。

推測： 使用機器や持ち運び方が選択基準になるため、製品の形から探せます。

学び： 仕様を比べる前に、使う機器と行動を決める。

3. 詳細ページ：ポータブルSSD

URL：https://www.sandisk.com/products/portable-ssd

観察： 製品の速度、容量、対応機器、購入やサポートへ進む情報を並べます。

推測： 購入前の不安を、仕様だけでなく対応環境の説明で減らしています。

学び： 詳細ページでは、特徴を増やすより「自分の環境で使えるか」を先に解決する。

3ページの考察： SanDiskは、保存する場面、製品の種類、対応環境へ読者を進めます。

未確認： どの用途カテゴリが最も選ばれているかは未確認です。

高額・多品種の判断材料をどう並べるか

11｜GE Vernova（GEV）

公式サイト：gevernova.com

選定枠：S&P 500寄与 / 電力・データセンター

ヘッダーで見ること

観察： PCではPower、Wind、Electrificationなど事業の大きな分類が見えます。スマホではメニューに畳み、事業の主役を縦に読みます。

推測： 大きなエネルギー企業のため、製品より先に事業領域を理解させています。

学び： 会社の規模を直接説明せず、事業の地図を見せる。

1. トップページ：電力の全体地図

URL：https://www.gevernova.com/

観察： 電力、風力、電化など複数の事業を大きな領域として見せます。

推測： 製品を売る前に、電力を支える会社だと理解してもらうためです。

学び： 製品が複数の社会課題にまたがるなら、課題を入口にする。

2. カテゴリページ：Gas Power Products

URL：https://www.gevernova.com/gas-power/products

観察： タービン、発電機などの製品群を用途と機器で整理します。

推測： 検討者が必要な設備を選びやすいように、事業から製品へ絞っています。

学び： 大きなテーマから具体的な機器へ、情報を一段ずつ狭める。

3. 詳細ページ：Gas Power

URL：https://www.gevernova.com/gas-power

観察： 技術、設備、導入、アップグレードへ進む情報があります。

推測： 一度納入した後の保守や更新も含めた関係をサイトで見せています。

学び： 詳細ページは購入前だけでなく、利用後の関係まで含めて設計する。

3ページの考察： GE Vernovaは、社会の課題、製品群、設備の導入へ情報を絞ります。

未確認： 製品選択ツールから相談までの実際の導線は未確認です。

12｜Applied Materials（AMAT）

公式サイト：appliedmaterials.com

選定枠：S&P 500寄与 / 半導体製造装置

ヘッダーで見ること

観察： PCでは半導体、ディスプレイ、サービス、企業情報などへ分かれます。スマホでは技術分類をメニューに収納します。

推測： 一般消費者が直接買う製品ではないため、製造工程や技術分野を入口にしていると考えられます。

学び： 裏側の技術を扱うサイトでは、完成品ではなく、工程のどこを支えるかを示す。

1. トップページ：製造技術の入口

URL：https://www.appliedmaterials.com/us/en.html

観察： 会社の技術領域とニュースを、製造の課題と結びつけて見せます。

推測： 装置名より先に、半導体製造の流れを理解させています。

学び： 裏方のサービスは、表に出る成果との関係を説明する。

2. カテゴリページ：Semiconductor Products

URL：https://www.appliedmaterials.com/us/en/semiconductor/products.html

観察： 製造工程や技術の役割に沿って装置を分類します。

推測： 製品名を知らない担当者でも、自社の工程から探せるようにしています。

学び： カテゴリ名は社内用語ではなく、読者が置かれている工程で作る。

3. 詳細ページ：単一装置

URL：https://www.appliedmaterials.com/us/en/product-library/centura-xtera-epi.html

観察： 装置の役割、仕様、工程、問い合わせへの入口がまとまります。

推測： 設備導入の判断に必要な情報を、営業相談の前に読めるようにしています。

学び： 技術詳細は、機能だけでなく、導入する工程とのつながりを書く。

3ページの考察： Applied Materialsは、製造の課題、工程別カテゴリ、装置詳細へ進みます。

未確認： トップ本文は取得制限があり、キャプチャから読める範囲に限定しています。

13｜Texas Instruments（TXN）

公式サイト：ti.com

選定枠：S&P 500寄与 / 半導体

ヘッダーで見ること

観察： PCでは製品検索、設計リソース、購入、サポートへの入口が見えます。スマホでは検索とメニューが中心になります。

推測： TIは製品を読むより、条件で探してデータシート（製品仕様書）を使う訪問が多いため、検索を強く置いていると考えられます。

学び： 目的が決まった訪問者が多いサイトでは、検索を主役級に扱う。

1. トップページ：設計者の入口

URL：https://www.ti.com/

観察： 製品、用途、設計ツール、技術資料へ直接進めます。

推測： 読者が会社のストーリーより、今必要な部品や資料を探しているためです。

学び： 読者の来訪目的が明確なら、会社紹介より目的達成を先に置く。

2. カテゴリページ：製品分類

URL：https://www.ti.com/product-category/overview.html

観察： 製品を機能・用途・仕様で分類し、さらに絞り込めます。

推測： 多数の製品を見せるには、検索と分類を組み合わせる必要があるためです。

学び： 数が多い一覧には、分類、検索、比較の3つを別の役割で用意する。

3. 詳細ページ：LM358

URL：https://www.ti.com/product/LM358

観察： 仕様、データシート、設計資料、購入・代替品への入口が並びます。

推測： 製品ページ自体がカタログではなく、設計作業のための作業台になっています。

学び： 詳細ページのゴールを「読む」だけにせず、次の作業へつなげる。

3ページの考察： TIは、目的達成を最優先にして、検索、分類、仕様の順番を明確にしています。

未確認： 製品検索から購入までの利用者別の差は未確認です。

14｜Walmart（WMT）

公式サイト：corporate.walmart.com

選定枠：S&P 500寄与 / 小売・物流

ヘッダーで見ること

観察： PCでは企業情報、店舗、事業、目的、ニュースへの入口が見えます。スマホではメニューにまとまり、企業の主役が縦一列に表示されます。

推測： 買い物サイトと企業サイトを分け、ここでは会社・従業員・地域・物流を説明する役割にしています。

学び： 同じブランドでも、買う場所と信頼を作る場所は分けて考える。

1. トップページ：会社の入口

URL：https://corporate.walmart.com/

観察： 会社のニュース、事業、従業員、地域への取り組みを見せます。

推測： 小売の商品一覧ではなく、企業としての姿勢を伝えるサイトです。

学び： ブランドの信頼を作るページでは、商品以外の関係者も主役にする。

2. カテゴリページ：会社について

URL：https://corporate.walmart.com/about

観察： 会社の歴史、事業、規模、働く人などを項目として整理します。

推測： 大きな会社を、読者が知りたい切り口に分けています。

学び： 会社概要は情報を全部載せず、読む理由ごとに分ける。

3. 詳細ページ：Purpose

URL：https://corporate.walmart.com/purpose

観察： 企業の目的や社会との関係を、ニュースや取り組みの背景として説明します。

推測： 商品価格だけではなく、会社の存在理由を理解してもらうためです。

学び： 長く続けたい活動は、機能ではなく目的を言葉にしておく。

3ページの考察： Walmartは、企業の活動、会社の情報、存在理由へと理解を深めます。

未確認： コーポレートサイトから買い物サイトへ移る導線の効果は未確認です。

15｜Western Digital（WDC）

公式サイト：westerndigital.com

選定枠：S&P 500寄与 / ストレージ

ヘッダーで見ること

観察： PCでは個人向け、データセンター向け、製品、ソリューションへ進めます。スマホでは用途の分類をメニューへ畳みます。

推測： 同じストレージでも個人と企業で選ぶ基準が大きく違うため、最初から分岐させています。

学び： 読者の目的が大きく違うときは、1つの一覧に混ぜない。

1. トップページ：ストレージ全体

URL：https://www.westerndigital.com/

観察： WD、Ultrastarなど複数の製品群と用途への入口があります。

推測： ブランド名を先に整理し、個人用と企業用の迷いを減らしています。

学び： ブランドが複数ある場合、入口で関係を説明する。

2. カテゴリページ：Internal Hard Drives

URL：https://www.westerndigital.com/solutions/hard-drives/internal-hdd

観察： 内蔵HDDを用途、容量、データセンターなどの条件で説明します。

推測： 製品名よりも、必要な保存環境から選ぶほうが検討しやすいからです。

学び： カテゴリは、選び方の質問に答える形で作る。

3. 詳細ページ：Ultrastar DC HC550

URL：https://www.westerndigital.com/products/internal-drives/data-center-drives/ultrastar-dc-hc550-hdd?sku=0F38460

観察： 容量、性能、用途、導入後も含む総費用（TCO）、購入・問い合わせへ進む情報があります。

推測： 企業向け製品では、速度だけでなく運用コストや長期利用を判断材料にしています。

学び： 高額な導入では、機能・価格・運用負担を同じページで比較できるようにする。

3ページの考察： Western Digitalは、ブランド、用途、導入条件へ読者を絞ります。

未確認： ページ内の比較機能が実際にどれほど使われるかは未確認です。

サービス、製品、ミッションの次の行動をどう作るか

16｜Meta Platforms（META）

公式サイト：about.meta.com

選定枠：S&P 500下押し / AIプラットフォーム

ヘッダーで見ること

観察： PCでは会社の考え方、技術、製品、ニュース、投資家向け情報へ進めます。スマホではメニューに畳み、製品やAIへの入口を残します。

推測： FacebookやInstagramだけでなく、Quest、AI、研究など複数の顔を持つため、企業サイトでは広い技術地図を示しています。

学び： サービス名が有名でも、会社サイトでは次の事業を理解できる入口を作る。

1. トップページ：会社と技術

URL：https://about.meta.com/

観察： 会社の取り組み、AI、デバイス、プラットフォームへ進む入口があります。

推測： 既存サービスの説明だけでなく、これからの技術領域を見せています。

学び： 変化の速い会社は、現在の商品だけでなく、次の方向を入口に置く。

2. カテゴリページ：Quest

URL：https://www.meta.com/quest/

観察： デバイス、アプリ、利用場面を製品カテゴリとして見せます。

推測： 社名や技術名ではなく、使う体験から商品を選ばせています。

学び： 新しい技術は、技術用語より利用場面を先に見せる。

3. 詳細ページ：Meta Quest 3

URL：https://www.meta.com/quest/quest-3/

観察： 製品の体験、機能、価格、購入への入口がまとまります。

推測： 新しい機器を買う不安を、体験の想像と具体的な仕様で減らしています。

学び： 新しいものを売るときは、機能説明の前に使った場面を想像させる。

3ページの考察： Metaは、会社の未来、製品カテゴリ、体験と購入へ順番を作ります。

未確認： about.meta.comとmeta.comの役割分担が読者にどの程度伝わるかは未確認です。

17｜Microsoft（MSFT）

公式サイト：microsoft.com

選定枠：S&P 500下押し / AIクラウド・ソフトウェア

ヘッダーで見ること

観察： PCでは個人、法人、AI、Windows、Microsoft 365など複数の入口があります。スマホではメニューに集約し、検索・アカウント・購入の入口を残します。

推測： 利用者の規模と目的が大きく違うため、個人と法人の分岐を早めに見せています。

学び： 同じサービスでも、個人用と法人用で入口を分けると説明が短くなる。

1. トップページ：個人と法人の入口

URL：https://www.microsoft.com/en-us/

観察： AI、Windows、Microsoft 365、ゲームなど複数の主役を順番に見せます。

推測： 全製品を一度に説明せず、訪問者が関係する入口を選べるようにしています。

学び： 主役が複数あるときは、画面を分けるか、目的別に選ばせる。

2. カテゴリページ：Microsoft 365

URL：https://www.microsoft.com/en-us/microsoft-365

観察： アプリ、プラン、個人・法人の違いをカテゴリとして整理します。

推測： 製品名より、使う人数や必要な機能から選ばせています。

学び： 料金プランの一覧では、違いを説明する基準を先に置く。

3. 詳細ページ：Microsoft 365 Copilot

URL：https://www.microsoft.com/en-us/microsoft-365-copilot

観察： AIの機能だけでなく、仕事でどう使うか、セキュリティ、導入への入口があります。

推測： 法人導入では、便利さだけでなく安全性と運用を説明しないと決められないためです。

学び： AIの詳細ページには、機能、利用場面、管理、安全性、導入を同じ順番で置く。

3ページの考察： Microsoftは、目的別の入口、製品群、導入判断の順で説明を深めます。

未確認： 個人・法人別の転換率や利用行動は未確認です。

18｜Tesla（TSLA）

公式サイト：tesla.com

選定枠：S&P 500下押し / モビリティ・エネルギー・AI

ヘッダーで見ること

観察： PCではVehicles、Energy、Charging、Discover、Shopが並びます。スマホではメニューへ畳まれ、モデル選択や購入に進む入口を残します。Cookie同意後に撮影し、購入へ進む画面を比べました。

推測： Teslaは車だけでなく、エネルギー、充電、ソフトウェアを含むため、製品群を大きな動詞・名詞で分けています。

学び： 製品が複数でも、利用者が理解できる大きなカテゴリ名にする。

1. トップページ：いま注文できる主役

URL：https://www.tesla.com/

観察： 大きな車のビジュアル、短い説明、Order NowとLearn Moreが最初に出ます。

推測： まず欲しい気持ちを作り、そのあと注文か説明を選ばせています。

学び： 購入の熱量と、慎重に読む入口を同じ画面に置く。

2. カテゴリページ：車種一覧

URL：https://www.tesla.com/models

観察： 車種、仕様、価格、注文への導線をモデル単位で分けます。

推測： 車を比較する人が、車種を選んだあとすぐ詳細へ進めるようにしています。

学び： 比較ページでは、比較軸を増やしすぎず、まず選択肢を見せる。

3. 詳細ページ：Model Y

URL：https://www.tesla.com/modely

観察： 航続距離、装備、画像、価格、注文設定へ情報が積まれます。

推測： 注文を押す前に、スペックと自分の条件を確認できるようにしています。

学び： 購入に近い詳細ページは、夢を見せるだけでなく、不安を1つずつ減らす。

3ページの考察： Teslaは、感情を動かすトップ、モデル選択、注文判断へ直線的に進ませます。

未確認： 地域や端末による案内の違いが、注文行動へ与える影響は未確認です。

19｜Super Micro Computer（ブランド名：Supermicro／SMCI）

公式サイト：supermicro.com

選定枠：比較追加 / AIサーバー

ヘッダーで見ること

観察： PCではサーバー、ストレージ、GPU、ソリューション、サポートへ進めます。スマホでは製品分類をメニューに畳みます。

推測： 製品を筐体名だけでなく、AI学習、推論、大規模計算（HPC）、端末側処理（Edge）などの用途から選ばせています。

学び： 技術製品を用途別に見せると、専門外の人にも入口ができる。

1. トップページ：AIサーバーの入口

URL：https://www.supermicro.com/en/

観察： サーバー、GPU、ストレージ、AIソリューションが大きな入口として見えます。

推測： まず必要な計算環境を想像させ、そのあと仕様へ進ませています。

学び： 製品を単品ではなく、使うシステムとして見せる。

2. カテゴリページ：AI / Deep Learning

URL：https://www.supermicro.com/en/solutions/ai-deep-learning

観察： AI学習、推論、HPCなど、用途別にサーバーの選択肢を出します。

推測： GPUの型番より、何を計算したいかを起点にしたほうが選びやすいからです。

学び： 高度な製品ほど、専門用語を減らすのではなく、用途との関係を示す。

3. 詳細ページ：GPUシステム

URL：https://www.supermicro.com/en/products/system/GPU/4U/SYS-420GP-TNR

観察： GPU数、CPU、筐体、構成、資料への入口が仕様表としてまとまります。

推測： 担当者が導入環境と照合するため、長い仕様を省かずに出しています。

学び： 読むのが長くても、決めるために必要な情報は隠さない。

3ページの考察： Supermicroは、計算の目的、システムのカテゴリ、構成仕様へ進めます。

未確認： 問い合わせや見積もりへ進む割合は未確認です。

20｜SpaceX（SPCX）

公式サイト：spacex.com

選定枠：比較追加 / 2026年IPO・宇宙

Space Exploration Technologies Corp.（SpaceX）は、2026年6月11日に新規株式公開（IPO）価格を1株135ドル、ティッカーをSPCXと発表しました。SpaceX公式IRで確認できます。

ヘッダーで見ること

観察： ミッション、車両、打ち上げ、会社の活動へ進む入口が中心です。スマホでは細かな入口をメニューへ畳みます。

推測： 会社説明より先に、技術とミッションを主役にしているように見えます。

学び： 大きな目的を伝えるサイトでも、ミッション、実績、技術へ進む入口を分ける。

1. トップページ：宇宙ミッション

URL：https://www.spacex.com/

観察： ミッションや車両、宇宙輸送の大きなビジュアルが入口として表示されます。

推測： 会社概要より、何を実現しようとしているかを先に見せています。

学び： 大きな目的を持つ企業は、会社説明よりミッションを主役にできる。

2. カテゴリページ：Launches

URL：https://www.spacex.com/launches/

観察： 打ち上げを日付、ミッション、車両の単位で一覧にします。

推測： 大きな夢を、実行された出来事の記録へ変えることで、継続的な活動として理解させています。

学び： ミッションを語るだけでなく、実績を一覧にして確認できるようにする。

3. 詳細ページ：Falcon 9

URL：https://www.spacex.com/vehicles/falcon-9/

観察： ロケットの特徴、性能、ミッションとの関係を詳しく見せます。

推測： ミッションの熱量から、技術の信頼性へ読者を進ませています。

学び： 世界観を強く出したあと、詳細ページで数字と仕組みを見せる。

3ページの考察： SpaceXは、使命、実績、技術へ進む順番を作っています。

未確認： SpaceXのサイトが投資家向けの判断に与える影響は未確認です。

参考｜Xは20社に含めない

X公式：about.x.com

Xは単独の株価として20社に含めず、サービスサイトの参考枠として見ます。SEC資料には、xAIとX Holdingsの取得を含む構造が記載されています。企業構造とサイトの目的は別なので、SpaceXの3ページと混ぜずに分けました。

1. Xの会社・サービス入口

URL：https://about.x.com/

観察： X.com、広告、開発者、ヘルプ、会社情報が目的別に分かれています。

推測： 一般利用者、広告主、開発者を同じ説明で扱わず、最初から行き先を分けています。

学び： 利用者の行動が違うときは、同じサービスでも入口を分ける。

2. X Adsのカテゴリ

URL：https://business.x.com/en/advertising

観察： 広告主向けに、広告の考え方、商品、運用への入口を分けます。

推測： 投稿を見る場所と、広告を設計する場所を分離することで、目的を混ぜないようにしています。

学び： 読者が「見る人」から「使う人」に変わるページでは、言葉と導線を変える。

3. 開発者向け詳細

URL：https://docs.x.com/overview

観察： API（外部プログラムから機能を使う仕組み）、仕様、開発者向けの導入情報が、サービス利用とは別の文脈で並びます。

推測： 開発者は投稿を読むのではなく、仕様を確認して実装するため、説明の順番が技術作業に合わせられています。

学び： 同じサービスでも、読者の次の作業が違うなら、詳細ページの構造も変える。

20社を並べて見えたこと

違いが分かりやすい3社だけでも、正解が1つではないと分かります。NVIDIAは技術、Walmartは会社の目的、Teslaは製品と注文をトップの主役にしています。違うのは見た目ではなく、「最初にしてほしい行動」です。

1. トップは会社紹介ではなく「いまの入口」

トップページで会社の歴史を全部説明する企業は少なく、AI、製品、ミッション、ニュースなど、その時に見てほしい入口を主役にしています。

自分のトップページでも、全部を説明しようとしない。「今日、最初に何を見てほしいか」を1つ決めます。

2. カテゴリは会社の組織図ではなく、読者の選び方

AI、サーバー、車、エネルギー、製品仕様。20社で分類の名前は違いますが、良いカテゴリは会社の部署名ではなく、読者が次に迷う基準を示しています。

「記事」「商品」「サービス」と並べるだけでなく、「初心者」「用途」「価格」「導入規模」のように選び方を出すことが学びです。

3. 詳細ページは価値を見せたあと、不安を減らす

製品の魅力、性能、仕様、料金、サポート、問い合わせ。詳細ページには、読者が最後に決めるための情報があります。

AIに「高級感のある詳細ページ」と頼むより、次のように条件を言葉にしたほうが伝わります。

> 最初に利用場面を見せる。次に選ぶ基準を出す。そのあと仕様と不安を減らす情報を並べ、最後に購入・相談・資料請求のどれか1つを選ばせる。

4. PCとスマホの差は、縮小ではなく優先順位の変更

PCでは、会社の地図や複数の入口を横に並べられます。スマホでは、メニュー、検索、購入、問い合わせなど、最初に必要な入口だけが残ります。

スマホをPCの小さい版として作るのではなく、「スマホで最初に何を残すか」を決める必要があります。

5. 観察と推測を混ぜない

「このボタンがある」は観察です。「迷わせないために置いた」は推測です。公式担当者に聞いていない限り、推測を事実のように書かない。

今回のように、企業の株価や注目度とサイトの良し悪しを一緒に扱うときほど、事実・考察・推測を分けることが大事です。

5分で自分の画面を診断する

自分のトップ、カテゴリ、詳細を1ページずつ開き、空欄を埋めます。答えが書けない場所が、次に直す場所です。

1. 最初の主役： ＿＿＿＿＿＿
2. 次に選ばせる基準： ＿＿＿＿＿＿
3. スマホでも残す入口： ＿＿＿＿＿＿
4. 詳細で減らす不安： ＿＿＿＿＿＿
5. 最後にしてほしい行動： 読む・買う・相談する・試す・＿＿＿＿
6. 画面で確認できる事実／自分の推測： ＿＿＿＿／＿＿＿＿

私が次にAIへ渡す指示は、「NVIDIA風」ではありません。

> 技術の主役を最初に1つ置く。用途別の入口を用意する。スマホでは検索とメニューを残す。詳細ページでは、使う場面、選ぶ基準、仕様、不安を減らす情報、次の行動をこの順番で見せる。公式に確認できない意図は推測として書く。

これなら、他社の色や形をコピーせず、20社から学んだ「見せる順番」を自分の画面へ移せます。

5人のデザイナーが見た20社のコンセプト

この記事の観察を、5つの専門分野の視点で読み直しました。実在のインタビューではなく、画面から読み取れる考え方をコメント風に整理しています。

情報設計を担当するWebデザイナー

「20社を見て感じたのは、トップページを会社案内にしていないことです。Alphabetは会社全体、NVIDIAは技術、Teslaは注文を最初に見せる。デザインの正解を探す前に、訪問者へ最初に渡す地図を決めることが大切だと思いました。」

UXデザイナー

「カテゴリが会社の部署名ではなく、読者の選び方になっているのが印象的でした。用途、対象者、導入条件から入れると、専門用語を全部知らなくても先へ進めます。メニューを増やすより、迷う基準を先に見せるほうが親切です。」

ブランドデザイナー

「SpaceXやWalmartは、商品や機能だけでなく、ミッションや目的を先に置いていました。ただ、理念だけで終わらない。SpaceXは打ち上げ実績、Walmartは具体的な活動へ続く。世界観を作るなら、次に確かめられる事実まで用意したいです。」

UIデザイナー

「PCとスマホで同じものを縮めるのではなく、残す入口を選んでいる点が参考になりました。スマホでは検索、メニュー、購入、問い合わせが残る。画面をきれいに整える前に、幅が変わったときの優先順位を決めることがUIの仕事だと思います。」

サービスデザイナー

「詳細ページが、魅力を見せるだけで終わっていません。TeslaはOrder NowとLearn More、Microsoftは機能・安全性・導入、Supermicroは仕様へ進ませる。読者が最後に感じる不安まで考えて、次の行動につなげています。ボタンを置く前に、不安を1つずつ減らす順番を作りたいです。」

5人のコメントに共通するのは、派手な見た目ではなく、目的に合わせた順番です。20社のコンセプトは、色や形だけでなく「誰に、何を理解してもらい、次に何をしてもらうか」に表れています。

参照した資料と公式サイト

• 前回の記事：Apple、Nike、NOT A HOTELを3ページで分解
• ETF.com：The 15 Stocks Driving the S&P 500's Gain in 2026
• Nasdaq：AI ROI in the Nasdaq-100
• Investor.gov：Market Capitalization
• SpaceX公式IR：IPO価格とSPCX
• SEC：SpaceX、xAI、X Holdingsの企業構造に関する資料
• X公式 About

自分のトップ・カテゴリ・詳細を、PCとスマホで1枚ずつ撮ってください。5つの質問に答え、直す1点だけを決めれば、今日のデザイン研究は完了です。