PWA開発にデザインツールFigmaを導入してみた感想：エンジニア編｜umesan
こんにちは、株式会社ミクシィでエンジニアをしているumesanです。 最近、「みんなでピック」というPWAの開発に携わりました。 このサービスを立ち上げるにあたり、Figmaを導入して幸せになれた話をエンジニア視点からしようと思います。 🔗「デザイナー編」はこちらから 「みんなでピック」とは スマートフォンアプリ「モンスターストライク スタジアム」で遊ぶ際に使えるキャラクター選択サービスです。大会で使用されていたキャラ選択システムが、スマートフォン向けになって誰でも使用できるようになりました！ 🔗「みんなでピック」リリースのお知らせ 🔍 導入の経緯 みんなでピックの企画が立ち上がった際、 下記のような少人数のメンバーが召集されました。 ・プランナー1名 ・デザイナー1名 ・フロントエンドエンジニア1名 ← 私 ・SRE 1名 ・QA 1名プランナーから企画を聞いた後、皆でアイデアを出
Figmaの使い方、全力でまとめました。｜hikaru-takase /Loglass
最近、figmaを社内でも始めたのですがその魅力にドンドン引き込まれています。自身の学習も含め、これからfigmaを導入しようとする方の参考になればと思い使い方のまとめを作ってみました。 私はsketchをベースに開発することが多いのでsketch→figma視点で語ってる所が多いです。全力と言いつつ、まとめ切れていない所も多いので、不足しているところは随時更新していきます。 導入編アカウント登録 figmaの公式サイトに行きましょう！まずはアカウント登録。すべて英語ですが名前と職業を聞かれるぐらいで簡単に登録できます。またgoogleアカウントを持ってる人であれば、そちらからすぐにログインできるのでおすすめ。 ログイン後はfigmaのダッシュボードが表示されます。 webブラウザでほぼすべての機能が使えるのがfigmaの特長でもあります。 Desktop Appをインストールする やはり
Figma使うのに便利なTips - Qiita
https://www.figma.com/ 個人的に激推しなブラウザ環境で動く（デスクトップアプリもある）UIデザインツール。 英語UIということで敬遠するひともいるかもしれないので、使ってくれる人が増えてくれることを願って、使いやすいところとかTipsをちょっとずつ追記していこうと思います。 ※Mac環境を前提に書いています。⌘（command） → control などショートカットキーの違いは良しなに読み替えてください。 2018年7月3日追記： 2018年6月21日に、Figmaのバージョン3が公開されました！🎉 https://blog.figma.com/figma-3-0-217d6c248f85 クローズドβだったテキストスタイルとカラースタイルが使えるようになったほか、固定ヘッダーや領域内でのスクロールなども再現できるようになりました。 2018年8月13日追記： M
Figmaで日本語を使う - Qiita
日本語が消える Figmaの標準フォントで日本語を入力すると消えてしまいます。 ネットでググってもWeb版で日本語を使うという記事は観測時点では検索上位に出てきません。 日本語には対応してないのか、、、と思っていて、Figmaを使っていたら要望のポップアップが出てきたので、聞いてみることにしました。 「Japanese plz!」 するとしばらく立ってかFigmaからメールで返信が来ていました。 Hey sakapun, In case you didn't know, we do support some Japanese Fonts, such as Noto Sans JP. You can also enable local fonts to use your own! どうやら日本語が使えるフォントがいくつかあるようです。探せたのは下記です・ - Noto Sans JP - N
SketchからFigmaに移行してチーム間でのコミュニケーションがしやすくなりました - クックパッド開発者ブログ
こんにちは、メディアプロダクト開発部のデザイナ若月 ( id:puzzeljp ) です。 現在関わっている、一緒につくれるクックパッド | cookpadTV のアプリ開発上のチーム間のやりとりについて今回は書きたいと思います。 cookpadTV は料理上手な有名人や料理家がクッキング LIVE を生配信しているサービスです。クッキング LIVE を見られるのは、iOS アプリ・Android アプリ・FireTV アプリとなっています。 cookpadTV のデザインデータを Figma に乗り換えました cookpadTV に私がジョインしたのは、今年の8月です。 cookpadTV アプリがリリースされたのは3月なので、デザインを引き継ぐ形でジョインをしました。 私がジョインしたタイミングで、社内で Figma が使われる事例が増えてきたので、 Figma に移行を行ってみました
強度の高いUIをデザインする｜池内健一
デザイナーの池内（@KD6JOE）です。アプリのUIデザインなどをやっています。この記事ではUIをデザインを始めたばかりの人向けに、強度の高いUIをデザインをするための手順をご紹介します。 最低限の品質のUIをデザインできるようになることがこの記事の趣旨です。ここで紹介する手順はあくまで一例で、ガチガチにこの通りに進める必要はないし、ケースバイケースです。自分のやり方に取り入れられるところだけ取り入れてください。 強度の高いUIデザインとは強度の高いUIデザインとは以下のものを指しています。 ・あらゆるUIパターンの検討がなされている ・どのUIパターンを採用するかロジカルに決定している ・仕様漏れがなく開発がスムーズに進む逆に強度の低いUIデザインとは、パターン検討がほとんどされず、ツッコミどころがありまくり、仕様が二転三転するものです。結果開発スケジュールの遅延を引き起こします。 ただ
エンジニアが最高のUIをつくるためのプロトタイピング方法まとめ（2017年版） - Qiita
こんにちは、 UXデザイナーの @yuh_iw です。 この記事は NTTコミュニケーションズ Advent Calendar 2017 の23日目です。 すべては最高の体験のために 弊社では、ようやく社内にUXデザインという言葉が浸透し始めていますが、 実態はUIと共に語られることが多いです。（実際は違うよ） とはいえ今回はUIを作るために私達がいつも行っていることについて記載します。 どうやってUIを作っていくのがよいか とにもかくにも、ユーザーに対する検証と学習をくり返すことです。 最高のUI=カッコイイUIではありません。アーティスティックなUIでもありません。 UIにはユーザーがいるので、ユーザーが使いやすいと思わなければならないのです。 そのために、使ってくれそうな人に、検証していく必要があります。 検証するためにはいくつか方法がありますが、 本稿ではUIプロトタイピングを行う
正式版となったAdobe XDとSketchを機能比較。これから習得するならどっち？
左側にオブジェクトの作成・操作とレイヤー、中央にスクリーンの表示、右側にオブジェクトのプロパティが表示されています。Adobe製品のUIは基本的に左側にオブジェクトの作成などのパネルが置かれているので、それを踏襲した形となります。ところどころSketchに似ていますが、Adobe製品に慣れた人向けに設計されているように感じました。 コンポーネントの共通化 Sketchは先日のバージョンアップでライブラリという機能を実装しました。これまでもコンポーネントを再利用できる「シンボル」という機能がありましたが、このシンボルを外部ファイルとして読み込んで、ファイルをまたいでコンポーネントの再利用ができるようになりました。 対してAdobe XDにもアセットという機能があります。アセットではカラー・文字スタイル・シンボルが管理できるようになっています。 Sketchはシンボルを入れ子状にすることができ
比べてわかったSketchとAdobe XDの違い 最高のUIデザインツールはどっち？
UIデザインに特化したデザインツールとして人気のある「Sketch」。その強力なライバルとなる「Adobe XD」と主要な機能と使い勝手を比べてみると……。 Sketchは長い間、Photoshop（ときにはIllustrator）と比べられてきました。 Photoshopは主に写真の編集に使われてきたものの、同時にSketchと直接競合する唯一のツールであり続けたためです。アドビは、アートボードの追加、エクスポート手順の改善、スマートガイドの追加など、UIデザイナー向けにPhotoshopを改良してきました。 もちろん、新機能を搭載したことによりPhotoshopはさらに肥大化して、あかたもオーシャンライナーにアイススケートリンクを追加したかのようです。 Sketchが勢いを増す一方、新たなデザインアプリ（Affinity DesignerやFigmaなど）が登場し、アドビはUIデザイナ
Adobe XDでLINEデザインを作ってみた【使い方解説】
Adobe XD CCってどういうツール？ Adobe XD CCはWebサイトやスマホアプリなどを手軽にデザインするためのツールで使い方も簡単。さらに、デザインした複数のページを簡単につなげて、実際に動いているかのようなプロトタイプを作る事もできるんだ！ Adobe XD CCはそれらを直感的な操作で仕上げる事ができ、軽量で使いやすいUIになっているので、人気がぐんぐん上がっているのだ。 まずは完成形のデザイン 今回はAdobe XD CCで「ドラえもんのLINEグループ」というコンセプトで簡単にデザインしてみた。作業時間だけで言えば「15分」もあればデザインできてしまう。 今回はこのデザインを元にAdobe XD CCの使い方を学んでいこう！ Adobe XD CCのスタート画面の使い方 Adobe XD CCをインストールしたら最初に次の画面が立ち上がり、デバイスから選ぶ形でアートボ
Adobe XD CC体験版ダウンロード | UI/UXデザイン、プロトタイプ、共同作業ツール
Creative Cloud メンバーシップによるメンバー限定の割引をご利用いただけます HP や Dropbox など、メンバー限定の様々なセールや限定ブランドのオファーから選択して、クリエイティブワークフローを合理化することができます。
数千ページのワイヤーフレームを書いてきたWebディレクターがUI設計時に気を付けている８つのこと。 - 笑顔を創りたいWebディレクターの日常
なんかすごい思い付きで www.adventar.org に参加してみたんですけども。 気づいたらいつの間にか自分の日になっていて面倒くさくなってきて激しく後悔したびっくりしたという。 ぼくはWebディレクターでありデザイナーさんではないし、すてきデザインができるようなビジュアルセンスのようなものは、誠に残念ながら母上から授けられずにこの世に生を受けているものですから、"いわゆる"デザインはやらないんですが、その前の画面設計についてはワイヤーフレームなるものでいっつもやっておりますので、その観点からなんか書きましょうとそういうことですお母様（謎） そんなわけで、うぇぶぎょうかいのむめいでぃれくたーのお時間です。 Webディレクターとしてはえーと、もうすぐ丸１２年になります。そうするとまあ、たぶん数千ページは「ワイヤーフレーム」をつくってきたんじゃないかと思います。正確な数字はわかんないです
パワポでつくるスマホアプリ: CanvasFlipでインタラクティブなプロトタイピング - Qiita
この記事はTech-Circle Hands on Advent Calendar 2016の1日目の記事です。 経緯 7月ごろにモバイルアプリの画面設計をすることになりました。 これまでずっとインフラ関連の開発をしていたので、GUIがあるソフトウェアの設計経験もなくどうしようかという感じに。とりあえずパワポで画面イメージを作ってみたものの、PC画面とモバイルでは印象は違うし、操作感も分からないのでイマイチでした。 そこで、いい感じのツールないかなーと思って調べて見ると、そのものズバリ、プロトタイピングツールなるのものがあるではないか。試しに使ってみたところ、実機で操作できるインタラクティブなプロトタイプが簡単に作れて感動したので、紹介したいと思います。 ペーパープロトタイプのツール プロトタイピングツールは色々あるのですが、フリープランで利用できるPrott、Pop、CanvasFlip
APIモックを使って開発速度を上げよう - Qiita
本記事はKIT AppDeveloper Advent Calendar 2015の21日目の記事です。 APIの実装が追いついてなくてクライアント側が開発できない？ 開発初期段階の場合だとよくあることだと思います。 APIの設計自体は全体通して済ませてあることが前提として必要ですが レスポンスでどういうものが返ってくるか決まっているのであれば、APIのモックでダミーデータを返すことで、API実装が間に合っていなくともクライアントの開発を進めることができます。 また、クライアント側の開発によってAPI実装の修正が必要なときに、「このようなjsonのデータが欲しい」と伝えるのが簡単で分かりやすくなります。 APIのモックができたらいいこと モックとはモックアップのことで、試作で作る模型のようなイメージです。 では、APIのモックとして何ができると嬉しいかというと最低でも下記のようなことができ
どれを使う？プロトタイピングツールの特徴・使用感まとめ - ぐるなびをちょっと良くするエンジニアブログ
こんにちは！ かつ、はじめまして！ わたくし、デザイナーのピエール高木と申します。 埼玉生まれ・J-POP育ち、悪そうなやつにはだいたいビビッてました。 どうぞよろしくお願いします！！ お初の投稿になりますが、デザインやコンセプトの面白いサービス&アプリ、気になるツール、参加したイベントなど幅広くお伝えできればと思っています。 今回のテーマは【プロトタイピングツール】。 はじめに・プロトタイピングツールとは 昨今ではデザイナーに求められることが増えつつあります。 ディレクターやエンジニアに対して、プロダクトの画面遷移や動きのイメージを伝えること （特にネイティブアプリなどの案件で）プロジェクトの早い段階から実装に近いイメージを作ること 修正による無駄な開発リソースを削減すること ・・・ そんな中増えてきているのが、高度なプログラミングなしでプロトタイプが作成できる「プロトタイピングツール」
"使える"プロトタイプ主導の開発プロセス - クックパッド開発者ブログ
検索事業部の須藤です。 クックパッドの検索周りのサービス開発を担当しています。 はじめに 最近ではプロトタイピングツールも充実し、コードを書かなくとも動的なモックアップが作れるようになるなど、思いついたアイデアをより早く、より最終的なアウトプットに近い形でメンバーに共有することができるようになったと感じています。 また、実際にコードを書いてユーザーに公開するための効率的な手法や、公開後の検証方法についても様々なツールや知見が共有されており、より精度の高い定量評価ができるようにもなってきたかと思います。 一方、これらの効率化が進んでも、実際に打った施策の数を増やせたか、最終的にサービスインできたプロダクトの数が増えたかというと、そこまで実感がありません。 その理由のひとつは、思いついたアイデアを具体化して作り始めるまでの初期段階と、実際にそのプロダクトを（テスト目的であっても）公開に耐えうる
Design-JP 第1回 勉強会に行ってきたメモ - らこらこブログ
先日、 "Design-JP"という名前のデザイン勉強会に参加してきた。 design-jp.connpass.com その名のとおりデザイナーやデザイン寄りのエンジニア向けの勉強会で、 専らGoogle App EngineやらAngularやらやってる人間からすると未知の領域だった。 今の仕事でデザインやプロトタイピングをやることはまず無いので、 "知識"を得るというよりは、"異文化交流"しようと思って、新しい考え方を求めて参加した。 以下はイベント中のメモや参考リンクの備忘録である。 発表中に"これは秘密で"と言われた部分はもちろん書いていない。 プロトタイピングツールの使い所の話 プロトタイピングツール Prott 聞いたことはあった Adobe XD 聞いたこともなかった その他もいろいろ 結論 適切なタイミングで適切なツールを使うべし 適切なタイミング デザインが決まった後でア
直感的なラピッドプロトタイピングツールMockplusを使ってみた
UX MILK編集長。株式会社メンバーズ LXグループ所属。LX（ラーニングエスペリエンス）にまつわる新規事業立ち上げなどをしています。ゲームとパンクロックが好きです。 Facebook / Twitter。 プロトタイピングはWebやアプリのデザイナーの間ではもはや無視できない工程となってきており、最近ではAdobeなどの参戦も騒がれたように、世界中で多くのツールが日々生まれています。 プロトタイピングと一言で言っても様々な開発段階や目的によって細かい用途や使用感は変わってきます。多くのツールの中でもどれが優れている、というよりも自分の用途にマッチングして、使いやすいものを選ぶのが大事です。 ということで、今回は国内ではまだあまり紹介されていないMockplusというツールをご紹介します。 Mockplusとは MockplusはJongde Softwareが提供するラピッドプロトタイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Blog | Welcome to Adobe Blog
Adobe、UI/UXデザインツール「Adobe XD」のWindows版をベータ版として無償公開
