3D Animasyonlu Kurumsal Web Sitesi: Teknoloji, Hız, SEO ve Maliyet Rehberi (2026)

3D animasyonlu web sitesi, ziyaretçinin kaydırma veya fare hareketiyle etkileşime girdiği, derinlik ve hareket hissi veren bir arayüz katmanıdır. Doğru kurgulandığında karmaşık bir ürünü tek ekranda anlatır; yanlış kurgulandığında siteyi yavaşlatır, mobilde kasar ve Google’da geriye düşürür. Bu rehber ikinci sonucu nasıl önlediğimizi anlatıyor.

3D animasyonlu web sitesi nedir, ne değildir

3D web sitesi, tarayıcının grafik işlemcisini kullanarak gerçek zamanlı sahne çizen bir sitedir. Bir ürünü 360 derece döndürebilir, bir makinenin kesitini açabilir, bir malzemenin dokusunu yakınlaştırabilirsiniz. Bunun için kullanıcı hiçbir şey indirmez; her şey tarayıcıda çalışır.

Şunlar 3D değildir ve karıştırılır: kaydırmayla oynayan bir video, arka planda dönen bir GIF, sayfa geçişlerinde kayan bloklar. Bunların hepsi yararlı olabilir ama gerçek 3D’nin yaptığı şeyi yapmaz — kullanıcıya kontrol vermez. Aradaki fark, ziyaretçinin ürünü izlemesiyle ürünle oynaması arasındaki farktır ve dönüşüm oranına etkisi buradan gelir.

Hangi markalarda işe yarar, hangilerinde yaramaz

Dürüst olalım: 3D her siteye gerekmez. Bir muhasebe ofisinin ya da yerel bir hizmet işletmesinin sitesine 3D koymak, bütçeyi ziyaretçinin umursamadığı bir yere harcamaktır.

3D’nin gerçekten kazandırdığı yerler şunlar:

• Teknik ürün üreticileri. Eşanjör, makine, metal mobilya, endüstriyel ekipman. Ürünün içi dışından daha önemliyse, 3D o içi gösterir.
• Özelleştirilebilir ürün satanlar. Renk, ölçü, kumaş, logo seçimi varsa; müşteri kendi ürününü ekranda görmek ister.
• İhracat yapan markalar. Dil bariyeri olan bir alıcıya ürünü anlatmanın en hızlı yolu, onu göstermektir. 3D sahne çeviri gerektirmez.
• Mimarlık, mühendislik, inşaat. Mekân ve yapı zaten üç boyutlu; iki boyutlu anlatmak bilgi kaybıdır.
• Premium konumlanan markalar. Rakiplerin hepsi aynı hazır temayı kullanıyorsa, ayrışmanın en görünür yolu budur.

Hangi teknolojiyle yapılır?

Dört farklı yaklaşım var ve ihtiyaca göre seçilir. Bir ajans size tek bir yöntemi her projede uyguluyorsa, muhtemelen ihtiyacınıza değil alışkanlığına göre karar veriyordur.

1. WebGL / Three.js — gerçek 3D

Tarayıcıda gerçek zamanlı 3D sahne. Ürün döndürme, konfigüratör, kesit gösterimi, malzeme değiştirme gibi etkileşim gerektiren her şey bunun işidir. En güçlü seçenek, en pahalı seçenek ve performans açısından en dikkat isteyen seçenek.

2. CSS 3D dönüşümleri

Perspektif, döndürme ve derinlik hissini saf CSS ile verir. GPU hızlandırmalı, çok hafif, her cihazda çalışır. Kart çevirme, katmanlı paralaks, hafif derinlik efektleri için WebGL’e gerek yoktur — ve olmamalıdır.

3. Lottie / SVG animasyon

Vektör tabanlı, kilobaytlarla ölçülen dosyalar. Süreç anlatımı, ikon animasyonu, veri görselleştirme için idealdir. Ölçeklendiğinde bozulmaz, metni DOM’da kalır — yani arama motoru okur.

4. Kaydırmaya bağlı video kareleri

Ürünün 360 derece çekimi kare kare alınır, kaydırma ile oynatılır. Gerçek 3D kadar esnek değildir ama modelleme maliyeti olmadan benzer etkiyi verir. Fiziksel ürünü olan ama 3D modeli olmayan markalar için pratik bir ara yol.

Asıl mesele: hız

3D sitelerin kötü şöhreti buradan gelir. Bir WebGL sahnesi yanlış kurulduğunda mobilde 6-7 saniyelik açılış süreleri görürsünüz ve ziyaretçi siteyi görmeden gider. Bizim uyguladığımız performans disiplini şu:

