軽量で非依存のパララックス実装スクリプト・「Rellax.js」 Rellax.js Rellax.jsは軽量で他ライブラリに依存しないパララックス実装スクリプトです。少し前に流行って今は割と普通に見かけるようになった視差効果のあるWebページの制作をサポートしてくれる、というもの。ファイルサイズは...2016.12.30 | 10時40分31秒
任意のWebサイトや要素に設定されたCSSを解析するChromeエクステンション・「CSS Peeper」 CSS Peeper CSS Peeperは任意のWebページやそのページの各コンテナに設定されたCSSを解析するChromeエクステンションです。解析したいページでエクステンションを起動すると、Webページのfont-familyや...2016.12.29 | 10時24分03秒
大量のCSSフレームワークやライブラリ、スニペット、ツール等をコレクションしている・「CSSReflex」 CSSReflex CSSReflexは大量のCSSフレームワークやライブラリ、スニペットやツール等をコレクションしているWebサイトです。よくあるキュレーションサイトですね。レスポンシブの計算機やフィルターツールなどもありますが、特...2016.12.28 | 10時33分35秒
モジュール形式のWordPressテーマ開発向けフレームワーク・「Cherry Framework」 Cherry Framework Cherry FrameworkはWordPressテーマ開発フレームワークです。GPLライセンスの元、OSSとして公開されています。専用のプラグイン(高度検索化、不動産ツールなど)も複数開発されてお...2016.12.23 | 10時12分33秒
disple:tableを使ったモバイルファーストなCSSグリッドシステム・「Table Grid」 Table Grid Table Gridはdisple:tableを使ったモバイルファーストなCSSグリッドシステムです。といっても実用性を考えて作った重要性の高いプロジェクトではなく、単に実験的に作ったようです。floatやfle...2016.12.21 | 10時25分58秒
複数のストックフォトサイトやフォント、モックアップ、動画の配布サイトをその場で探せる・「TheStocks」 TheStocks TheStocksはロイヤリティフリーの写真を配布するストックフォトサイトやフォント配布サイト、モックアップ、カラースキームや動画を配布する各サービスをその場で探せるWebサイトです。以前ご紹介したのですが、以前は...2016.12.20 | 10時03分47秒
さまざまなUIデザインをギャラリー形式で紹介している・「UIDB.io」 UIDB.io UIDB.ioはさまざまなUIデザインを紹介するデザインギャラリーです。パーツつごとではなく、ページ単位のSSを紹介しているようです。そのせいもあってか、少し見にくいかな・・?良いものを厳選してるというより、豊富な数が...2016.12.19 | 10時07分22秒
ブラウザで使える、Framer.jsを使ったプロトタイプのインタラクションテストツール・「Prototyp」 Prototyp PrototypはFramer.jsを使ったプロトタイプのインタラクションテストを行えるテストツールです。誰でも無料で利用する事が出来ます。作成したプロトタイプはURLを発行、モバイルデバイスで動作確認も可能です。そ...2016.12.17 | 10時25分44秒
シンプルで非依存、軽量なカルーセルスクリプト・「Siema」 Siema See the Pen Siema - nested carousels by kachibito (@kachibito) on CodePen. Siemaはシンプルで軽量、非依存型のカルーセルを実装するスクリプトで...2016.12.14 | 10時30分08秒
レスポンシブなペラページを直感で作成、CC0ライセンスでダウンロード出来る・「Launchaco Website Builder」 Launchaco Website Builder Launchaco Website BuilderはRWD対応のペラページを直感的に作成、ダウンロード出来るWebサイトビルダーサービスです。作成されたファイルはCC0ライセンスで配...2016.12.11 | 10時30分44秒
複雑なCSSアニメーションを処理する為のシンプルなスクリプト・「Choreographer.js」 Choreographer.js Choreographer.jsは複雑なCSSアニメーションを設定、処理する為のシンプルなスクリプトです。アニメーションを定義すると、指定した要素にインラインCSSが付与、DOMイベントを介して実行、...2016.12.10 | 10時26分00秒
任意の画像にCSSのfilterとblend modeを設定した状態を表示、コードを出してくれる・「CSS filter and blend mode Generator」 CSS filter and blend mode Generator CSS filter and blend mode Generatorは任意の画像にフィルターやブレンドモードを書けた状態を確認、コードを提出してくれるWebツー...2016.12.07 | 10時36分24秒
覚えておくと便利な正規表現のパターンをまとめた・「Regex Hub」 Regex Hub Regex Hubは覚えておくと便利な正規表現のパターンをまとめているプロジェクトサイトです。メールやHTMLタグ、日付、カラーコードや電話番号などに対応出来る正規表現が用意されており、その場でマッチするかをテスト...2016.12.05 | 10時17分41秒
CSSで出来る画像エフェクトをまとめた・「Image Effects with CSS」 Image Effects with CSS Image Effects with CSSはCSSのみで出来る画像へのエフェクト効果を実装するコードをまとめているWebサイトです。主にブレンドモードやフィルターを使ったエフェクトを紹介...2016.12.04 | 10時25分00秒
雪の結晶を作成、svgで保存出来る・「Snowflaker」 Snowflaker Snowflakerは雪の結晶を作成してsvgで保存できるWebサービスです。設定できる項目は1つにするか並べるか、雪の幅、模様のみとなっています。よくある季節ネタサイトですかね。クリスマス向けにいかがでしょうか...2016.12.03 | 10時30分08秒
書いたコードを画像化してTwitterに投稿出来るシンプルなツール・「Alter」 Alter Alterは書いたコードをTwitterで教えたい時に地味に便利なWebツールです。テキストエディタでコード書いてスクショ撮ったりとか面倒だから作ったそう。textareaにコードを貼って送信すれば画像化されるので、そのま...2016.11.30 | 10時47分15秒
設定したplaceholderにアニメーションエフェクトを付与する・「FoxHolder 」 FoxHolder FoxHolderはinput等に設定したplaceholderをフォーカス時にアニメーションエフェクトを付与する為のセットです。エフェクトは15種類用意されています。基本的にはCSSとJSファイル(jQuery...2016.11.28 | 10時22分00秒
AIが作ってくれる手軽なロゴデザインジェネレーター・「Logojoy」 Logojoy LogojoyはAIが作るロゴデザインジェネレーターです。好みのロゴデザインサンプルを複数選択、社名(ブランド名など)と色、キャッチコピーを入力すると、その設定状況に合ったロゴを複数提出してくれます。作るまでは無料です...2016.11.25 | 10時03分23秒
SSの画像をアップロードするとMac ChromeやWin Firefoxなど、ブラウザのフレームに合成してくれる・「Browser Frame」 Browser Frame Browser Frameはスクリーンショットとして撮った画像をアップロードすると、ブラウザのフレームのイラストに合成してダウンロード出来るWebサービスです。ブラウザはMacのChromeやFirefox...2016.11.24 | 10時31分42秒
任意のWebページでグリッドと要素のアウトラインを表示するChromeエクステンション・「tachyons-x-ray」 tachyons-x-ray tachyons-x-rayは任意のWebページでグリッドと要素のアウトラインを表示するChromeエクステンションです。上図のように、Webページで起動させれば方眼紙のようなグリッドと要素のアウトライン...2016.11.23 | 10時12分22秒
HTML要素1つで、やや複雑な動きが出来るCSSスピナー・「CSSPIN」 CSSPIN CSSPINは1つの要素で、上のようなそこそこ複雑な動きが作れる、CSSのみで作れるスピナーです。それぞれの動きはそれぞれCSSファイルが用意されているので必要な動きのファイルだけ読み込めば使えます。なかなか使いやすそう...2016.11.22 | 10時33分00秒
Webデザイナー向けのリソースを目的別にまとめている・「Freestack」 Freestack FreestackはWebデザイナー向けのリソースキュレーションサイトです。無料のものを中心に収集しているようです。カラーツールやブラウザの拡張機能、モックアップやストックフォト、タイポグラフィ関連などなど。ざっと...2016.11.21 | 10時48分51秒