「AIっぽい」と言われたときに。自分の好きなデザインをAIへ伝える1日3サイト研究

デザインのことを、私はまだよく知りません。色やフォントの名前をたくさん知っているわけでもありません。それでも、画面を見た人が「何のページか」「次に何をすればいいか」を迷わず、一つ試せるものを作りたいと思っています。

AIに「いい感じ」「洗練されたWebデザイン」と頼むだけでは、自分の好みは伝わりません。Apple、Nike、NOT A HOTELを1日3サイト見て、主役・感情・世界観を1つずつ言葉にすると、AIに渡す指示が自分のものになります。

作ったWebデザインを見て、「AIっぽい」と言われると、とても悲しくなります。

自分なりに考えて、時間をかけて作ったものなのに、どこかで見たような画面に見えたのかもしれない。そう考えると、悔しさもあります。

でも、「AIっぽい」と言われたことを、すぐに自分の失敗だと決める必要はありません。それは、見た人が画面から受け取った印象です。

大切なのは、「どこがAIっぽく見えたのか」を聞き直すことです。画像が抽象的だったのか。文章が一般的だったのか。余白やカードの並びが、どこかで見た形に見えたのか。

AIっぽく見えない装飾を足すより先に、自分が何を良いと思い、何を残したいのかを言葉にしたい。そこで、朝の1時間を使って、1日3サイトを見る習慣を始めます。

調べたあとに散歩へ行くと、「今日はこれを試そう」と方針が固まります。見るだけで終わらず、1か所だけ手を動かす。これを記事にしながら続けていきます。

デザインを知らない私が大事にしたいこと

デザインというと、色、形、余白、フォントを思い浮かべます。けれど、今の私が学びたいのは、部品の名前を覚えることだけではありません。

私が大事にしたいのは、次の3つです。

• 入口がわかること。最初に何を見ればいいか迷わない
• 見る理由が伝わること。このページをなぜ見るのかがわかる
• 次の一歩を選べること。読む、試す、買うなど、行動を1つ選べる

私にとってデザインは、画面を飾ることだけではありません。伝えたいものを決め、見せる順番をつくり、見た人が次の一歩を選べるようにすることです。

まだ専門用語も正解も知りません。だから、好きなサイトを見ながら、「何が最初に見えたか」「なぜ見続けたくなったか」「何を試したくなったか」を確かめます。

今回の3サイト研究は、プロのデザインを評価するためではありません。自分が何を大事にして画面を作りたいのかを、自分の言葉で見つける練習です。

3サイトの見方を決める

今回見るのは、Apple、Nike、NOT A HOTELです。

この3サイトを、そのまま真似するためには見ません。Appleからは「何を残して何を削るか」。Nikeからは「画面にどんな熱量を持たせるか」。NOT A HOTELからは「その場所で過ごす時間をどう想像させるか」を持ち帰ります。

「おしゃれなサイトを3つ見る」のではありません。

自分の好みを、違う方向から観察します。最後に3つの答えを組み合わせると、AIに「Apple風」「Nike風」「高級感」と頼まなくても、自分の設計条件を伝えられるようになります。

トップ・カテゴリ・詳細の3ページを比べる

トップページだけを見ると、デザインを「大きな写真と短い言葉」だと思ってしまいます。今回は各サイトで、トップ、カテゴリ／一覧、詳細／単記事の3ページを開きました。

• トップ：初めて来た人に、何のサイトか伝える
• カテゴリ／一覧：選択肢を並べ、比べてもらう
• 詳細／単記事：1つを深く説明し、次の行動へ進める

同じサイトでも、ページの役割が変わると、画像の大きさ、文章の量、ボタンの置き方が変わります。スマホでは横に並べられないため、情報を縦に積み、メニューを畳み、押してほしいボタンを残します。画面が狭くなることで、そのサイトが本当に大事にしている順番が見えてきます。

画面を分解する順番

専門用語を知らなくても、次の5つを見ればページの設計を言葉にできます。

1. 最初に何が見えるか
2. 次に何を見せているか
3. 選択肢は、何を基準に並んでいるか
4. スマホでは何が縦積み・横スクロール・折りたたみに変わったか
5. 最後に、どの行動へ誘導しているか

