今や国民の8割近くが使っているインターネット。毎日インターネットを使ってWebサイトを見ているという方も多いと思います。常日頃見るWebサイトですが、その「裏側」をみなさんはご存知でしょうか?

今回は、Webサイトの裏側が面白いサイトを紹介していきます。製作者のこだわりやユーモアの効いた「サイトの裏の顔」を少し覗いてみましょう!

Webサイトの裏側って?

通常Webサイトというのは「ソースコード」というもので成り立っています。このソースコードというのは、コンピューターに指示を与えるために人間が書いた文字の羅列を指します。普通のユーザーでしたらなかなか見る機会がない、まさにWebページの裏側の部分です。

ソースコードは「Webページ上で右クリック→ページのソースを表示」もしくは「Ctrlキー+U」で表示することができます。

堅苦しいイメージのあるサイトの裏側でも、中には遊び心満載で思わず笑ってしまうようなものから感動してしまうものまであります。今回はそんなサイトをソースコードの画像付きで紹介していきます。

Macではcommand+option+Uで表示が可能です。

ロゴが表示されるサイト一覧

企業のロゴなどを文字だけで忠実に再現しています。どれも完成度がすごく高いです。

makebooth

自分で作ったものをネットで共有するサイト。忠実にサイトのロゴを表現していますね!

makebooth - あなたのDIYライフをもっと豊かにする、ものづくりのプラットフォーム

毎日が文化祭!年中無休の'ものづくり'イベントサイト、makeboothへようこそ。makeboothでは、あなたの作ったあらゆる作品を発表することができます。

makebooth.com

Tumblr

画像と文章を共有するSNS。こちらもしっかりとロゴを再現しています。

Sign up | Tumblr

Post anything (from anywhere!), customize everything, and find and follow what you love. Create your own Tumblr blog today.

www.tumblr.com

面白法人カヤック

株式会社カヤックの企業サイトです。会社ロゴの他、親切なメッセージも添えられています。

面白法人カヤック

5つのデザインを楽しめる、面白法人カヤックのコーポレートサイトです。

www.kayac.com

株式会社 凪

株式会社 凪の企業サイトです。社名の「凪」という字が堂々と書かれています。書道で書いたような迫力がありますね!

WEBサイト制作・システム開発|株式会社 凪|NAGI Co., Ltd.

凪はWEBサイトの企画、ディクレション、デザイン制作、システム開発、サーバ構築、CMS構築などさまざまなサービスを提供しています。

nagi.tv

The Coca-Cola Company

誰もが知っているコカ・コーラの企業サイトです。おなじみのマークはサイトの裏側にもありました。

The Wall

PLASMという会社が提供するTHE WALLというサービスのサイトです。丁寧に企業サイトのURLも貼ってあります。

Paper.li

自分オリジナルの新聞が作れるPaper.liというサイト。他のロゴよりもpopに仕上がっていますね!

Dropr

簡単にポートフォリオがオンラインで作れるDroprというサービスのサイト。クリエイター向けとあってデザイン性が高いですね。

The easy online portfolio & creative network | Dropr

Dropr is the easiest online portfolio and creative network. Share your design, illustration, photography, music and other creative work.

dropr.com

Buffalo

海外のサイト制作会社であるBuffaloのサイトです。サイトにもあるバッファローのロゴがでかでかと書かれています。

Buffalo - Web Development, E-Commerce & Web Design - Brighton UK

Buffalo is a small web design & development agency based in Brighton, UK. We've made a reputation for building websites that look great and are easy-to-use.

builtbybuffalo.com

APP icons

iPhoneアプリのアイコンがたくさん紹介されているサイトです。もちろん裏側にもアイコンが書かれています。

APP icons

素敵なAPPアイコンを掲載したギャラリーサイトです。

app-icons.net

Tango Gameworks

ゲーム開発会社のサイトです。再現するのが難しそうなかたつむりがしっかりと書かれています。

Tango Gameworks

三上真司が率いるTango Gameworksの公式ホームページ。

www.tangogameworks.com

Screenreader friendly

Web制作会社で働くJonathan Ingramが描いている漫画のページ。ソースを見てくれるのを歓迎しているようです!

Bifter SVG Comic

Bifter is an SVG Comic that also utilises HTML5, CSS3 and RDFa as well as remaining screenreader friendly.

www.bifter.co.uk

Barack Obama

アメリカ大統領のBarak Obamaのサイトです。自身のロゴが書かれております。

