バグ再現ボタンに、スパム専用メール。ブルーパドルWEBサイト変な演出まとめ

  • 2017.01.21
  • RELEASE
news_pc_bagu

こんにちは、佐藤ねじです。2017年1月、ブルーパドルのサイトを立ち上げました。会社設立してから半年経ってしまいましたが、やっと公開です。

基本的には分かりやすく丁寧に作りましたが、変な演出を入れてしまいたくなる性分でして、いくつか少し変わった演出やコンテンツを追加しました。

１：バグ再現ボタン

WEBサイト制作においてバグは悪であり、バグはつぶすものです。しかし僕らとしては、バグ画面に美しさを感じてしまいます。

文字がすごく大きくなったり、色がおかしかったり、何やらプラグラムのコードっぽいものがぶわーっと出たり。ダメなものに惹かれてしまうのが人間ではないでしょうか。

そこでブルーパドルのサイトには、意図的にバグを発生させるボタンをつけました。メニューの一番下のバグらせるボタンを押すと発動します。例えばこんなバグを入れています。

「伸縮」
極端にWEBサイトが伸び縮み。
bagu_3

「コンテンツ傾」
傾けるだけでかわいくなります。
bagu_4

「ナビの引越し」
ナビゲーションの位置を変える。
bagu_5

「揺らす」
すっごいWEBサイトを揺らします。（バグを組み合わせて、伸縮＋揺らすをやると、もっといい感じです。）

「どっちがTwitter？」
これはバグとは言えないかもしれませんが、昔のTwitterロゴとfacebookロゴの色や向きを反転させていくと、どっちがツイッターなのか、分からなくさせる試みです。

「拡大する」
大きくした状態でページを操作すると、同じ情報なのに見え方が変わります。
bagu_6

2：パンくずの向こう側

パンくずは普通、「家」の形のホームから始まりますが、その向こう側をつくりました。家の前には日本があり、世界があり、宇宙があり、無限があります。（スマホ版下層ページの一番下で見れます）

pankuzu

３：コンタクトの送信完了画面

普通「お問い合わせありがとうございました」と書くわけですが、その問い合わせを実現するにはキーボードの発明が必要だった訳で、キーボードを作ったショールズさんにも感謝するなど、いろんな技術者にも感謝する、「深めのありがとうページ」にしました。

contact_thanks2

４：スパムメール専用メアド

スパムメールを送りたい方の、専用アドレス「spam@blue-puddle.com」を設置しました。

spam

５：架空の実績まとめ

こんなことをやってこうと思っている。という意思表示のために、アイデアの一部を公開していくコーナーです。
https://blue-puddle.com/wordpress/ideas

「こどもの重さの絵本」
9

「文字の味」
10

6：ロゴ

PC版で、ロゴにホバーするときに、小さな演出を入れてます。

「変なWEBサイト制作」のご相談ある方はお気軽にお問い合わせください。

→こういう変なWEBサイト作っています

関連ニュース

JDNコラム #1『「何がコンテンツになりうるか」発想法』

  • 2017.01.9
  • EVENT

【イベント】dotFes2016渋谷『クリエイティブ大喜利』で、佐藤ねじが優勝！（こっそりプレゼン資料も公開）

  • 2016.12.27
  • EVENT

競馬とバグに愛された28歳エンジニア「橋本大和」

  • 2016.11.2
  • EVENT

【雑誌】ユニコーン「ゆ 13-14」掲載　—Web Designing

  • 2016.08.28
  • EVENT