2015年頃に制作したホームページのデザインの特徴

2015年前後に制作されたホームページは、現在の最新サイトと比べるとデザイン面でいくつか共通した特徴があります。

当時はスマートフォンの急速な普及に伴い、ウェブデザインの潮流が大きく変化した時期でした。

本記事では、中小企業の経営者・事業責任者の方に向けて、2015年頃のホームページデザインの傾向を振り返りつつ、2025年のトレンドとの違いやリニューアル検討のポイントを解説します。

2015年当時のWebデザイン

スマートフォンの台頭とモバイル対応の必須化

まずは2015年当時のWEBデザインを取り巻く背景をご説明したいと思います。

スマートフォンの台頭とモバイル対応の必須化

2010年代前半からスマートフォン利用者が爆発的に増え、ウェブ閲覧の主流がPCからモバイルへ移行していきました。

日本でも世帯におけるスマホ普及率が2011年から5年間で29.3%から72%に達し、2015年にはGoogleが「モバイルフレンドリーか否か」を検索順位に反映するアルゴリズム更新を実施しています。

いわゆる「モバイルフレンドリーアップデート」(通称 Mobilegeddon)により、スマホ対応(レスポンシブデザインなど)は事実上すべてのサイトで必須となりました。

このため2015年頃に新規制作されたサイトの多くは、早速スマートフォン対応が取り入れられているのが特徴です。

デザイン潮流の転換期

デザイン面では、ちょうど「スキューモーフィックデザイン」から「フラットデザイン」への移行期でもありました。

スキューモーフィックとは質感や立体感をリアルに再現する従来のデザイン手法ですが、2013年のApple iOS7やWindows8などで採用されたフラットデザイン(陰影を排しフラットな色面とシンプルなアイコンを用いるスタイル)が世界的に浸透し、2015年前後には企業サイトでも主流になっています。

「より少ない装飾で洗練された印象を与える」ミニマル志向が強まり、古い装飾的なデザインは次第に姿を消していきました。

以上の背景を踏まえ、以下では2015年頃に制作されたサイトに見られる具体的なデザイン特徴を項目別にご紹介します。

その特徴が現在ではどのように変化しているかも併せて説明します。

レイアウトとレイアウト幅の特徴

レイアウトとレイアウト幅の特徴

画面幅レイアウトの変化

2000年代のウェブサイトは画面の左寄せ表示や固定幅レイアウトが一般的でした。

かつてはページ全体の横幅が700~750ピクセル程度のサイトが多く、ブラウザ画面の左側に寄せて配置されていたのです。

しかし2010年代に入りPCディスプレイが大型・高解像度化すると、サイト幅も拡大して中央配置するデザインが主流化しました。

2015年頃に新規制作されたサイトでは、横幅1100~1200px程度のワイドレイアウトや、画面サイズに合わせて伸縮するフルサイズ(リキッド)レイアウトが増えています

例えば当時の企業サイト事例でも、「画面全体を使ったダイナミックなレイアウト」がトレンド入りしていました。

これはユーザーの大型モニターやスマホ画面など様々なサイズに対応するためで、マルチデバイス化に応じてレイアウトが柔軟になったことが2015年頃の特徴です。

スクロールを前提とした構成

また、レイアウト面でもう一つの特徴は縦長のスクロール前提デザインが一般化したことです。

従来は「ファーストビュー(画面上部の表示領域)に重要情報を詰め込む」傾向が強く、ページ折り返し以降をあまり見ない想定もありました。

しかしSNS慣れしたユーザー増加やスマホ操作の定着により、「縦スクロールしながら読む」ことが当たり前になりました。

2015年前後のトレンドとして、トップページに長い一枚物のレイアウト(一ページで完結する構成)や、スクロールに応じてコンテンツが展開するパララックス効果が流行しました。

特にスタートアップ企業のウェブサイトなどで、メニューによるページ遷移ではなく1ページに情報を集約し順番に見せていく手法が注目されたのです。

このようにスクロールを前提にしてユーザーに情報を最後まで届けるレイアウトが増えた点も、当時のデザインの特徴と言えます。

ナビゲーション設計