今回はPCを1280×720、スマホを375×812で撮影しました。画像を見るときは、きれいかどうかより「このページは何を決めさせるためにあるのか」を考えます。

ヘッダーをPCとスマホで分解する

ヘッダーは、サイトにある情報を全部置く場所ではありません。見る人を、次の行動へ案内するための入口です。ここでは、画面から確認できることを「考察」、サイト側の意図として読み取ったことを「推測」として分けます。推測は公式の意図ではなく、今回のキャプチャから考えた仮説です。

Appleのヘッダー

考察： PCでは、ロゴ、製品カテゴリ、検索、購入に関する入口が見えます。スマホでは、製品カテゴリの一覧をメニューにまとめ、ロゴ、メニュー、検索や購入に関する入口を残しています。

推測： AppleにはiPhone、Mac、iPadなど複数の製品があるため、PCでは目的の商品へ直接進めるように製品カテゴリを見せていると考えられます。スマホではすべてのカテゴリを並べると本文を見る場所が狭くなるため、詳細な案内をメニューへ移し、最初に必要な入口だけを残しているように見えます。

Appleのヘッダーは、PCでは「どの製品があるか」を案内し、スマホでは「まずどこから始めるか」を整理しています。

Nikeのヘッダー

考察： PCでは、商品カテゴリ、メンズ・ウィメンズ・キッズ、Jordan、スポーツなど、複数の探し方が見えます。検索、ヘルプ、お気に入り、バッグなど、購入に関係する入口もあります。スマホでは、ロゴ、メニュー、検索、バッグなどに絞られます。

推測： Nikeの商品は、商品名だけでなく、性別、スポーツ、ブランド、コレクションなどから探す人もいます。そのためPCでは複数の入口を同時に見せ、スマホでは選択肢が多くなりすぎないように詳細な分類をメニューへまとめていると考えられます。検索やバッグを残すのは、目的が決まっている人の行動を止めないためだと推測できます。

Nikeのヘッダーは、PCでは「自分に合う探し方」を複数見せ、スマホでは「探す入口」を一つにまとめています。

NOT A HOTELのヘッダー

考察： PCでは、物件、Stories、つくり手、Newsなど、滞在そのものだけでなく、ブランドの背景へ進む入口が見えます。スマホでは、ロゴ、メニュー、利用や問い合わせにつながる入口を中心に残しています。

推測： NOT A HOTELは、部屋の広さや価格だけを比べるサイトではありません。場所、建築、つくり手、過ごす時間を理解してもらう必要があります。そのためPCでは、物件一覧だけでなく、Storiesやつくり手への入口も見せ、検討するための情報を先に用意していると考えられます。スマホでは、細かな案内をメニューにまとめ、世界観と重要な行動へ集中させているように見えます。

NOT A HOTELのヘッダーは、PCでは「このブランドには何があるか」を案内し、スマホでは「世界観を感じて、次の行動へ進む」入口に絞っています。

3サイトを比べて分かったこと

考察： PCでは、複数の入口を横に並べています。スマホでは、ロゴ、メニュー、検索、購入や問い合わせなど、優先度の高いものだけを残しています。

推測： PCでは画面に余裕があり、サイト全体の地図を見せても迷いにくい。一方、スマホでは情報を横に並べられないため、最初の行動を絞ったほうが迷いにくい。そのため、スマホ対応は単なる縮小ではなく、情報の優先順位を組み替える作業だと考えられます。

ヘッダーを観察するときは、次の順番で書きます。

考察：画面には何が出ているか。PCとスマホで何が変わったか。
推測：なぜそれを残し、なぜそれを隠したのか。
学び：自分のサイトでは、何を最初に見せるか。

Apple：主役と脇役を分ける

公式サイトURL：https://www.apple.com/jp/

サイトの役割

Apple Japanは、iPhoneやMacなどの製品を紹介する公式サイトです。製品の特徴を知り、詳しい情報を読み、購入やサポートへ進めます。

