找我們做網站
↑
Resources · 插圖與圖示素材

DOTOWN 點陣圖素材網站:日本點點圖免費下載,可商用規約與使用教學

插圖與圖示素材發布 2022.05.04更新 2026.10.02閱讀約 7 分鐘
DOTOWN 點陣圖素材網站:日本點點圖免費下載,可商用規約與使用教學

重點整理
DOTOWN(ドッタウン)是日本「前田デザイン室」經營的點陣圖素材網站,素材以 PNG 免費下載,個人、公司、商業用途都能用,不用註冊也不用標示出處。不能做的事主要有三類:把素材本身轉賣或再散布(例如 LINE 貼圖、NFT)、拿去註冊商標、直接連結官網圖檔。搜尋要輸入日文,中文和英文都搜不到。

想在網站、活動海報或簡報裡放一點復古遊戲感的小圖示,自己畫像素圖又太花時間,DOTOWN 是很好用的點點圖網站。它的素材風格統一、顏色鮮明,放在一起不會互相打架。這篇會說明 DOTOWN 是什麼、怎麼找到想要的圖、怎麼下載,再把官方使用規約逐條翻成中文,最後教你放到網站上時怎麼放大才不會糊掉。

DOTOWN 是什麼?

DOTOWN 的網址是 dotown.maeda-design-room.net,2022 年 2 月上線,由「前田デザイン室」製作。前田デザイン室是前任天堂設計師前田高志發起的創作社群,網站上的點陣圖都是社群成員一起畫的,同年還拿下日本 Good Design Award(グッドデザイン賞)。

官方把這種風格稱為「粗ドット」,意思是用極低的解析度、只靠幾格色塊就把物品畫出來。例如一顆水煮蛋只用 4×4 格,一隻龍蝦用 9×9 格,所以看起來特別簡潔、有點呆萌。

  • 素材數量:2026 年 10 月查看官網的網站地圖,共列出約 1,000 多個素材頁面,最近一次新增是 2025 年 10 月。
  • 檔案格式:PNG,背景透明。我們下載的幾張尺寸不一(240×240、540×540、840×540 像素),每一格點都是 60×60 像素的方塊。
  • 費用:全部免費,不用註冊會員、不用登入。
  • 介面語言:只有日文,沒有中文或英文版。
DOTOWN 首頁:上方是搜尋框,左側是分類選單,下方有最新消息與全部素材
DOTOWN 首頁:上方是搜尋框,左側是分類選單,下方有最新消息與全部素材

首頁中間是大搜尋框,左側的「CATEGORY」是分類選單,往下捲是最新消息和「ALL ITEMS」全部素材,每頁顯示一批,最底下可以換頁。

怎麼找素材?分類、標籤與日文搜尋

方法一:從分類選單找

左側分類可以直接點,常用的幾個對照如下:

日文分類中文意思
季節・イベント季節與節慶活動
スポーツ運動
人物・キャラクター人物與角色
食べ物食物
生き物動物、昆蟲等生物
植物植物
乗り物交通工具
街街景與建築
オモロ系搞笑系
その他其他

另外還有「ゲストクリエイター」(客座創作者)、「ChargeSPOT」(行動電源租借品牌聯名)等特別分類。

DOTOWN「食べ物」分類頁,列出便當、水煮蛋、龍蝦、包子、飯糰、蘋果糖等點陣圖
DOTOWN「食べ物」分類頁,列出便當、水煮蛋、龍蝦、包子、飯糰、蘋果糖等點陣圖

方法二:用標籤縮小範圍

分類選單下方還有「TAG」標籤區,例如「お寿司」(壽司)、「クリスマス」(聖誕節)、「ハロウィン」(萬聖節)、「干支」(生肖),點下去就只看那個主題的素材,比分類更精準。

方法三:用日文關鍵字搜尋

搜尋框只認日文。我們實際測試:輸入「ラーメン」找到 2 個拉麵素材、「寿司」找到 10 個、「猫」找到 8 個;但輸入繁體的「拉麵」「壽司」「貓」,或英文「ramen」,結果都是 0 個。

如果不會日文,可以先用 Google 翻譯把中文翻成日文再貼進去。要注意日文漢字有時和繁體字長得不一樣,例如「壽司」日文寫「寿司」、「貓」日文寫「猫」,直接複製翻譯結果最保險。

在 DOTOWN 搜尋日文「ラーメン」的結果,出現兩個拉麵點陣圖
在 DOTOWN 搜尋日文「ラーメン」的結果,出現兩個拉麵點陣圖

怎麼下載?三個步驟

  1. 在列表點一下想要的素材,進入素材頁。
  2. 素材頁中間是大圖預覽,上方有名稱和上架日期,下方有紅色的「DOWNLOAD」按鈕。
  3. 按下「DOWNLOAD」就會直接存成 PNG 檔,不用填資料、不用登入。
DOTOWN 素材頁:中間是伊勢龍蝦點陣圖預覽,下方是紅色 DOWNLOAD 按鈕
DOTOWN 素材頁:中間是伊勢龍蝦點陣圖預覽,下方是紅色 DOWNLOAD 按鈕

素材頁最下方還有「関連イラスト」(相關插圖),可以順便找同系列的圖,讓整組圖示風格一致。

