Web関連

Webサイトの裏側までこだわるアートなHTMLソースコード集

0

k-mori_2015_10-1_001.png

普段何気なく見ているWebサイトの中には、”表側”のデザインはもちろんのこと、”裏側”とも呼べるHTMLのソースコードをアートにしているWebサイトが存在します。

なかなか気が付かれないにも関わらず、ソースコードをこだわっているWebサイトを集めてみました。

クリエイターの遊び心がいっぱい

これから紹介するWebサイトに実際にアクセスし、その目でソースコードを眺めてみてもらえればと思います!

ソースコードの見方は「Webページ上で右クリック→ページのソースを表示」もしくは「Ctrlキー+U」、Macの場合は「command+option+U」で表示が可能です。

1.食べログ – ランキングと口コミで探せるグルメサイト

幹事さんの強い味方、利用している方も多いのではないでしょうか?食べログさんのサイトにも遊び心がありました。

k-mori_2015_10-1_002.png

2.レシピ検索No.1/料理レシピ載せるなら クックパッド

こちらもお馴染み、料理レシピサイトのクックパッドさんにもロゴをかたどったソースコードがありました。

k-mori_2015_10-1_003.png

3.日本コカ・コーラ株式会社 Coca-Cola Journey

コカ・コーラのコーポレートサイトにもロゴがありました。ちなみに、他のグローバルサイトにもありました。

k-mori_2015_10-1_004.png

4.スーパーマリオブラザーズ30周年

『スーパーマリオブラザーズ30周年』を記念したサイト。何だかオシャレです・・・!

k-mori_2015_10-1_005.png

5.NERV極秘資料 – 電力使用状況

某アニメを模したサイトにもロゴマークが書かれていました。

k-mori_2015_10-1_006.png

6.面白法人カヤック

面白法人カヤックさんのWebサイトです。ユーモア溢れるサイトです。

k-mori_2015_10-1_007.png

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

アルバイト・バイト・求人情報のanのキャンペーンサイトです。キャンペーンサイトだからこそのこだわりですね。

k-mori_2015_10-1_008.png

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

インターネット選挙が解禁されて最初の参議院選挙の際に立ち上げられたキャンペーンサイト。

ロゴマークやアイコンをソースコードに残すだけでなくこういったメッセージを残すサイトもありました。

k-mori_2015_10-1_009.png

9.ドットインストール – 3分動画でマスターする初心者向けプログラミング学習サイト

ドットインストールは、動画でプログラミングを学習することができるサイト。

こちらのサイトはエンジニアやプログラマに役立つTipsが書かれているようです。アクセスするたびに切り替わるところが面白いです。

k-mori_2015_10-1_010.png

10.Disney.com | The official home for all things Disney

ディズニー公式Webサイト。創業者・ウォルトディズニー氏の言葉が書かれています。

k-mori_2015_10-1_011.png

11.Webクリエイターボックス

Webクリエイターズボックスさんのサイトにもありました。IT界隈では有名はブログですね。こちらにはスティーブ・ジョブズ氏のコメントが掲載してありました。

k-mori_2015_10-1_012.png

まとめ

こうして探してみると以外に多くのサイトで隠されていました。

目に見えない部分なのでなかなか見られることはありませんが、作成者の強いこだわりが伝わってきます。
キャンペーンサイトなどでこういった「ソースコードアート」を取り入れるのも話題作りの一つとして有効なのかもしれません。

是非、みなさんもソースコードアートを探してみてください!

ホームページ制作でお困りの方はホームページ制作会社ティファナにご相談ください!

お問い合わせはこちらから

関連するサービス

ホームページ制作

Webデザイン制作

W3Cチェック

0

機械学習で進化した将棋界前のページ

ユーザーを騙す!?インフィード広告の有効活用次のページ

ピックアップ記事

  1. 新しい販売形態であるDtoCについて考えてみる
  2. AIに求められているものは、実は意外な物だった
  3. 新型コロナウイルスで日本の働き方改革が起こる
  4. 大手企業も注目するMaaS(Mobility as a Service)とは何か…

関連記事

  1. SNS関連

    ソーシャルメディアをターゲットユーザーによって使い分けよう

    ソーシャルメディアにはFacebook, Twitter, Insta…

  2. Web関連

    WEB制作を依頼するときに大切な4つのポイント

    こんにちは!元野球部、デザイナーの栄です!最近、また一段と寒く…

  3. Web関連

    web制作の新常識!?常時SSL化のススメ

    GoogleがSSL化されたサイトをSEOの評価に…

  4. Web関連

    Webデザインで使える配色ツール5選!

    みなさんはじめまして。デザイナーの松田です。今回はタイトル通り、W…

  5. Web関連

    Webデザインの95%はフォントで決まる?!Webデザイナーなら知っておきたい3つのポイント

    Webデザインの95%はフォントで決まる?!Webデザイナーなら知って…

  6. Web関連

    【Web制作】WordPressを使ったCMS構築の料金はいくらになるのか計算してみる

    こんにちは小森です。今回はWordpressを使ったCMS構築…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    Web制作における品質管理の問題点と解決方法
  2. Web関連

    必ず売り上げが上がるWebサイトの王道があります!
  3. AI関連

    AIをブラックボックスにしないために〜透明性を確保するためには
  4. Web関連

    クラウドビジネスの動向。世の中のサービスちょっとだけ調べてみました。
  5. Web関連

    Googleアナリティクスの新機能「ユーザーエクスプローラ」とは?
PAGE TOP