Yapay Zekâ ile Hareketli Grafik: Veri, İkon ve Otomasyon

Yapay zekâya "bana bir animasyon yap" dediğinizde çıkan şey genellikle hareket eden ama hiçbir şey anlatmayan bir grafik oluyor. Oysa aynı araçla, doğru girdilerle, içeriğinizi gerçekten taşıyan hareketli grafikler üretmek mümkün. Bu yazıda beş katmanı anlatıyorum: gerçek veri, hazır varlıklar, kendi görselleriniz, videodan otomatik grafik çıkarma ve sayıları sağlama bağlayan araştırma adımı.

Bu yazı, Jack Roberts'ın Claude Design FINALLY Solved Motion Graphics videosunu özetleyip genişletiyor. Beş katmanlı akış videodan; zamanlama değerleri, format seçimi ve erişilebilirlik bölümleri bu yazının eklemesi.

Hareketli grafik neden jenerik çıkıyor?

Sebep animasyon motorunda değil, girdide. "Güzel bir animasyon yap" isteği modele hiçbir kısıt vermiyor, o da varsayılanı üretiyor: soyut şekiller, genel geçer geçişler, anlamsız hareket. Aynı varsayılanların web tasarımı tarafındaki hâlini AI slop yazısında anlatmıştım.

İyi hareketli grafiğin ortak özelliği şu: hareket bir şeyi anlatıyor. Sayı büyüyor, karşılaştırma beliriyor, süreç adım adım açılıyor. Hareketin kendisi amaç olduğunda sonuç dekoratif ve unutulabilir oluyor.

Katman 1: Gerçek veriyi animasyona çevirmek

En hızlı kazanç burada. Elinizde somut sayılar varsa, onları doğrudan animasyona verebiliyorsunuz: karşılaştırmalı çubuk grafik, zaman içinde değişen değerler, pay dağılımları.

Pratikte istek şöyle bir şey oluyor: hangi kalemleri karşılaştıracağınızı, her birinin değerini, renk yaklaşımını ve varsa logoları belirtiyorsunuz. Model bunları etkileşimli, animasyonlu bir grafiğe çeviriyor.

Asıl önemli kısım sonrası: beğendiğiniz stili kilitleyin. "Bundan sonraki tüm çubuk grafiklerde bu stili kullan" dediğinizde, grafikleriniz birbirine benzemeye başlıyor ve içeriğiniz tanınır bir görsel dile kavuşuyor. Tek tek güzel grafikler üretmekle, tutarlı bir grafik diline sahip olmak arasındaki fark bu. Bu tutarlılığı her üretimde tekrarlatmanın yolunu eleştirmen döngüsü yazısında anlattım.

Katman 2: Hazır varlıklarla kaliteyi yükseltmek

Modelin en zayıf olduğu yerlerden biri ikon üretmek. İkonlar ise algılanan kaliteyi en çok yükselten öğelerden.

Çözüm, ikonu modele çizdirmek yerine hazır bir setten getirmek. İkon kütüphaneleri ve hazır animasyon arşivleri (videoda örnek olarak gösterilen Lordicon gibi, Lottie formatındaki hareketli ikonlar dahil) bu iş için var. İndirdiğiniz varlıkları bir kütüphane hâline getirip modele referans olarak veriyorsunuz.

Üç kural:

• Tek stil kullanın. Bir sunumda ya da bir video setinde ikonlar aynı aileden olsun. Stil karıştırmak, kötü ikon kullanmaktan daha çok batıyor.
• Lisansı kontrol edin. Bazıları atıf şartıyla ücretsiz, bazıları ticari kullanımda ücretli. Müşteri işinde bu pazarlık konusu değil.
• Kütüphaneyi bir kere kurun. Her projede yeniden ikon aramak, kazandığınız zamanı geri alıyor.

Katman 3: Kendi görsellerinizi üretip yerleştirmek

Hazır varlıklar tabanı yükseltiyor ama sizi özgün yapmıyor. Üçüncü katmanda arka planları, illüstrasyonları ve dokuları kendiniz üretip animasyonun içine yerleştiriyorsunuz.

