Resource - モックアップ

3Dなスマフォのモックアップを作成できる・「threed.io」

threed.io threed.ioは3Dなスマフォのモックアップを作成できるジェネレーターです。よくあるSS合成ツールが3Dに対応している、みたいなもの。任意の画像をアップロードし、モニタに合成、好みの角度から見た状態の画像を作成...

FeatherやFont Awesomeなどのアイコンを色やサイズをパスに指定するだけで表示できる・「icongram」

icongram icongramはサイズや色をURLに指定するだけで表示出来るサービスです。一時期はやったダミー画像サービスの表示方法やUnsplash itのようにパスにオプションを指定して表示させる事ができる、というもの。パ...

SVGで書かれたワイヤフレーム用のステンシルを検索、ダウンロードできる・「littleplaneapp.com」

littleplaneapp.com littleplaneapp.comはSVGで書いたワイヤーフレーム用のステンシルを探してDL出来るサービスです。SVGでワイヤーフレームを書くという発想が個人的にはあまり無かったのですがブラウザ...
Ads

UI / UXデザイナー向けの、紙にデバイスの形状を印刷する為のテンプレートのまとめ・「Sketchsheets」

Sketchsheets Sketchsheetsはモバイルやタブレットデバイスの形状を印刷するためのテンプレートです。UI/UXデザイナー向けに作成したそうで、スケッチ等の為に紙にタブレットやモバイルデバイスを用紙に印刷出来るように...

スマフォやタブレットのモニタに任意の画像を合成してモックアップを作成できる・「Smartmockups」

Smartmockups Smartmockupsはスマフォやタブレット、Apple Watchのようなウェアラブルデバイスのモニターに任意の画像を合成出来るWebサービスです。よく見かける合成サービスですね。以前ご紹介したMocke...

シンプルなディスカッションフォーラムを構築出来るオープンソースのソフトウェア・「Flarum」

Flarum Flarumはシンプルなディスカッションフォーラムを構築出来るPHP製のソフトウェアです。OSSとしてソースコードが公開されています。インストールも手軽で、軽量且つ高速(mithril.jsが使われています)、スマフォ対...

閲覧中のWebページのワイヤーフレームをオーバーレイ表示出来るChromeエクステンション・「Instant Wireframe」

Instant Wireframe Instant Wireframeは閲覧中のWebページのワイヤーフーレムを表示するChrome拡張です。起動すると閲覧しているWebページの画像部分がダミー画像になったりコンテナがオーバーレイ表示...

ブラウザで使えるモダンデザインなインタラクションデザインツール・「Plexi」

Plexi Plexiはブラウザで動作するモダンデザインなUIのインタラクションデザインツールです。シンプルで分かりやすい印象です。プロトタイプを作成出来る・・・はずなんですが、Windowsでは動作しませんでした。OSXもWinもサ...

Web制作の際に作成するフローチャートやワイヤーフレームの為の素材集・「UI TILES」

UI TILES UI TILESはWeb制作プロジェクトの際に作成されるフローチャートやサイトマップ、ワイヤーフレーム作成時に使える素材のキットです。フォーマットもPSDやAI、Sketchなどが用意されています。シンプルで使いやす...

任意の画像をアップロードし、PCモニター画像に合成してモックアップを作成してくれる・「Magic Mockups」

Magic Mockups Magic Mockupsは任意の画像を、予め用意されているPCのモニター画像に合成してくれるジェネレーターです。以前ご紹介したPlaceItと同じようなサービスになりますが、Magic Mockupsは合...

シンプルなワイヤーフレーム作成ツール・「wireframe.cc」

wireframe.cc wireframe.ccはシンプルなワイヤーフレーム作成ツールです。既存のブラウザ風のキャンバス上にエレメントを配置し、ワイヤーフレームを作成する事が出来ます。エレメントはいくつかの色に変更したり、ボーダーの...

Photoshop内でFlickrから画像を検索できるプラグイン・「Pictura」

Pictura PicturaはPsでFlickrから画像を検索出来るプラグインです。直接Flickr上の任意の画像にアクセスし、配置する事が可能です。著作権フィルタの利用も出来るみたい。モックアップの作成時なんかには便利かもですね。...

スマフォサイトにも対応可能の、インタラクティブなプロトタイプを作成する為のツールキット・「FRAMER.JS」

FRAMER.JS FRAMER.JSはスマフォサイトにも対応したプロトタイプ作成の為のフレームワークです。アニメーションを取り入れることでインタラクティブなプロトタイプを作成できる、という事を目的としているようです。使い慣れるまで少...

リアルタイムで共同作業が可能なスケッチボードサービス・「Sketchboard」

Sketchboard Sketchboardは複数人で共同作業が可能なスケッチボードサービスです。離れた場所にいる相手と、リアルタイムでダイアグラムを描くことが可能です。ある程度知った相手となら作成して送信、説明などの工程も省けるよ...

印刷用のグリッド生成ツール・「Gridzzly.com」

Gridzzly.com Gridzzly.comは印刷用のグリッドジェネレーターです。方眼紙やドット方眼紙、ノート用紙に対応しており、幅も設定できます。地味に便利ですね、これ。 Gridzzly.com

手書き風のベクターUIキット・「Jolly UI」

Jolly UI Jolly UIは手書き風のUIキットのベクター素材です。キットの中はAIファイルやPSDファイル、手書き風のフォントが揃えられています。フォントは英字フォントなのでアレですが、モックアップの作成に使えそうですね。 ...

パブリックドメインの高品質な画像を日々更新、配布する・「Public Domain Archive」

Public Domain Archive Public Domain Archiveは品質の高めな画像をパブリックドメインで提供してくれるWebサイトです。数はまだ多くはありませんが、毎日更新するプロジェクトも進行中なのですぐに増え...

クライアントに伝わるように、という事を目指したワイヤーフレーム用UIキット・「C.ROWE Wireframe Kit」

C.ROWE Wireframe Kit C.ROWE Wireframe Kitは、クライアントにしっかり意図が伝わるように、という事を考えて作られたワイヤーフレームのUIキットです。線でかかれたダミー画像を使うのではなく、例えばマ...

人物の顔のダミー画像生成ツール・「ui Faces」

ui Faces ui FacesはUI設計に使える人物の顔のダミー画像生成ツールです。サイズや間隔の変更、角丸化などが出来る様になっています。許可等が気になったのですが、モックアップ等に使用してもいい、という方が自分でアップロードし...

Bootstrap 3のベクターデータUIキット・「Bootstrap 3 UI Kit」

Bootstrap 3 UI Kit Bootstrap 3 UI KitはBootstrap 3のUIキットです。ベクターデータで配布されています。コンポーネントやアイコン、テーブル等が揃っています。サンプル画像もありますのでチェッ...

RWD施行時に使える、デバイス毎のモニターサイズを視覚的に把握できるチートシート・「Responsive Web Design Cheat Sheet」

Responsive Web Design Cheat Sheet Responsive Web Design Cheat SheetはレスポンシブWebデザインの施行時に使えるモニターサイズのチートシートです。各メジャーなデバイスを...

iPadやiPhoneなどのデバイス向けのフラットデザインなモックアップ用素材・「Flat Apple’s Devices Mockup」

Flat Apple's Devices Mockup Flat Apple's Devices MockupはiPadやiPhone、Macbook等のApple製デバイス向けに作られたフラットデザインなモックアップ素材です。PSD...
Ads