https://labs.cybozu.co.jp/blog/akky/tags/%E3%83%94%E3%82%AF%E3%82%BB%E3%83%AB/ Recent content in ピクセル on akky@サイボウズラボ・ブログ Hugo ja Fri, 12 Aug 2022 00:00:00 +0000 https://labs.cybozu.co.jp/blog/akky/2022/08/pixelguesser-asks-you-sizes-on-browser/ Fri, 12 Aug 2022 00:00:00 +0000 https://labs.cybozu.co.jp/blog/akky/2022/08/pixelguesser-asks-you-sizes-on-browser/ <p><a href="https://fakeclients.com/exercises/pixelguesser">Pixel Guesser</a>(ピクセル当て)は、ブラウザ上でピクセル(px)指定されたサイズの矩形を答えるクイズサイトです。</p> <p><a href="https://labs.cybozu.co.jp/blog/akky/2022/08/pixelguesser-asks-you-sizes-on-browser/pixel-guesser-question.png"><picture> <source type="image/webp" srcset="https://labs.cybozu.co.jp/blog/akky/2022/08/pixelguesser-asks-you-sizes-on-browser/pixel-guesser-question_hu_d0dedfa574eb37bb.webp 480w, https://labs.cybozu.co.jp/blog/akky/2022/08/pixelguesser-asks-you-sizes-on-browser/pixel-guesser-question_hu_429df4b760c39308.webp 768w, https://labs.cybozu.co.jp/blog/akky/2022/08/pixelguesser-asks-you-sizes-on-browser/pixel-guesser-question_hu_f67dba97934c26cb.webp 1048w" sizes="(max-width: 56rem) 100vw, 54rem"> <img src="https://labs.cybozu.co.jp/blog/akky/2022/08/pixelguesser-asks-you-sizes-on-browser/pixel-guesser-question.png" width="1048" height="721" alt="" loading="lazy" decoding="async"> </picture></a></p> <p>幅と高さのpx がお題として出るので、マウスでそのサイズと自分が思う領域を指定します。</p> <p><a href="https://labs.cybozu.co.jp/blog/akky/2022/08/pixelguesser-asks-you-sizes-on-browser/pixel-guesser-result.png"><picture> <source type="image/webp" srcset="https://labs.cybozu.co.jp/blog/akky/2022/08/pixelguesser-asks-you-sizes-on-browser/pixel-guesser-result_hu_a834dc45bb5f238.webp 480w, https://labs.cybozu.co.jp/blog/akky/2022/08/pixelguesser-asks-you-sizes-on-browser/pixel-guesser-result_hu_2df2eb65dbf0bfe8.webp 768w, https://labs.cybozu.co.jp/blog/akky/2022/08/pixelguesser-asks-you-sizes-on-browser/pixel-guesser-result_hu_e8cee3553cf90d7f.webp 787w" sizes="(max-width: 56rem) 100vw, 54rem"> <img src="https://labs.cybozu.co.jp/blog/akky/2022/08/pixelguesser-asks-you-sizes-on-browser/pixel-guesser-result.png" width="787" height="625" alt="" loading="lazy" decoding="async"> </picture></a></p> <p>あなたが描いたサイズと正しいサイズがオーバーレイで示され、どれぐらい正解に近かったかに応じて点数が加算されます。10問解くと合計が出て終了。</p> <p>ブラウザ上での矩形領域を勘で指定してうまく当てられると、デザインの速度にいい影響があったりしますかね? 日常的にデザインしてる人はやはりいい点数出るんでしょうか。</p> <p>via <a href="https://news.ycombinator.com/item?id=32414627">Hacker News</a></p>