Webデザインのトレンド13種類を、自社ホームページで全部作って比べてみた【実物デモあり】

結論：同じ文章・同じ写真でも、デザインを変えるだけで会社の印象はまったく変わります。ただ、トレンドは「どれが正解か」ではなく「誰に何を伝えたいか」で選ぶもの。13通りを並べてみると、自社に合うものと合わないものがはっきり分かります。

なぜ13種類も作ったのか

ホームページ制作のご相談で、「最近はやりのデザインにしたい」と言われることがよくあります。ところが「はやり」と一口に言っても、立体的な3D、暗い画面のダークモード、柔らかい影のニューモフィズム、あえて崩したネオブルータリズムなど、方向性はばらばらです。

Figmaの解説記事「Webデザイントレンド」では、こうしたトレンドが13種類に整理されています。とはいえ、記事を読むだけでは「自分の会社にするとどうなるか」までは想像しにくいものです。

そこで当社（Kirakuna）のトップページを題材に、13種類すべてを実際に作り分けてみました。文章・写真・数字はすべて同じで、変えたのは見た目と動きだけです。どのページもスマホとPCの両方で見られます。

13パターンを見比べる

画像は各ページをPCで開いたときの最初の画面です。「実物を開く」から、スクロールやボタンの動きも試せます（新しいタブで開きます）。

01. 3Dと没入型要素

スクロールすると奥へ進むトンネルの中に、制作実績の写真が浮かんでいます。数字は回転する立方体、実績は回せる3Dのリング。重いWebGLは使わず、ブラウザ標準の3D表現だけで作りました。

• 向いている業種：体験そのものを売りたい業種（観光、イベント、ショールーム、エンタメ）
• 気をつけること：動きが多いぶん、情報を探しに来た人には遠回りになります。「動きを減らす」設定の人には止まるようにしています。

02. 実験的なナビゲーション

上部の固定メニューをやめ、ページ全体を路線図に見立てました。横に並んだ「駅」を順にたどり、左下の丸いボタンから行き先を選びます。スマホでは縦の路線になります。

• 向いている業種：見せ方そのものが個性になる業種（デザイン事務所、ブランドサイト、作品集）
• 気をつけること：慣れた形でないぶん、迷う人も出ます。矢印キーやTabキーで全部の項目に行けるようにするなど、操作の逃げ道が必須です。

03. 鮮やかなカラーパレット

背景でネオン調のグラデーションがゆっくり動き、見出しやボタンも高コントラストの配色です。ボタン1つで配色が3通りに切り替わる遊びも入れました。

• 向いている業種：若い層・楽しさを伝えたい業種（カフェ、スクール、アプリ、イベント）
• 気をつけること：色が強いほど文字が読みにくくなりやすいので、文字と背景の明るさの差は必ず確かめます。

04. ボールドなタイポグラフィ

「テクノロジーで、暮らしをもっと気楽に」を画面幅いっぱいの極太文字で組み、色は白・黒・緑・黄の4色だけ。写真より文字が主役です。

• 向いている業種：言いたいことが一言で言える会社・商品（スタートアップ、採用ページ、キャンペーン）
• 気をつけること：PCで見出しを大きくしすぎると、説明文とボタンが最初の画面に入りません。今回も実際にそうなりました。

05. ダークモード

深い紺の画面に吊り下げランプを描き、ひもを引くとライト／ダークが切り替わります。選んだ設定は次に来たときも残り、最初は端末の設定に合わせます。

• 向いている業種：IT・ガジェット・夜の時間帯の業種（バー、映像、ゲーム、ソフトウェア）
• 気をつけること：暗い背景では写真が浮いて見えがちです。今回は少し暗くして、マウスを乗せると元の明るさに戻るようにしました。

06. モーションデザインとアニメーション

見出しが1文字ずつ波のように立ち上がり、背景の円が呼吸のリズムで大きくなったり小さくなったりします。縦にスクロールすると、実績の写真は横に流れます。

• 向いている業種：「気持ちよさ」を伝えたい業種（美容、ヨガ、整体、ライフスタイル）
• 気をつけること：動きで酔う人もいます。「動きを減らす」設定のときは、横に流れる部分を普通の並びに戻しています。

07. ゲーミフィケーション

ページを読み進めると、セクションごとにスタンプが押されてポイントが貯まります。5つ集めるとゴールの画面が開きます。

• 向いている業種：最後まで読んでほしい・参加してほしい業種（教室、スクール、キャンペーン、採用）
• 気をつけること：お問い合わせボタンは、スタンプが揃っていなくてもいつでも押せるようにしました。ゲームで行動を縛ると、ただの邪魔になります。

08. ニューモフィズム

