シンプルで直感的な操作でモックアップ作成が出来るプロトタイプングツール・「Mockplus」
Mockplus Mockplusはシンプル且つ直感的な操作でモックアップ作成を可能にするプロトタイピングツールです。タブやカルーセル、ポップアップウィンドウ等の予め用意された200ほどのUIコンポーネントはドラッグ＆ドロップで追加、...
Resource - Webデザイン補助
シンプルなカラーパレット管理ツール・「colorcubo」
colorcubo colorcuboはシンプルなカラーパレット管理ツールです。シンプルですが、欲しい機能は一通り揃っており、余計な機能を削いでいる印象でした。主な特徴は複数パレット作成、作成した各パレットのフォルダ分け、ユーザー登録...
デザイナー向けリソースをコレクションしたキュレーションサイト・「Sans Francisco」
Sans Francisco Sans Franciscoはデザイナー向けのリソースを厳選、コレクションしたキュレーションサイトです。大量に公開されているリソースから自分が求めているものを探すだけでも苦労するので、探す手間を省けるよう...
各UXツールの特徴等をテーブルでチェック、比較出来る・「UX Tools」
UX Tools UX Toolsは各UXツールの特徴をまとめたWebサイトです。プロトタイピング、コラボレーションツール、ユーザビリティテストなどのカテゴリに分けられており、テーブルにまとめられていますので、ひと目で比較できるように...
Web制作におけるワイヤーフレームの作成ガイドが書かれたUXPin製のオンラインフリーブック・「The Hands-On Guide to Wireframing」
The Hands-On Guide to Wireframing The Hands-On Guide to WireframingはWeb制作におけるワイヤーフレーム作成のステップ・バイ・ステップが書かれたオンラインのフリー書籍で...
任意の画像を解析し、ベースカラーとなっている色のカラーコードとPANTONEのコードを抽出する・「Impalette」
Impalette Impaletteは任意の画像からカラーパレットを作成するツールです。パレットは画像内でベースとなっているカラーを元に作成されます。抽出された色はカラーコードだけでなく、PANTONE®で使用されているカラーコード...
Photoshop内でGoogle Fontsに公開されているフォントを選択出来るフリーのPhotoshopプラグイン・「Fontea」
Fontea FonteaはGoogle Fontsで公開されている700ものフォントをPhotoshop内で使えるようにするPhotoshopプラグインです。OS X、Winの両方に対応しています。検索やお気に入り機能も付いているの...
実装例とコードも確認出来るBootstrap 4用チートシート・「Bootstrap 4 Cheat Sheet」
Bootstrap 4 Cheat Sheet Bootstrap 4 Cheat Sheetは実装サンプルとコードも即座に確認出来るチートシートです。classをクリックするとコードスニペットと実装サンプルも確認出来る、というもの。...
UI / UXデザイナー向けの、紙にデバイスの形状を印刷する為のテンプレートのまとめ・「Sketchsheets」
Sketchsheets Sketchsheetsはモバイルやタブレットデバイスの形状を印刷するためのテンプレートです。UI/UXデザイナー向けに作成したそうで、スケッチ等の為に紙にタブレットやモバイルデバイスを用紙に印刷出来るように...
Flexboxのルールをライブプレビューでテスト、確認出来る・「Test CSS Flexbox Rules Live」
Test CSS Flexbox Rules Live Test CSS Flexbox Rules LiveはFlexboxのルールを学べるツールです。各プロパティの指示でどうレイアウトが変化するかをライブプレビューで確認出来ますの...
Web制作時に役に立つ（かもしれない）ツールを大量に公開している・「Richard’s Toolbox」
Richard's Toolbox Richard's ToolboxはWeb制作時に役に立ちそうなツールを大量に公開しているWebサイトです。Skypeや各SNSでの表示確認ツール、Webサイトのロードテスター、Whoisチェックツ...
任意のWebサイトのCSSから簡易的なスタイルガイドを作成するChromeエクステンション・「SNATCHR」
SNATCHR SNATCHRは任意のWebサイトのCSSをパースして簡易的なスタイルガイドを作成するChrome拡張です。背景カラー、テキストカラー、見出しに使われているフォントファミリーやサイズスタイルを割り出してスタイルガイドの...
Sketchでスマフォのプロトタイピングを可能にするプラグイン・「Silver」
Silver Silverはスマフォのプロトタイプ作成をSketchで出来るようにする為のプラグインです。機能を見る限り、なかなか高機能なプラグインのようですね。作成したプロトタイプは作成途中でも使用中のPCにモバイルデバイスを繋げて...
ランダムでカラーパレットを新しく開いたタブに表示してくれるChromeエクステンション・「Color Tab」
Color Tab Color Tabは美しいカラーパレットを新規タブにランダムで表示してくれるChrome拡張です。カラーパレットはColor Huntに投稿されたパレットからランダムに選ばれて表示されるようになっています。シンプル...
EvernoteやVine、Twitterなど、100以上の有名なWebサービスのブランドロゴをSVGアイコンとして公開する・「Simple Icons」
Simple Icons Simple Iconsは日本でもおなじみのEvernoteやTwitter、Facebookなどなど有名なWebサービスのロゴのSVGアイコンセットです。現在137のアイコンが用意されています。よく見かける...
シンプルな国産のプロトタイピングツール・「PLOGLESS」
PLOGLESS PLOGLESSは国産のシンプルなプロトタイピングツールです。直感的にマウス操作でモックアップ等の作成が可能です。国産なので言語の壁に悩むこともなさそうですね。プレビュー機能やQRコード発行等の機能も揃えられています...
Sketchに関するリソースやTips、チュートリアル等の情報をまとめているSketch用ニュースサイト・「SketchNews.co」
SketchNews.co SketchNews.coはSketchに関する様々な情報のキュレーションサイトです。ニュース形式でリソースやTips、チュートリアル、プラグイン、ツールなどの情報を日々紹介してくれています。Sketchユ...
フリーで配布されているFacebookのデザイナー作のリソースコレクション・「Facebook Design Resources」
Facebook Design Resources Facebook Design ResourcesはFBのデザイナーが公開しているフリーのリソース集です。モックアップ素材やスマフォ向けのUIキットなどを中心にMediumでの経験則...
Sketch用のUIキットやモックアップ等のリソースをまとめた・「Sketch Repo」
Sketch Repo Sketch RepoはSketch用のリソースをまとめて無料配布しているWebサイトです。UIキットやモックアップ、アイコンなどさまざま。なお、Photoshop用のリソースをまとめたPSD Repoもあるみ...
Sketchでアイコンフォントを手軽に使えるようにするプラグイン・「sketch-iconfont」
sketch-iconfont sketch-iconfontはSketchでアイコンフォントを手軽に使えるようにする為のプラグインです。Font AwesomeやIon icons等に対応してるそうです。尚、使いたいアイコンフォント...
高解像度な映像素材を無料で配布するストックビデオサイト・「FREE 4K STOCK FOOTAGE」
FREE 4K STOCK FOOTAGE FREE 4K STOCK FOOTAGEは高解像度な映像素材を無料で配布しているストックビデオサイトです。サイズが4kのさまざまな映像を公開・配布してくれています。個人利用は勿論、商業利用...
CC0の綺麗な写真素材を配布する・「Negative Space」
Negative Space Negative Spaceは著作権放棄の綺麗な写真を配布するWebサイトです。配布されている素材はCC0となっていますので自由に利用可能です。よくあるストックフォトサイトですね。沢山覚えておいて損は無い...