ウェブ・アプリエンジニアのためのFigma入門 (1) Figmaを使うわけ | さくらのナレッジ
FigmaはWebブラウザ上で動作し、複数人同時で編集が可能なデザインツールです。 従来UIデザインの分野ではSketchやAdobe XDといったツールが使われてきました。そういったデザインツールの分野にFigmaは複数人同時編集・Webアプリという特長を活かし登場しました。現在は5000万ドル以上の資金を調達するに至る、極めて注目度の高いツールに成長しています。 本連載ではUIデザインに積極的に関わっていきたいウェブエンジニア・アプリエンジニアに向けに注目度の高まっているFigmaを導入すると嬉しい理由と使い方をお伝えします。 連載の一本目である本記事では、なぜFigmaを使うのか・今までのツールと何が違うのか？という点を重点に解説します。 対象読者 UIデザインに積極的に関わっていきたいウェブエンジニア・アプリエンジニア デザインファイルの管理で困っているエンジニア・デザイナー Fi
ウェブ・アプリエンジニアのためのFigma入門 (2) Figmaのキホン | さくらのナレッジ
前回はFigmaを使うべき理由を説明しました。連載の2回目となる本記事では、Figmaの基本的な使い方を説明します。 今回の記事ではデザインツールを使ったことのない人向けに知ってほしいこと、Figmaの画面説明やレイヤーの設置・編集方法といったFigmaでUIモックを作るための機能について説明します。 SketchやAdobe XDのようなデザインツールの基本的な使い方に慣れている方は、この記事を飛ばして次回の記事を読み進めることをおすすめします。 UIモックを作るにあたって 本連載は主にソフトウェアエンジニアを対象にしています。そこで、UIデザインツールを使ったことのない人に知ってほしいことをお伝えしておきます。 基本的に（凝ったデザインでなければ）UIモックはシェープとテキストといったレイヤーで構成されています。シェープは四角形や円形などの形状をもつもの、テキストは文字通り文字を示して
無料で動きのついたデザインモックアップを作りiOS・Androidで動作確認ができる「Fluid UI」
「Fluid UI」は既存のパーツを配置するだけでWebサイトやアプリのモックアップをサクサク作成でき、簡単な画面遷移や複数人での編集も行えるサービスです。実際に使ってどんなことができるのか試してみました。 FluidUI.com - Create Web and Mobile Prototypes in Minutes https://www.fluidui.com/ Fluid UIのページへ行き、右上の「CREATE ACCOUNT」をクリックします。 メールアドレスとパスワードのほかに、最初のプロジェクトの名前とどんな端末の画面で表示させるかを設定します。 今回は「first project」という名前の「iPhone 6」向けのプロジェクトを作成することにしました。入力したら「CREATE ACCOUNT」をクリックします。 画面上の「Add page」ボタンで新しいページを追加
無料で簡単にフォトジェニックなアプリのモックアップ写真が作成できるウェブサービス「MOCKUP GENERATOR」を使ってみた
ウェブサービスやアプリを公開するとき、紹介用ホームページのトップに持ってくる画像は、そのウェブサービスやアプリがどのような場面で使われるのかを具体的に連想させたり、実際に使ってみようという気にさせたりする原動力となります。そんなサービスやアプリの使用例を手軽かつフォトジェニックな写真にしてくれる無料のウェブサービス「MOCKUP GENERATOR」を使ってみました。 AppLaunchpad - (1000) Best Free Mockup Generator https://theapplaunchpad.com/mockup-generator/ ◆アカウント作成とログイン 「MOCKUP GENERATOR」を使うにはアカウントが必要です。公式ページ右上の「Sign in」をクリック。 するとログインフォームが開きます。Twitter・Googleアカウントを連携すれば簡単にアカ
モックアップ “ドリル” ？ 1日でモックアップを作りきる、755チーム独自の若手育成プログラム | CyberAgent Developers Blog
様々なメディアサービスを提供しているサイバーエージェントでは、サービスの特長に合わせて現場の技術者が使用する技術を選定しています。 新卒エンジニアは約２ヶ月に及ぶ全体研修を終えた後、各プロジェクトに配属されますが、現場での育成プログラムもさまざま。今回は新感覚SNS「755」チーム独自の若手育成プログラム「モックアップドリル」をご紹介します。 「モックアップドリル」に取り組んだ2016年新卒入社の林と、プロダクトオーナー佐々木、クリエイティブディレクター山幡に話を聞きました。 林 眞司 「755」 iOSエンジニア。2016年サイバーエージェント新卒入社。 内定者時代にはライブ配信サービスの立ち上げに携わる。入社後、新卒研修を終えて2016年6月より株式会社7gogoに出向し、現職。 佐々木 興平 「755」 プロダクトオーナー 兼 ディレクター 兼 株式会社7gogo 取締役。金融系情報
Mock Node - 自由に設計できるWeb APIモックサーバ
アプリやWebアプリケーションを素早く作り上げていくためにはサーバサイドをモックアップで作り始める仕組みが欠かせません。Web APIが用意されるのを待っていたら作業がはじめられないからです。 そこで使ってみたいのがMock Nodeです。自分で自由に作成できるモックアップのWeb APIサーバです。 Mock Nodeの使い方 Mock Nodeにアクセスしたところです。幾つかのWeb APIがデモとして作られています。 自分で新しいルーティングを作成できます。 スタブは自作できます。 アクセスするとちゃんとデータが返ってきます。 XMLも選べます。 スタブを作成するページです。 JavaScriptで条件を指定することもできます。 Mock Nodeを使えばサーバサイドのエンジニアでなくとも自由にモックアップサーバを立ち上げて開発ができます。より実際のデータに近いものを返すように設計す
どのようにして高速に iOS アプリの UI を作り上げるか：動作モックの活用と実装時の UI 作りこみ - クックパッド開発者ブログ
Holiday デザイナーの多田です。 皆さんは Web アプリやモバイルアプリを開発する時、モックアップ作成にどれだけ時間を割いているでしょうか？もしくはモックアップを作成せずにすぐに実装に入るでしょうか？私はこれまで Web アプリ開発ではいきなり実装に入ることが多かったのですが、Holiday iOS アプリ の開発では Web アプリの時のように上手くいかないことに気づき、やり方を考え直しました。iOS アプリ開発の過程で、モックアップ作成や実装をどのように捉えるか、具体的にどう行うか、ということが自分なりに見えてきたので、それらについてご紹介します。 目的は、価値のあるプロダクトを速くユーザの手に届けること Web アプリやモバイルアプリの開発過程においてモックアップなどを作る目的は、あくまでも ユーザに届く プロダクトの価値を高めてそれを速くリリースすることです。適切な前準備は
画像編集関連で個人的に使っている6つのツールと使い分け - Tbpgr Blog
画像編集関連で個人的に使っている6つのツールについてまとめます。 No 名前 説明 1 gviz GraphvizをRubyのDSLでラップした有向グラフ描画ツール 2 draw.io チャート、物理構成図、UML図、ワイヤーフレームなど様々な用途に対応したWebドローツール 3 Skitch 手軽で使いやすい画像編集ソフト 4 LICEcap アニメーションGIF作成ツール 5 InVision プロトタイピング、コラボレーション、ワークフロープラットフォーム 6 MindMup 共同編集可能なマインドマップ作成ツール 1. gviz gvizはGraphvizをRubyのDSLでラップした有向グラフ描画ツール。 グラフの情報をコードで管理できるのが利点。 履歴管理しやすいのと、変更コストが非常に低くなる。 以下、作者のmerborneさんによる記事。 Gvizの目次 - Rubyの世界
quickMockup - Webベースのモックアップ作成ソフトウェア
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webサービスやアプリをはじめようと思ったらまずモックアップを作るところからはじめましょう。モックアップを使って色々考える中で、アイディアに磨きがかかっていくはずです。 quickMockupはそんなモックアップを作成するためのソフトウェアになります。Web上で動くのでより手軽に使い始められるでしょう。 quickMockupの使い方 画面は2つに分かれていて、左側にパーツが並んでおり、右側に作成しているモックアップが表示されます。 パーツはドラッグ&ドロップで配置できますし、テキストはダブルクリックで編集できます。 リストなどはカンマ区切りになっています。 テーブルなど、多くのパーツがMarkdown記法を使えます。 quickMockupは個人的によく使っているBalsamiq
OverReact - React File & QR Generator, Social Media Integration
The React File Generator Wireframe React components, download starter files with one click and create an app to stream posts from social media platforms (Twitter, etc.). This tool not only allows users to wireframe React components and stream posts from social platforms like Twitter, but it also integrates seamlessly with a generator to create QR code linking directly to the developed applications
iPhoneやMacを使ったモックアップ画像が簡単に作れる無料素材サイト「We Generate Beautiful Mockups」
ホームOldiPhoneやMacを使ったモックアップ画像が簡単に作れる無料素材サイト「We Generate Beautiful Mockups」 どうも、やなぎさわです。PCやスマホのモックアップ素材を資料などのイメージ写真で使用することは多いですが、自動でモックアップ内にイメージを反映させたいって事とかありませんか？ もう、ご安心ください。 今日ご紹介する「We Generate Beautiful Mockups」は、モックアップ内に自動で画像をはめ込んでくれる素晴らしいサイトなのです。 しかも無料で使用できます。 入れ込む画像をアップするだけ「We Generate Beautiful Mockups」 http://dunnnk.com 使い方はめちゃ簡単です。まずは、使用したいモックアップを選びます。 使いたいモックアップが決まったら、クリックをします。 そうすると、画像をアッ
プロトタイピングツール『Prott』、PC向けWebサイトのプロトタイプも作成可能に。大ヒットゲームMonument Valleyを提供するustwoも導入！
プロトタイピングツール『Prott』、PC向けWebサイトのプロトタイプも作成可能に。大ヒットゲームMonument Valleyを提供するustwoも導入！ 株式会社グッドパッチ（代表取締役：土屋尚史、本社：東京都渋谷区、以下「グッドパッチ」）が提供しているプロトタイピングツール「Prott」( http://prottapp.com/ )のPC向けWebサイトのプロトタイピング対応と、グローバルに拠点を置くデジタルデザインスタジオustwo（ http://ustwo.com/ ）でのPrott導入をお知らせします。 Prott（プロット）とは ProttはUIデザイン会社グッドパッチが提供する、Webサイトやアプリ、サービスを開発するデザイナー、エンジニア、ディレクターなどから成るチームのためのプロトタイピングツールです。画面の手描きスケッチや画像ファイルを読み込み、操作や画面遷移を
5分でアプリのモックをつくる！プロトタイピングツール Prottto | Web担当者Forum
Web担トップ » ユーザー投稿一覧 » 5分でアプリのモックをつくる！プロトタイピングツール Prottto 5分でアプリのモックをつくる！プロトタイピングツール Prottto LIQUID DESIGN 1/19(月) 0:23 ツイート サイト企画／制作／デザイン | 便利ツール／サービス この記事を読むのにかかる時間： 1分弱※この記事は読者によって投稿されたユーザー投稿のため、編集部の見解や意向と異なる場合があります。また、編集部はこの内容について正確性を保証できません。 プロトタイピングツール Prottto（β版）をリリースいたしました。Protttoは、アプリのプロトタイプを簡単に作成できる、最もシンプルなプロトタイピングツールです。 デザイナーでも、プランナーでも、エンジニアでも、デザインや手書きのラフさえあれば 5分でプロトタイプが完成します。 実機で、実際
UIデザインが捗る！Prottでスマホサイトのプロトタイプを作成しよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
はじめまして。LIGでデザイナーをしています、マチルダです。 最近、前職でお世話になったデザイナーの先輩から「アラサーは品が命」という格言をいただいたので、全体的に生き方を見直そうと思っています。 今後とも末永くよろしくお願いいたします。 数年前から、スマートフォンサイト制作のお仕事が多くなりました。 そんなこんなで、「スマートフォンでの使いやすさ」とはなんぞや？を考える日々を送っているのですが、使いやすさって、実際に使ってみないとわからない…でも、自分で実装する技術も時間もない…！ 今回はそんなデザイナーさんでも簡単で素早くプロトタイプを作成できるツール「Prott（プロット）」の使い方をご紹介したいと思います。 ※今回は分かりやすいよう、LIGのスマートフォンサイトをサンプルにして作成手順をご説明いたします。 「Prott（プロット）」とは？ Prott（プロット）はUIデザインで有名
UI Tiles·Webサイト全体の画面遷移設計に使えるデザイン集 MOONGIFT
Webサイトを開発する際に使われるのが画面遷移を表現するフローチャートです。例えばコマースであればトップページから商品一覧、カテゴリ一覧や商品のピックアップなどの遷移が考えられます。 深くなってしまう場所がないか確認したり、ユーザ動線が正しく描けているかどうか確認するのに便利です。UI Tilesはそんなフローチャートを作成するのに便利なデザイン集です。 UI Tilesの使い方 UI TilesはPNGの他、PhotoshopやIllustrator形式でファイルが配布されています。 PNG版。画面のモックがたくさんあります。 それぞれ小さいながらも特徴があります。 動画プレーヤ、ポートフォリオページもあります。 PSDはデモも用意されています。 デザイン一覧。 Illustratorも同様です。 UI Tilesを使うと、これまでは単なる四角い枠に対してトップページなどとラベルを貼って
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
オープンソースのシンプルなモックアップ作成ツール・「QuickMockup」
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
お手軽Webデザインモック作成サービス～InVision（インビジョン）の使い方：実践編
Stencils and Templates - Pencil Project
スクショを指定してモックアップ画像が作れる『Magic Mockups』 | 100SHIKI
