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

Browse By

Monthly Archives: 12月 2014

[Web Template] Beetle – Responsive HTML Template – レスポンシブレイアウト&パララックススクロールなHTML5テンプレート

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

レスポンシブ・レイアウトで、かつパララックス・スクロールにも対応したHTML5テンプレート。需要の多いこの2つに対応しているってのはなかなかナイスです。静的なHTMLテンプレートは無料で、Wordpressテーマとなっているものは48ドル(今現在)で販売されています。またマップのパーソナライズや、グリッドレイアウト、カルーセル(イメージスライダー)にも対応しているので、モダンなコンテンツ表示手法にはひと通り対応しているという印象。なかなかイイんじゃないでしょうかこれ。

[Misc] 28 Awesome Holiday Gifts for Designers – デザイナーが喜ぶホリデーギフト

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

デザイナーが喜びそうなホリデーギフトを28個紹介した記事。デザイナーが好きそうなというだけあって、オシャレな小物が多いです。けどオシャレな小物って別にデザイナーじゃなくても誰でも好きだよな、とか思いました。Instagramの枕ちょっと欲しい。

[Icon] 20 Gorgeous Free Icon Fonts to Use in Your Designs – フリーで配布されているアイコンフォントまとめ

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

フリーで配布されているアイコンフォントをまとめた記事。20セット紹介されてます。よくあるシンプルなピクトグラムっぽいのから、手書き風のもの、天気や家具など特定のジャンルに特化したものなど色々あります。Webフォントとしてサイトに組み込んでしまえば、サイト内の装飾にサクっと使えるようになるので、こういうの便利ですな。

[Wallpaper] Aerial Wallpapers – 航空写真のiPhone 6 Plus用壁紙

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

iPhone 6 Plus用の、航空写真壁紙を集めたサイト。Plusの解像度なので、無印6でももちろん使えます。サムネールにマウスオーバーした後、虫眼鏡のアイコンクリックで元画像を表示できます。気に入ったものだけダウンロードする事も、すべての画像をまとめてダウンロードする事もできます(Download Allというリンクがあり、226MBです)。自分も6 Plus使ってますが、解像度が高いのでなかなか壁紙見つからないんですね。こういうまとめはなかなかナイス。

[Misc] 22 Pictures That Prove That 2014 Is The Damn Future – 2014年がクソ未来だって事がよく分かるGif

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

今年話題になった技術って実はかなり未来じゃね?っていうまとめ記事。アニメーションGifを使って22の事例が紹介されています。いやこれ興味深いですね。こうして見ると2014年って、車にはまだタイヤが付いてるしチューブの中を走る電車も街中にはないけど、未来感スゴいっすね。少なくともこれが未来世界だ! はめつ編みたいにはなってなくて良かったです。

[Javascript] boyega – サイトにストームトルーパーを追加できるJS

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

サイトに時限式のストームトルーパーを仕込めるJS。あ、これ真面目な記事じゃないですネタ記事ですw Star Wars Episode 7のトレーラーを観ていない人、そもそもスターウォーズに興味が無い人にとっては少しもオモしろくないのでスルーしてください。ちなみにこちらのページに動作デモがあります。表示されたら、フォースの力を信じて忍耐を持って少し待ちましょう。トレーラーとほぼ同じ間で彼が出てきますから。ちなみに導入方法は簡単で、JSリンクの1行をサイトに追記するだけ。簡単ですね。ところで彼、誰なんでしょうね? ジャンゴ・フェットとは俳優が違うし、クローン元が別人なのかな。フォースと共にあらんことを。

[Typography] Collection of Fresh Text Effect Tutorials – テキストエフェクトのチュートリアルまとめ

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

テキストエフェクトのチュートリアルをまとめた記事。いろんなエフェクトが紹介されてますが、モノによっては3Dの機能とか使ってます。レイヤースタイルだけで作れそうなものもちらほら。タイポグラフィーやロゴデザインの際のネタ調としても使えそうです。

[UI Design] Designers guide to DPI – デザイナーのためのDPI入門

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

4Kなどの高解像度ディスプレイ向けにコンテンツを作る際に役立つ、DPIに関する入門的な知識をまとめた記事。DPI(Dots Per Inch)とPPI(Pixels Per Inch)の違いとは何か、同じピクセル数でPPIが違うとどう見えるのか、ディスプレイ解像度についてと、4Kディスプレイとは何か、Retinaディスプレイとは何か、各種iOSデバイスのPPIについて、AndroidデバイスのPPIについて(9-patchに関する記述もあります)、MacやChrome OSのPPI、そして最後に高解像度環境向けのコンテンツ制作に必要なデザインアプリケーションについて述べられてます。英語リソースで、かつなかなかの長文なので読むだけでも大変ですが、DPIに関する基礎知識が1ページにまとまっているので、勉強するには最適のリソースかと。今まで1pixel 1dotでデザインしてきたデザイナーにとっては(まぁ俺なんですが)、結構難しいんですよねこの手の話。けどまぁ今後必要とされる知識だと思うので、計算機片手に勉強するのもイイんじゃないかと。