ナビゲーション設計

2015年頃はPCサイトでは従来通り画面上部にグローバルメニューを配置する形式が多かったですが、スマートフォン対応ではハンバーガーメニュー(3本線アイコンの折りたたみメニュー)が一般化しました。

当時、スマホ利用者の急増で画面上部スペース節約の必要性が高まり、ボタン一つでメニュー開閉するドロワーメニューが広く採用されたのです。

2015年当時の海外記事では「ハンバーガーアイコンは好きではない」との議論もあり、代替デザインの模索も始まっていましたが、結局現在までスマホでは標準的UIとして定着しています。

ただ一方で古いサイトではPC版でも多段のメニューバーや大量のメニュー項目を羅列しているケースがあり、ユーザーにとって分かりにくい導線になっていることがあります。

現代ではターゲットごとにメニュー階層を整理し、必要な情報にスムーズに辿り着けるシンプルなナビゲーション設計が重視されています。

その点で、2015年当時に作られたサイトのメニュー構成を見直すと改善の余地があるかもしれません。

ビジュアルデザインの傾向(色・画像・装飾)

フラットデザインの浸透

前述の通り、2015年頃のサイトは見た目のスタイルにおいてフラットデザインが主流でした。

フラットデザインとはグラデーションや立体的なシャドウを極力使わず、平面的でシンプルな配色・図形で構成するデザイン手法です。

当時は「ミニマルで清潔感のある印象」が好まれ、不要な装飾を省いて情報やブランドメッセージを引き立てる考え方が広がりました。

例えばボタンやアイコンも立体的な光沢感を無くし、単色のフラットなものへと変化しています。

背景も白や淡色の余白を活かしたデザインが増え、「Less is more(より少ないことはより豊かなこと)」の精神が反映されたサイトが多く見られました。

ゴーストボタンの流行

ゴーストボタンの流行

フラットデザインと親和性が高い要素として、2015年前後には「ゴーストボタン」と呼ばれるスタイルのボタンが大流行しました。

ゴーストボタンとは、ボタンの背景を透明にして枠線とテキストだけで形作った極めてシンプルなボタンです。

CTA(問合せや資料請求など行動喚起のボタン)にも多用され、「2015年に作成されたCTAボタンはすべてゴーストボタンではないかと思うほど」至る所で使われたと評されるほどの人気ぶりでした。

例えばトップページの大きな写真の上に枠線だけのボタンが重ねられている、といったデザインを当時ご覧になった記憶がある方も多いでしょう。

ゴーストボタンは控えめでスタイリッシュな反面、背景に溶け込みすぎて一見ボタンと気付かれにくい弱点もあり、現在では使いすぎに注意すべき一時的トレンドだったと総括されています。

もしお使いのサイトで重要な誘導ボタンがゴーストボタンになっている場合、ユーザーにとって視認しやすいデザインかどうか今一度チェックしてみることをおすすめします。

大型画像(ヒーローヘッダー)の採用

大型画像(ヒーローヘッダー)の採用

2015年当時、多くのホームページで「ヒーローイメージ」と呼ばれるページ冒頭の大きなビジュアルが印象的に使われました。

画面いっぱいに表示される写真や動画を背景に、キャッチコピーや先述のゴーストボタンを重ねる手法です。

従来もトップに画像バナーを配置すること自体は定番でしたが、特にこの時期は一眼レフで撮影した高解像度の写真やフルHD動画をファーストビューに用いて「第一印象でインパクトを与える」演出がトレンドでした。

例えば企業のコーポレートサイトでも、全面スライドショーや背景動画でサービスの世界観を見せるデザインが増えています。

高品質な視覚コンテンツを大きく見せることはブランド訴求に効果的で、2015年前後はウェブ標準技術(HTML5動画やCSSアニメーション)の進化もあってリッチな表現が可能になった時期でもあります。

ただし、大きな画像や動画はファイル容量が重くなりがちで、表示スピードの低下に繋がるリスクもあります。

当時はその点も試行錯誤があり、「誰も待ってくれない。速度こそ現代のデザインそのもの」という考え方も広まっていました。