The Office of Barack and Michelle Obama

As President Obama has said, the change we seek will take longer than one term or one presidency. Real change—big change—takes many years and requires each generation to embrace the obligations and opportunities that come with the title of Citizen.

www.barackobama.com

ネタが表示されるサイト一覧

NERV極秘資料 - 電力使用状況

某有名アニメに出てくる機関を模した電力の需給比較サイトです。もちろん裏側にもあのロゴが書かれていますよ。

ホームページを作る人のネタ帳

Web系の記事を上げているブログです。訪問者に対してのメッセージが記されています。お時間がある方はぜひ指示に従ってみましょう。

ホームページを作る人のネタ帳

売れない、人が来ないホームページにならない為の、インターネットの知識とブログネタ

e0166.blog89.fc2.com

MEG THE WORLD 2

アーティストMEGの公式サイトです。RPGゲームのようになっているこのサイトの裏側には、ゲーム中に出てくるキャラクターが書かれています。

MEG THE WORLD 2 ~世界初!クロスメディアRPG~

MEGが メディアを かけめぐる クロスメディアRPG ハイパーリンクで とびまくろう。 ※ぜったいに りだつ しないでね。

megtheworld.jp

最強の自宅警備員、決定!/アルバイト・バイト・求人情報のan

求人情報が載っているanの特集サイトです。裏側にはテーマに沿ったジョークが書かれています。

最強の自宅警備員、決定!

最強の自宅警備員10名決定!【PC】ow.ly/kkAFw【SP】ow.ly/kkAHu ※宅外警備をしたい方は http://weban.jp へ

weban.jp

ドットインストール

プログラミングを学習できるサイトです。裏側に書かれているコメントはなんと表示するごとに内容が変わります!

ドットインストール

3分動画でマスターする初心者向けプログラミング学習サイトです。HTML, CSS, JavaScript, PHP, Rubyをはじめ、iPhoneやAndroidアプリの作り方も学べます。豊富な無料動画を見ることで、はじめての人でも無理なくスキルを身につけていくことができます

dotinstall.com

セキュリティ戦士 マモルくん!

BIGLOBEが展開しているセキュリティ関連のサイトです。裏側でもマスコットキャラクターの「セキュリティ戦士 マモルくん」が安全を守っております。

日本ホットパンツ協会跡地

今はなき日本ホットパンツ協会のサイトです。ホットパンツで有名な!?芸能人であるPerfumeののっちさんが書かれています。

日本ホットパンツ協会オフィシャル

ホットパンツの最大の魅力はヒップから裏もものラインが同時に体験出来る所!世の中の色々なパンツの中でこれを表現できるのはホットパンツだけ。日本ホットパンツ協会

www.hotpants-japan.com

2012年 ブラウザで祝うお正月

前述した株式会社カヤックの2012年のお正月を祝うサイトです。裏側には鏡餅が書かれています。

メッセージが表示されるサイト一覧

Webクリエイターボックス

Webデザインの記事をアップするブログです。有名なSteve Jobsのありがたい言葉が書かれています。

Webクリエイターボックス

WebデザインやWebサイト制作、最新のWeb業界情報などを紹介していくサイト。

www.webcreatorbox.com

LayerVault

フラットデザインのお手本となることが多いサイトです。裏側にはBooyah(日本語で「やった」の意味)と書いてあります。

LayerVault IP Vault

The LayerVault IP Vault: tech for designers and those who serve them. Firstfrom the vault: psd_native.

www.layervault.com

Disney

言わずと知れたディズニーのサイトです。創業者のWalt Disneyの言葉が書かれています。

FIRST STEP

2013年7月の参院選の投票率を上げるためのキャンペーンサイト。裏側には運営団体からの熱いメッセージが書かれています!

FIRST STEP / 投票に行く人を増やす。

FIRST STEPは、ネット選挙の解禁元年である参院選に向けた投票日、一斉告知キャンペーンです。投票日の前日に一斉に投稿されることによって、選挙のお知らせを日本中に広げます。ネット選挙が解禁される最初の選挙をみなさんで盛り上げましょう。

f1rst-step.com

よく使うサイトで試してみましょう

いかがだったでしょうか?目に見えない部分にもこだわっている製作者の方々から強いこだわりを感じます。たまたまソースコードを表示した人しか見られない表示なんてなんだか神秘的ですよね。もしかしたらあなたがよく使っているサイトにも実はメッセージがあるかもしれません。気になる方は実際に試してみましょう!

(image by 筆者)