• Sahne asla ilk yükte başlamaz. Önce sayfanın metni ve düzeni gelir, 3D katman sonradan devreye girer. Ziyaretçi ilk ekranı beklemez.
• Görüş alanına girmeden çalışmaz. Sayfanın altındaki bir sahne, kullanıcı oraya gelene kadar tek bir kare çizmez.
• Poster kare zorunludur. 3D yüklenene kadar yerinde statik bir görsel durur; böylece düzen kaymaz ve LCP metriği 3D’yi beklemez.
• Model ağırlığı bütçelenir. Poligon sayısı düşürülür, dokular sıkıştırılır, model formatı web için optimize edilir. “Tasarımcıdan geldiği gibi” model web’e konmaz.
• Zayıf cihazda kapanır. Cihazın gücü yetmiyorsa sahne hiç başlatılmaz, statik görsel kalır. Kötü çalışan 3D, hiç olmayan 3D’den kötüdür.
• Hareket tercihine saygı. İşletim sisteminde “hareketi azalt” seçili kullanıcılara animasyon oynatılmaz.

Hız neden bu kadar önemli? Çünkü sayfa hızı hem kullanıcı davranışını hem de SEO performansını doğrudan etkiler. Güzel görünen ama yavaş açılan bir site, iki kere kaybettirir.

SEO’dan ödün vermeden 3D

Burada çoğu ajansın atladığı kritik bir gerçek var: canvas içine çizilen hiçbir şey arama motoru tarafından okunmaz. 3D sahnenizde ne kadar bilgi olursa olsun, Google onu göremez.

Bu yüzden kurduğumuz her 3D sitede şu kural geçerli: sayfanın anlamını taşıyan her metin normal HTML olarak DOM’da bulunur. 3D katman bunun üzerine bir sunum katmanıdır, içeriğin kendisi değil. Pratikte:

• Başlıklar, ürün açıklamaları, teknik tablolar, ölçüler — hepsi gerçek HTML.
• 3D sahnedeki her etkileşimli parçanın metin karşılığı sayfada da vardır.
• Sayfa JavaScript kapalıyken bile okunabilir ve anlamlı kalır.
• Ürün ve kurumsal şema işaretlemesi elle yazılır; sahne değil sayfa işaretlenir.

Bu yaklaşımın bir yan faydası daha var: yapay zekâ arama motorları da canvas okuyamaz. ChatGPT, Gemini veya Perplexity sitenizi kaynak gösterecekse, okuyabildiği metin üzerinden gösterir. 3D’yi doğru katmanlamak aynı anda hem Google hem AI görünürlüğünü korur.

Erişilebilirlik: atlanmaması gereken kısım

3D arayüzler klavyeyle kullanılamadığında, ekran okuyucu kullanan ziyaretçi için site boş bir kutuya dönüşür. Konfigüratör gibi işlevsel bir 3D bileşende her seçeneğin klavyeyle erişilebilir bir karşılığı olmalıdır. Biz konfigüratörlerde 3D sahnenin yanında her zaman standart form kontrolleri bırakıyoruz — hem erişilebilirlik hem de mobil kullanılabilirlik için.

Gerçek işler: nerede uyguladık

Bu rehberdeki yaklaşımların hepsi teoriden değil, teslim ettiğimiz projelerden çıktı.

Vefa Heat — eşanjör ve denge kabı üreticisi. Teknik bir ürünü anlatmanın zorluğu, müşterinin ürünün içinde ne olduğunu göremiyor olmasıdır. 3D animasyonlu, ürün odaklı kurumsal site kurduk. Site yeni sürümüyle yayına alındıktan sonraki ilk hafta içinde Google’daki günlük gösterim sayısı yaklaşık dört katına çıktı; “denge kabı ölçüleri”, “denge kabı seçimi” ve “denge kabı seçim tablosu” aramalarında 1. sıradayız.

Fendra Marine — yat ve tekne usturmaça kılıfı markası, Amerika pazarına açılıyor. Ürün tamamen özelleştirilebilir: renk, ölçü, kumaş, tekne adı, logo. Burada 3D bir gösteri değil, satışın kendisiydi. Kullanıcının kendi ürününü ekranda tasarladığı canlı bir konfigüratör kurduk.

Çarıkçıoğlu — çelik mobilya üreticisi. Ürün detay ekranlarında RAL renk seçici ile ziyaretçi, dolabı kendi seçtiği renkte görüyor. Teknik ürünlerde renk seçimi satın alma kararının en yavaş adımıdır; görselleştirmek o adımı kısaltır.

Diğer çalışmalarımızı çalışmalarımız sayfasında görebilirsiniz.

Süreç: bir 3D site nasıl kurulur

1. Kapsam ve amaç. 3D neyi çözecek? “Havalı görünsün” bir amaç değildir. Ürünü anlatmak, konfigürasyonu göstermek, süreci açıklamak — bunlar amaçtır.
2. İçerik ve mimari. Sayfa yapısı, hedef aramalar ve metinler önce çıkar. 3D en son eklenir, çünkü içeriğin üzerine oturur.
3. Tasarım yönü. Statik tasarım onaylanmadan animasyona geçilmez. Hareketi tartışmak, duran hâli belirsizken imkânsızdır.
4. Model hazırlığı. 3D model üretilir veya müşteriden gelen model web için optimize edilir. Bu adım genelde hafife alınır ve projeleri burada tıkanır.
5. Geliştirme. Özel WordPress teması, hazır tema ve page builder kullanmadan. Her bölüm ayrı şablon parçası olarak yazılır.
6. Performans turu. Mobil ve masaüstünde ölçüm, model ve doku optimizasyonu, gerekirse sahnenin sadeleştirilmesi.
7. Ölçüm kurulumu. GA4, Search Console ve dönüşüm takibi kurulmadan site teslim edilmez. Ölçemediğiniz bir siteyi iyileştiremezsiniz.
8. Yayın ve izleme. Yayın sonrası ilk 30 gün indeksleme, sıralama ve hız takibi.

