コンソールで美しいデザイン文字を表示させている世界のサイトたち
Google Chromeの「ディベロッパーズ・ツール」機能を知っていますか？
ウェブ作成や、コーディングのデバッグ等、WEBエンジニアやデザイナーに頻繁に使用される便利な機能です。（Google Chrome上で右クリック→「検証」を選択すると開きます）
私はふと気が向いた時に、このディベロッパー・ツールを開いたままこの広大なインターネットに存在している様々なWEBサイトを徘徊することがあります。
このディベロッパー・ツールの機能の一つに「コンソール」と呼ばれるエラーや、意図したメッセージを表示させる機能があり、いくつかのサイトがコンソールに美しくデザインした文字を表示させ、ユーザを楽しませる工夫をしているからです。
例えば、noteさんのように
この記事では、私が見つけた中でコンソールに文字を表示させているサイトをスクリーンショット画像付きでご紹介します。
Medium
まずは海外で有名なメディアサイト「Medium」からご紹介します。私がMediumを最初に紹介したのは、今まで見たコンソールのデザイン文字の中でダントツで一番美しい・・・と思うからです。
Mediumは、見てわかる通りインテリな雰囲気をテーマにしているサイトです。コンソールのデザイン文字も、そのテーマを壊さない様に丁寧にデザインされていると思いました。
下部には「今採用してるよ！」と書いてありますね。
BBC NEWS
イギリスのニュースサイト「BBC NEWS」。Mediumとは打って変わり、サイトのカラーである黒・赤・白を駆使して目立つデザインになっています。
下部には、「月間３億人に使用されているWEBサイトの高速化や使いやすいウェブサイト構築を手助けしてもらえるなら、こちらへ連絡してね！」といったことが書いてあります。
Etsy
今度は、オンラインショッピングサイトの「Etsy」です。とてもシンプルで、１行の文字のみ。
New York Times
今度はアメリカのニュースサイト「New York Times」。New York TimesもMediumと似て高貴な雰囲気が出ているサイトですが、コンソールの文字もその雰囲気を壊さないデザインになっていました。
このデザイン、誰が考えるんでしょうね。きっといろんな議論があったんだろうなぁ・・・。
「Facebook」に関しては、他とは毛色が違い、アカウントのハッキングを防止するためのメッセージが表示されていました。
これだけで、Facebookはハッキングをしようとしている悪い輩が多いことがわかりますね。感慨深いです。
CNN
こちらもアメリカのニュースサイト「CNN」。C・N・Nを表示するだけのシンプルなデザインになっています。
「CNN.comを高速にしようと試行錯誤しています。助けてくれますか？」と書いてありますね。WEBサイトが高速に動くことがどれだけ大切かということがわかる一文です。
ニュース記事、画像のリンクやテキストを投稿し、コメントをつけることができるサイト「Reddit」。日本人にはあまり馴染みがないかもしれませんが、英語圏の人達にとっては「２ちゃんねる」くらい有名なサイトです。
Redditに関しては、サイトのアイコンにもなっている「Snoo君」が表示されます。ちなみにSnoo君はRedditエイリアンらしいです。可愛い。
Quizlet
フラッシュカードを作ることができる「Quizlet」。8とbとYを駆使してQuizletと書かれています。CNNも8を多様していたので、使いやすい文字なのでしょうね。
下部には「世界の教育は移り変わり、学生世代はデジタルの教育ツールを使い始めています。Quizletはそのツールを作っています。我々に加わろう！」と書かれています。
まさに「誰かの助けになるサービスを作る」という信念が伝わる文章です。
Baidu
中国で最大の検索エンジンである「Baidu」。コンソールには文字が表示されました。
私は中国語がさっぱりわからないので、Google翻訳にかけてみます。
日本語訳
パソコンの前でこの文章を読んでいますね、Baiduでライターがあなたを待っています。あなたはN年前にこの世界にやってきました。N年後には、この世界を変えたいと思っています。
あなたに会えることを楽しみにしています。Baiduと一緒にこの世界を変えましょう。
・・・かっこいい。やる気のある人たちを更に鼓舞する文章だと思いました。さすが大きくなった会社は、細かい箇所にも抜けがないですね。
Mozilla
オープンソースのWebブラウザの開発などを行うアメリカの非営利団体「Mozilla」は、コンソールではなくHTMLコード内に遊び心が出ていました。
・・・ゴジラだ。可愛いですね。
どなたかのブログ
どこで拾ったのか忘れたのですが、たまたま行き着いたブログのコンソールには「JS（JavaScript)」と表示されていました。
奥行きが上手に表示されていて素敵ですね。
番外編 ~コンソールエラー~
さて、ここからは私がコンソールのデザイン文字を探していろいろなサイトを徘徊していた時に、印象に残ったサイトをご紹介します。
ディベロッパーツールのコンソールには「エラーなどを表示させる役割がある」と冒頭でお話ししました。エラーは赤文字で表示され、ほぼ99%のサイトで何らかの赤文字エラーが表示されます。この赤文字エラーを表示させないようにするのはなかなかな苦難の技です。
その中で、エラーが表示されない真っ白なコンソールのサイトがいくつかあったので、ご紹介します。
Craigslist ~素晴らしいで賞~
英語圏では有名なローカル情報を交換するためのサイト「Craigslist」。エラーの原因となるJavaScriptコードをほぼ使用していないためか、コンソールは真っ白な状態。とてもスッキリして良いです。
Steam ~素晴らしいで賞~
PCゲームや動画などをダウンロードすることができる「Steam」。JavaScriptコードをがっつりつかっているにも関わらず、ほぼ全てのページでエラーが表示されません。エンジニアはかなり努力しているはず。拍手です！
Apple ~素晴らしいで賞~
デザインをかなり重視しているAppleは、コンソールの見栄えも気にしていました。
アニメーションをいろいろな箇所で使っているのに、ほぼ全てのページで「ひとつたりとも」エラーが表示されません。すごいの一言です。ジョブズが拘ったのでしょうか？これぞAppleという感じがしますね。
さて、ここからは打って変わって「残念で賞」になります・・・。
Microsoft ~残念で賞~
見よ、このエラーの数！どうしてもAppleさんと比べてしまい、残念な気持ちになってしまいます・・・。
楽天 ~残念で賞~
まぁ、予想していましたが、すごいエラーの数ですね・・・。Appleなどのすごさが一際目立ちます。
まとめ
ディベロッパーズツールのコンソールを上手に使っているサイトをご紹介しました。
コンソールに文字を表示させているサイトは、日本発だと「note」さんくらいですね。もし紹介しているサイト以外で見つけた方がいらっしゃれば、ぜひ教えてください、この記事に追加します！