調査時のトップでは、製品カテゴリのナビゲーションの下に、iPhoneの最新ラインナップを紹介する大きな領域がありました。短い説明、製品写真、「さらに詳しく」「iPhoneを見る」という行動が一つのまとまりになっています。

3ページを開いて分解する

1. トップページ：気になる入口をつくる

トップページ：https://www.apple.com/jp/

PCでは、上部のナビゲーションから複数の製品へ進めます。その下では、いま見てほしい製品の写真と言葉を大きく置きます。スマホではナビゲーションが畳まれ、画面の幅に合わせて、見出し、画像、ボタンの順に縦へ並びます。

ここでの役割は、すべての商品を選ばせることではありません。「Appleには何がありそうか」「まず何が気になるか」をつくることです。

2. カテゴリページ：選択肢を比べられるようにする

iPhoneカテゴリ：https://www.apple.com/jp/iphone/

カテゴリページでは、トップの「気になる」が、「どれを選ぶか」に変わります。iPhoneのラインナップ、比較、購入理由がまとまり、選択肢を比べるための順番がつくられています。スマホでは横幅がないため、製品のまとまりを縦に積み、横に動かせるナビゲーションも使います。

カテゴリページをつくるときは、商品や記事をただ並べません。「初心者向け」「最新」「価格を比べたい」のように、選ぶ基準を先に見せます。

3. 詳細ページ：1つを選ぶ理由を深める

iPhone 17 Pro詳細：https://www.apple.com/jp/iphone-17-pro/

詳細ページでは、製品名、特徴、実物のビジュアル、価格や購入への入口が、1つの製品を選ぶためにまとまっています。PCでは大きな画面を使って価値を印象づけ、スマホでは説明と行動を縦に並べて、読み終わったあとに購入へ進みやすくします。

Appleの3ページを短く言うと、トップは「気になる」、カテゴリは「比べる」、詳細は「選ぶ」です。ページが変わるたびに、デザインの仕事も変わっています。

Appleから学ぶべきこと

Appleから学ぶべきなのは、白い背景や大きな製品写真ではありません。最初に見せる主役を1つ決め、主役を補足する情報だけを残すことです。

自分のブログやサービスのトップページにも同じ考え方を使えます。

• 初めて来た人に、サイトのテーマを伝える
• 今日読む記事へ案内する
• 検索して目的の記事を探してもらう

これらを全部、同じ強さで置くと入口がぼやけます。まず主役を1つ決める。そのあとで、主役を補足する情報だけを残します。

最初の3秒で残るものを見る

次の順番で観察します。

1. 最初に何が目に入ったか
2. その主役を説明する言葉は何文字くらいか
3. 写真、見出し、ボタンのどれが一番強いか
4. 何が置かれていないから、画面が気持ちよく見えるか
5. 主役を1つ、脇役を2つに分けると何になるか

ここで学ぶのは、いわゆる「ミニマルな見た目」ではありません。画面に置くものの優先順位です。

Appleの画面は、最初から全部を説明しようとしません。今見てほしい製品を決め、その製品の価値を短い言葉で示し、実物を見せます。

「余白を広くして」とAIに頼むより、次のように言ったほうが具体的です。

主役を1つに絞る。短い言葉で価値を伝える。実物が分かる画像を置く。脇役の情報は主役を邪魔しない強さにする。何でも盛り込まず、最初の行動を1つにする。

今日試すこと

自分のトップページの最初の画面を開きます。

見出し、画像、ボタン、補足文の中から、主役を1つだけ決めます。色やフォントは変えません。主役以外の強さを少し下げ、最初に見てほしいものが残るかを確認します。

Nike：感情と行動をつなぐ

公式サイトURL：https://www.nike.com/jp/

サイトの役割

Nike Japanは、シューズやウェアを販売する公式サイトです。同時に、スポーツ、選手、コレクション、スタイルを伝えるブランドサイトでもあります。

調査時のトップには、Jordanの新作シューズを大きく見せるビジュアルがありました。商品の説明だけでなく、光、路面、影、競技への愛情まで画面に含まれています。

3ページを開いて分解する

1. トップページ：動き出したくなる入口をつくる

トップページ：https://www.nike.com/jp/