Akış basit: görsel üretim aracında istediğiniz görseli oluşturuyorsunuz, beğendiğinizi seçip tasarım ortamına aktarıyorsunuz, animasyonun ilgili sahnesine yerleştiriyorsunuz. Videodaki örnekte bu üretimin maliyeti birkaç kredi, yaklaşık 12 sent olarak görünüyor (fiyat araca ve modele göre değişiyor); karşılığında sonucun stok hissi kayboluyor. Bu adımın tasarım sistemiyle nasıl birleştiğini Claude Design'ın yedi seviyesi yazısında ele aldım.

Katman 4: Videodan otomatik grafik çıkarmak

Burası içerik üretenler için asıl kazanç ve en az bilinen kısım.

Elinizde bir video varsa (kendi kaydınız ya da bir bağlantı), modelden zaman damgalı transkript çıkarmasını isteyebiliyorsunuz: her kelimenin kaçıncı saniyede söylendiğinin eşlendiği bir çıktı. Bu tek başına bir şey ifade etmiyor ama bir sonraki adımı mümkün kılıyor.

Sonraki adımda modele şunu soruyorsunuz: bu videoda hangi anlar görselleştirilmeye değer? Model konuşmayı tarayıp "burada bir karşılaştırma yapıyorsun, buraya grafik gider", "burada üç adım sayıyorsun, buraya sıralı animasyon gider" gibi öneriler çıkarıyor. Ardından o anlar için grafikleri üretip zaman damgalarıyla birlikte teslim ediyor.

İş akışı olarak sonucu şu: videoyu çekiyorsunuz, geri kalanı büyük ölçüde otomatik ilerliyor. Kurgu masasında "buraya bir şey koysam iyi olur" diye düşünmek yerine, önerilerin listesi elinizde hazır oluyor. Bu akışı sürekli kullanacaksanız bir agent skill hâline getirmek işi iyice kısaltıyor.

Katman 5: Atlanmaması gereken araştırma adımı

Çoğu kişinin atladığı ve çıktıyı çürüten adım bu. Videoda bir karşılaştırmadan bahsediyorsanız ama sayıları açıkça söylemiyorsanız, model o sayıları bir yerden bulmak zorunda. Bulamazsa uyduruyor.

Bu yüzden akışa bir araştırma adımı koyun: grafikte kullanılacak veriler gerçek bir kaynaktan çekilsin ve kaynağı belli olsun. Sayfaların ham HTML'ini değil yalnızca ilgili içeriği çeken kazıma araçları bu iş için hem ucuz hem pratik; videoda bu adım için Firecrawl kullanılıyor.

Buradan çıkan kural: kaynağı gösterilemeyen hiçbir sayı grafiğe girmemeli. Güzel görünen yanlış bir grafik, çirkin bir doğru grafikten çok daha pahalıya mal oluyor.

Süre, ritim ve yumuşatma

Hareketli grafiğin amatör durmasının en yaygın sebebi zamanlama. Model bu değerleri sormaz, siz vermezseniz varsayılanı kullanır. Başlangıç için makul aralıklar:

• Giriş animasyonları: 200-400 ms. Daha kısası fark edilmiyor, daha uzunu bekletiyor.
• Sahne geçişleri: 400-600 ms.
• Sayı sayma animasyonları: 800-1200 ms. Sayının okunacak kadar yavaş, sıkmayacak kadar hızlı olması gerekiyor.
• Yumuşatma: giriş için hızlı başlayıp yavaşlayan bir eğri, çıkış için tersi. Doğrusal hareket her zaman mekanik duruyor.
• Gecikmeli sıralama: aynı anda beliren beş öğe yerine, aralarında 60-80 ms gecikmeyle gelen beş öğe.

Son madde en ucuz kaliteyi veren şey. Öğeleri topluca göstermek yerine sıralı getirmek, aynı tasarımı bambaşka hissettiriyor.

Bir de negatif kural: bir sahnede aynı anda ikiden fazla şey hareket etmesin. Her şey hareket ettiğinde göz hiçbir yere odaklanamıyor ve grafiğin anlatmak istediği şey kayboluyor.

Formatı teslim yerine göre seçin

Aynı grafiği her yere aynı biçimde koyamıyorsunuz. Üretime başlamadan önce nereye gideceğini belirleyin:

• Web sayfası içi: HTML tabanlı çıktı en iyisi: ölçeklenebiliyor, dosya boyutu küçük, metni seçilebilir kalıyor. Hafif hareketli ikonlar için Lottie formatı uygun.
• Sosyal video: video dosyası olarak dışa aktarın. Dikey içerik için 9:16, akış gönderileri için 1:1 ya da 4:5.
• Sunum: kısa döngüler hâlinde, sesli anlatım olmadan çalışabilecek şekilde.