淡い一色の背景から、ボタンやカードが柔らかい影で浮き出たり沈んだりして見えます。押すと回る「気楽ダイヤル」が主役です。

• 向いている業種：落ち着き・やさしさを伝えたい業種（クリニック、家電、ウェルネス、アプリ紹介）
• 気をつけること：影だけで形を見せるので、境目が見えにくくなります。押せる場所が分かるかを、明るい部屋とスマホで確かめる必要があります。

09. レトロフューチャリズム

夕陽とネオンのグリッドの地平線、金属っぽいロゴ、ブラウン管風の走査線。実績はチャンネル番号つきのテレビ画面に映っています。

• 向いている業種：世界観で覚えてもらいたい業種（音楽、ゲーム、アパレル、バー）
• 気をつけること：飾りが多いほど、スマホでは文字がはみ出しやすくなります。今回も最初は見出しが右で切れていました。

10. マキシマリズム

書体5種、柄5種、色6色を重ねた、にぎやかな画面です。セクションごとに地の色と柄を変え、流れる文字の帯も2本走らせました。

• 向いている業種：勢い・お祭り感が武器の業種（雑貨、イベント、フェス、エンタメ）
• 気をつけること：情報が多く、どこを見ればいいか迷いやすくなります。ボタンだけは一番目立つ色にしておくのがコツです。

11. コラージュ

1文字ずつ切り抜いた見出し、マスキングテープで留めた写真、付箋のメニュー、レシート風の会社概要。スクラップブックのような手作り感です。

• 向いている業種：人の温かみを伝えたい業種（手作り雑貨、教室、地域のお店、子ども向け）
• 気をつけること：見出しの文字をばらばらにすると、読み上げソフトでは1文字ずつ区切って読まれかねません。今回は、読み上げ用に見出しの文をまとめて持たせています。

12. ネオブルータリズム／アンチデザイン

太い黒枠とベタ塗りの影、原色のブロックを、わざとずらして重ねています。ボタンは押すと影が消えて沈みます。

• 向いている業種：「よくある会社っぽさ」を外したい業種（スタートアップ、クリエイター、個人ブランド）
• 気をつけること：わざと重ねるデザインは、画面幅が変わると大事な文字まで隠れます。今回もスマホで、帯が見出しに重なって読めなくなっていました。

13. サステナブルなWebデザイン

Webフォントも動きのためのプログラムも使わず、端末の標準の文字で組みました。最初に読み込むのはHTMLの約12KBだけで、写真は開いたときにだけ読み込みます。

• 向いている業種：情報を確実に届けたい業種（自治体、病院、士業、BtoBの会社案内）
• 気をつけること：地味に見えやすいので、言葉と情報の整理で勝負することになります。代わりに、古いスマホでも速く、読み上げにも強いページになります。

作ってみて分かったこと

• 演出が強いほど、スマホで崩れやすい：13ページをスマホ幅（375px）とPC幅（1280px）で確かめたところ、レトロフューチャリズムでは見出しが右で切れ、ネオブルータリズムでは帯が見出しに重なり、ゲーミフィケーションでは画面が横にはみ出していました。シンプルなパターンでは起きていません。凝ったデザインほど、確認の手間が増えます。
• 重さは見た目でかなり変わる：HTMLだけで比べても約12KB（サステナブル）から約23KB（モーション、ゲーミフィケーション）まで差があります。さらに、ほとんどのパターンは見た目のためにWebフォントを1〜3種類読み込んでいます。何も読み込まないサステナブルなページとは、表示の速さに差が出ます。
• 「動きを減らす」設定への対応は欠かせない：端末で「視差効果を減らす」などを選んでいる人には、動きを止めるようにしました。動きのあるデザインを選ぶなら、セットで考えるべき部分です。
• トレンドは組み合わせて使える：例えばダークモードとボールドなタイポグラフィ、サステナブルとニューモフィズムのボタンなど、2〜3種類を混ぜるのが実務では普通です。1つに絞る必要はありません。

業種別に選ぶなら（当社の考え）

あくまで当社が作ってみたうえでの目安ですが、迷ったときは次のように考えると選びやすくなります。

• 信頼が大事な業種（病院、士業、BtoB）：サステナブル、ニューモフィズム、控えめなモーション（具体例は次の「お堅めな会社なら」で紹介しています）
• 人の温かさを伝えたい業種（教室、地域のお店）：コラージュ、鮮やかなカラーパレット、ゲーミフィケーション
• 世界観で覚えてもらいたい業種（音楽、アパレル、エンタメ）：レトロフューチャリズム、マキシマリズム、3Dと没入型要素
• 言いたいことが明確な会社（スタートアップ、採用）：ボールドなタイポグラフィ、ネオブルータリズム、ダークモード

お堅めな会社なら：架空の5社で作った例

