近年のWebサイトの進化はめざましいものです。
Webサイトにアクセスすると自動的に動画が再生されたり、ページをスクロールするたびに文字が動き背景が変わったりと、一昔前では考えられないほどの演出ができるようになりました。
企業によっては自社サイトに力を入れているところもあり、そのような企業のサイトを見るとWeb制作技術の進歩に驚かされます。
また、かつてインターネット上で投稿するといえば小説やイラストくらいでしたが、現在はYouTubeなどで動画も簡単に投稿可能になり、誰もがさまざまな手段で自分をより表現できるようになりました。
10年前に見ていたようなシンプルな作りのWebサイトは、今ではほとんど見かけません。
もう20年以上インターネットを使っている身としては、昔から比べるといろいろ変わったなあとしみじみ感じます。
思い起こせば、インターネットは学生の頃から身近なものでした。
中学生の時はレポート作成のためにInternet Exprorerで情報を検索し、高校生になってからは、ホームページビルダーで趣味のWebサイトを作ってWebリングやサーチサイト（注1）に登録して仲間を見つけたものでした。
あの頃が本当に懐かしい……。
そんな昨年のある日、「金鳥」などの蚊取り線香で有名な大日本除虫菊株式会社の特設サイト「KINCHO 4G デジタルお札」にアクセスしたところ、その独特なWebサイトに思わず二度見してしまいました。
何か月か前ですが、ネットニュースでも話題になったようです。
左のカラムにメニューが表示されている2カラムのレイアウト（しかも境界線がはっきり見える）。
ページ内に点在する、上下左右に動いたり点滅したりする文字。
心なしか荒いフォント。
もう、
何といっていいか、
懐かしすぎる。
懐かしさのあまり、思わず涙が出ました。
このサイトを懐かしいと思うかどうかで、ある程度年代がわかってしまう気がします。
ここにアクセスカウンター（注2）とキリ番（注3）があったら個人的には完璧でした……。
今回は、このWebサイトのどこがレトロなのかというポイントと、一部箇所の再現方法を簡単に紹介します。
（注1）特定の趣味などのWebサイトが登録されているリンクサイトや検索サイト。
（注2）Webサイトの訪問者数を表示するプログラム。主にCGIなどを利用して作られている。主にメニューの上部や下部などに設置されていた。
（注3）「きりの良い番号」の略で、100や200、777などの数字を指す。Webサイトを訪問した際にアクセスカウンターで「キリ番」が表示されている状態を「キリ番を踏む」といい、キリ番を踏んだ人はWebサイトの運営者に好きなイラストなどをリクエストできるという仕組みが個人サイトで流行していた。
1．リンク
左カラムほか、ページのところどころに設定されている青色のリンクが、一昔前のWebサイトを彷彿させます。
今でも「（未クリックの）リンクの色は青」というイメージが強い方は多いのではないでしょうか。
最近のWebサイトはこの限りではありませんが、一昔前まではたいていのサイトのリンクはこの色（青色）だったように思います。
このリンクは、HTMLのaタグとhref属性を使って書くことができます。
リンクはデフォルトでは青色のため、特にCSSで色を指定することなく再現できます。
HTML
<a href="リンク先のファイル名またはURL">製品ページ</a>出力結果
2．ボタン
左カラム最下部には、虹色に光るボタンと灰色の無機質なボタンがあります。
このボタンの光る具合と灰色の配色が、「昔のWebサイトはこんな感じだったなあ」とレトロな印象を与えてくれます。
ボタンの作成には、先述のリンクと同じくaタグとhref属性を使用します。
「KINCHO 4G デジタルお札」特設サイトでは、虹色のボタンはアニメーションgif、灰色のボタンはgif画像を使用していますが、CSSで似たようなデザインにすることは可能です。
まずHTMLでは、「class=”btn”」でボタンのクラスを追加しています。
CSSでは、以下のプロパティを使用して装飾しています。
- widthプロパティ…ボタンの幅を指定
- paddingプロパティ…ボタンの内側の余白を指定
- text-alignプロパティ…揃え方（ここでは中央揃え）を指定
- 各borderプロパティ…上下左右の境界線について指定
- backgroundプロパティ…ボタンの背景色を指定
HTML
<a href="リンク" class="btn">製品ページ</a>CSS
a.btn {
display: block;
width: 160px;
padding: 8px;
text-align: center;
border-top: 5px solid #DCDCDC;
border-right: 5px solid #797979;
border-bottom: 5px solid #4E4E4E;
border-left: 5px solid #CECECE;
background: #BEBEBE;
}出力結果
上記のコードのように上下左右のborderプロパティの色を少しずつ変えると、立体感を出せます。
全体のデザインによっては、あえて色をあまり変えず平面にしても、レトロ感を出せるかもしれません。
３．背景画像
右カラムの背景画像のうち、下にスクロールして3番目に表示される背景画像では、KINCHOのロゴ画像に使われているニワトリのイラストが連続で表示されています。
背景画像に無地やチェックなどの模様の画像を連続で配置することは今でもよくありますが、最近はこのようにイラストを連続で配置するケースは減りました。
それゆえにレトロ感が漂っていて、今では新鮮な表現です。
ただ画像を連続で配置するのであれば、CSSでbackground-imageプロパティを使用して、対象となるタグに背景を表示したい画像を指定するだけで実現できます。
ここではページの背景に表示させるため、body要素に指定していますが、div要素などにも指定可能です。
CSS
body {
background-image: url("image.gif")
}出力結果
画像を縦方向に連続で配置する場合は、「background-repeat: repeat-y;」を、横方向に連続で配置する場合は「background-repeat: repeat-x;」を追記します。
なお、画像を連続で配置せずに1つだけ配置したい場合は、「background-repeat: no-repeat;」を追記する必要があります。
ほかにもある！ レトロなWebサイト
なお、「KINCHO 4G デジタルお札」特設サイトのほかにも、一目見て「レトロだ！」と感じたWebサイトがあるのであわせて紹介します。
▼阿部 寛のホームページ
http://abehiroshi.la.coocan.jp/
俳優の阿部 寛さんの公式Webサイトです。
レトロ……というより「究極のシンプル」というべきかもしれません。
こちらのWebサイトも一昨年に、IPv6に対応されていることがネットニュースで話題になりました。
たとえスマホのギガが足りなくて通信速度が制限されていても、このWebサイトはほかのWebサイトと比べて圧倒的に早くページを開けます。
どんなに見た目にこだわっていても、Webページを開くのに時間がかかると訪問者が帰ってしまう可能性があるため、表示速度は重要です。
必要十分な情報を掲載しつつ無駄な装飾をそぎ落として、Webサイトの容量を軽くし表示速度を重視しているところに、個人的にはとても好感を持てます。
レトロな時代があったからこそ今がある
皆さんから見て、これらのWebサイトは懐かしく思えたでしょうか。
それとも「え、昔はこんな感じだったの！？」と思われたでしょうか。
このようなレトロなWebサイトは、CSSの装飾も少なく記述自体も複雑ではないため、比較的簡単に再現可能です。
ただし、上記のWebサイトは一見レトロに見えて、一部の記述は現代的なものになっており、完全に昔ながらのコードというわけではありません。
レトロなWebサイトにしたい場合でも、コードは必要に応じて今風に変えて効率化したほうが望ましいです。
また、レトロなWebサイトは、CSSの記述が簡易的というだけでなく、使用している画像や文言など、さまざまな要素が詰まっていることによって成立しています。
冒頭で「近年のWebサイトの進化はめざましい」と書きましたが、Web制作技術が進化して多様化した今だからこそ、かえってシンプルレトロなWebサイトが目を惹くのではないでしょうか。
「KINCHO 4G デジタルお札」の特設サイトや阿部 寛さんの公式Webサイトがネットニュースで採り上げられたのが、それを物語っているように感じます。
レトロなWebサイトはあくまで昔のWebサイトなので、その仕様がWeb制作のスタンダードに戻ることはないでしょう。
しかし、このようなWebサイトの仕様やデザインがトレンドだった時もあったということを、その時代を経験した身として覚えておきたいです。