Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

[Misc] The True Size … – メルカトル図法による認識の誤りを正してくれる地図

  • Pocket
  • このエントリーをはてなブックマークに追加

見慣れたメルカトル図法の地図による認識の誤りを正してくれるマップ。メルカトル図法って分かりやすく平面に地図を表してくれる反面、元々3次元のものを2次元化する際に極地ほどX軸に引き伸ばされちゃうんですよね。その結果赤道付近の国に比べて、極に近い国は本来より大きく表示されちゃう。その代表的な例がグリーンランドで、世界地図上ではやたらデカいのに実際には言うほど大きくなかったりします。このサイトではそうした地図の特性を補正した上で、任意の国を相対的に他の国と大きさを比べる事ができます。デフォルトでアメリカ、中国、インドがアクティブ(ドラッグできる状態)になっているので、北極の方まで持って行きましょう。すると、その国が仮にその位置にあった場合どの程度の大きさで表記されるかが分かります。新しく国をアクティブにする際は、画面左上の検索バーから呼び出す事ができます。試しにグリーンランドとかアラスカ(アラスカは国じゃないけどなぜか単独でアクティブにできます)あたりを赤道付近に持ってくると、あーこんなもんなのか、とか思います。世界の大きさを知る上でなかなか興味深い試みですな。

[Tool] Pingdom Website Speed Test – Webサイトのロード時間や、ボトルネックを調べてくれるサイト

  • Pocket
  • このエントリーをはてなブックマークに追加

WebサイトのURLを入力する事で、対象サイトのロードタイムを計測してくれます。結果はパフォーマンスをグレードやロードタイム、ページの総容量、リクエストの数で評価してくれます。またこのサイト便利なのが、コンテンツの種類ごとにサイズを分けて表示してくれたり、どのファイル(外部スクリプトなども含みます)がボトルネックになっているのかまで調べてくれるという点。結果画面一番下の「File requests」のエリアを「Load time」でソートすると、どのファイルがクソ重いのか1発で分かります。Webサービスなどでページパフォーマンスチューニングする際に超使えそうです。ナイスですねー。

[Mockup] Diverse Device Hands – タッチデバイスを手に持った状態の画像素材

  • Pocket
  • このエントリーをはてなブックマークに追加

各種スマホを手に持った状態の画像素材を、Facebookが公式に配布してます。機種はiPhone 6s、Microsoft Lumia 950、Nexus 5x、Samsung Galaxy Note 5の4つで、それぞれ4つのバリエーションが用意されています。ダウンロードするとSketchフォーマットと透過PNGのものが一式入っており、Sketchの方はディスプレイ部分がマスク処理されているので、画面デザインのハメ込みもサクっとできそうです。全機種に4パターンの肌色バリエーションを用意している点が、Facebook公式の素材っぽいなーとか思いました。モバイルAppの紹介ページなどで使えそうです。

[CSS] 4 Really Useful, Re-Useable Code Snippets from Codepen – マジで使える4つのコードスニペット

  • Pocket
  • このエントリーをはてなブックマークに追加

クッソ使える(このへんの訳で合ってんのかなこれ)コードスニペット4つを紹介した記事。かっちょいいローディングバー、Pure CSSなパララックスピクセル、Pure CSSなカルーセル(イメージスライダー)、マウスオーバーで拡張するフォトギャラリーの4つが紹介されています。Codepenを使って紹介されているので動作確認も導入もサクっとできそうです。JSいらずのカルーセルとかイイっすね。

[Music] We asked Microsoft’s CaptionBot to describe 13 photos and things got weird – MicrosoftのCaptionBotにロックスターの写真を見せてみた

  • Pocket
  • このエントリーをはてなブックマークに追加

ちょっと前に話題になったMicrosoftのCaption Botにいろんなロックスターの写真を見せて、それが誰なのか分かるのかコノヤロー的な実験をしてみた、という記事。いやこれオモろいですよ。例えばMetallicaのメンバーやカート・コバーン&コートニーはすぐに理解できてるんだけど、ジーン・シモンズに関しては「赤いジャケットを着た女の人がバイクにまたがってる」とか言うてます。レッチリのフリーはマルコム・マクダウェルと勘違いされてるし(まぁちょっと似てるけどwww)、Judas Priestは女の人に、Iron Maidenのエディーはスケボー野郎だと思われてます。髪の長いメタル野郎は基本女の人に間違われるのかな。まぁこうやってAIをからかって遊べるのも、もしかしたら今のうちだけなのかもしれませんが。

[Star Wars] Star Wars Episode IV in one picture – スターウォーズ・エピソード4を1枚の画像で表現した作品

  • Pocket
  • このエントリーをはてなブックマークに追加

Star Wars Episode IV(公開順で言えば初作)のあらすじを、ただ1枚の画像で表した作品。あらすじとは言っても内容はかなり詳細で、誰がどこで何をしたのか、またそれに加えて登場する乗り物や兵器に関する知識についてもわりと詳細に解説されていて、SWオタにとってはなかなかタマらん内容となっております。Star Warsネタといえば、最近Chewbacca Momに軽くハマっております。この口が一緒に動くチューイのマスク超欲しい。

[Web Design] Bootstrap Hover Image Gallery – マウスオーバーエフェクトのギャラリー

  • Pocket
  • このエントリーをはてなブックマークに追加

様々なマウスオーバーエフェクトのギャラリー。各サムネールにマウスオーバーする事でアニメーションが再生され、Show Codeをクリックする事でコードを確認できます。フレームワークとしてBootstrapが使われているようなので、Bootstrapベースのサイトでならサクっと実装できそうです。Twitter、Facebook、Instagram、Dribbbleへの投稿ボタンが用意されているものもあります。かっちょいいエフェクト多めです。

[Resources] Design Lazy – 様々なデザインリソースを紹介するサイト

  • Pocket
  • このエントリーをはてなブックマークに追加

Webデザインに役立つ素材や、各種モックアップ、UIパーツなどの様々なデザインリソースを紹介するサイト。まだローンチしてそれほど経ってないようで、紹介されている点数こそ多くないですが、内容はわりと使えそうなものが多いので、素材探しの時なんかに使えそうです。日常的な巡回ルートにも良さそうです。