現在では画像圧縮や遅延読み込みなどパフォーマンス改善技術がさらに進歩していますが、もし2015年当時のままの大型画像を使い続けている場合、最新の表示速度要件を満たしているか確認することが重要です。

配色の傾向

2015年頃は配色面では落ち着いたフラットカラーが好まれました。

派手なグラデーションや複雑なテクスチャ背景は少なく、企業のテーマカラー+白やグレーを基調にシンプルにまとめたサイトが多い印象です。

例えば当時流行したマテリアルデザイン(Google提唱のデザインガイド)はフラット路線ですが、洗練された色使いとアイコンスタイルを示し、多くのサイトがそれに倣った配色を取り入れました。

結果として、2015年前後のサイトはカラーリングが保守的で「情報を邪魔しない控えめな色彩」が多いようです。

一方、2016年以降になると差別化のため鮮やかなグラデーションの再評価が起こり、現在ではグラデーションや大胆なアクセントカラーも増えています。

従って、2015年頃のサイトデザインは現行のトレンドに比べると色調がやや地味に映る場合があります。

リニューアル時には最新のブランド戦略に合った配色にアップデートすることで、一気に今風の印象に生まれ変わるでしょう。

タイポグラフィ(フォント・文字)の変化

タイポグラフィ(フォント・文字)の変化

フォント選定の変遷

日本語サイトの場合、長らく標準搭載の「MSゴシック」フォントが本文に使われてきました。

しかしMSゴシックは画面上でカクカクした印象を与えやすく、可読性やデザイン性の面で課題がありました。

2010年代に入りWindowsにもClearType対応の「メイリオ」やMacの「ヒラギノ角ゴ」など可読性の高い新ゴシック体が普及すると、2015年頃にはそうしたモダンなシステムフォントをサイトに指定するケースが増えています。

実際「メイリオやヒラギノはMSゴシックに比べて柔らかく上品な雰囲気になり読みやすい」と評価され、企業サイトでも順次切り替えが進みました。

現在お使いのサイトが昔ながらのMSゴシック表示の場合、文字の印象を見直すだけでもデザインがぐっと今風で読みやすくなります。

Webフォントの利用開始

加えて2015年前後は、Webフォント(サーバからダウンロードして表示するフォント)の技術が登場・普及し始めた時期でもあります。

欧文ではGoogle Fontsなど無料サービスが浸透、日本語では表示速度の問題から慎重でしたが、一部では見出しロゴに個性的なWebフォントを埋め込むサイトも見られました。

Webフォントを使うことで画像ではなくテキストでデザイン性の高い文字を表示できるため、SEOにも有利になる(画像に頼らずテキスト情報を検索エンジンに認識させられる)とされました。

実際、「以前は画像で作っていた見出しタイトルをWebフォントのテキストに置き換える例が増えた」と当時のブログでも紹介されています。

現在では日本語Webフォントも高速化し種類も豊富になりましたので、旧来の画像文字や限られたフォントでデザインしていたサイトは、リニューアルでWebフォントを活用する余地があります。

文字サイズ・可読性

2015年当時はPC表示を基準に文字サイズ12px前後で設計されたサイトも多く存在しました。

しかしスマホ普及に伴い、小さすぎる文字は読みづらさの原因となります。

古いサイトでは「本文文字が小さく行間も詰まりがちでスマホでは非常に読みづらい」ケースが散見されます。

近年では16px以上の大きめフォントや十分な行間・余白をとって可読性を高めることが標準になり、文字色と背景色のコントラストにも配慮するなどアクセシビリティの観点が重視されています。

2015年当時はそこまで認識が浸透しておらず、装飾やレイアウトの見た目を優先して文字が小さいサイトもありました。

リニューアルではユーザーに優しい文字組み(シニア層でも見やすいフォントサイズ・配色)に刷新することで、情報が伝わりやすくなり信頼性向上にもつながります。

大型見出し・タイポグラフィ演出

一方でデザイン的なタイポグラフィのトレンドもありました。

2015年頃は「ビッグタイポグラフィ」といって、トップページに極端に大きな見出し文字を配置するデザインが人気を博しました。

