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

関連記事

  1. Web関連

    【もう知ってる?】マイナンバーのメリット・デメリット

    最近話題になっている「マイナンバー」ですが、実際にはどういったことが出…

  2. Web関連

    オンライン学習のメリットとデメリット

    昨今、インターネットを通じて学習する方が増えており、受講者も年齢や職業…

  3. Web関連

    CMSとしてのWordPress導入 その2

    前回のコラムではWordPressの導入から、自作テーマの作成、簡単な…

  4. Web関連

    海外のWeb制作会社では主流?Illustratorを使用したWebデザイン制作手法

    この記事を読んでいるデザイナーの皆様、もしくはWeb関連の仕事を毎日頑…

  5. Web関連

    整理術を磨くと仕事だけでなくWeb制作の効率も上がる?!佐藤可士和から学ぶ仕事の取り組み方~第1回~…

    私たちの身の回りにはデザインされているもので溢れています。商品…

  6. Web関連

    聞いた事ある?マーケティングオートメーション

    なにやら巷には「マーケティングオートメーション」なるものがあるようで、…

自治体向けDX推進サービス

AIさくらさん for 自治体DX

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    Web制作会社が教えるDDos攻撃からのWEBサイトを守る方法
  2. Web関連

    「Windows 10」の登場で、web制作は変わるのか?
  3. Web関連

    ゲーミフィケーションとは?
  4. Web関連

    パララックスデザインとUI・UX
  5. Web関連

    寿命が延びてるのはビッグデータのおかげ!ビッグデータで長生きしよう!
PAGE TOP