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

Browse By

Category Archives: 未分類

[Web Design] UI-Patterns – パーツごとにWeb UIの作例を集めたギャラリー

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

Webサイトのパーツごとの作例を集めたギャラリーサイト。“Screenshots”からギャラリーを見る事ができます。アカウント登録、ブログの記事、コメント欄、ディザーページ、エラーページ、Modal表示、ナビゲーション、タグ、サムネールなどの各種カテゴリーがズラっと並んでるので、見たいパーツのみを抽出してブラウズできます。カラーによるフィルタリングなどもでき、また自分でスクリーンショットを投稿する事もできます。デザイナーのネタ帳としてナイスなギャラリーサイト。

[WordPress] 20 New and Free Minimal WordPress Themes – ミニマルデザインなワードプレステーマまとめ

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

ミニマルデザインなワードプレス用テーマのまとめ記事。デザインがシンプルなテーマだけに、カスタマイズもしやすいかと。この記事のナイスな点は、紹介されているテーマがレスポンシブレイアウトに対応してれば「Responsive」と書いてある点。半分くらい対応してます。またこの記事内では紹介されてないけど、YOKOというテーマもレスポンシブ対応テーマとしてはなかなかイイんじゃないか、とか思ってます。ウチのブログもWP3.1用のテーマに移行したいんスけどねぇ。

[Javascript] Retina.js – Retinaディスプレイデバイスからアクセスがあった時、自動で倍の解像度の画像にリプレイスしてくれるJS

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

サイトにRetinaディスプレイデバイスからアクセスがあった際、もし該当イメージに“@2x”がファイル名末尾に付く画像があったら、そっちにリプレイスしてくれるというJS。高解像度版の画像に“@2x”と付けるだけでRetina対応ができるので便利ですね。ちなみにこの“@2x”という命名ルール、iOS Appの制作でも使われるものなので、App制作者の人には馴染みのある文字列です。またLESSでの実装にも対応しているようで、こっちならJSを使わなくてもイイみたい。

[CSS3] CSS Scroll Effects – なんだか凝った感じのスクロールエフェクト

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

なにこれかっこいい。凝った感じのスクロールエフェクトが紹介されてます。ページ内に複数あるエリアの中でスクロールさせると、下からアニメーションしながらコンテンツが出てきます。ソースコード落としてみましたが、CSS3とJSを使ってやってるようです。リスト表示のスクロール装飾にイイっすねこれ。ダウンロードはGitHubから

[Photoshop] PSD Box – PSD素材の配布サイト

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

ブラシやPSDファイルの素材配布サイト。それほど量は多くないんだけど、なかなか質の高い素材が揃ってるので紹介。あとチュートリアル動画とかもあります。他人のPSDファイルの中身を見るいい機会になりそうです。ところでPSDなんちゃらってサイト多いですよね。一時期のCSSなんちゃらみたいなアレでしょうか。

[Icon] Flat, simple icons for interface design – フラットでシンプルなアイコンセット

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

フラットでシンプルな作りのアイコンセットまとめ。結構多くのセットがまとめられてて、この手のシンプルアイコンを探す際に便利そう。有料・無料のものが混在して紹介されてますが、有料モノの方が若干多いかなーという印象。値段、アイコンの数、配布フォーマットなどもまとめられてる点がナイスです。

[Presentation] impress.js – クールなWebベースのプレゼン用JS

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

JSを使ったクールなプレゼンテーション用フレームワーク。キーボードのスペースバー or 十字キー左右で進んだり戻ったりできます。パっと見わりと普通なんだけど、スライドを進めて行くと色々と凝ったエフェクトになってる点に気付きます。iPhone 4Sのメインビジュアルで使われてた回転するエフェクトにも似てますな。また最初のページでは全ページが一覧されており、任意の場所クリックで該当スライドにジャンプする事もできるようです。jQueryなどは使われておらず、またHTML5で記述されてる点もポイント。こういうのでプレゼンする人ってかっけーなぁって最近思います。

[Typography] 40 MindBlowing Typography Artworks for your Design Inspiration – クールなタイポグラフィー作例まとめ

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

クールなタイポグラフィー作例40をまとめた記事。どれもかっけース(そうでないのもありますが)。縦構図の作品が多く、Webというよりは印刷物としてのタイポ作例といった内容。タイポのうまいデザイナーとか、なんつーか憧れますわ。印刷物やタイポ組む時のネタ帳に是非これひとつ。