---
content_id: 01KK6V8S23TY8PBY34C6RXN50R
visibility: public
permanent: true
created: 2026-03-08T13:47:57.379Z
title: 無料ウェブ素材集
modified: 2026-03-13T00:43:36.456Z
tags:
  - vernacular-web-translation
---

::hero

<div style="background: url(https://wp.baku89.com/wp-content/uploads/2026/03/sand.jpg); aspect-ratio: 8;"></div>
::

::note
[[vernacular-web-translation|『ヴァナキュラー・ウェブ』試訳]]の一部です。[[Olia Lialina]]による原文は[こちら](https://art.teleportacia.org/observation/vernacular/collections/).
::

アマチュア・ウェブから受け継がれたのは星空背景だけじゃない。紙、ガラス、水、木目といったテーマも後から登場した。背景画像のコレクションが次々と作られ、さまざまなトーンを演出したり、結婚式やクリスマス、ハロウィンといったイベントを祝うために使われたりした。テーマの幅は、[音楽](https://web.archive.org/web/20040908053541/http://www.geocities.com/Wellesley/9402/bgset81.html)から[Xファイル](https://web.archive.org/web/20041009162944/http://www.topazdesigns.com/~klm/sets/x-files.htm)、[ヴィクトリア朝のベリー・ベイビー](https://web.archive.org/web/20040220091933/http://www.tedi.net/berry.html)（<small>訳注：ヴィクトリア朝風の赤ちゃんにイチゴやブドウなどの果実モチーフを加えたスタイル）</small>まで実に多様で、それぞれに愛すべきところがある。

こうした初期のウェブ素材コレクションを振り返ってみると、当時あちこちのページに使われて有名になった画像がいくつか目につく。虹色の区切り線、“New!” のマーク、そして完璧なアニメーションでカルト的な人気を誇った[フィリックス・ザ・キャット](https://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A3%E3%83%AA%E3%83%83%E3%82%AF%E3%82%B9%E3%83%BB%E3%82%B6%E3%83%BB%E3%82%AD%E3%83%A3%E3%83%83%E3%83%88)だ。

![](https://wp.baku89.com/wp-content/uploads/2026/03/felixwalk.gif){.actual style="width:230px;"} ![](https://wp.baku89.com/wp-content/uploads/2026/03/felixwalk.gif){.actual style="width:230px;"}

![](https://wp.baku89.com/wp-content/uploads/2026/03/rainbow.gif)

![](https://wp.baku89.com/wp-content/uploads/2026/03/new.gif){.actual style="width: 25px;"}
![](https://wp.baku89.com/wp-content/uploads/2026/03/new.gif){.actual style="width: 25px;"}
![](https://wp.baku89.com/wp-content/uploads/2026/03/new.gif){.actual style="width: 25px;"}

これらのフリー素材集の中には、ウェブ黎明期の時代性を思い出させる要素もある。たとえば「戻る」「進む」ボタン。これは、ブラウザの標準機能を無視して、自作サイトにナビゲーションを組み込もうとした非プロ向けデザインセットの一部だ。というのも、そんな大事な操作を、半年ごとに新バージョンが出るブラウザなんかに任せておけるか！　というわけ。

![](https://wp.baku89.com/wp-content/uploads/2026/03/ag_arrow.gif){.actual}

![](https://wp.baku89.com/wp-content/uploads/2026/03/ag_back.gif){.actual}

![](https://wp.baku89.com/wp-content/uploads/2026/03/arrow3.gif){.actual}

![](https://wp.baku89.com/wp-content/uploads/2026/03/arrow4.gif){.actual.banner}

![](https://wp.baku89.com/wp-content/uploads/2026/03/arrow1.gif){.actual.banner}

![](https://wp.baku89.com/wp-content/uploads/2026/03/navigation.gif){.actual.banner}

同じことは「ブレット」と呼ばれる小さな画像、つまり標準のHTMLリスト要素を置き換えるために使われた装飾アイコンにも言える。アマチュア・ウェブの時代的特徴として、構造より表現を優先する姿勢があった。初期のウェブ制作者たちは画像を使えるという可能性に興奮し、地味なリストを派手なグラフィックで喜んで置き換えていたのだ。

::div{style="text-align: center"}

![](https://wp.baku89.com/wp-content/uploads/2026/03/b02.gif){.actual style="width: 15px;"}

![](https://wp.baku89.com/wp-content/uploads/2026/03/b03.gif){.actual style="width: 17px;"}

![](https://wp.baku89.com/wp-content/uploads/2026/03/b11.gif){.actual style="width: 15px;"}

![](https://wp.baku89.com/wp-content/uploads/2026/03/b15.gif){.actual style="width: 18px;"}

![](https://wp.baku89.com/wp-content/uploads/2026/03/b16.gif){.actual style="width: 18px;"}

::

- 非順序リスト
  - 非順序リスト
    - 非順序リスト
    - 非順序リスト
  - 非順序リスト
  - 非順序リスト
  - 非順序リスト
- 非順序リスト
- 非順序リスト

「推奨ブラウザ」バナーの数々が思い出させてくれるように、どのブラウザで見るかという選択は、当時のウェブ制作者にとって美学的にも思想的にも大きな問題だった。

![](https://wp.baku89.com/wp-content/uploads/2026/03/browser1.gif){.actual}

![](https://wp.baku89.com/wp-content/uploads/2026/03/browser2.gif){.actual}

http://sillydog.org/netscape/now.html

ロシア語圏のインターネットユーザー、正確にはキリル文字を使う書き手たちにとって大きな問題だったのが、膨大な文字コードの種類だった[^russia]。ロシアのサイトのトップページでは、適切な文字コードを選ぶ必要があった。これらの文字コード選択ボタンはデザイナーにとって格好の実験場で、多くの人が独自のカスタマイズを施して楽しんでいた。

[^russia]: 訳注：筆者のオリア・リアリナはロシア出身

1996年には、やがてロシアNo.1ウェブデザイナーになる人物が、異なる背景色や好みに合わせた20種類の文字コードボタンセットを作成した。数ヶ月のうちに無数の `.ru` ドメインに広まり、ロシアのウェブ風景に定着した。

![](https://wp.baku89.com/wp-content/uploads/2026/03/689025e32ccf36e6a263a59d.png){.actual}

けれど、これらの寿命は短かった。1998年末までに文字コードの選択は自動化され、ボタンはページから消えた。伝説的な文字コードボタンのコレクションも [archive.org/…/free/buttons/](http://web.archive.org/web/19990218071941/www.design.ru/free/buttons/) という歴史の彼方へと消えていった。

巨大なMIDIコレクションは、90年代半ばのウェブがどんな音を奏でていたかを思い出させてくれるが、それについてはMIDIの章で詳しく扱う。

フリー素材コレクションは、ヴァナキュラー・ウェブの魂だ。皆が無料画像を使って自分のページを作り、そして皆がそうした素材集づくりにも携わっていた。多対多の関係が本当に機能していた。自分のサイトを作ることとコレクションを作ることは、多くの人にとって並行したプロセスだった。初期のウェブはスキルよりも精神性が大事だった。頒布することは、創造することに劣らず重要だった。

ウェブページがモジュール構造で成り立っていることから、ウェブ画像の素材集を含まないサイトでさえ、実はそれ自体が素材集と言っていい。ページ上のすべての要素、すべての線や図形、ボタンや音声は独立した存在で、ブラウザから直接でなくても、ソースコードを見てファイルのURLを探せば簡単に抽出できる。

しかしユーザーが「作り手」と「受け手」に分かれてしまうと、フリー素材集は両者にとって魅力を失っていった。1997年頃にはプロのウェブサイトがアマチュアから距離を置き、モジュール設計とは正反対の方法をとり始めた。グラフィックデザインの勢力が圧倒的に台頭し始めたのだ。（あまりに急速だったため、多くのデザイナーや研究者はウェブデザインをグラフィックデザインの従属的な存在のように考えているほどだ。）Photoshopでデザインを制作し、ブラウザ向けに調整する。ページはひとつの塊として作られ、スライス機能で小さな画像に分割される。しかしこれらの素材はモジュール的とはいえない。なぜなら、それぞれが互いに組み合わさることで初めて機能するからだ。スライスの一部を抽出したり再利用したりすることは作者にとって無意味で、望まれてもいない。

典型的な例としては、1997年にArtemy Lebedevが手掛けたMobile Telecomのサイトがある。これはPhotoshopで作成されスライスされた画像そのものだ。

![](https://wp.baku89.com/wp-content/uploads/2026/03/pl1.jpg)

これはロシアで最初期にプロが手がけたコーポレートサイトの一つだ。瞬く間に話題を呼び、幾度となく模倣されることとなった。Lebedev はこのコピーの数々を展示する[クローン博物館](https://www.artlebedev.ru/everything/clones/mtelecom/)を持っている。これはとても興味深い一例で、パクった側はおそらくこれをある種のテンプレート、つまり「プロフェッショナルなサイトはこうあるべし」というガイドラインとして見ていたんだと思う。

90年代後半、多くの人が自作・発掘した素材集へのリンクを削除し始めた。ただ、削除されたのはリンクだけで、実際のコレクションはまだサーバー上に残っている場合も多い。でもそうなると見つけるのが難しい。リンクがないなら、どうやって探す？　わたしのお気に入りの[素材集](http://yuricle.design.ru/fb/)も例外じゃない。リンクがないので、ここで紹介しておくべきだろう。

とはいえ、フリー素材集は過去のものだと一般化するのは誤りだ。「私のウェブ画像素材集（my collection of web graphics）」で検索すれば、レトロなものに限らず今でもたくさんの個人の素材集が見つかる。（ただし、「私の（my）」は非常に重要なキーワードで、これを省くと商用サイトばかりヒットする点には注意。）こうした素材集は今も更新・改良されていて、2001年には復活の兆しすらあった。9.11後、「アメリカに神の加護を（God Bless America）」セクションが多くの米国ユーザーの私的・公的ライブラリに追加されたのだ。スキルを問わず、自分のホームページで愛国心を示したい人々によって。

![](https://wp.baku89.com/wp-content/uploads/2026/03/pathead.jpg){.actual}

http://snogirl.snoville.com/MemorialIndex.html
http://www.geocities.com/Heartland/Plains/4601/patriotic.html

![](https://wp.baku89.com/wp-content/uploads/2026/03/mgbarj1.jpg){.actual}

http://www.geocities.com/Pentagon/9787/maingraf.html

![](https://wp.baku89.com/wp-content/uploads/2026/03/stealTheseButtons.gif){.actual}

![](https://wp.baku89.com/wp-content/uploads/2026/03/css.gif){.actual}

「XHTML準拠」バッジは、フリーボタン素材制作者にとっての新たな市場でもある。まだ種類は少ないが、着実に増えており、新しいデザインスタイルに合うバリエーションが求められている。

素材サイトはほかにも、 http://www.gifsamlung.de/ 、 http://juanna.ch/, http://gifwelt.laureon.org/ 、 http://gif.10000.ru/ などがある。<small>（訳注:どれもリンク切れ）</small>これらは、趣味的だった素材集制作をより高いレベルへと引き上げた一例でもある。ライブラリは膨大で生き生きとしているし、フォーラムやゲストブックも活況を呈している。こうしたサイトは、アーカイブを行う人々や、既存の素材を使ってモジュール型のウェブサイトを作り続ける人々にとって貴重な情報源だ。たとえば、ロンドンを拠点にするメディア制作者のカップルが、そうしたグラフィック素材を使って[結婚式のウェブサイト](http://www.lektrogirl.com/ceremony/)を作ったように。

2004年、イギリスのデザイナー Bruce Lawson らは、CSSがウェブの美の標準であることを示す共同プロジェクト「[css zen garden](https://www.csszengarden.com/)」を始動した。彼の「[GeoCities 1996](https://csszengarden.com/?cssfile=http://www.brucelawson.co.uk/zen/sample.css)」テーマは、パブリックドメインのGIFで構成されており、本物のスピリット（real spirit）は、どんな標準規格もうまくすり抜けていくことを見事に示している。

_追記（2007年2月22日）：_ 現在、こうした素材サイトの大きな話題は「新世代のアクセスカウンター」を提示することだ。

`<リンク切れの何らかのカウンターの画像>`

こうしたカウンターは、あなた自身にも訪問者にも、子どもの年齢や出産予定日、次の結婚記念日やクリスマスまでの残り日数などを知らせてくれる。[ロシアの若い母親向けフォーラム](http://www.rodim.ru/conference/index.php?s=bc3fe10f5192945044eee8472dfe82fc&showtopic=6164)では、1つの投稿やコメントに複数のカウンターが署名として表示されているのをよく見かける。

<p align="right"><a href="/vernacular-web-translation/links"><img  class="banner" src="https://wp.baku89.com/wp-content/uploads/2026/03/vpered4.jpg" style="width:116px"></a></p>

::tail
:::note

#### 『ヴァナキュラー・ウェブ』試訳 目次

1. [[vernacular-web-translation|土着民と蛮族たち]]
2. [[vernacular-web-translation/uc|工事中]]
3. [[vernacular-web-translation/stars|星空の背景画像]]
4. [[vernacular-web-translation/collections|無料ウェブ素材集]]
5. [[vernacular-web-translation/links|リンク]]
6. [[vernacular-web-translation/midi|MIDI]]
7. [[vernacular-web-translation/frame|フレーム]]
8. [[vernacular-web-translation/tilde|チルダ]]
9. [[vernacular-web-translation/welcome|〇〇のホームページへようこそ]]
10. [[vernacular-web-translation/email|メールはこちら]]

:::
::