DOTOWN 使用規約:可以商用嗎?有什麼禁止事項?

以下依官方「ご利用について」頁面整理(2026 年 10 月查閱)。官方註明規約可能不經通知修改,正式使用前建議再看一次原文。

DOTOWN 使用規約重點整理示意圖:左邊是可以的用法,右邊是禁止事項
DOTOWN 使用規約重點整理示意圖:左邊是可以的用法,右邊是禁止事項

可以的用法

  • 個人、公司、商業、非商業都免費:官方舉例可用在商業網站、廣告、遊戲、圖示等各種媒體。
  • 不用標示出處,也不用事先聯絡:官方說若願意標註,成員們會很開心,但不是必要。
  • 可以加工:改顏色、翻轉、放大縮小等都沒問題。
  • 可以當商品或 Logo 的一部分:例如周邊商品上的小裝飾,或 Logo 裡的一個元素。
  • 數量:規約沒有寫下載數量上限,也不需要註冊會員。

禁止事項

  • 把素材本身當成商品再散布或販售:包含 LINE 創作者貼圖、周邊商品、範本,或讓人付費才能拿到素材的形式。網站上把 DOTOWN 素材整理成素材包讓人下載也不行,免費或收費都一樣。
  • 以 DOTOWN 素材為主角的販售商品:素材當配角可以,整個商品主打 DOTOWN 的圖就不行。
  • 申請商標註冊:Logo 裡可以用,但不能拿去註冊商標。
  • 做成 NFT 或上架 NFT 市集。
  • 用在 Scratch:官方說明因為 Scratch 作品的素材可以被別人直接取用,等於繞過官網散布,所以不開放。
  • 當作圖示或字型產生器的素材。
  • 違反公序良俗,或攻擊、歧視、色情、過激的用法,以及和違法行為、反社會勢力有關的用途。
  • 直接連結官網圖檔:會增加官方主機負擔,請下載後放在自己的網站主機。

另外,素材的著作權仍屬於前田デザイン室,就算你加工過,著作權也不會轉移給你。

放到網站上:點陣圖怎麼放大才不會糊?

點陣圖最怕被「平滑放大」。瀏覽器預設在放大圖片時會補出中間色,像素圖的邊緣就會變得霧霧的;縮圖被 WordPress 重新產生小尺寸版本後再放大,也會有同樣問題。

同一張點陣圖放大比較示意圖:左邊用瀏覽器預設平滑放大而模糊,右邊加上 image-rendering: pixelated 後邊緣銳利
同一張點陣圖放大比較示意圖:左邊用瀏覽器預設平滑放大而模糊,右邊加上 image-rendering: pixelated 後邊緣銳利

解決方法是在 CSS 加上 image-rendering: pixelated,告訴瀏覽器放大時直接複製像素、不要補色:

.pixel-art img {
  image-rendering: pixelated;
}

在 WordPress 的做法:

  1. 把 PNG 上傳到媒體庫,插入「圖片」區塊時尺寸選「完整尺寸」,避免用到 WordPress 自動縮過的版本。
  2. 在區塊設定的「進階」欄位加上 CSS class,例如 pixel-art。
  3. 把上面那段 CSS 貼到佈景主題的附加 CSS(傳統主題在「外觀 → 自訂」,區塊主題在網站編輯器的「樣式」裡)。

如果是用 Photoshop 放大,官方也提醒:到「偏好設定 → 一般」把「影像內插補點」改成「最接近像素(保留硬邊)」再放大,就不會糊掉。

常見問題

DOTOWN 的素材可以商用嗎?

可以。官方規約寫明個人、公司、商業、非商業用途都能免費使用,也不需要標示出處;只是不能把素材本身拿去轉賣、做成貼圖或 NFT,也不能做成以 DOTOWN 素材為主的販售商品。

可以把 DOTOWN 的圖做成 LINE 貼圖或周邊商品來賣嗎?

不行。規約禁止把素材本身當成 LINE 創作者貼圖、範本或商品販售;周邊商品上只能當作其中一部分的設計元素,不能讓 DOTOWN 的圖當主角。

為什麼我在 DOTOWN 搜尋中文找不到東西?

因為搜尋只認日文。請改用日文關鍵字,例如「猫」(貓)、「寿司」(壽司)、「ラーメン」(拉麵),或直接從左側分類和標籤瀏覽。

結語

DOTOWN 的優點是風格統一、免註冊、可商用又不用標示出處,很適合用在活動頁面、社群貼文、簡報或網站的小裝飾。使用前只要記住三件事:搜尋用日文、素材本身不能轉賣或再散布、下載後放自己主機不要直接連結。放上網站時再加一行 image-rendering: pixelated,就能保留點陣圖最有味道的方正邊緣。如果想讓文字也有一樣的像素感,可以搭配免費開源的俐方體 11 號點陣字型一起使用。

鵠學苑・鵠崙設計鵠崙設計 2014 年成立,專注 WordPress 網站開發,400 多個網站在我們自己的主機上運作。鵠學苑的文章由團隊實際操作後整理,工具與外掛的功能以撰文當時為準。
鵠崙設計

不想自己摸索,
就交給我們做。

外掛設定、主機效能、改版搬家,這裡寫的每一件事,都是我們每天在客戶網站上做的工作。留下需求,1 個工作天內回覆。