Figmaで公開されているデザインシステムをコレクションしている・「Design Systems For Figma」
Design Systems For Figma Design Systems For FigmaはFigmaで公開されているデザインシステムをコレクションしているWebサイトです。 AWSやUber、IBMやMS、Airtab...
Resource - レイアウト
スマフォやタブレット向けのプロトタイピングツール・「MockingBot」
MockingBot MockingBotはスマフォやタブレット向けのプロトタイピングツールです。使いやすさに拘って開発したそうで、頭痛がおきない使い勝手の良さが特長だそうです。触った感想は、頭痛が起きるかどうかは個人によりけりでしょ...
CSS Gridを使って六角形のオブジェクトを並べたハニカムなレイアウトを組めるスタイルシート・「Hexi-Flexi-Grid」
Hexi-Flexi-Grid Hexi-Flexi-Gridはハニカム構造のレイアウトを組めるCSSグリッドシステムです。JavaScriptは使われておらず、CSS Gridベース、六角形はclip-pathが使われています。こう...
Bootstrapのひな形を手軽に作成出来る・「lollytin」
lollytin lollytinはBootstrapのひな形を手軽に作成できるツールです。大まかな型をドラッグ&ドロップで作成、コードを発行してくれます。1から作るよりは1を作ってくれるツールを使う方が工数稼げる、みたいな使い方にな...
ブラウザで使えるモダンデザインなインタラクションデザインツール・「Plexi」
Plexi Plexiはブラウザで動作するモダンデザインなUIのインタラクションデザインツールです。シンプルで分かりやすい印象です。プロトタイプを作成出来る・・・はずなんですが、Windowsでは動作しませんでした。OSXもWinもサ...
Flexboxを使ったレイアウトを手軽に作成出来る・「Fibonacci」
Fibonacci FibonacciはFlexboxを使ったレイアウトを手軽に作成出来るOSSです。カラムを増やしてソースをコピペするだけのシンプルなもので、MITライセンスの下でソースが公開されています。使い方はすぐに分かると思い...
コンポーネント別にまとめられたUIデザインギャラリー・「Call to Idea 」
Call to Idea Call to IdeaはWebサイトのコンポーネント別でデザインをまとめているギャラリーサイトです。ログインページやタブ、フォーム等の様々なデザインが展示されています。全体のバランスが重要なWebデザイン...
Tumblrのオリジナルテーマを作成する為のHTML5製テンプレート・「tumblr boilerplate」
tumblr boilerplate tumblr boilerplateはTumblrのオリジナルテーマを作成するためのスターターテンプレートです。HTML5で作られています。装飾は一切なく、よく利用されるタグが概ね用意されています...
WebサイトでPhotoshopライクにガイドを引けるルーラーを利用出来る様にするブックマークレット・「RulersGuides.js」
RulersGuides.js RulersGuides.jsはWebサイトにPhotoshopのようにガイドを引けるルーラーを設置できるブックマークレットです。ショートカット等も用意されています。同じ操作感とは言えませんが、個人的に...
Webサイトでよく用いられるパーツやコンポーネントのデザインフレームワーク・「Refills」
Refills RefillsはWebサイトでよく用いられるUIのソースをパッケージ化したフレームワークです。Bourbonを開発したthoughtbotが公開したフレームワークのようですね。ドロップダウンやリスト、フッター、アイキャ...
クライアントに伝わるように、という事を目指したワイヤーフレーム用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のメールに対応可能です。レイアウトのみで装飾...
スマフォ向けの美しいデザインのUIキット・「Flatastic Mobile UI Kit」
Flatastic Mobile UI Kit Flatastic Mobile UI Kitはスマフォ向けの美しいデザインのUIキットです。よく使われるインターフェースは勿論、スマフォならではのUIなども含まれています。見やすくてい...
手書き風のアプリ向けUIキット・「Basiliq」
Basiliq Basiliqは手書き風のアプリ向けUIキットです。各種コンポーネントもよく使われるものが揃っています。ワイヤーフレームを作る際に便利そうですね。ライセンスはCCです。 Basiliq
ダイナミックなグリッドレイアウトを実装するスクリプト・「Free Wall」
Free Wall Free Wallはダイナミックなグリッドレイアウトを実装するスクリプトです。jQuery又はZeptoに依存します。モニターの幅に合わせてレイアウトが可変、ネストされたボックスにも対応しています。オプションも豊富...
レスポンシブWebデザインのリソースをまとめているハブサイト・「Responsive Design Knowledge Hub」
Responsive Design Knowledge Hub Responsive Design Knowledge HubはRWDの情報を収集したナレッジハブサイトです。定義に始まり、チュートリアルやツール、インスピレーション向上...
Twitter Bootstrapで作られた様々なテンプレートを配布する・「Start Bootstrap」
Start Bootstrap Start BootstrapはTwitter Bootstrapで使える様々なテンプレートを配布するWebサイトです。ギャラリーサイト用、フルスクリーンなレイアウト、ブログ風など多岐に渡ります。スター...
モバイルフレンドリーなWebアプリの為のUIコンポーネント・「Brick」
Brick BrickはモバイルフレンドリーなWebアプリの為に作られたUIコンポーネント集です。mozillaから提供されているみたいですね。同じくmozilla提供のX-Tagが使われています。カレンダーやデイトピッカー、スライダ...
フラットなWebサイトを構築する為のフロントエンドフレームワーク・「Furatto」
Furatto FurattoはフラットなWebデザインのサイトを迅速に構築する為のフロントエンドフレームワークです。Sassを使ってるみたい。ボタンやフォーム、テーブルからページネーションやツールチップなどのコンポーネント、カルーセ...
ミニマルなマークアップで書かれたCSSフレームワーク・「Markup Framework」
Markup Framework Markup Frameworkはミニマルなマークアップで書かれた、モバイルファーストなレスポンシブWebデザイン対応のCSSフレームワークです。必要最低限、をコンセプトに構成したようです。ベースとし...
PNGやEPS形式のワイヤーフレーム作成用キット・「WIRED」
WIRED WIREDはワイヤーフレームを作成するためのメディアファイルキットです。Webサイトでよく利用される様々なコンポーネントの素材がパッケージングされています。また、iPhone5用の素材もあるみたいです。 WIRED
ドラッグ&ドロップでBootstrapのレイアウトを作成出来る・「LayoutIt!」
LayoutIt! LayoutIt!hは、D&DでBootstrapのレイアウトを作成出来るWebツールです。まだベータ版で若干バグ的なものも確認出来ますが、それなりに作成出来るようです。フォームやボタン、プログレスバーなどのコンポ...