トップでは、商品一覧より先に、キャンペーンの空気やスポーツの気分を伝えます。PCでは大きなビジュアルと複数の入口を組み合わせ、スマホではメニューを絞り、コピーとボタンを縦に置いて、次の行動を迷わせません。

ここでの役割は、商品を細かく比較させることではありません。「自分も動きたい」という気持ちを起こし、カテゴリやキャンペーンへ進んでもらうことです。

2. カテゴリ／一覧ページ：探しながら選べるようにする

ランニングカテゴリ：https://www.nike.com/jp/w/running-37v7j

カテゴリに入ると、ブランドの熱量よりも、探しやすさが前に出ます。商品数、絞り込み、並び替え、商品カードがあり、「何を買うか」を条件で狭められます。PCでは一覧と絞り込みを同時に見せ、スマホでは絞り込みと並び替えを上部にまとめ、商品を縦に読み進めます。

自分の記事一覧にも、ただ新しい順に並べるだけでなく、「初心者向け」「実際に試した」「比較した」のような選ぶ基準をつくれます。

3. 詳細／キャンペーンページ：気持ちを理由に変える

Aero-FIT特集：https://www.nike.com/jp/aerofit

今回の詳細ページは、商品1点だけのページではなく、ランニングウェアの特集ページです。まず「涼しさ続く、自分だけの風」という体感を示し、そのあとに素材、通気性、使用場面、選手の言葉、商品への入口を並べています。

つまり、トップが感情を起こし、カテゴリが選択肢を整理し、詳細ページが「なぜこれなのか」を説明しています。スマホではその順番がそのまま縦に現れるので、文章の順番を決めることがレイアウトを決めることになります。

Nikeの3ページを短く言うと、トップは「動かす」、カテゴリは「探させる」、詳細は「納得させる」です。

Nikeから学ぶべきこと

Nikeから学ぶべきなのは、派手な写真や強い色ではありません。見る人の感情を動かし、次の行動へつなげるリズムです。

「高性能です」と説明するだけでは、読む人の体は動きません。商品がどんな場面で使われ、どんな気持ちで身につけるものなのかを、写真と短い言葉で伝えます。

この考え方は、商品ページ以外にも使えます。

• 「読む」ではなく「試す」
• 「知る」ではなく「歩き出す」
• 「便利」ではなく「迷わず進める」

抽象的な形容詞を、読者が取る動詞へ変える。動詞が決まると、写真、見出し、ボタンの役割も決めやすくなります。

見た瞬間に何をしたくなったかを見る

Nikeでは、色や派手さではなく、画面から起きる感情を観察します。

1. 見た瞬間、何をしたくなったか
2. 写真、言葉、文字サイズのどれが感情を動かしたか
3. 静けさ、疾走感、挑発、遊びのどれに近いか
4. 商品と人の動きがどうつながっているか
5. 説明より先に伝わった態度は何か

AIに「Nikeっぽく」と頼むのではなく、こう伝えます。

見た人が次の一歩を試したくなる熱量を出す。抽象的な装飾ではなく、実際に使う場面を見せる。コピーには動詞を入れ、写真・見出し・ボタンが同じ行動を指すようにする。派手さではなく、意志とリズムを残す。

今日試すこと

自分のページの見出しを1つ選びます。

「便利」「快適」「魅力的」のような形容詞を、読者が実際にする動詞へ置き換えます。その動詞に合う写真やボタンになっているかを、1か所だけ確認します。

NOT A HOTEL：場所と時間を伝える

公式サイトURL：https://notahotel.com/

サイトの役割

NOT A HOTELは、全国の拠点を自分の家のように使える仕組みと、そこにある建築や滞在の体験を紹介するブランドサイトです。

単に部屋を予約するサイトではありません。物件の場所、建築をつくる人、素材、そこで過ごす時間を、写真と文章で伝えています。公式サイトには「NOT A HOTELとは」「NOT A HOTEL STORIES」「NOT A HOTELをつくる人」という入口もあります。

調査時のトップでは、山と建物、光、物件名が一つの景色として見えました。機能を先に並べるのではなく、「この場所で時間を過ごす」想像から入れる構成です。

