カテゴリー
UIデザイン

pixelguesser – あなたのwebデザインのサイズ感に挑戦するクイズ

Pixel Guesser(ピクセル当て)は、ブラウザ上でピクセル(px)指定されたサイズの矩形を答えるクイズサイトです。

幅と高さのpx がお題として出るので、マウスでそのサイズと自分が思う領域を指定します。

あなたが描いたサイズと正しいサイズがオーバーレイで示され、どれぐらい正解に近かったかに応じて点数が加算されます。10問解くと合計が出て終了。

ブラウザ上での矩形領域を勘で指定してうまく当てられると、デザインの速度にいい影響があったりしますかね? 日常的にデザインしてる人はやはりいい点数出るんでしょうか。

via Hacker News

カテゴリー
ネットのサービス

Felt – 地図を作製・共有するためのWebサービス

from Felt Media Kit
Feltブランドロゴ

Felt は、ブラウザ上でオリジナルの地図を作成することができるサービスです。

線を引いたり、マーカーを置いたり、画像や動画を地図上に貼り付けたりという編集機能がブラウザで提供されています。

作成した地図はURLで共有したり、自分のサイトに埋め込んで表示したりできます。

上は以前から考えていた地図ネタ。地下鉄に乗らなくても地下鉄の通路を歩いて長距離行けるところがあるのでは? と思って作った「ぼくの考えた傘の要らない最長地下道ルート」。

隣の駅まで地下道でつながっている駅が結構あるので、地下鉄に乗らずに何駅分も歩けそうだな、と思ってたのを地図に描いてみました。

Feltで地図を作成している様子

なお、Felt社が全部作ってるわけではなく、地図はMapboxOpenStreetMapを利用して作られているようです。

Feltが提供するレイヤーという形で、道路・鉄道・航路・自転車道、州境や自治体・選挙区・学区・郵便区・タイムゾーン、洪水・森林・山火事、学校・公園・発電所・国立公園、など様々なデータをプロットした地図が提供されており、これらを簡単に重ね合わせて使うことができるようです。

レイヤー選択画面 from Felt Media Kit

「地震」と「火山」のレイヤーを使って日本で地震が起こりやすいことを説明する地図、を作った人もいるようです。

現在は個人での利用が無料、将来的にはチーム向けの有料プランを準備しているということ。

via Hacker News

カテゴリー
データ可視化

hexyzland – 数式で六角形の図形表示を動かす遊び場サイト

hexyzland は、六角形ベースの図形を6つの変数と数式で動かす、プログラミング実験場です。

Hexyzland トップページ

6つの変数は t(時間), r(中心からの距離), a(角度), x,y,z(3方向の座標) となっていて、各ヘックスの値を -1(真っ赤) から 1(真っ白)の間に変えることでヘックスのサイズと色が変わります。

あとは数学的な関数を組み合わせればアニメーションのできあがり。チュートリアルにたくさんの実例が出ています。

作成した図形は URL が生成されるので SNS 等で共有することもできますし、動いているところを動画として保存することもできます。

GitHub にサイトのソースコードも公開されています。

tixyland という正方形ベースの同様の遊び場があり、hexyzland はそれにインスパイアされたものだそうです。

tixy.land トップページ

via reddit/programming