ここまでの13パターンは、当社のようなWeb制作会社には合っても、商社やコンサルティング会社、メーカーのような「お堅めな会社」にはそのまま使いにくいものが多かったと思います。そこで、業種ごとに架空の会社を立てて、大企業の公式サイトとして通用する落ち着いたデザインを5つ作りました。

どれも写真は使わず、図形や線画だけで組んでいます。掲載の会社名・人物・数値はすべて架空です。

14. 総合商社（潮凪通商・架空）

濃紺のグラデーションに、点で描いた世界地図と、東京から各拠点へ伸びる航路の線。事業は罫線で区切った6つのタイルで並べ、株主・投資家向け情報とサステナビリティへの入口を目立つ場所に置きました。

ポイント：「世界中で、大きな規模で事業をしている」ことを、写真がなくても地図と数字で伝えられます。

15. 経営コンサルティング（ルミナステア・パートナーズ・架空）

白地に明朝体の大きな見出しと細い罫線、差し色は臙脂の1色だけ。トップページの主役は、会社の紹介よりも「論考（インサイト）」の記事です。

ポイント：コンサルティング会社は「何を考えている会社か」で選ばれます。雑誌のような余白と書体で、知的な印象を作れます。

16. 精密部品メーカー（凪川精機・架空）

白と鮮やかな青。方眼の背景に、部品の図面（寸法線や表題欄つき）を線画で描き、線が引かれていく動きを1回だけ入れました。製品カテゴリ、強み3つ、拠点数・特許数を並べています。

ポイント：技術の会社は、製品写真がなくても「図面」で技術力を見せられます。動きは控えめでも、この程度なら堅さを損ないません。

17. 法律事務所（瑠璃坂総合法律事務所・架空）

生成り色の背景に深緑と金の細線、明朝体の見出し。取扱分野は罫線のリストで、弁護士紹介は顔写真の代わりにイニシャルの丸と専門分野だけにしました。

ポイント：士業のサイトは「派手さ」より「落ち着き」が信頼につながります。色数を3色程度に抑えるのが格式を出すコツです。

18. 資産運用会社（霜月坂アセットマネジメント・架空）

ダークネイビーと白に、控えめな金。目盛りのない抽象的な折れ線グラフを飾りに使い、ファンドは名前と分類だけの一覧表、リスクの注意書きを独立した欄に置きました。

ポイント：金融は、伝え方そのものに決まりが多い業種です。数字で期待をあおらず、注意書きをきちんと見せることが、そのまま誠実さの表現になります。

5社に共通しているのは、色を2〜3色に絞る、罫線と余白で整理する、動きはほとんど入れないことです。トップページの構成も、事業紹介・数字・お知らせ・会社概要・採用やIRへの入口という定番の形にしています。お堅めな会社では、見慣れた形であること自体が「ちゃんとした会社」という安心感につながるためです。

とはいえ、トレンドが使えないわけではありません。メーカーの図面の線が一度だけ引かれる動き（モーション）や、資産運用会社の暗い紺を基調にした画面（ダークモードに近い考え方）のように、控えめに一つだけ取り入れるのが、お堅めな会社でトレンドを活かすコツです。

よくある質問（FAQ）

Q. トレンドのデザインにすると、すぐ古く見えませんか？

見た目の流行は数年で変わります。ただ、今回の13ページでも分かるとおり、デザインを変えても文章・写真・ページの構成はそのまま使い回せます。中身をしっかり作っておけば、見た目だけ着せ替えることは難しくありません。

Q. 1つのホームページで複数のトレンドを混ぜてもいいですか？

問題ありません。むしろ実務ではよくあります。ただし、混ぜるほど統一感は崩れやすくなるので、「色はこれ」「動きはここだけ」のように役割を決めて組み合わせるのがおすすめです。

Q. 自社にどれが合うか分かりません。

まずは上の13ページを、スマホで開いて触ってみてください。「お客様がこの画面を見たらどう思うか」を想像すると、合う・合わないは意外とすぐ分かります。

まとめ：見た目より先に「誰に何を伝えるか」

同じ内容のホームページを13通りに作り分けてみると、デザインは会社の印象を大きく左右する一方で、伝えている中身は変わらないことがよく分かります。トレンドは「はやっているから」ではなく、「自社のお客様に何を伝えたいか」に合わせて選ぶのが失敗しないコツです。

「自社ならどのデザインが合うか相談したい」「今のホームページを今っぽく作り直したい」という場合は、当社（Kirakuna）にお気軽にお問い合わせください。今回の13パターンを実際にお見せしながら、一緒に方向性を整理いたします。

---

※本記事のデモページは2026年11月に作成したものです。トレンドの分類はFigmaの解説記事を参考にしています。