短いキャッチコピーを画面いっぱいの文字で見せることで強いメッセージ性を出す手法です。

また細い書体を使ったエレガントなテキスト演出(細字の英字フォントを背景画像に重ねる等)も流行しました。

例えば暗めの写真背景に白の極細ゴシック文字を載せるといったデザインで、洗練された雰囲気を演出できます。

当時はこのように文字そのものをデザイン要素として大胆に使うサイトも増えており、平易なフォントだけでなく場面に応じた書体選びが模索され始めた時期でした。

現在のデザインでも見出しの大きさやフォント選定は重要ですが、当時流行した極端な手法は一巡しています。

大切なのは読みやすさとデザイン性のバランスであり、古いサイトからリニューアルする際は単に流行を追うのではなく、自社のメッセージを効果的に伝えるタイポグラフィを検討しましょう。

Web技術とユーザビリティの変化

FlashからHTML5/CSS3へ

FlashからHTML5/CSS3へ

2010年代半ばはちょうどウェブ技術の世代交代期でした。

以前はリッチな動きを出すためによく使われていたAdobe Flash(フラッシュ)ですが、iPhoneがFlashをサポートしないこともあり、2010年代に急速に廃れていきます。

2015年頃には新規サイトでFlashアニメーションやFlash動画プレイヤーを採用する例はほぼ無くなり、代わりにHTML5+CSS3+JavaScriptで動きを実装するのが一般的になっていました。

例えばバナーのスライドショーやメニューの開閉アニメーションも、FlashではなくjQuery等のスクリプトで実装されるようになったのです。

これによりスマホでも表示可能になり、開発効率も上がりました。

もし現在お持ちのサイトにFlashで作られたコンテンツが残っている場合、表示されなくなっている可能性が高いため(主要ブラウザは2020年でFlashサポートを終了)、早急に代替技術で作り直す必要があります。

レスポンシブ対応とモバイル最適化

レスポンシブ対応とモバイル最適化

前述の通り2015年以降、レスポンシブWebデザイン(画面サイズに応じてレイアウトを自動調整する手法)が標準となりました。

ただし注意したいのは、「レスポンシブ対応していれば十分か?」という点です。

実は古いサイトでは、見た目上はレスポンシブでもスマホでの使い勝手まで配慮できていないケースが少なくありません。

例えば「ボタンやリンクが小さすぎて指で押しにくい」「文字詰めがきつく読みづらい」「無駄にスクロール量が多く重要情報が後回し」等の問題はないでしょうか。

これらは単にレイアウトを縮めただけで、モバイルでのユーザー体験(UX)を考慮していない設計が原因です。

2015年当時はPCサイトの付け足しとしてスマホ対応をした例も多く、スマホでの操作性検証が不十分なこともありました。

現在ではBtoBサイトでもアクセスの半数以上がスマホからという状況が一般化しています。

したがって古いレスポンシブサイトをお持ちの場合も、改めてスマホでのボタン配置やCTA導線が最適化されているか点検し、必要に応じてデザインを改良することが重要です。

ページ速度とSEO

ウェブユーザーの忍耐が年々短くなっていることから、表示スピードの速さが非常に重視されるようになっています。

実際Googleはページ表示速度やCore Web Vitals(ウェブの快適性指標)をランキング要因に組み込んでおり、遅いサイトは不利になる傾向があります。

2015年当時も「スピードはデザインそのもの」という考え方が提唱され、画像圧縮やコード最適化が話題に上りました。

ただ当時は今ほど厳しくなく、重いスライドショーや複雑なスクリプトを入れているサイトも見受けられます。もし当時のまま改修していない場合、現代の水準から見るとページ速度に課題があるかもしれません。

例えば大量のプラグイン読み込み、冗長なコード、非最適化画像などはないでしょうか。

リニューアルではそうした技術面の見直し(不要スクリプトの削除、最新フレームワークへの更新など)も行うことで、ユーザーにも検索エンジンにも評価される高速で使いやすいサイトへ生まれ変われます。

セキュリティと信頼性

セキュリティと信頼性

デザインからは少し逸れますが、ユーザーに安心感を与えるという意味でサイトの基本的な信頼性対策も重要なポイントです。

