タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
第4話 状態遷移図とは みなさん、こんにちは。鎌倉です。皆さんは音楽プレイヤーを使っていますか？ ウォークマンやiPodといった製品が有名ですが、最近はスマートフォンにワイヤレスイヤホンを接続して音楽プレイヤー代わりにしている方も多いかもしれません。 音楽プレイヤーには 停止中に再生ボタンを押すと、音楽が再生される 再生中に停止ボタンを押すと、音楽が停止する といったように、ボタンを押したときの挙動が定義されています。こうした挙動をメーカーが出荷前にテストしているので、期待通りに動いてくれるわけですね。再生ボタンと停止ボタンの動作が逆になっていたり、再生ボタンを2回続けて押したら輪唱のように重なって再生されたりしたらイヤですよね。 このような場面で良く用いられるのが「状態遷移テスト」とよばれる技法です。今回から複数回に分けて状態遷移テストのお話をしたいと思います。第4話のテーマは「状態遷移
Mermaid記法で『「あたし状態遷移図」、あるいは「あたし約5.2MB」』を再現する - 日直地獄
技術者向けTips: はてなブログでMermaid記法を利用する方法 - はてなブログ開発ブログ はてなブログ開発ブログでMermaid記法導入の紹介があった。遷移図を見るとどうしたって連想してしまうのが、id:debedebe 氏の名作「あたしオートマトン」及び『「あたし状態遷移図」、あるいは「あたし約5.2MB」』。 残念ながらはてなグループはサービス終了とともに閲覧できなくなっているもののWebArchiveでは見られる。 web.archive.org せっかくMermaidで簡単に状態遷移図が書けるようになったのだからプロローグだけでも再現してみたいと思う。 graph TD; アタシ-->アキ; アキ-->歳?; 歳?-->23; 23-->まぁ今年で24; まぁ今年で24-->彼氏?; 彼氏?-->まぁ; まぁ-->当たり前に; 当たり前に-->いる; いる-->てか; てか
こんにちは。TAM UX/UIチームでデザイナーをしております、萩原です。 私のチームではユーザーフローの可視化や構成を固めるワイヤーフレーム、デザインの確認まで『Overflow』を活用しています。 『Overflow...
今回は、Figmaで図形やフレームを追従する矢印でつないで、簡単にフローチャートや画面遷移図をつくる方法を紹介します。サイトマップ作成やアプリケーションのUXを検討する際に、画面同士を矢印で繋ぐことで動線を検討したり、概念モデルを整理するのに役立ちます。 この記事では、大きくプラグインを使う方法と、FigJamを応用する方法の２つを紹介します。 この記事のターゲットFigmaで画面や図形をなめらかに矢印でつなぎたい方 Figmaで遷移図やフローチャートを書きたい方 Figmaで情報設計やWebデザイン用の資料を作りたい方 プラグイン「Autoflow」を使う方法 図形やフレームなどを、簡単に矢印で接続できるプラグインを利用する方法です。 プラグインの導入方法が知りたい方は、以下の記事を参考にしてください。 Figmaのプラグインのインストール方法と使い方今回はFigmaでプラグインをインス
Figma×ChatGPTで実現！最短ルートでアイデアから画面遷移図を作成しよう。｜tamasally(tamada.saori)
こんにちは、UXアーキテクトのtamasallyです。 以前twitterに投稿したのですが、Figmaで画面遷移図を作成するプラグインを公開しました。 まずはtweet内の動画を見て頂ければと思うのですが、今回は「画面遷移図のマークダウン形式（uiflow）」をChatGPTでサクッと作成する方法をご紹介します。※ChatGPT3.5で作成したので無料で試せます。 Figma で画面遷移図をマークダウン形式で簡単に作成できるプラグインを公開しました。UI flowsの先駆者の皆様に感謝… #Figma https://t.co/rioNQD3WJV pic.twitter.com/SQqV9iQFAO — tamasally (@tamasally) May 10, 2023 この記事はこんな方におすすめ時間をかけずにサービスアイデアをとりあえず具体化したい ChatGPTと共同でサービ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
![俺なりの最速[要出典]アクセシビリティチェック](https://cdn-ak-scissors.b.st-hatena.com/image/square/057a8ecb61ee27ff8ff331de75755aa899b6cda3/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--__-75Kxk--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%2525E4%2525BF%2525BA%2525E3%252581%2525AA%2525E3%252582%25258A%2525E3%252581%2525AE%2525E6%25259C%252580%2525E9%252580%25259F%25255B%2525E8%2525A6%252581%2525E5%252587%2525BA%2525E5%252585%2525B8%25255D%2525E3%252582%2525A2%2525E3%252582%2525AF%2525E3%252582%2525BB%2525E3%252582%2525B7%2525E3%252583%252593%2525E3%252583%2525AA%2525E3%252583%252586%2525E3%252582%2525A3%2525E3%252583%252581%2525E3%252582%2525A7%2525E3%252583%252583%2525E3%252582%2525AF%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Aymrl%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2cxMEtvem5ETXNrSFdYVkN4dkxvYUdhaGxLNmdOVlB4cnV5eG1YNGc9czI1MC1j%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
テストについて学ぼう！ ～第4話 状態遷移図とは～ - ぐるなびをちょっと良くするエンジニアブログ
チームデザイナー御用達！画面遷移図作成ツール『Overflow』【使い方編】 ｜ Tips Note by TAM
Figmaで簡単にフローチャートや画面遷移図をつくる方法 | wentz-design.com
www.tour.ne.jp
unity.com
natsunoasa777.hatenablog.com
ec.bornelund.co.jp
aki2.vp.bex.jp
www.libraryfair.jp