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

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

by on 12月.17, 2014, under Web Design

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

コメントを書く :, , , ,

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

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

by on 12月.17, 2014, under Misc

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

コメントを書く :,

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

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

by on 12月.16, 2014, under Icon

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

コメントを書く :, ,

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

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

by on 12月.15, 2014, under Misc

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

コメントを書く :, ,

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

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

by on 12月.11, 2014, under Misc

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

コメントを書く :,

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

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

by on 12月.11, 2014, under Web Design

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

コメントを書く :, , ,

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

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

by on 12月.10, 2014, under Typography

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

コメントを書く :, ,

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

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

by on 12月.09, 2014, under UI Design

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でデザインしてきたデザイナーにとっては(まぁ俺なんですが)、結構難しいんですよねこの手の話。けどまぁ今後必要とされる知識だと思うので、計算機片手に勉強するのもイイんじゃないかと。

コメントを書く :,

[Freebie] Yosemite UI Kit – Sketch用のYosemite UIキット

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

by on 12月.08, 2014, under Material

Sketch用のYosemite UIキットが無料で配布されています。メアド突っ込むとダウンロード先のURLが送られてきて、そこから落とせるようです。@2xでのRetinaディスプレイ用書き出しにも対応しているようですね。Mac用App開発する時や、Webのモック作る時なんかに使えそうです。ウチのMacは全部Yosemiteに移行したけど、使って数ヶ月経つと過去のMacのUIが古臭く見えてきますな。

コメントを書く :, , ,

[Javascript] PhotoSwipe – モバイル端末にも対応したフォトギャラリーJS

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

by on 12月.05, 2014, under Material

PCだけでなくモバイル端末にも対応した、JSフォトギャラリー。画像のサムネールをクリック or タップすると、ウィンドウサイズいっぱいに表示されます。ブラウザウィンドウ内にModal表示されるので、Lightboxの代替として使えそう。タッチデバイスのスワイプ操作やキーボードによる操作に対応し、またSNSへの投稿や画像のダウンロード、キャプションの表示切り替えなど、かなり多機能な印象です。UIはGoogle画像検索に、スワイプ操作の挙動はFacebookのMobile Appに似てるなーと思いました。いやこれイイですね。次からModal表示させたい時これ使お。

コメントを書く :,

Web Services

My Profile by iddy

Twitter Status