2015年前後はまだ常時SSL(サイトのHTTPS化)が今ほど徹底されておらず、問い合わせフォームだけSSL、その他のページはhttpのままというサイトもありました。

しかし現在は主要ブラウザで「保護されていません」の警告表示が出ることもあり、全ページ常時SSL化は必須の信頼要件です。

問い合わせデータ送信の暗号化はもちろん、サイト内に会社情報・所在地・実績紹介・プライバシーポリシーなどを明示して透明性を示すことも求められます。

古いサイトではそうした情報が不足していたり更新されていない場合があるので、デザインリニューアルの際にセキュリティと情報開示のアップデートも忘れずに行いましょう。

それによりユーザーから「古くて大丈夫かな?」と思われて離脱されるリスクを低減できます。

2015年頃のデザインと2025年のデザインの違い

最後に、2015年前後に主流だったデザイン要素と、現在(2025年)の主流との違いをまとめた比較表を示します。

当時の特徴に心当たりがある場合、現代ではどう進化しているか把握する参考にしてください。

項目2015年頃のデザイン2025年のデザイン
レイアウト幅・配置固定幅が主流。1100px前後の幅で中央揃え。
一部にフルスクリーンレイアウト採用。
画面サイズに応じた柔軟なレイアウトが標準。
大画面では余白を活かしつつ、フルHD以上にも対応。
モバイル対応レスポンシブデザイン導入が急増。別途モバイルサイトを持つケースから一本化へ移行。
※ただしPC前提設計が多く、スマホUXが不十分な例も。
モバイルファースト設計が基本。スマホ閲覧を最優先にレイアウト・ナビゲーションを構築。
全サイトがレスポンシブ対応済みで、モバイルでの使いやすさ検証が重視される。
デザインスタイルフラットデザイン全盛期。装飾や陰影のないミニマルな見た目が主流。
色調も控えめでシンプル。
フラットデザインを踏襲しつつ、マテリアルデザインやニューモーフィズムなど新潮流も登場。
必要に応じグラデーションや影効果を復活させ、ブランド個性を表現する傾向。
画像・ビジュアル大型ヒーロー画像や動画背景が流行。
高精細写真を全面に配しインパクト重視。
ヒーロー画像は引き続き多用。ただしページ速度への配慮から最適化が進み、動画利用は厳選。
画像はレスポンシブ対応(解像度別画像の切替え等)で高速表示。
ボタン・UI要素ゴーストボタン流行。枠線のみのCTAボタンが各所に。
ハンバーガーメニュー(ドロワー)をスマホ版で導入。
視認性重視のボタン設計。主要CTAは背景色付きで目立たせ、ゴーストボタンは控えめに使用。
ハンバーガーアイコン+「MENU」表記など工夫し、ユーザビリティ向上。
フォント・文字システム標準のメイリオ・ヒラギノを指定する例が増加。
一部で英語見出しにWebフォント活用開始。
多様なWebフォント活用が一般化。ブランドに合った書体を選定し全ページ適用も可能。
本文文字は16px前後が標準で、読みやすさ重視のタイポグラフィ
コンテンツ構成会社概要やサービス紹介中心。ブログ等オウンドメディア併設は一部。
トップページは会社案内的要素+新着情報の羅列が多い。
コンテンツマーケティング重視。業界知識の発信や事例紹介などユーザーの関心に応える情報を充実。
トップページも訪問者の目的別に導線を設計し、単なる会社案内に留めない。
更新性・運用CMS(WordPress等)導入も進むが、まだ静的運用の企業も。
更新頻度が低く、数年間内容が据え置きのサイトも散見。
CMS標準化で頻繁な更新を前提に運用。ニュースやブログ更新でSEO対策。
セキュリティ対策のためCMSやプラグインの定期アップデートも不可欠。

※上記は一般的な傾向であり、業種やサイト目的により例外もあります。

この比較から、自社サイトが2015年前後の設計思想のまま止まっている部分がないかチェックしてみましょう。

当時は最新でも、今では時代遅れとなっている要素を洗い出すことが重要です。

古いデザインを放置するリスクとリニューアルのメリット

