Resource - Archives

iPhone, や、iPad、MacのアプリサイトのWebデザインギャラリー ・「App Sites」

App Sites App SitesはiPhoneやiPad、Macのアプリを紹介しているWebサイトのデザインギャラリーです。アプリデベロッパーの方のインスピレーション向上になりそう。Tumblrで作られています。 App ...

Web制作に役立つツールをまとめている・「WebPlatformTools.org」

WebPlatformTools.org WebPlatformTools.orgはWeb制作に役立ちそうな様々なツールをまとめているWebサイトです。カテゴリ分けもしっかりされていてサムネイルもあるので探しやすいかも。 Web...

任意のWebサイトの使用カラーを抽出する・「ColrGrabr」

ColrGrabr ColrGrabrは、任意のWebサイトで使用されているカラーを抽出するツール。使う機会は少なそうだけど、時には便利な事もあるかも。ブックマークレットも用意されています。 ColrGrabr
Ads

CSS3のコードスニペットと動作デモを紹介する・「CSSFlow」

CSSFlow CSS3を使ったエレメント等をデモと共に紹介するWebサイト。上2つは有料みたいですが下のは無料で利用出来るみたいです。スマフォサイトなんかと相性良さそうなエレメントが目立ちますね。 CSSFlow

CSSによる三角形をジェネレートできる・「CSS triangle generator」

CSS triangle generator CSSで三角形を簡単に作成出来るツールです。オールドブラウザのシェアもかなり低下していて良い傾向ですけど、まだ対応する必要があるケースもあるので覚えておくと便利かもしれない。 C...

ソースコードを画像化してInstagramライクに装飾できる・「Instacode」

Instacode Instacodeはソースコードを画像化してInstagramライクに装飾できるWebサービスです。マウスホイールで拡大、ドラッグで角度を設定できます。ネタ要素が強いツールですが、一部の方には需要があるかも。 ...

デバイスに応じたMedia Queriesのコードをコピペ出来るスニペット一覧表・「Media Query Snippets」

Media Query Snippets Media Query Snippetsは、任意のデバイスに対応する為のMedia Queriesのコードを一覧にしてコピペ出来るようにまとめているWebサイトです。チートシート的に使えて良さ...

テキストの差分をチェックするだけのシンプルツール・「Diff Checker」

Diff Checker Diff Checkerはテキストの差分をチェックするだけのシンプルなツールです。左と右のフィールド内のテキストの差分をハイライトします。軽量で地味に便利かもしれません。が、日本語対応はあまり期待できません。...

Webページの任意の箇所をハイライトして共有できる・「inFocus.cc」

inFocus.cc inFocus.ccは特定のWebページの任意の箇所をハイライトさせて共有できるWebツールです。画像として保存されるものではなく、マウスで設定して保存するとURLが発行される、というもの。特定の箇所をシンプルに...

PNGやPSDファイルとしてエクスポートできるグリッド生成ツール・「Modular Grid Pattern」

Modular Grid Pattern Modular Grid PatternはPNGやPSD形式でエクスポートできるグリッド生成ツールです。幅やカラム数を指定してダウンロードするだけ。PhotoShopのエクステンションもあるみ...

オンラインでシンプルなダイアグラムを生成出来る・「Graphity Diagram Editor」

Graphity Diagram Editor Graphity Diagram Editorはオンラインでシンプルなダイアグラムを生成できるWebツールです。マウスで直感的に作成、画像にエクスポートすることも出来ます。また、作成途中...

CSS3を使ったエレメントを簡単に作成出来るChrome拡張・「CSS-SHACK」

CSS-SHACK CSS-SHACKはChromeでCSS3を使ったエレメントを作成できるアプリケーションです。右のツールボックスで装飾するとリアルタイムで反映、そのままソースをエクスポートできるようになっています。レイヤー機能も付...

ベクターオブジェクトをソースコードに変換するIllustratorの拡張・「Drawscript」

Drawscript Drawscriptは、Illustratorで書いたベクターオブジェクトを様々なコードにコンバートするエクステンションです。拡張を使うと、リアルタイムでActionScript3.0、やCanvas、Objec...

一度だけダウンロードできるファイル転送サービス・「JustBeamIt」

JustBeamIt JustBeamItは一度だけダウンロードできるファイル転送サービスです。ファイルをドラッグ&ドロップするとアップロードされ、URLが発行されるので送りたい相手にそのURLを知らせる、というシンプルなもの。ファイ...

学生によって作成された作品のみを掲載しているWebギャラリー・「Student Show」

Student Show Student Showは、学生の方が作成した作品のみを紹介するWebギャラリーです。掲載されているものはイラストやロゴ、アニメーションなど様々。学校名でカテゴライズされています。Behanceの姉妹サイトの...

Font Awesomeのアイコンを利用したボタンを作成出来る・「CSS3Butt.in」

CSS3Butt.in CSS3Butt.inは、Font Awesomeで公開されているフォントを使ったボタンを手軽に作成出来るツールです。使いたいアイコンを選択し、色やテキスト、サイズを設定してコードをコピペするだけ。 CS...

猫の画像をダミー画像として使える・「{placekitten}」

{placekitten} {placekitten}は猫の画像をダミー画像として利用出来るツールです。URLでサイズやモノクロ指定をするだけでダミー画像が表示されます。 {placekitten}

Sass用のカラー調整Webツール・「SassMe」

SassMe SassMeはリアルタイムでSass用のカラー調整を行えるWebツールです。カラー関数のサブセットを視覚化してくれる、というシンプルなもの。使い方はベースカラーを入力してスライダーをマウスで操作するだけ。Githubでも...

transition-timing-functionのcubic-bezier関数を動作を見ながら設定出来る・「Visualize and manipulate CSS transition functions」

Visualize and manipulate CSS transition functions Visualize and manipulate CSS transition functionsはCSS3のtransition-t...

デバイス画像のモニターにサイトを表示させてレスポンシブ対応状態を確認する・「Am I Responsive?」

Am I Responsive? Am I Responsive?は、レスポンシブWebデザイン対応かどうかを確認するチェックツールです。デバイス画像のモニター部分はフレームの為、URLを指定すると上図のデバイス画像内に実際にサイトが...

様々なソーシャルメディアサイト内で使用するアイコンや背景を作成・「Social Media Image Maker」

Social Media Image Maker Social Media Image Makerは主要なソーシャルメディアサイト内で使うアイコンや背景などを作成出来るジェネレーターです。それぞれのソーシャルサイトで利用出来る画像...

動作を確認しながらCSS3のkeyframeを使ったアニメーションを作成・「Stylie」

Stylie Stylieは動作デモを確認しながらCSS3のkeyframeを利用したアニメーション用コードを作成するOSSのツールです。右のボックスで軸等をセッティングしていきます。MITライセンスでGithubでも公開されています...
Ads