Maliyet ve süre neye göre değişir?

Net bir liste fiyatı vermek dürüst olmaz, çünkü iki 3D proje arasındaki fark on kat olabilir. Maliyeti belirleyen kalemler şunlar:

• 3D modelin durumu. Elinizde üretim için hazırlanmış bir CAD modeli varsa süreç kısalır. Sıfırdan modelleme gerekiyorsa en büyük kalem budur.
• Etkileşim derinliği. Dönen tek bir ürün ile çok seçenekli canlı konfigüratör arasında ciddi fark vardır.
• Sayfa ve dil sayısı. İhracat yapan markalarda çok dilli kurulum kapsamı büyütür.
• E-ticaret veya özel yazılım ihtiyacı. Sepet, ödeme, teklif akışı, ERP entegrasyonu.
• İçerik üretimi. Metin, fotoğraf ve teknik verilerin hazır olup olmaması.

Biz kapsamı birlikte çıkarıp tek kalemde şeffaf bir teklif veriyoruz. Aylık yönetim tarafındaki paketlerimizi paketler sayfasında açıkça yayımlıyoruz.

Sık yapılan beş hata

1. 3D’yi ilk ekranın tamamına koymak. Ziyaretçi ne sattığınızı anlamadan önce bir animasyon izlemek zorunda kalır. Mesaj her zaman animasyondan önce gelmelidir.
2. Mobili sonraya bırakmak. Türkiye’de trafiğin ağırlığı mobilde. Masaüstünde akıcı çalışan sahne, orta segment bir telefonda çalışmıyorsa proje başarısızdır.
3. Metni sahnenin içine gömmek. Arama motorunun da yapay zekânın da okuyamadığı içerik, yok sayılır.
4. Page builder ile 3D denemek. Hazır eklenti katmanları üstüne WebGL koymak, kontrol edilemeyen bir yük yaratır. Özel tema bu yüzden tercih değil zorunluluktur.
5. Ölçüm kurmadan yayına almak. 3D’nin dönüşüme katkısı ancak öncesi ve sonrası ölçülürse bilinir.

Sık sorulan sorular

3D animasyonlu web sitesi siteyi yavaşlatır mı?

Yanlış kurulursa evet. Doğru kurulduğunda 3D katman sayfanın ilk yüklenmesini engellemez: metin ve düzen önce gelir, sahne sonradan ve yalnızca görüş alanına girdiğinde başlar. Zayıf cihazlarda ise hiç başlatılmaz, yerine statik görsel gösterilir.

3D site SEO’ya zarar verir mi?

İçerik canvas içine gömülürse zarar verir, çünkü arama motorları canvas içini okuyamaz. Anlamlı metin normal HTML olarak sayfada durduğu sürece 3D katman SEO’yu olumsuz etkilemez.

Ne kadar sürede teslim edilir?

Kapsama bağlı. Belirleyici olan sayfa sayısı değil, 3D modelin hazır olup olmaması ve etkileşim derinliğidir. Hazır model ve net içerikle süreç belirgin şekilde kısalır.

Mevcut sitemin üzerine 3D eklenebilir mi?

Teknik olarak mümkün ama çoğu zaman doğru karar değildir. Hazır tema üzerine WebGL eklemek performans açısından kontrolsüz bir yük yaratır. Sitenin yaşı ve altyapısına göre birlikte değerlendiriyoruz.

3D model bende yoksa ne olur?

Modelleme sürecin bir parçası olarak planlanır. Fiziksel ürününüz varsa, tam 3D modelleme yerine kare kare çekim tabanlı bir çözüm de değerlendirilebilir; genellikle daha hızlı ve ekonomiktir.

Ürün konfigüratörü kurulabilir mi?

Evet. Renk, ölçü, kumaş, logo ve özel metin seçimlerinin canlı olarak ürüne yansıdığı konfigüratörler kuruyoruz. Seçimlerin teklif formuna veya sepete taşınması da akışın parçası olarak kurgulanır.

Başlamadan önce

3D animasyonlu bir kurumsal site, ürününüzü anlatmakta zorlandığınız bir noktayı çözüyorsa yatırıma değer. Sadece görsellik için yapılıyorsa, aynı bütçe içerik ve reklam tarafında daha hızlı geri döner. Hangi durumda olduğunuzu birlikte netleştirelim: ücretsiz bir görüşme ile sitenizin mevcut durumunu ve 3D’nin gerçekten karşılığı olup olmadığını konuşalım.

İlgili yazılar: Kurumsal Web Tasarımı: Ziyaretçiyi Müşteriye Çeviren Site · SEO Nedir? Google’da İlk Sayfaya Çıkma Rehberi · GEO: Yapay Zekâ Aramalarında Görünürlük