Resource - Archives

手軽にスクリーンショットを編集、シェア出来るWebサービス・「Snaggy」

Snaggy Snaggyはスクリーンショットを手軽に編集、共有できるWebサービスです。WindowsならPrint ScreenしてからSnaggyページに戻ってペースト(Ctrl+v)するだけ、任意のWebページのSSを撮りたい...

モーショングラフィックスの基本要素を元素記号表で表現した・「モーション周期表」

モーション周期表 モーション周期表はモーショングラフィックスの基本要素を元素記号表で表現したプロジェクトサイトです。武蔵野美大の方の卒業制作作品みたいです。以下、引用。 モーション周期表はモーションへの理解を深めるために作成...

大量のデバイスに対応可能なMedia Queriesジェネレーター・「Simple CSS Media Queries」

Simple CSS Media Queries Simple CSS Media Queriesは大量のデバイスに対応可能なMedia Queriesのコードジェネレーターです。iPhoneは2GからiPhone6+まで、Andor...
Ads

Twitter公開の絵文字のtwemojiをFont Awesomeライクに使える・「Twemoji Awesome」

Twemoji Awesome Twemoji AwesomeはTwitterがOSSとして公開している絵文字、twemojiをFont Awesomeライクに使えるようにする為のプロジェクトです。カナダに在住されている日本の方(El...

テキストにCSS3のアニメーションエフェクトを付与するスクリプト・「txt.wav」

txt.wav txt.wavは上記のようにテキストにCSS3ベースのアニメーションエフェクトを付与するスクリプトです。非依存型で単体で動作しますが、基本的にJavaScriptは1文字ずつ包括するシンプルなもので、エフェクトはkey...

商用でも個人でも無料で利用できるロゴやアイコン、UI、写真、音源、動画などを配布するプロジェクト・「Stocky」

Stocky Stockyは商用でも個人でも無料で利用できる各ベクターグラフィックや高品質な写真、音源、動画などを配布するプロジェクトです。やや小規模なプロジェクトですので数はそう多くはありませんが、他に見ない素材が揃っている印象です...

シンプルで直感的な操作でモックアップ作成が出来るプロトタイプングツール・「Mockplus」

Mockplus Mockplusはシンプル且つ直感的な操作でモックアップ作成を可能にするプロトタイピングツールです。タブやカルーセル、ポップアップウィンドウ等の予め用意された200ほどのUIコンポーネントはドラッグ&ドロップで追加、...

CSSをショートハンドにしてくれるジェネレーター・「SHRTHND」

SHRTHND SHRTHNDはCSSをショートハンドにしてくれるジェネレーターです。ショートハンドにする事で軽量化、可読性の向上に繋がります。左カラムにコードを入力すれば右カラムにショートハンドにしたCSSショートハンドが出力されま...

モバイルサイトの為の軽量でフレキシブルなCSSフレームワーク・「Mobi.css」

Mobi.css Mobi.cssはモバイルサイトの為のCSSフレームワークです。よくあるモバイルファーストよりもよりモバイルにフォーカスして作成されているようで、PCサイトではQRコードを表示するスペースを用意出来るclassが用意...

タイポグラフィに関するツールやリソース、ファウンドリ、Webフォント等の情報をまとめたリンク集・「Typeworld」

Typeworld Typeworldはタイポグラフィに関するリンク集ページです。ツールやリソース、有料/無料のフォント配布サイト、フォントファウンドリ、Webフォントに関する情報、インスピレーション向上サイトなど様々。この手のまとめ...

小規模なプロジェクトのための軽量でミニマルなCSSフレームワーク・「Siimple」

Siimple Siimpleは軽量、ミニマルなレスポンシブWebデザイン対応のCSSフレームワークです。フロントエンド開発のキックスタートに貢献出来るように作成したそう。フォームやテーブル、アラート、ボタンやグリッドなど必要最低限の...

Bootstrapでのtableにソートやページネーション、検索機能等を付与するスクリプト・「jQuery Bootgrid」

jQuery Bootgrid jQuery BootgridはBootstrap上でのtableを多機能にするスクリプトです。jQueryに依存します。thにカスタムデータ属性を与える必要がありますが、tableをthの内容毎にソー...

基本的な部分だけ抑えたモダンでミニマルなCSSリセット・「minireset.css」

minireset.css minireset.cssは基礎部分だけ抑えたモダンなCSSリセットです。各見出しのフォントサイズのリセット、ブロック要素のmargin、paddingリセット、全要素へのbox-sizingの導入、各メデ...

LPや料金ページ、商品紹介ページ等のUIを中心に収集しているWebデザインギャラリー・「UI Temple」

UI Temple UI Templeはランディングページやプライスページ、プロダクトページ、コンタクトフォームページ、ポートフォリオ等、コンバージョンに結びつきやすいページのUIをコレクションしているキュレーションサイトです。特にそ...

YoutubeやVimeo、Vineなどのembedをレスポンシブにする非依存の軽量スクリプト・「superembed.js」

superembed.js superembed.jsはYoutubeやVimeo、Vine等の動画共有サービスのembedをレスポンシブWebデザインに対応する為のスクリプトです。CSSで動画要素を包括して、といった作業の必要もなく...

GithubやGitLabでIDEのようにファイルをツリー表示するChromeエクステンション・「Octotree」

Octotree OctotreeはGithubやGitLabでファイルをツリー表示するChromeエクステンションです。FirefoxやOperaの拡張もあります。上図のようにIDEライクなツリー表示にしてくれるのでファイルへのアク...

様々なフィードバックの為のツールをコレクションしている・「feedbacktools.org」

feedbacktools.org feedbacktools.orgは様々なフィードバックツールをキュレーションしたWebページです。Webサイトやスマフォ等のアプリを対象とした、ユーザーからのフィードバックやUX/UI専門、バグ、...

シンプルなカラーパレット管理ツール・「colorcubo」

colorcubo colorcuboはシンプルなカラーパレット管理ツールです。シンプルですが、欲しい機能は一通り揃っており、余計な機能を削いでいる印象でした。主な特徴は複数パレット作成、作成した各パレットのフォルダ分け、ユーザー登録...

JavaScriptのTipsを不定期で紹介する・「JS Tips」

JS Tips JS TipsはJavaScriptのちょっとしたヒントをコードとともに不定期で紹介するWebサイトです。基本的にはバニラなスクリプトが紹介されており、コードはGithubでも公開されています。8/23現在で58ほど。...

自身の技術スキルをアニメーションする棒グラフで表示できるjQueryスクリプト・「skills」

skills skillsは自身の技術スキルをアニメーションする棒グラフで表現するためのスクリプトです。jQuery依存です。よくある、スクロールに応じてアニメーションしながらグラフが設定値まで伸びる、というもの。アニメーションや...

高品質な写真を著作権放棄で配布する・「SKUAWK PUBLIC DOMAIN PHOTOS」

SKUAWK PUBLIC DOMAIN PHOTOS SKUAWK PUBLIC DOMAIN PHOTOSは高品質な写真をパブリックドメインで配布するWebサイトです。よくあるストックフォトサイトのように大量に保管、配布されてはお...

閲覧中のYoutubeのURLにconvという文字を加えるだけで動画をMP4やMP3、Gif等にコンバート・「CONV.」

CONV. CONV.はYoutubeをMP3やMP4、Gifアニメ等に変換するサービスです。よくあるやつですね。裁判になったtubefireとかgifs.comなどの先発サービス同様に、Youtubeの動画のURLにconvという文...
Ads