OSSとしても公開されているHTMLチェックツール・「HTMLHint」 HTMLHint HTMLHintはOSSとして公開されているHTMLの構文チェックツールです。従来の高性能なものではなく、シンプルなツールですが、インラインのCSSやJSもチェックする事ができます。エラー箇所はx印が付き、マウスホバ...2014.07.12 | 10時17分42秒
閲覧中のWebサイトのブレークポイントに沿ったプレビューを作成するChromeエクステンション・「Emmet Re:View」 Emmet Re:View Emmet Re:Viewは閲覧中のWebサイトのCSSからブレークポイントを検出し、そのサイズに合わせたプレビューをその場で作成してくれるChromeエクステンションです。それぞれのプレビューはスクロール...2014.07.06 | 10時13分27秒
画像をクリック時に全画面表示するスクリプト・「Intense Images」 Intense Images Intense Imagesは画像をクリックした際に全画面表示するスクリプトです。非依存型で、単体で動いてくれます。フルスクリーン化だけでなく、マウスを動かしてスクロールする事も可能です。うまく説明出来な...2014.07.04 | 10時20分33秒
動画やGIFで確認出来るiOSアプリのUIモーションギャラリー・「CAPPTIVATE.co」 CAPPTIVATE.co CAPPTIVATE.coはiOSアプリのUIモーションを動画やGIFで確認出来るデザインギャラリーです。様々なアプリのUIモーションを手軽に確認出来るのは有難いですね。実際に触ってみないと何とも言えない部...2014.07.02 | 10時26分26秒
コメントアウトや空要素等を取り除けるHTML圧縮ツール・「HTML Minifier」 HTML Minifier HTML MinifierはHTMLを圧縮するツールです。コメントアウトやスペースの除去、引用符の削除、空の要素、空の属性の除去などが可能です。それぞれの項目はチェックボックスで選択する事で圧縮します。HT...2014.07.01 | 10時31分08秒
CSSのbackground-blend-modeとgradientを使った背景パターンを公開する・「CSS Gradients with background-blend-mode」 CSS Gradients with background-blend-mode CSS Gradients with background-blend-modeはタイトル通り、background-blend-modeとgradie...2014.06.27 | 10時25分41秒
段落に直接コメントできるMediumスタイルを実装出来るスクリプト・「SideComments.js」 SideComments.js SideComments.jsはMediumのように、段落毎にコメントできるスタイルを導入できるスクリプトです。jQueryに依存しています。従来のコメントエリアは基本的に最下部にあるでしょうし、長文の...2014.06.24 | 10時30分00秒
Photoshopで2Dアニメーションを作るためのリソースをまとめている・「Photoshop Animation」 Photoshop Animation Photoshop AnimationはPSでアニメーションを作るための情報をまとめているWebサイトです。基本的にはAnimator's Toolbarというプラグインを利用して作成する為の情...2014.06.23 | 10時59分32秒
コンポーネント別にまとめられたUIデザインギャラリー・「Call to Idea 」 Call to Idea Call to IdeaはWebサイトのコンポーネント別でデザインをまとめているギャラリーサイトです。ログインページやタブ、フォーム等の様々なデザインが展示されています。全体のバランスが重要なWebデザイン...2014.06.22 | 10時22分19秒
Google製のマルチデバイス対応Boilerplate・「Web Starter Kit」 Web Starter Kit Web Starter KitはGoogle製のWeb制作スターターキットです。マルチデバイス対応のレスポンシブなBoilerplateとなっています。パフォーマンスも最適化済みの様です。この辺はさすが...2014.06.20 | 10時04分22秒
tableのデータを様々なフォーマットでエクスポート出来る様にするスクリプト・「HTML Table Export」 HTML Table Export HTML Table Exportはtableに書いたデータを様々なフォーマットでエクスポート出来るようにするスクリプトです。jQueryに依存します。対応フォーマットはPDFやJSON、PNG、X...2014.06.17 | 10時23分35秒
input要素のラベルにアニメーションエフェクトを追加するスクリプト・「FancyText」 FancyText FancyTextはformのinput要素に指定したラベルテキストにアニメーションエフェクトを追加するスクリプトです。jqueryに依存しています。フォーカスすると、ラベルが入力の邪魔にならないように外に出たり非...2014.06.16 | 10時35分49秒
グルーピングや入れ子、RWDにも対応の、エレメントの高さを揃えるスクリプト・「jquery.matchHeight.js」 jquery.matchHeight.js jquery.matchHeight.jsは様々な状況に対応可能な、エレメントの高さを揃えるスクリプトです。jQueryに依存しています。グルーピングされた要素やネストされた要素内のエレメン...2014.06.15 | 10時13分26秒
利用されているWebフォント名と、そのフォントの表示テストを行えるブックマークレット・「Type Sample」 Type Sample Type SampleはWebサイトの各エレメントで設定されているWebフォントの名前と、そのフォントを任意のテキストで表示テスト出来るブックマークレットです。任意のWebサイトで起動すると、各要素にカーソルを...2014.06.14 | 11時06分50秒
Webサイトにシンプルなスクロールエフェクトを追加できるスクリプト・「ScrollMe」 ScrollMe ScrollMeはWebページにシンプルなスクロールエフェクトを追加する為のスクリプトです。jQueryに依存しています。特別な設定は必要なく、スクリプトを読み込んで指定のclassを追加、エフェクトを追加したい要素...2014.06.13 | 10時20分46秒
多数のコンポーネントが備わったCSSフレームワーク・「Maxmertkit」 Maxmertkit Maxmertkitはタイポグラフィやテーブル、ボタンやタブなどなどWebサイトに必要なコンポーネントを大量に備えたCSSデザインフレームワークです。RWDにも対応しています。Bootstrapのような使い方が出...2014.06.09 | 10時20分15秒
WordPressでメガメニューを実装出来るプラグイン・「JQuery Mega Menu Widget」 JQuery Mega Menu Widget JQuery Mega Menu WidgetはWordPressでメガメニューを実装できるプラグインです。ECサイトのような大量のコンテンツを持つWebサイトでもユーザーが迷いにくいナ...2014.06.07 | 10時26分07秒
PhotoshopやBlender等のショートカットマップ・「Application Shortcut Mapper」 Application Shortcut Mapper Application Shortcut MapperはPhotoshopやBlender等のアプリのショートカットキーマップ。OSやアプリを選択すると、それぞれに割り当てられて...2014.05.31 | 10時33分04秒
Tumblrのオリジナルテーマを作成する為のHTML5製テンプレート・「tumblr boilerplate」 tumblr boilerplate tumblr boilerplateはTumblrのオリジナルテーマを作成するためのスターターテンプレートです。HTML5で作られています。装飾は一切なく、よく利用されるタグが概ね用意されています...2014.05.26 | 10時30分42秒
Webデザイナーの為のキュレーションサービス・「oozled」 oozled oozledはWebデザイナー向けのキュレーションサービスです。RWDやJS、CSS、Photoshop、モックアップツールやテキストエディタ、タイポグラフィなどなど様々なカテゴリが用意されています。無駄な情報もなく、シ...2014.05.25 | 10時07分05秒
手軽にガイドとグリッドを追加できるPhotoshop拡張・「Griddify」 Griddify Griddifyは自動でグリッドやガイドを追加できるPsプラグインです。幅やグリッドの数値を設定するだけで引いてくれます。また、範囲内で引くことも可能のようです。動画が分かりやすいのでチェックしてみては如何でしょうか...2014.05.24 | 10時20分25秒
テンプレートも用意されている軽量なレスポンシブWebデザイン対応CSSフレームワーク・「Responsee」 Responsee Responseeは軽量で直感的に使えるCSSフレームワーク。直感的と感じるかどうかは個人差はあるかもしれませんが、本サイトでそう謳っていましたのでそうなんでしょう。RWDに対応しており、PSDも配布されています。...2014.05.19 | 10時25分02秒