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

Browse By

Monthly Archives: 6月 2016

[Web Design] mydevice.io – 各種タッチデバイスのディスプレイ仕様を一覧で見れるサイト

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

各種タッチデバイスのディスプレイ仕様を一覧で見る事のできるサイト。というかトップページはココで、そちらでは自分が使っているブラウザの仕様を見る事ができるというものなんだけど、個人的にこっちのデバイス確認ページの方が便利だなーと思ったのでこちらを紹介。論理ピクセル数、物理ピクセル数に加えて、ピクセルレシオやPPIについても紹介されています。表のヘッダーをクリックするとソートし直しもできます。モバイルサイトデザインする時の指標として使えそうです。

[Apple] iOS 10 Default Wallpaper – iOS 10のデフォルト壁紙(多分)

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

WWDCやAppleのサイト内でシレっと使われてる、次のiOSでデフォルトの壁紙になる(であろう)画像を見つけました。imgurで共有されてます。正方形トリミングなのでiPadでもiPhoneでも使えますが、iPhone用にトリミングされた縦長のものはこちらにあります。なんかアレですよね、波系好きですよねApple。

[Apple] macOS Sierra Wallpaper – Sierraちゃんのデフォルト壁紙

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

いやーWWDC終わりましたな。そしてハードウェア何も出ませんでしたな・・・。まぁデベロッパー向けのイベントなのでこれはこれで当然なのかもしれないけど、ちょっと寂しいですな。個人的には直前に発表されたMSによるLinkedIn買収のニュースのインパクトがはんぱなかった。
というわけで朝になってニュースサイト巡回してたら、新しく発表されたmacOS Sierraのデフォルト壁紙を見つけました。けどリンク先URL見ると分かるんだけど、これAppleのサーバに置いてあるんです。んで出処はどこかなー思って調べたらこのページでした。section.section-heroの背景画像として指定されていました。Macの壁紙に指定して、壁紙だけでも新OSの気分になれそうです。ほんのちょっとだけ。

[Game] Battlefield 1 Concept Art – バトルフィールド1のコンセプトアート

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

10月に発売が予定されているBattlefield 1のコンセプトアートがいっぱい置いてあります。透かしもナシだそうです。未来戦ばかりを舞台にするようになっちゃったCall of Dutyとは対照的に、WWIIどころかWWIにまで時代を遡ったBF1は、古い時代の戦闘描写を好む人達にとってはきっとタマらない作品になるでしょう。自分もどちらかというと「もうSFはいいから二次大戦舞台にしてくれよ、トンプソン銃撃たせてくれよ」というタイプなので、今からとっても楽しみです。けど今DivisionやってるしFallout4のDLCもやりたいし、Dark Souls 3もやりたいし・・・という感じで果たして参戦するかどうかは微妙です。

[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いらずのカルーセルとかイイっすね。