3ページを開いて分解する

1. トップページ：憧れの入口をつくる

トップページ：https://notahotel.com/

トップでは、いきなり部屋の条件を比べさせません。物件、Stories、つくり手などの入口を置き、「ここにはどんな世界があるのか」を先に感じてもらいます。スマホでは大きな景色を縦に見せ、画面の下へ進むほど次の入口が現れます。

ここでの役割は、予約ボタンを押させる前に、その場所で過ごす時間を想像してもらうことです。

2. カテゴリ／物件一覧ページ：違いを選べるようにする

物件一覧：https://notahotel.com/shop

一覧ページでは、トップの憧れが、具体的な選択に変わります。地域や物件の違いを見せ、カードから個別ページへ進めます。PCでは複数の物件を並べて比較し、スマホでは絞り込みを横に動かしながら、物件カードを縦に読みます。

一覧で大事なのは、カードを増やすことではなく、違いが一目で分かることです。「海」「山」「温泉」「家族で使う」のように、読者が自分の目的で選べる言葉を置きます。

3. 詳細／単記事ページ：その場所の体験を深める

ONSEN SUITE詳細：https://notahotel.com/shop/yugawara/onsen-suite

詳細ページでは、奥湯河原の情景、自然の中の風呂、部屋の種類、食事、つくり手、アクセスへと、滞在を想像する材料が順番に出てきます。単なる設備一覧ではなく、「朝から夜まで、ここでどう過ごすか」を組み立てるページです。

スマホでは写真と文章が縦に続くため、1つのセクションで伝えることを絞る必要があります。PCで横に見せていた関係も、スマホでは「景色→体験→条件→予約」の順番に変換されます。

NOT A HOTELの3ページを短く言うと、トップは「憧れ」、カテゴリは「選択」、詳細は「体験」です。

NOT A HOTELから学ぶべきこと

NOT A HOTELから学ぶべきなのは、「高級感」という見た目ではありません。土地の光、素材、つくり手、過ごす時間のような固有の情報を置き、読む人が自分の時間を想像できるようにすることです。

単に部屋を予約するのではなく、物件の場所、建築をつくる人、素材、そこで過ごす時間を伝える。商品を説明するだけでなく、その先にある体験を見せる考え方です。

写真の外側にある時間を見る

NOT A HOTELでは、次のことを考えます。

1. 誰が、どんな時間を過ごす場所に見えたか
2. 建築、自然、素材、余白のどれに惹かれたか
3. 写真に任せて、あえて説明していないことは何か
4. 物件、つくり手、ストーリーがどの順番で出てくるか
5. 自分のサイトにも残したい空気は何か

AIに「高級なデザイン」と頼むと、黒背景や金色の文字だけが返ってくることがあります。代わりに、次の条件を渡します。

場所の光、素材、つくり手、過ごす時間を具体的に見せる。説明しすぎず、写真を見た人が自分の時間を想像できる余白を残す。一般的な高級感ではなく、この場所にしかない情報を1つ入れる。

今日試すこと

自分のページにある「おしゃれ」「上質」「こだわり」という言葉を1つ選びます。

その言葉を、場所、素材、人、時間のどれか1つに置き換えます。たとえば「上質な体験」ではなく、「朝の光が入る窓辺で、10分だけゆっくり読める」のように書く。具体的な情報が増えると、ページの個性も伝わります。

記録方法：観察、印象、好み、条件を分ける

サイトを見て「なんか好き」で終わると、AIには渡せません。次の4段階に分けてメモします。

この分け方をすると、「Appleのように」「洗練された感じで」という曖昧な指示を避けられます。

たとえば、3サイトを見たあとのメモはこうなります。

主役：サービスの実際の画面
最初に感じてほしいこと：静かな期待のあとに、試してみたい気持ちが生まれる
過ごしてほしい時間：急かされずに内容を理解し、最後に1つ試す
大きく見せるもの：実際の画面と、行動を示す短い動詞
削るもの：意味のない抽象画像、同じ強さのカード、一般的な形容詞
避ける表現：「Apple風」「Nike風」「高級感」だけで終わる依頼

