Resource - Webデザイナー向け

軽量で非依存のパララックス実装スクリプト・「Rellax.js」

Rellax.js Rellax.jsは軽量で他ライブラリに依存しないパララックス実装スクリプトです。少し前に流行って今は割と普通に見かけるようになった視差効果のあるWebページの制作をサポートしてくれる、というもの。ファイルサイズは...

任意のWebサイトや要素に設定されたCSSを解析するChromeエクステンション・「CSS Peeper」

CSS Peeper CSS Peeperは任意のWebページやそのページの各コンテナに設定されたCSSを解析するChromeエクステンションです。解析したいページでエクステンションを起動すると、Webページのfont-familyや...

大量のCSSフレームワークやライブラリ、スニペット、ツール等をコレクションしている・「CSSReflex」

CSSReflex CSSReflexは大量のCSSフレームワークやライブラリ、スニペットやツール等をコレクションしているWebサイトです。よくあるキュレーションサイトですね。レスポンシブの計算機やフィルターツールなどもありますが、特...
Ads

モジュール形式のWordPressテーマ開発向けフレームワーク・「Cherry Framework」

Cherry Framework Cherry FrameworkはWordPressテーマ開発フレームワークです。GPLライセンスの元、OSSとして公開されています。専用のプラグイン(高度検索化、不動産ツールなど)も複数開発されてお...

disple:tableを使ったモバイルファーストなCSSグリッドシステム・「Table Grid」

Table Grid Table Gridはdisple:tableを使ったモバイルファーストなCSSグリッドシステムです。といっても実用性を考えて作った重要性の高いプロジェクトではなく、単に実験的に作ったようです。floatやfle...

複数のストックフォトサイトやフォント、モックアップ、動画の配布サイトをその場で探せる・「TheStocks」

TheStocks TheStocksはロイヤリティフリーの写真を配布するストックフォトサイトやフォント配布サイト、モックアップ、カラースキームや動画を配布する各サービスをその場で探せるWebサイトです。以前ご紹介したのですが、以前は...

さまざまなUIデザインをギャラリー形式で紹介している・「UIDB.io」

UIDB.io UIDB.ioはさまざまなUIデザインを紹介するデザインギャラリーです。パーツつごとではなく、ページ単位のSSを紹介しているようです。そのせいもあってか、少し見にくいかな・・?良いものを厳選してるというより、豊富な数が...

ブラウザで使える、Framer.jsを使ったプロトタイプのインタラクションテストツール・「Prototyp」

Prototyp PrototypはFramer.jsを使ったプロトタイプのインタラクションテストを行えるテストツールです。誰でも無料で利用する事が出来ます。作成したプロトタイプはURLを発行、モバイルデバイスで動作確認も可能です。そ...

シンプルで非依存、軽量なカルーセルスクリプト・「Siema」

Siema See the Pen Siema - nested carousels by kachibito (@kachibito) on CodePen. Siemaはシンプルで軽量、非依存型のカルーセルを実装するスクリプトで...

レスポンシブなペラページを直感で作成、CC0ライセンスでダウンロード出来る・「Launchaco Website Builder」

Launchaco Website Builder Launchaco Website BuilderはRWD対応のペラページを直感的に作成、ダウンロード出来るWebサイトビルダーサービスです。作成されたファイルはCC0ライセンスで配...

複雑なCSSアニメーションを処理する為のシンプルなスクリプト・「Choreographer.js」

Choreographer.js Choreographer.jsは複雑なCSSアニメーションを設定、処理する為のシンプルなスクリプトです。アニメーションを定義すると、指定した要素にインラインCSSが付与、DOMイベントを介して実行、...

任意の画像にCSSのfilterとblend modeを設定した状態を表示、コードを出してくれる・「CSS filter and blend mode Generator」

CSS filter and blend mode Generator CSS filter and blend mode Generatorは任意の画像にフィルターやブレンドモードを書けた状態を確認、コードを提出してくれるWebツー...

覚えておくと便利な正規表現のパターンをまとめた・「Regex Hub」

Regex Hub Regex Hubは覚えておくと便利な正規表現のパターンをまとめているプロジェクトサイトです。メールやHTMLタグ、日付、カラーコードや電話番号などに対応出来る正規表現が用意されており、その場でマッチするかをテスト...

CSSで出来る画像エフェクトをまとめた・「Image Effects with CSS」

Image Effects with CSS Image Effects with CSSはCSSのみで出来る画像へのエフェクト効果を実装するコードをまとめているWebサイトです。主にブレンドモードやフィルターを使ったエフェクトを紹介...

雪の結晶を作成、svgで保存出来る・「Snowflaker」

Snowflaker Snowflakerは雪の結晶を作成してsvgで保存できるWebサービスです。設定できる項目は1つにするか並べるか、雪の幅、模様のみとなっています。よくある季節ネタサイトですかね。クリスマス向けにいかがでしょうか...

書いたコードを画像化してTwitterに投稿出来るシンプルなツール・「Alter」

Alter Alterは書いたコードをTwitterで教えたい時に地味に便利なWebツールです。テキストエディタでコード書いてスクショ撮ったりとか面倒だから作ったそう。textareaにコードを貼って送信すれば画像化されるので、そのま...

設定したplaceholderにアニメーションエフェクトを付与する・「FoxHolder 」

FoxHolder FoxHolderはinput等に設定したplaceholderをフォーカス時にアニメーションエフェクトを付与する為のセットです。エフェクトは15種類用意されています。基本的にはCSSとJSファイル(jQuery...

AIが作ってくれる手軽なロゴデザインジェネレーター・「Logojoy」

Logojoy LogojoyはAIが作るロゴデザインジェネレーターです。好みのロゴデザインサンプルを複数選択、社名(ブランド名など)と色、キャッチコピーを入力すると、その設定状況に合ったロゴを複数提出してくれます。作るまでは無料です...

SSの画像をアップロードするとMac ChromeやWin Firefoxなど、ブラウザのフレームに合成してくれる・「Browser Frame」

Browser Frame Browser Frameはスクリーンショットとして撮った画像をアップロードすると、ブラウザのフレームのイラストに合成してダウンロード出来るWebサービスです。ブラウザはMacのChromeやFirefox...

任意のWebページでグリッドと要素のアウトラインを表示するChromeエクステンション・「tachyons-x-ray」

tachyons-x-ray tachyons-x-rayは任意のWebページでグリッドと要素のアウトラインを表示するChromeエクステンションです。上図のように、Webページで起動させれば方眼紙のようなグリッドと要素のアウトライン...

HTML要素1つで、やや複雑な動きが出来るCSSスピナー・「CSSPIN」

CSSPIN CSSPINは1つの要素で、上のようなそこそこ複雑な動きが作れる、CSSのみで作れるスピナーです。それぞれの動きはそれぞれCSSファイルが用意されているので必要な動きのファイルだけ読み込めば使えます。なかなか使いやすそう...

Webデザイナー向けのリソースを目的別にまとめている・「Freestack」

Freestack FreestackはWebデザイナー向けのリソースキュレーションサイトです。無料のものを中心に収集しているようです。カラーツールやブラウザの拡張機能、モックアップやストックフォト、タイポグラフィ関連などなど。ざっと...
Ads