直訳すると「模型」を意味するモックアップは、デザインの完成イメージをつかむサンプルのようなもの。 たとえば、作成したスマホアプリの画面や、商品のパッケージ、Tシャツのデザイン、文庫本や雑誌のカバー。 モックアップなしで商品を作成すると、「なんかイメージと違う」といったクレームに発展し、最悪のケースは最初から作り直しということも。 そんな事故を防ぐのはもちろん、完成した作品にほんの一手間を加えることで、まるで使っているようなイメージを湧かせやすいというメリットも。 今回は、高品質なモックアップ素材を無料ダウンローできる便利サイト17選をご紹介します。 本当は教えたくない、モックアップ素材の無料配布サイトまとめ Adobe Stock 無料で取得できるAdobe IDさえあれば、だれでも無料で利用できるAdobe Stock。7万点を超える素材をダウンロードでき、モックアップも多く揃います。
フロントエンドの開発時に仮の API を使いたいってシチュエーションはわりとあると思います。 そんな時に、Mock Service Worker を使うと便利だったのでまとめます。 Mock Service Worker とは？ Mock Service Worker は、ネットワークレベルで API リクエストをインターセプトして mock のデータを返すためのライブラリです。API リクエストを含む処理のテストや、開発時の mock サーバーの代替として利用出来ます。 テストでの利用については以前こちらの記事でまとめました。 今回は開発時のモック API としての利用について書きます。 開発用の API というと、JSON Serverが有名ですが、Mock Service Worker では Service Worker を使ってリクエストを返すため、別プロセスでローカルサーバーを立
はじめに 最近のウェブアプリではバックエンドをREST-APIとして用意し、 フロントエンドはREST-APIから引っ張ってきたデータをReactやVueといったフレームワークで描画することが多いと思います。 このようなウェブアプリを開発する際に問題となるのはバックエンドとフロントエンドを並行して開発しにくいということです。バックエンドができなければフロントエンドはどんなデータが来るのかわからず描画できませんし、バックエンドもフロントエンドからどのようなリクエストが来るか決まらないと実装ができません。 そのため、最初にREST-APIの仕様を定めて、その仕様に沿ったモックサーバを作成し、 フロントエンドはバックエンドが完成するまでそれを用いて開発を進めるということが行われます。 さてそのREST-APIの仕様とはどのように記述されるのでしょうか？ 1. 自然言語で記述する 一番よくある場合
Meta supports a diverse audience around the world and an equally diverse set of devices. To emphasize that in our design mocks, we redrew a range of devices to show the global diversity of the people using our products. Many of the devices come with a bitmap of the device with and without shadows. Please do not repackage and redistribute these as your own. Please see disclaimer for full details.
VueアプリケーションのHTTP通信にaxiosを使用しているケースを例として、axios-mock-adapterを使用してHTTP通信部分をモック化したユニットテストを試してみました。 こんにちは。サービスグループの武田です。 ある程度の規模のSPA（シングルページアプリケーション）を構築する場合、ほぼ100%APIサーバーとの通信が発生します。その場合の通信は、一般的にはHTTP/HTTPSを使用し、またアプリケーション内でもHTTPクライアントライブラリを使用することになります。さてそういったライブラリを使用しているモジュールのユニットテストは一般的に難しいものになります。なぜなら通信相手のサーバーは常に動いているとは限らず、また途中のネットワーク状況にも結果が左右されてしまいます。通信が失敗するパターンをテストしようにも都合よくエラーになってくれるとは限りません。ユニットテストの
この記事では、Webデザインやグラフィックデザインの制作が捗る、便利な最新オンラインツールをまとめています。 これらのツールやサービスを利用すれば、デザイン制作で面倒な作業も手軽に、短時間で行うことができ、より効果的にプロジェクトを進めることができます。制作ワークフローに取り入れてみてはいかがでしょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. デザインツール 2. モックアップツール 3. デザインからコードへの変換ツール 4. プロトタイプツール 5. アイコン素材パック 6. コラボレーション、共同作業ツール 7. 面白ツール 8. デザインコレクション ウェブデザイン制作を爆速に！便利な最新オンラインツールまとめ デザインツール SVG Colorizer 用意されたアイコンやキャラクターなどのSVG素材の配色をカスタマイズできる
デザイナーのための フリーAdobe XD用UIキット20種「20 Free Adobe XD UI Kits for Web & Mobile App Designers」 数年前まで、UIデザインはPhotoshopとSketchを中心に行われていましたが、2017年に正式リリースをしたAdode XDが着実にアップデートを重ね、新たなUIデザインツールとして頭角を表してきています。今回は、WEBやUIデザインに役立つ、Adobe XDのUIキットを20種をまとめた「20 Free Adobe XD UI Kits for Web & Mobile App Designers」をご紹介します。 Free Adobe XD Collaboration App by Edwin Delgado – Dribbble どのキットも、無料で利用できるので、チェックしておくと重宝してくれそうです
外部サービスとの連携などのテストを行う際、テスト環境に制約があったり処理に時間がかかるなどの理由でHTTPモックサーバーが欲しくなることがあります。 本記事ではGo言語で書かれたHTTPモックサーバー、Mmockをご紹介します。 Mmock Mmock | GitHub MmockはGo言語で書かれたHTTPモックサーバーです。 README.mdでは、主な特徴として以下があげられています。 JSONもしくはYAMLでのモック定義 レスポンスにフェイク用のデータ or リクエストのデータを利用できる パラメータを含んだパスを定義可能 ワイルドカードによるマッチング メソッド、URL、クエリパラメータ、ヘッダ、クッキー、リクエストボディでリクエストをマッチング リスタートせずにモックを編集可能 ブラウザでのリクエストおよびログの参照 シナリオに沿ったステートフルな振る舞い 部分的なプロキシモ
こんにちは。ジークレストでデザイナーをしています佐藤です。今回は、私が担当している「茜さすセカイでキミと詠う」の開発現場でAdobeXDを用いたことによりUI設計の作業効率が2倍になった効率化事例をご紹介いたします。 【参考URL】 アドビの新しいUXデザインツール、Adobe XD (Preview 1) 登場！使い方をクイックに解説 AdobeXDとは Adobe Experience Design（Adobe XD）は、Webサイトやモバイルアプリのデザイン、プロトタイプの作成、共有までをすべて１つのアプリケーションで実現する、新しいクロスプラットフォームツールです。http://www.adobe.com/jp/products/experience-design.html Adobe XDの2つのメリット 1．デザインモードとプロトタイプモードの切り替えができ、全体像がわかる。
JakeはUIデザインやWeb開発の記事を執筆するライターです。彼の仕事はあらゆるWebや彼自身のポートフォリオで見つけることができます。ツイッター@jakerocheleauから最新のアップデートをフォローできます。 デザイン業界の流れは速く、絶えず新しいツールが誕生しています。そのため、デザイナーとして最先端を走り続けるには、世の中の動向につねに注意する必要があります。 そこで今回は2018年現在、チェックしておきたいデザインツールを厳選してまとめました。これらのツールにはデスクトップのプログラムもありますし、SaaSのアプリやブラウザツールもあります。 いずれにせよ、このリストにはみなさんがチェックしたいと思うものが必ずあるはずです。詰まるところ、素晴らしいデジタルコンテンツを作ることにおいて、あなたのデザインスキルはさまざまな手段の一部に過ぎないのです。 Adobe XD Adob
1. モックアップツールって何使ってる？？ 2017年の11月くらいから、毎日コツコツと作っていたWebアプリケーションをなんとか完成しました （色々あってリリースはまだしていません...）。Webアプリケーションを作り始めるときに、はじめに「設計」と「モック」を作りました。 世の中に出ているモックツールのまとめ https://navi.dropbox.jp/mockup-tool https://www.mockplus.com/blog/post/webux-10 色々と調べた結果「Bootstrap Studio」が良さそうだったので、有料版を購入してみましたが、とても良く、Qiitaにもあまり情報共有されていなかったので、使ってみた感想などを、まとめようと思います。 2. Bootstrap Studioについて Bootstrap Studio https://bootstra
概要 Web、モバイル問わず、アプリケーション開発する際には、フロントエンドとバックエンド開発が一斉にスタートすることが多く、フロントエンド開発はバックエンド開発待ちになるケースがよくあります。この待ちの時に、フロントエンド側で仮で叩ける環境があると、実装をある程度進めることができ、開発が進みやすくなります。 この記事では Swagger と Heroku を用いて、 API のドキュメントとモック（スタブ）サーバーを手軽に作る方法を紹介します。 Swagger って？ Swagger は特定の書式で書くと API ドキュメントとかモックを良い感じで生成してくれるやつです。詳しい説明は公式ページをご参照ください。 手順 Swagger Editor で YAML 整形 モック＆ドキュメントのサーバーサイドコードを Generate する Heroku 用の修正をする Heroku にデプロ
Mock your back-end API and start coding your UI today.It's hard to put together a meaningful UI prototype without making real requests to an API. By making real requests, you'll uncover problems with application flow, timing, and API design early, improving the quality of both the user experience and API. With Mockaroo, you can design your own mock APIs, You control the URLs, responses, and error
で完了 なければ nodeのバージョンをnで管理する などを読みつつnodeとnpmをインストールしてください 準備するもの コンソール db.json ブラウザ（動作確認用） やること db.json ファイルを作成する bashの touch コマンドやWindowsなら右クリックからなどでお好きなようにファイルを作ってください db.json にリソースを登録する ここでモックサーバから返して欲しいデータリストを列挙します 最上位の階層の key がエンドポイントになります { "users": [ {"id": 1, "name": "hoge"}, {"id": 2, "name": "fuga"} ], "tweets": [ {"id": 1, "contents": "あー眠い", "user-id": 1}, {"id": 2, "contents": "ファビュラス！"
完成したデザインをクライアントやお客さまに披露するとき、もっと魅力的な見せ方ができればと感じたことはないでしょうか。 パッケージやTシャツデザインなど、完成形に近い形で見せることができればベターですし、よりイメージしやすく、アイデアも共有しやすくなるでしょう。 そんなときは、手軽な方法で完成イメージを作成できるモックアップ素材を利用してみてはいかがでしょう。 今回は、「無料」素材に限定した、いつでも使えるモックアップ素材55個をまとめてご紹介します。再生ボタンひとつや画像の入れ替えなど、シンプルな操作のみで作成できるので、今後のプロジェクトに活用してみてはいかがでしょう。 全部無料！魅力的なパッケージを作成する優良モックアップ素材55個まとめ モックアップで仕上がりがグッと良くなる！おすすめ無料モックアップまとめ 「モックアップとは何？」「どうやって使えばよいか分からない」など、基本的な使
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
