Resource - Webディレクター向け

シンプルで使いやすいCSSアニメーションライブラリ・「Hexa」

Hexa Hexaはシンプルで使いやすいCSSによるアニメーションライブラリです。要素に指定のclassを付与するだけでアニメーションを与える事が出来ます。classはhexaを基本に、jumpやrotateなど、分かりやすいキーワー...

ホイールタイプのシンプルなカラーパレットジェネレーター・「wheel」

wheel wheelはホイール上にスキームを生み出すカラーパレットツールです。デフォルトでは21色が用意されており、ツールバーで色相や明度等を調整すれば自動で全カラーが変更されるようになっています。ライセンスの明記はありませんがGi...

一般的なUIを組み合わせてHTMLテンプレートを作成できるソフトウェア・「Stitches」

Stitches Stitchesはよく利用されるUIをD&Dで組み合わせて好みのWebサイトテンプレートを作成できるソフトウェアです。作りもシンプルで個人的に好みだったので備忘録。デフォルトではTailwind CSSがベースとなっ...
Ads

シンプルな設計の軽量なFlexboxベースCSSフレームワーク・「Flexit」

Flexit Flexitはシンプルな設計の軽量CSSフレームワークです。Flexboxベースとなっています。row、two、columnなど、そのままで意味が通じる命名規則を採用しています。flexboxの為のユーティリティクラ...

CSSのコードと解説を共有できる・「CSS Playground」

CSS Playground CSSのコードと解説を共有できるPlaygroundツールです。左ペインに解説、右ペインにはjsfidleライクなエディタ兼ビューエリアが設置されており、解説を見ながら動作を確認、学習できる、というもの。...

ランディングページを簡単に構築出来るLP作成ツール・「Flauntly」

Flauntly FlauntlyはLPを簡単に作成出来るLP作成ツールです。D&Dとテキスト入力等の簡単な操作で完了、コーディングスキルは不要です。沢山のコンポーネントを組み合わせてLPを完成させる事ができます。よくあるツールですが...

モダンなデザインのBoostrapベースのOSSな管理画面テンプレート・「Shards Dashboard Lite」

Shards Dashboard Lite Shards Dashboard Liteはモダンなデザインの管理画面テンプレートです。OSSで公開されており、Bootstrapをベースに構築されています。以前ご紹介したUIキットのSha...

ミニマルなWebサイトやWebアプリを作成できるオープンソースソフトウェア・「Itty.bitty」

Itty.bitty Itty.bittyはミニマルなWebサイトやWebアプリを作成できるOSSです。HTMLやCSS、JavaScriptなどを入力すればそのまま反映される、というもの。Twitter等で長い文章を手軽に共有できる...

LaravelでCMSを作るためのオープンソースのツールキット・「Twill」

Twill TwillはLaravelの為のCMS作成ツールキットです。Laravelパッケージとして提供されているようです。ドキュメントを見る限りCMSに必要とされる機能は一通りそろえられているようです。OctoberとかLaval...

ソートや内容の編集等が可能なシンプルなデータテーブル実装ライブラリ・「Frappe DataTable」

Frappe DataTable Frappe DataTableはシンプルながらパワフルなデータテーブル実装ライブラリです。列でのソートやセル内の内容の編集、カラムのリサイズ等が可能となっています。上サンプルでは変更していません...

データをグラフ等に可視化出来るオープンソースのスクリプト・「picasso.js」

picasso.js picasso.jsはデータビジュアライゼーションの為のスクリプトです。OSSとして公開されています。様々なグラフにも対応しており、プラグインによる拡張も可能との事。使い方も割と優しい印象でした。可もなく不可もな...

カスタマイズ可能な疑似的なスクロールバーを実装するスクリプト・「fakeScroll」

fakeScroll fakeScrollはカスタマイズ可能なスクロールバーを実装する為のスクリプトです。::-webkit-scrollbarのようにスクロールバーの見た目をカスタマイズし、各ブラウザで統一する為に疑似的にHTML要...

Google Fontsの各フォントをタグ付けして探しやすく整理している・「Font Library」

Font Library Font Libraryは大量に存在するGoogle Fontsのフォントをタグでカテゴライズし、探しやすくするプロジェクトです。OSSとして公開されています。タグ付けし、整理して探しやすくしたもので、各アイ...

安全性を強く意識したストレージサービス・「CRYPTEE」

CRYPTEE CRYPTEEは、安全性をより強く意識して作られたセキュアなストレージサービスです。文章や画像を暗号化して保存してくれるとの事。ゼロ知識証明を利用したクラウドタイプのストレージサービスで、匿名で利用可能、AES-256...

なるべく強固なパスワードを入力して貰う為のフォームのサンプル

Better Password Form See the Pen Better Password Form by kachibito (@kachibito) on CodePen. Codepenでパスワード設定の際のフォーム...

UI構築の際に役立ちそうなリソースを収集した・「Ui Goodies」

Ui Goodies Ui GoodiesはUI構築の際に役に立ちそうなリソースをまとめているキュレーションページです。アクセシビリティや色、エフェクト、フレームワークや素材など適切にカテゴライズされており、ストレスなく探すことができ...

開発者向けの動画だけを大量に収集、検索できる・「DevTube」

DevTube DevTubeは開発者向けの動画を大量に収集、検索できるサービスです。技術やスピーカー、言語(プログラミング言語だけでなく、スピーカーが何語で話しているか)などで絞り込むことも出来ます。個人的にはもう少し探しやすいカテ...

OSSのバグ修正等をクラウドソーシングライクに依頼できるプラットフォーム・「IssueHunt」

IssueHunt IssueHuntはオープンソースのissueをクラウドソーシングライクに依頼できるプラットフォームです。開発者のGitHub上のリポジトリをンポート、issueを上げて、他開発者にバグ修正を依頼可能にする、という...

任意のWebサイトのスクリーンショットを撮ってEMBEDも出来る・「Snapito」

Snapito Snapitoは任意のWebサイトのSSを撮影、EMBED出来るスクショサービスです。EMBEDというかURLが発行される(Example)のでそのまま利用できる、というもの。モニタサイズの変更や画像サイズなどのオプシ...

CC0のオリジナルな写真素材を配布するストックフォト・「Ulna」

Ulna Ulnaはオリジナルの写真をCC0で配布するストックフォトサイトです。素材はフォトグラファーがCC0でアップロードしてくれる素材を中心としているようで、フォトグラファーはアップロードした素材のアクセス数に応じた報酬が与えられ...

商用でも無料でクレジット表記も不要の、人物イラストを中心に使いやすそうなイラストを大量に公開している・「イラストマン」

イラストマン イラストマンは商用/非商用でも無料且つクレジット表記無しで利用可能なフリーのイラスト配布サイトです。国産サービスで量も結構な量が公開されています。人物イラストが多く、汎用的なものも多いので使いやすい印象でした。やや少しク...

350以上あるWebフレンドリーでオープンソースなSVGアイコンセット・「BoxIcons」

BoxIcons BoxIconsはWebフレンドリーなオープンソースのSVGアイコンセットです。350以上のアイコンが用意されています。使い方はfont-awesomeライクでCSSを読み込み、classを付与すればいいだけです。 ...
Ads