CSSで書かれたフラットデザインなiPhoneやiPad・「devices.css」
devices.css devices.cssはフラットデザインなiPhoneやiPadをCSSで書くためのコードです。シンプルで見やすいので、モニタ部分に画像をはめ込んでモックアップにしたりもできそうですね。利用シーンは多くはないで...
Resource - Webデザイナー向け
CSS3によるユニークなホバーエフェクトをまとめた・「iHover」
iHover iHoverはCSS3によるユニークなアニメーションホバーエフェクトをまとめて、パックにして配布するWebサイト。サークルタイプで20種類、スクエアタイプで15種類のエフェクトとソースが紹介されています。CSS3なので使...
iOS7向けのワイヤーフレームをIllustratorで作成する為のキット・「awesomekit.me」
awesomekit.me awesomekit.meはiOS7のワイヤーフレームをIllustratorで作成する為のキットです。マップやリスト、モーダルウィンドウなどなどUIコンポーネントは一通り揃っている印象でした。できる限り工...
IxDをチェックする為のリスト・「IxD Checklist」
IxD Checklist IxD Checklistは、その名の通り、インタラクションデザインのチェックリストです。項目はそれぞれ、アフォーダンス、フィードバックの精度、簡潔性、構造、一貫性などに分けられています。ザッと見直したり、...
WebベースのiOS7アプリ向けHTMLフレームワーク・「Framework7」
Framework7 Framework7はWebベースのiOS7アプリ向けに開発されたHTMLフレームワークです。iOS7のようなフラットなデザインで各UIコンポーネントもiOS7を意識した作りとなっています。ライセンスはMITとの...
アイソメトリックを利用したピクセルアートをcanvasで描く為のライブラリ・「Obelisk.js」
Obelisk.js Obelisk.jsはアイソメトリック（等角投影法）を利用したピクセルアートをHTML5 canvasで描くためのライブラリです。上記のようにGifアニメーションの作成も可能です。アイデア次第では面白いコンテンツ...
Flexboxを使ったCSSグリッドシステム・「Flexbox Grid」
Flexbox Grid Flexbox GridはCSS3のFlexboxを使用したRWD対応のグリッドシステムです。flexible boxを使う事により、軽量でシンプルな設計を実現できそうですね。対応ブラウザはCan I Use...
様々なスマフォアプリのFTUEをまとめている・「First Time User Experiences」
First Time User Experiences First Time User Experiencesは様々なスマフォアプリのUXで感じた良点や、改善点などをTumblrでレビューしているWebサイト。First Time U...
透過されたシームレスなパターン画像を配布する・「TRANSPARENT TEXTURES」
TRANSPARENT TEXTURES TRANSPARENT TEXTURESは透過されたシームレスなパターン画像を配布するWebサイトです。透過テクスチャは個人的には珍しかったので備忘録として。素材はダウンロードも可能ですが、提...
使い易さを重視したOSSのCSS/HTMLフレームワーク・「WEBPLATE」
WEBPLATE WEBPLATEは使い易さを重視したフロントエンドのフレームワークです。RWDやSASSにも対応しています。使いやすい、というのは本フレームワークの開発者さんの言葉を借りましたが、使いやすいかどうかは個人差もあると思...
クライアントに伝わるように、という事を目指したワイヤーフレーム用UIキット・「C.ROWE Wireframe Kit」
C.ROWE Wireframe Kit C.ROWE Wireframe Kitは、クライアントにしっかり意図が伝わるように、という事を考えて作られたワイヤーフレームのUIキットです。線でかかれたダミー画像を使うのではなく、例えばマ...
レスポンシブWebデザイン対応のシンプルなHTMLメールのフレームワーク・「CERBERUS」
CERBERUS CERBERUSはRWD対応のシンプルなHTMLメールのフレームワークです。GmailやYahoo!メールからOutlookやThunderbird、iOSやAndroidのメールに対応可能です。レイアウトのみで装飾...
ブラウザ上で動作するHTML5製のアニメーションエディタ・「Animatron」
Animatron Animatronはブラウザ上で動作するHTML5製のアニメーションエディタです。描画ツールやSVG、動画や音声のインポート等が可能となっています。アニメーションはタイムラインで調整しながら作成する、というもの。H...
ブラウザで作成出来る、HTML5製のフォントエディタ・「Glyphr」
Glyphr GlyphrはHTML5製のフォントエディタです。ブラウザ上でオリジナルのフォントをデザインする事が可能です。軽量でUIも割と使いやすい印象でした。また、Githubでもソースコードが公開されています・・・が、ライセンス...
GitHub製のテキストエディタ・「Atom」
Atom AtomはGithub製のテキストエディタです。CSS、JavaScript、HTML向けのもののようですね。スクリーンショットや詳細を読む限りではなかなか良さそうです。TextMateのテーマ等をインポートする事もできるみ...
Sublime TextやCoda、TextMate等の様々なテキストエディタのカラースキームを配布する・「colour-schemes」
colour-schemes colour-schemesは様々なテキストエディタのカラースキームをセットにしたパッケージでGithubで公開されています。しっかり数えてはいませんが、カラースキームの種類は70以上あるみたいです。ただ...
Bootstrap 3のベクターデータUIキット・「Bootstrap 3 UI Kit」
Bootstrap 3 UI Kit Bootstrap 3 UI KitはBootstrap 3のUIキットです。ベクターデータで配布されています。コンポーネントやアイコン、テーブル等が揃っています。サンプル画像もありますのでチェッ...
シンプルで見やすいMarkdownエディタ・「writebin」
writebin writebinはとってもシンプルなMarkdownエディタです。余計な機能がありませんので、とても見やすく、Githubにも送る事ができます。Readmeやライセンスなどのドキュメントを書くのに良さそうですね。 ...
UIとインタラクションデザインのパターンをGifアニメで紹介する・「useyourinterface.com」
useyourinterface.com useyourinterface.comはUIやインタラクションデザインのパターンをGifアニメで紹介してくれているTumblrのサイトです。それぞれGifアニメーションで動きを確認する事が出...
Webデザインのリソースサイトへのリンクを大量に収集している・「webdesignrepo」
webdesignrepo webdesignrepoはWebデザインに関するリソースサイトのリンク集です。ニュースサイトやインスピレーション、チュートリアルやスニペットなどなど目的に合わせて細かくカテゴリ分けされているので目的に合わ...
複数のアイコンフォントから任意のアイコンを検索出来る・「GlyphSearch」
GlyphSearch GlyphSearchは複数のアイコンフォントから任意のアイコンを検索出来るWebサービスです。フォントはFont Awesome、Glyphicons、Ionicons、Iconicの4種で、この中から任意の...
Font Awesomeのアイコンフォントにアニメーションエフェクトを加える為のCSS・「Font Awesome Animation」
Font Awesome Animation Font Awesome AnimationはFont Awesomeのアイコンフォントにアニメーションエフェクトを加える為のCSSです。CSSを読み込んで指定されたclassを加えればア...