「好き」をそのままAIに投げるのではなく、何が好きなのかを分解する。これが、デザインの引き出しを自分の言葉に変える作業です。

違和感を改善に変える

「AIっぽい」は、デザインの客観的な点数ではありません。見た人が感じた違和感の名前です。

もしそう言われたら、次のように聞き返します。

どの部分がAIっぽく見えた？画像、文章、色、レイアウトのどれに近い？そう感じた理由を、見えたものとして教えてほしい。

返ってきた答えを、すぐに装飾の修正へつなげません。

• 抽象的な画像だったなら、実際の人や場所を見せる
• 文章が一般的だったなら、自分の経験や固有名詞を入れる
• カードが似ていたなら、情報の優先順位を変える
• 余白がきれいすぎたなら、手書き風の飾りを足す前に、何を伝えたい画面かを決める

一度に全部を変えないことも大切です。原因の仮説を1つ立て、1か所だけ変えます。変えた結果、印象が変わったかをもう一度見てもらう。そうすれば、「AIっぽさを消す」ではなく、「自分の判断を強くする」改善になります。

今日から1時間で試す

1時間あれば、3サイトのトップ・カテゴリ・詳細を見て、1か所を試すところまで進められます。

毎日、次のテンプレートを使います。

今日の問い：

Apple
観察：
印象：
自分の好み：
AIに渡す条件：

Nike
観察：
印象：
自分の好み：
AIに渡す条件：

NOT A HOTEL
観察：
印象：
自分の好み：
AIに渡す条件：

今日、自分で変える1箇所：
変えなかったもの：
結果：
明日の問い：

3サイトを見たあと、3つ全部を画面へ入れようとしません。Appleからは優先順位、Nikeからは行動の熱量、NOT A HOTELからは具体的な時間。そのうち、今日のページに必要な1つだけを試します。

3サイトから持ち帰る判断

3サイトを比べて気づいたのは、デザインはページごとに「読者にしてほしい判断」を置くことだということです。

ページごとの判断

PCでは、複数の情報を横に置いて「関係」を見せます。スマホでは、横に置けないものを縦の「順番」に変えます。だからスマホ対応は、文字や画像を小さくする作業だけではありません。何を先に残し、何を後ろへ送るかを決める作業です。

AIにデザインを頼むときは、ページの役割まで渡します。

トップでは、初めて来た人にサイトの約束を1つ伝える。
カテゴリでは、選択肢を目的別に比べられるようにする。
詳細では、1つを選ぶ理由と次の行動を順番に見せる。
スマホでは、ナビゲーションを畳み、情報を縦に積み、最重要のボタンを残す。

これなら「おしゃれに」「Apple風に」よりも、自分が何を大事にしているのかを伝えられます。

サイトごとの判断

今回の3サイトから持ち帰るものは、白い背景、強い写真、黒い文字ではありません。

• Appleで、主役と脇役を分ける
• Nikeで、見た人に起きてほしい行動を決める
• NOT A HOTELで、商品を使う時間や場所を具体的にする

この3つを自分の言葉で書ければ、AIに頼む内容も変わります。

「おしゃれにして」ではなく、「主役を1つにして、実物を見せ、見る人が今日試せる動詞を置く」になる。

デザインの引き出しが増えるとは、見た目のパターンをたくさん覚えることではありません。自分が何を良いと思ったのか。その理由を、次の画面でも使える条件に変えられることです。

明日も3サイト見る。ただし、サイト名を集めるだけにはしない。自分の目に残ったものを、1つの判断として持ち帰ります。

参照したサイト

• Apple Japan 公式サイト
• Apple iPhoneカテゴリ
• Apple iPhone 17 Pro詳細
• Nike Japan 公式サイト
• Nike ランニングカテゴリ
• Nike Aero-FIT特集
• NOT A HOTEL 公式サイト
• NOT A HOTEL 物件一覧
• NOT A HOTEL ONSEN SUITE
• Nike PLAYlab（Awwwards） — NikeのWeb表現を第三者の掲載ページでも確認するために参照

※掲載キャプチャは、2026年8月12日の調査用です。公開時は、各サイトの利用条件と引用範囲を確認してから使用します。