Süre tarafında da dikkatli olun: sosyal medyada uzun tek bir grafik sahnesi izleyiciyi kolayca kaybettiriyor. Anlatmak istediğiniz şey uzunsa, tek uzun sahne yerine birkaç kısa sahneye bölün.

Hareket duyarlılığı ve erişilebilirlik

Bu, hareketli grafik üretirken sık atlanan bir konu. Bazı kullanıcılar için hareket rahatsız edici: baş dönmesi ve bulantıya kadar giden gerçek bir etki.

Web tarafında bunun standart bir çözümü var: işletim sisteminde "hareketi azalt" ayarını açmış kullanıcılar için animasyonu kısıtlamak (CSS'teki prefers-reduced-motion sorgusu). Ürettiğiniz HTML çıktısında bunu istemek yeterli; animasyonları tamamen kaldırmak zorunda değilsiniz, süreleri kısaltmak ve büyük yer değiştirmeleri kaldırmak çoğu zaman yetiyor.

İki kural daha:

• Otomatik oynatan sesi olmasın. Ses gerekiyorsa kullanıcı başlatsın.
• Saniyede üçten fazla yanıp sönme olmasın. Bu bir estetik tercih değil; WCAG erişilebilirlik yönergelerinde nöbet riskine karşı tanımlanmış bir eşik.

Videoya gömülen grafiklerde bu kontroller elinizde olmuyor; o yüzden hızlı yanıp sönme ve yüksek kontrastlı titreşimden en baştan kaçının.

Nerede durmalı?

Bu zincirin tamamını her içerik için kurmak gerekmiyor. Kaba bir ayrım:

• Tek seferlik bir görsel için sadece katman 1 yeterli.
• Düzenli içerik üretiyorsanız katman 2'yi bir kere kurun; her seferinde geri döner.
• Katman 4-5'i ancak haftada birden fazla video üretiyorsanız kurun. Altındaki hacim yoksa otomasyonun bakımı, kazandırdığı zamandan fazlasını alıyor.

Bir de şu: animasyonu izleyiciyi tutmak için değil, anlatımı desteklemek için kullanın. Sürekli hareket eden bir ekran, hiç hareket etmeyen bir ekran kadar çabuk sıkıyor.

Özetle

Hareketli grafikte farkı yaratan şey animasyon yeteneği değil, animasyona ne verdiğiniz. Gerçek veri, tutarlı bir varlık kütüphanesi, kendi görselleriniz ve doğrulanmış sayılar: bu dördü yerindeyse çıkan iş hem hızlı üretiliyor hem de yapay zekâ ürünü gibi durmuyor.

Sık Sorulan Sorular

Animasyon için ayrı bir program öğrenmem gerekir mi?

Bu iş akışı için hayır. Çıktılar HTML tabanlı olduğu için tarayıcıda çalışıyor, kayıt alıp videoya koyabiliyorsunuz. Profesyonel kurgu programlarına ancak kare kare kontrol gerektiğinde ihtiyaç duyuyorsunuz.

Ürettiğim animasyonları ticari işte kullanabilir miyim?

Kendi ürettiğiniz kısımlar için sorun yok. Dikkat etmeniz gereken, işin içine kattığınız hazır varlıklar: ikon setleri, hazır animasyonlar ve yazı tipleri kendi lisanslarıyla geliyor.

Zaman damgalı transkript ne işe yarıyor?

İki şeye: hangi anda ne söylediğinizi bilerek grafiği doğru yere koymaya, ve altyazı üretmeye. Aynı çıktı ikisini birden besliyor.

Veri grafiklerinde en sık yapılan hata ne?

Doğrulanmamış sayı kullanmak. İkincisi de fazla veri göstermek: bir grafikte tek bir fikir olsun; karşılaştırma yapıyorsanız iki ya da üç kalem yeter.

Kaynak

• Jack Roberts, Claude Design FINALLY Solved Motion Graphics (YouTube, Ağustos 2026). Veriyi animasyona çevirme, hazır ikon ve Lottie varlıkları, görsel üretimi, videodan zaman damgalı transkriptle grafik önerisi ve Firecrawl ile araştırma adımı bu videoya dayanıyor; zamanlama, format ve erişilebilirlik önerileri bu yazının eklemesi.