サービスデザインツールの目的と活用法（2）
こんにちは、サービスデザイナーの佐藤 史です。 サービスデザインを実践するために必要なツールを説明する記事を書いてからちょうど3年が経ちました（2021年現在）。3年の間で、サービスデザイナーに求められる役割とスキルセットは下記のように変化したと感じています。 「課題解決」の前に「ビジョンと課題の探索」を 自明な課題を解決することを目的としたプロジェクトだけではなく、「そもそもどこに課題が存在するのか？」「（課題を見つける以前に）自分たちの組織は何を目指して活動すべきか？」というようなことを、クライアントやステークホルダーの皆様と一緒に考えていくプロジェクトが増えました。 「外からの視点」だけでなく「内からの視点」でも考える 先述のようにビジョンや課題を探索するプロジェクトでは、ユーザーリサーチなどによって「外から何を見て（調べて）得た事実」から演繹的に答えを出すだけではなく、自分もしくは
いちばん詳しい Sketch / XD / Figma / Studio の比較 〜1. 導入と背景知識｜平田 / U-NEXT
いちばん詳しい Sketch / XD / Figma / Studio の比較 〜1. 導入と背景知識 平田です。普段は個人のブログに記事を書いているので、ちゃんとしたnoteを書くのはこれが初めてです。 Sketch, Adobe XD, Figma, InVision Studio について徹底的に比較を行ったので、知見をまとめたいと思います。量がかなり多いので、いくつかの記事に分けて紹介します。 1. 導入と背景知識 ◀イマココ 2. 基本項目の比較 3. デザイン機能比較 4. シンボルとスタイル 5. プロトタイピングとコラボレーション 6. まとめ 今回はこの連載記事の導入と、各ツールを比較する上での背景的な情報をまとめます。 概要## この記事に含まれる内容 🙆♀️ - Sketch, Xd, Figma, Studio の選定基準 - Sketch, Xd, F
プロトタイプ作成がデザインプロセス改善につながる９つの理由
「Athar Majeed」について AtharはSavah Appの共同創設者であり、その製品はプロトタイピング、デザインコラボレーション、およびワークフローのためのオールインワンプラットフォームでチームを支援しています。 アプリやWebサイト、シンプルなインフォグラフィックスであろうと、プロダクトをデザインするにはいくつかの段階が必要です。デザインがユーザーに優しいものであるかという観点から評価するための最善の方法は、プロトタイプと呼ばれる機能的には完成版とほとんど同一のモデルを開発し、それを実際のユーザーや典型的なユーザーでテストすることです。 プロトタイピングはプロダクトの使用時にユーザーが目標を達成するのを助ける上で適したものをモデル化し、評価するためのテクニックです。このプロセスでは（静的なものとは対照的に）実際に機能するモックアップと見なせるものを作成します。 作成したものを
デザインコラボレーションの最前線（Design & Collaboration イベントレポート）｜のっち Ryosuke Inoue
こんにちは。のっちです。 現在デザインツールが世の中に溢れていますが、その中でも特に注目されているのがデザインと他分野のコラボレーション。 今回は、デザインツールの最新事情やそのコラボレーションについて、各分野の有識者たちがお話ししてくださった『Design & Collaboration』に参加しました。どれもこれから伸びそうだなと思わせてくれるものばかりでした。今回はそちらのイベントレポートです。 （ちなみにトップ画像の文字の周りの円たちは、色々なツールのテーマカラーを散りばめたものとのこと。どれがどれだかわかりますか？） InVision Studioが誰でもアクセス可能にまずはInVision Studioについて、Sketchの書籍でも有名な吉竹さん（@ryo_pan）にお話いただきました。 InVision Studioは、InVision社が新しくリリースするデザインツールで
Prototyping An App’s Design From Photoshop To Adobe XD — Smashing Magazine
(This article is kindly sponsored by Adobe.) There are many ways to design and create an app’s look. Learn how to transfer an app’s design from Photoshop to XD, continuing to work on it and having fun while prototyping. (This is a sponsored article.) Designing mobile apps means going through different stages: pre-planning, visual concepts, designing, prototyping, development. After defining your p
[sketch] Prottyping機能を試してみました #sketch | DevelopersIO
デザイナーの たなか ゆきこ です。 デザインを行うときにかかせないのが、プロトタイピング。 2018年3月、sketch にとうとうプロトタイピングがやってきましたので、早速試してみたいと思います。 公式：https://sketchapp.com/ https://sketchapp.com/docs/prototyping/ Sketch の version を確認 プロトタイピングは、Sketch 49 のアップデートで使えますので、ご自分の Sketch バージョンを確認しましょう。 Sketch 上部メニューの【About & Registration...】を選ぶと確認できます。 プロトタイピングでは、以下ができるようになっています。 オブジェクトを選択しての画面遷移指定 ホットスポット（エリア）を作成からの遷移 プロトタイプを開始するアートボードを指定 プレビュー確認 他に
![[sketch] Prottyping機能を試してみました #sketch | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/9107e74b02d950e01c757f911caa1a9b0799d7e5/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2018%2F03%2Fsketch4icon.png)
UX & Sketching: The Best Articles and Resources of 2017
An example sketch of the medium.com UI and this article before publishing I’m passionate about sketching and visual thinking, and I believe that these can boost, improve a design process. I’d like to share articles, resources I found most interesting and useful this year, and I also included resources that I created. The resources are organized into 3 categories: Articles; Books; Tools & Other Res
The Best Prototyping Tools for 2018
Can’t decide on the best prototyping tools? We researched the top 7 prototyping tools to uncover their best use. When evaluating a prototyping tool, consider the following criteria: Fidelity: How powerful is the tool for visual and interaction design? Consistency: What features ensure design consistency in your work? Accuracy: Do the elements you’re working with reflect the “source of truth” in yo
【速報】Adobe XDの正式版が遂にリリース！ 光のように速いオールインワンのデザインツール - ICS MEDIA
米ラスベガスで開催中のAdobe MAX 2017で、アドビがオールインワンのデザインツール「Adobe XD」を正式リリースしました。このツールは2015年10月のAdobe MAXで「Project Comet」として発表されて大きな話題を呼び、その後もユーザーボイスを取り入れながら進化を続けてきました。 本記事では、現在米ラスベガスで開催されているAdobe MAX 2017の基調講演で発表された内容を中心に、正式版のAdobe XDについてレポートします。 Adobe XDはまったく新しいデザインツール Adobe XDとはウェブデザイン、モバイルアプリのデザイン、プロトタイプの作成、プレビューまでを行えるオールインソリューションのデザインツールです。PhotoshopやIllustratorに比べて、起動や動作速度が早く、アイデアを素早く形にできます。また、「ボタンをタップしたら
【2017年版】海外のプロトタイピングツール11選（機能比較表つき）
Webサイトやアプリの制作過程において欠かせないプロトタイピングツール。海外のサービスも含めると、その種類は多岐に渡ります。 そのため、「それぞれのツールの特徴ってなんだっけ？」と混乱することも多いでしょう。特に海外の新しいツールの情報を仕入れても、結局「いつもの」ツールに留まってしまいがちです。しかし、自らのスキルや制作したいプロトタイプレベルによって最適なツールを使い分けることは、デザイン業務の可能性を広げます。 そこで今回は制作したいプロトタイプの度合いに応じて、海外のプロトタイピングツールをご紹介していきます。 シンプルなプロトタイプ制作におすすめ ここでは、シンプルなプロトタイプ制作を行う際に推奨したいプロトタイピングツールをご紹介します。「使用感や見た目の心地よさの追求」までは行わない想定をしているので、簡易なアニメーション設定を行うことができるサービスを取り上げます。 １.P
Fitbit: the UX behind the habit of exercise — a UX case study
There are generally three types of people in the world when it comes to exercising: the fitness freaks who exercise all day err’ day;the couch potatoes whose walking from the front door to their car would be the extent of their exercise for the day; andthe people in between who want to be fit and healthy…
適切なプロトタイピングツールを選ぶための５ステップ
プロトタイピングツールは、私たちデザイナーにとって重要なリソースとなっています。プロトタイピングツールにより、静的な文書では表現の難しい、アニメーション、トランジション、マイクロインタラクションなど多数の状態を表すことができるようになりました。 このニーズに対応するために、各企業はプロトタイピングツールを作成し始めています。そして今では、定期的に多くのツールが登場するのを目にしています。 しかし、どれを用いたら良いのでしょう？ 正しいものを選ぶために、どんな質問を自分自身と自分のチームにするべきでしょうか？ どのプロトタイピングツールを使うか 「どのツールを用いれば良いのでしょうか？」これは、オンラインフォーム、デザインミートアップやブログで、最も頻繁にきかれる質問のひとつになってきています。質問は白熱した討論になり、デザイナー達はすぐに特定のツールやアプリケーションを挙げます。 実際のと
UX Days Tokyo 2016 #uxdt2016 参加レポート｜ネットイヤーグループ
UXチームの坂本です。 3/18 (金) に東京で開催された「UX Days Tokyo 2016 」に参加してきました。ネットイヤーグループは今年もシルバースポンサーとして参加しています。本イベントは、「UX」をテーマにしたイベントで、海外から著名なスピーカーをお呼びして、カンファレンスとワークショップで構成される 200 名規模のイベントです。 初日のカンファレンスに参加してきましたので、その中で気づいた点をまとめておこうと思います。 16 年のUXワークから学ぶ 16 のレッスン by Jesse James Garrett 書籍『ウェブ戦略としての「ユーザーエクスペリエンス」 』でも有名な米 Adaptive Path 社の創設者でもあるJesse James Garrett 氏。現在に至る 16 年間で得たことを 16 のワードで紹介していただきました。IA や UX においては
Adobe Experience Design（XD）を使ってアプリのプロトタイプを作ってみた
2018年3月15日 XD, スマートフォン, 便利ツール 先日発表された、Adobeのプロトタイピングツール、Adobe Experience Design（Adobe XD）。Sketchライクなシンプルなグラフィックツールです。なにやら面白そうだったので、早速つついてみました。デモとして、簡単にチャットアプリのプロトタイプを作ってみたので、使用感とともに紹介します。 ↑私が10年以上利用している会計ソフト！ Adobe Experience Design（Adobe XD）って何？ Adobe XDはアプリやWebサイト等のデザインに使えるグラフィックツール。ただグラフィックが作成できるだけではなく、クリックやタップで次の画面に移動し、実際に動作しているようなプロトタイプも作成できます。それだけの機能がついて、なんと無料です！ 残念ながら今のところMac専用ツールですが、今年中にWi
Prottとsketchとzeplinのススメ
書籍化し、12万部突破しました。 【SlideShare広告回避用】 https://www.docswell.com/s/morishige/K3MXPZ-howtodesignslides ・PDFは無料でダウンロードできます ・自己学習や勉強会などの目的でしたらご自由にお使いいただけます ・授業・研修への利用はフォーム( https://forms.gle/WwgXTT974xFW78mFA )にご報告ください ・記事への参考資料にする際は適切な出典明記をお願いいたします 【使っているフォントについて】 M+フォント「MigMix1P」です。こちらもメイリオ同様おすすめです。 フリーで使えます。 【個人HP】 > https://mocks.jp > 仕事のご依頼はこちらから 【書籍情報】 デザイン入門：https://amzn.asia/d/4WDsTI6 デザイン図鑑：https
プロトタイプに発生する溝と対処法
完成品になれない溝をどう埋める あたかも完成品に見えてしまうデザインカンプには、様々な暗黙の了解が存在します。グラフィックツールで Web ブラウザ上での見た目を再現しようとしても、実際 HTML / CSS で組まれたデザインの見た目と同じになることはありません。どこまで静止画を作り込んでも、実際の完成品には成り得ない大きな溝が存在します。この溝が大きな誤解に繋がることがあります。 例えばレスポンシブ Web デザインの場合、幾つかの大きさで静止画のデザインを用意したとしても、その間（可変状態）でどうなるか想像するのが難しい場合があります。また、レスポンシブ Web サイトにおける表現は多彩になってきています。要素の順番を Flexbox で変えることもできますし、画像の配置の仕方もより柔軟で表現豊かになってきています。知識や経験がある方であれば静止画では表現されていない「実はこうなる」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The world’s most powerful screen design tool
Designer’s Guide to Prototyping [2017 edition]
Top Mobile Prototyping Tools
How to turn your app idea into a prototype — do it yourself