古いデザインを放置するリスクとリニューアルのメリット

ユーザーの信頼・印象への影響

ホームページは企業の顔です。

デザインが古いままだと、訪れたユーザーに「この会社は最近活動していないのだろうか」「ITリテラシーが低いのかも」という印象を与えかねません。

特に若い世代や新規の取引先ほどウェブ上の印象を重視します。

例えば低解像度の画像を使い続けていると、それだけでサイト全体が「古臭い」印象を与えてしまうことも指摘されています。

逆に最新のデザインに刷新し情報もアップデートすれば、「この企業はきちんとメンテナンスされ信頼できる」と好印象を持ってもらえるでしょう。

コンバージョンへの影響

古いサイト構成のままだと、せっかくアクセスがあっても問い合わせ等の成果につながりにくい場合があります。

前述のようにユーザー視点の導線設計が不十分であったり、CTAボタンが目立たない・スマホで押しにくいといった問題はコンバージョン率低下の原因です。

リニューアルによりユーザーが欲しい情報にたどり着きやすく、問い合わせしやすい構造に改善すれば、サイト自体が営業マンのように働いてくれる可能性があります。

SEO・アクセス面での機会損失

モバイル対応や表示速度、コンテンツの質など、検索エンジン対策の重要項目はこの10年で大きく変化しました。

例えばHTTPS未対応やレスポンシブ非対応はSEO上明確なマイナスポイントです。

また2015年当時はキーワード詰め込みのSEOが横行していましたが、現在はユーザー意図に沿った有益なコンテンツ提供が重視されています。

古いサイトをそのままにしておくことは、検索流入のチャンスを逃すことにもつながります。

リニューアルで最新のSEO視点を取り入れ、潜在顧客に見つけてもらいやすいサイトに改善するメリットは大きいでしょう。

運用効率・セキュリティ

技術的にも、古いコードやシステムを使い続けるのは保守管理が難しくリスクがあります。

例えば2015年当時のCMSを放置していると脆弱性が蓄積し、サイト改ざん等の被害に遭うかもしれません。

デザイン刷新のタイミングでシステムも最新化すれば、セキュリティ強化と運用効率アップ(更新の簡易化)が期待できます。

またスマホ対応のテストや解析ツールの導入など、現代的な運用を取り入れることで、サイト改善のPDCAを回しやすくなります。

おわりに

おわりに

2015年頃に制作したホームページの特徴を振り返りながら、現在とのギャップや改善ポイントを述べてきました。

当時最先端だったデザインも、約10年の間にユーザー行動や技術トレンドの変化によってアップデートが必要な箇所が出てきています。

単に見た目を新しくするだけでなく、「誰に・何を・どう伝えるか」を練り直すことで、ホームページは強力な営業・広報ツールへと生まれ変わります。

中小企業の経営者・ご担当者様におかれましては、自社サイトが本記事で述べた古い特徴に当てはまっていたとしても悲観する必要はありません。

それは改善の余地があるというチャンスでもあります。

実際、デザインリニューアルをきっかけに問い合わせ数が増加したり、採用応募が増えたりした例は少なくありません。

弊社では単なる表面上のデザイン刷新に留まらず、貴社の事業目的に沿った構造設計やコンテンツ改善まで含めたリニューアル提案を心がけております。

「古いから変える」ではなく「成果を出すために今変える」リニューアルで、ホームページを貴社の心強い味方に育ててみませんか。

ホームページのリニュアルをご検討の際は、ぜひお気軽にお問い合わせ・ご相談ください。

    お問い合わせ

    ホームページの新規制作、リニューアル、保守管理などでお悩みの方は、お電話またはこちらのフォームからお気軽にお問い合わせ下さい。

    お電話でのお問い合わせ

    スマートフォンの方は下の画像をタップして下さい。

    無料問い合わせ

    フォームからのお問い合わせ

    お名前

    メールアドレス

    件名

    ホームページの新規制作についてホームページのリニューアルについて保守管理の依頼についてサーバーの変更についてその他のお問い合わせ

    お問い合わせ内容

    上記の内容にお間違いがなければ、チェックを入れて送信してください。