HTMLソースコードに隠しメッセージ、アスキーアートがあるWebサイト 10選
「HTMLソースコードに書いてあるメッセージや絵は何？」
「どんなWebサイトにあるの？」
「アスキーアートはどうやってつくればいいの？」
こういった悩みにお答えします｡
- 目次
隠しメッセージ､アスキーアートを入れる意味
これは単なる遊び心でしかないです｡
Webページの読み込みだけを考えれば､改行や空白さえないほうがいいので｡
IT系､Web系のWebサイトだと､ユーザーにソースコードを見られる可能性も高いので､何か特別なメッセージを書いておいたりすると､他社と差別化したり､面白い会社だと思ってもらえるかもしれません｡
これらはコメントアウト内に書かれるものなので､プログラムなどに影響をあたえません｡
コメントアウトについては､以下､記事で紹介しています｡
コメントアウトの使い方【HTML･CSS･PHP･JavaScript】
コメントアウトの使い方を知りたいですか？この記事では、Web制作で使うコメントアウトの書き方（HTML、CSS、JavaScript、PHP、.htaccess）、複数行での書き方、WordPressでのつく別なコメントアウトの使い方を紹介しています。ぜひご覧ください。
HTMLソースコードを見る方法
一般的なブラウザであれば､右クリックしてでてくるメニューからソースコードを見ることができます｡
- Chrome → ページのソースを表示
- Internet Explorer → ソースの表示
- Edge → ページのソース表示
- Firefox → ページのソースを表示
- Safari → ページのソースを表示
Google Chromeの場合は､URLの前に「view-source:」をつけることでソースコードを見ることができます｡
隠しメッセージ､アスキーアートがあるWebサイト
アスキーアート系
アスキーアートとは､プレーンテキストによる視覚的表現技法のことです､テキストアート､活字アート､絵文字などとも呼ばれます｡
メールなどに使う顔文字もアスキーアートの一種といえます｡
食べログ
ロゴと「食べログ」のアスキーアートが書いてあります｡
そして､小さく【私たちと一緒に「食べログ」を作ってみませんか？】とメッセージがあります｡
ここ採用サイトへ誘導するというこはWeb系の人を募集しているのかなという感じがします｡
全国にあるレストラン816,328件を一般ユーザーの口コミをもとに集計した様々なグルメランキングから探すことができます。美味しいレストランや、人気のレストランが簡単に見つかります！
任天堂ニュース
tumblr
シンプルにロゴのアスキーアートです｡
Tumblr is a place to express yourself, discover yourself, and bond over the stuff you love. It's where your interests connect you with your people.
コカ･コーラ
シンプルにロゴのアスキーアートです｡
コカ・コーラ ジャーニーは、日本コカ・コーラの製品情報や企業情報だけでなく、ソーシャルメディアで発信した情報をキュレーションし、コカ・コーラにまつわるストーリーを発信するデジタルマガジンです。
ロリポップ
「TEAM LOLIPOP」のアスキーアートです｡
ホームページ運営なら、ずっと使えるレンタルサーバー「ロリポップ！」簡単、多機能、充実サポート、高速性能で、初心者から商用サイトまで安心してご利用いただけます。WordPress、EC-CUBEもたったの60秒で設置可能。まずは無料お試し10日間。
メッセージ系
ドットインストール
「エンジニア､プログラマのあるある話」がリロードするたびに切り替わります｡
ドットインストールのtwitterに投稿すれば自分のあるある話も載るかもしれません｡
HTML, CSS, JavaScript, PHP, Rubyをはじめ、iPhoneやAndroidアプリの作り方も学べます。豊富な3分動画を見ることで、はじめての人でも無理なくスキルを身につけていくことができるプログラミング学習サービスです。
天然水の森 人類以外採用 サントリー
Webサイト自体がネタのような内容なので､ソースコードでも遊び心で書かれています｡
【募集開始】サントリー天然水の森 人類以外採用始めました。仕事内容は、生きること。あなたのエントリーを待っています。
富士そば
マナブログ
WordPressテーマが宣伝が書かれています｡
ソースコード見に来る人なんてブロガー､プログラマーなので､こんなところでも的確なマーケティングしてます｡
タイ・バンコクへの移住ガイドを作りました。内容は「基礎知識、ビザ、仕事、給料、保険、家探し、税金、子連れ移住」といった感じです。記事を読めば、ほぼ全ての疑問は解決できるはず。僕の４年間の経験を公開しました。
Webクリエイターボックス
「デザインとは､単にどのように見えるか､どのように感じるかということではない｡どう機能するかだ｡ スティーブ･ジョブズ」という名言が書かれています｡
WebデザインやWebサイト制作、最新のWeb業界情報などを紹介していくサイト。
アスキーアートの作り方
アスキーアートを自分で手入力してつくっていくのはとても大変です｡
以下のWebツールを使うことでアップロードした画像から変換して､アスキーアートを作成することができます｡
AA変換(アスキーアート生成)｜Web便利ツール@ツールタロウ
画像からアスキーアートを自動作成するWebツール。横幅200文字のサイズまで生成可能で、画像・テキスト両方で保存可能。PC・スマートフォン・タブレットのブラウザで使えます。常時SSL対応。
アスキーアート（AA）作成：テキスト、画像からASCII Artを生成 | ラッコツールズ🔧
テキストまたは画像からアスキーアートを生成します。フォントによってアスキーアートの見え方が違うので、「全てのフォントを確認」をお試しください。
まとめ
HTMLソースコードに隠しメッセージ､アスキーアートがあるWebサイトを紹介しました｡
コーディングでは極力余計なものは削除したほうがいいですが､こういった遊び心をこっそり入れるのもときには大事かなと思います｡
