タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
Thinkings株式会社 では sonarATS の開発にあたり、基本的にはデザイナーがFigmaを作成し、それに基づいてエンジニアが開発するというフローを取っています。 そんな中、先日エンジニアサイドで画面設計を行ってみるという実験的な取り組みをしました。 本記事では画面設計を行うことになった経緯と具体的な取り組み内容を振り返り、エンジニアが画面設計をすることのメリットと課題感について考えたことをまとめたいと思います。 エンジニアサイドで画面設計をするきっかけとなった要因 エンジニアサイドで画面設計をすることとなった理由として、大きく分けて以下３つの要因がありました。 デザイナータスク削減の目標 あるマスタ画面を開発したときの課題感 上述の通り、『簡単なマスタ画面の開発』のような共通的な画面設計になる機能については、できるだけデザイナーが介入せずエンジニア主導で開発している → 実際に
はじめに：なぜ今、ユーザビリティが重要なのか？ みなさん、こんにちは。日々Figmaと格闘しながら画面設計に励むイェンです。 「使いやすい」と言われるアプリやWebサイト。実は、その裏には綿密に計算された設計があるんです。今回は、私が実際のプロジェクトで学んだ、ユーザビリティを向上させるための5つの鉄則をご紹介します。 これらの鉄則を押さえておけば、ユーザーから「使いやすい！」と絶賛されるデザインが、きっと作れるはずです。さあ、一緒に探検してみましょう！ 【1】 シンプルイズベスト：余計なものは思い切って削ろう ユーザーが迷わず操作できる画面を作るには、シンプルさが鍵となります。 ・不要な要素を削除し、本当に必要な情報だけを表示する ・情報の優先順位を明確にし、重要な要素を目立たせる 具体例： ナビゲーションメニューは5-7項目に絞り、よく使う機能をトップレベルに配置します。 Figmaで
AdobeXDで画面設計資料を作るときに気をつけること・おすすめの作り方（前編） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
エクセルやパワポで作るよりもいろいろな利点があるため気に入っているのですが、思わぬところに落とし穴があったりと、いろいろ工夫が必要なところがあります。 そこで今回は、私がXDで画面仕様書を作る際に気をつけていることと、おすすめの作り方をご紹介します。 今回は下準備編です。 下準備その1：前提資料一式を作る まずはXDで画面仕様書を作る前に、必要な前提資料一式を作ります。これらを作らずに画面仕様書を書き始めてしまうと、書き方が迷走したり、 一つの資料に情報を詰め込みすぎた見にくい資料になってしまいます。 最低限、以下の資料は事前に作るようにしています。 サイトマップ ディレクトリマップ（テンプレート一覧） コンポーネント一覧 フォーム入力項目一覧 ※フォームがある場合 CMS編集項目一覧 ※CMSがある場合 いずれも一覧系の資料になります。画面上の細かい仕様を決める前に、これらの資料を通し
近年、AIの進化によりソフトウェア開発のプロセスが大きく変化しています。これまで手作業で行われてきた画面設計やプログラミング作業も、AIの登場により驚異的なスピードに進化しています。今回は、その中でも私が実際に使っている2つのAIツール、UizardとUI Sketcherについて紹介します。 なお、本記事では医師と患者を繋ぐマッチングサービスという架空のサービスを例に話を進めます。 Uizard: サービス概要からUIデザインを自動生成 Uizardは、画面設計作業を劇的に短縮する革新的なAIツールです。このツールを使えば、サービス概要を入力するだけで、わずか数分で美しく洗練されたUIデザインが生成されます。つまり、開発者は時間をかけてUIデザインを考える必要がなくなり、その時間を他の重要な作業に集中することができます。 Uizardの使い方 メニューから Generate with A
要件定義フェーズ 一般的に要求のヒアリング後、WEBサイトやアプリの開発は要件定義から始まることが多いと思います。要件定義フェーズでは、顧客の要望、市場、競合、その他さまざまな情報を収集し、開発物に必要な機能や状態を協議して、ドキュメントに落とし込みます。 株式会社ブリューアスでは、このフェーズからデザイナーが参加することも多く、要件定義フェーズに限らず議論を重ねながらリアルタイムに情報整理を行うことが必要な場合、キャンバスが非常に広く使えて直感的に入力ができるのでFigmaを活用することで効率的に情報を整理することができます。 自由に使えるキャンバス Figmaのキャンバスは1辺が100,000pxを超える大きさなので、範囲を気にせずにさまざまな情報を並べることができます。 キャンバスの大きさ 例えば、顧客から提供された資料などを画像化して読み込み、俯瞰的に資料を閲覧しながら議論するなど
AdobeXDで画面設計資料を作るときのおすすめの手順を解説します
加えて、画面仕様書を書きながら全体の構造や細かい仕様を検討していく過程で、以下の設計資料も同時に更新・精緻化していきます。 画面仕様書と並行して精緻化していく資料 コンポーネント一覧 フォーム入力項目一覧 ※フォームがある場合 CMS編集項目一覧 ※CMSがある場合 以上が、大まかなフローになります。ここからは、画面仕様書を書いていく各ステップを具体的にご紹介します。 STEP1：アートボードを作る AdobeXDの場合、テンプレートやコンポーネントの数だけアートボードを作成するのがおすすめです。例えばテンプレートが10個、コンポーネントが15個あるなら、アートボードは25個作成します。 前提資料として作成した「テンプレート一覧」や「コンポーネント一覧」に基づいて、IDと名称をアートボード名に設定しておきましょう。 1個のテンプレート（あるいは1個のコンポーネント）に対して複数の表示・動作
前作『天気の子』から3年を経て公開となった新海 誠監督の最新作『すずめの戸締まり』。 緻密に組み立てられた美術背景やCG・作画素材を集約し、最後の仕上げを担うのが撮影工程だ。撮影監督を務めた津田涼介氏と撮影チームのスタッフに、それぞれのカットに込められた画づくりのポイントを聞いた。 極め尽くした観察眼 “新海カラー”を生み出す撮影術 「新海監督の作品に携わる前と後では、世界の見え方が変わったんです」と語るのは、『君の名は。』（撮影）、『天気の子』 （撮影監督）に続き、本作で新海作品に3回目の参加となる撮影監督の津田涼介氏。 一般的に撮影監督とは、監督と打ち合わせをして撮影処理の味わいを決め込み、各撮影スタッフに差配する役割を担う。だが、本作の撮影スタッフは誰もが他のスタジオでは撮影監督級の実力をもつため、それぞれの持ち味を活かし、その揺らぎを各シーンの中で上手く作品に落とし込んでいった。
はじめに これまで設計書からプログラム、構成図からIaCなど、GPT4-Vで画像を使ったケースを取り扱ってきました。今回は画面設計書みたいなものから画面のコードを生成させてみたいと思います。 なお、生成するコードはSvelteコンポーネントです。 画面設計書 本当は日本語が良かったのですが、日本語OCRの精度に不安があったので英語で記載しました。なお、英語もChatGPTで日本語をもとに翻訳したものをそのままいれています。 DallePanel.svleteというSvelteコンポーネントについて、画面の構成と、動作に関する説明などを右側にいれています。右側の説明は画像にいれなくてもプロンプトに入れてもいいかなと思いましたが、とりあえず画像です。 ともすればfigmaとかでもいいじゃないかっていう話もありますが、動作含めて画像にすることを今回試します。 説明の内容は日本語（翻訳前）だと以下
【勉強会】未来が視えてきた今、押さえておきたい"情報アーキテクチャ基礎②UI編” - 情報設計〜画面設計｜Fujiwara / mediba CXO
バーチャル六本木ではたらく、フジワラです。 先日、mediba社のバーチャル空間で開催した【勉強会】未来が視えてきた今、押さえておきたい"情報アーキテクチャ基礎②UI編"の裏側レポートです。 前回のUX編の続きとなります。 今なぜ、情報アーキテクチャなのか？そもそも情報アーキテクチャとは 「複雑な情報をわかりやすく伝える技術、思いやり。」 「ユーザーが情報にたどり着きやすくなるようにする技術。」リアルとデジタルの境界が融けはじめた今、なぜ情報アーキテクチャの学びほぐしが効果的なのか？ 詳しくは、前回の記事をご参考ください。 情報アーキテクチャのプロセスPhase 1. 調査・分析 Phase 2. UXコンセプト、方針 Phase 3. 情報設計 ★今回はこちらから Phase 4. 画面設計UX編とUI編に分け 今回は「UI編 情報設計〜画面設計」で実施したワークをご紹介します。 主に情
デザインフェーズ Figmaの真骨頂とも言えるデザイン制作のフェーズ。機能を使いこなせばレスポンシブを考慮した画面作成、アニメーション作成、プロトタイプ作成など、再現性が高いUIデザインを制作できるため、デザイナーはしっかり習熟したいところです。再現性が高いデザインを作成すれば、エンジニアがFigmaを見るだけでデザインの詳細まで確認と判断が可能になるということに繋がります。 レスポンシブの作り方 デザインガイド・コンポーネント作成の重要性 UI制作を進める際、最初にカラーやフォントなどのスタイル、デザインガイド、アトミックデザインに則ったコンポーネントの形成が重要です。これを最初にFigmaで用意しておくことで、ページデザインを作成する際にコンポーネントを組み合わせ、カラーやフォントをスタイルから選択して設定することでデザイン制作を効率的に進められるようになります。 アトミックデザインと
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
エンジニアが画面設計（Figma）を担当してみた振り返り
5つの基本原則で実現する、ユーザビリティの高い画面設計 - Qiita
AIによる爆速開発：画面設計からプログラミングまで自動化！？ - Qiita
![Blueskyとメタクソ化 | p2ptk[.]org](https://cdn-ak-scissors.b.st-hatena.com/image/square/4cc3319fab5f99146cba3aaf94513a5926d67b71/height=288;version=1;width=512/https%3A%2F%2Fp2ptk.org%2Fwp-content%2Fuploads%2F2024%2F11%2Fbluesky-enshittification.jpg)
議論がスムーズに！ プロトタイピングツール「Figma」の開発フェーズ別便利機能【要件定義・画面設計編】
「新海監督作品に携わると、世界の見え方が変わる」映画『すずめの戸締まり』監督の緻密な画面設計を支える撮影工程
GPT4-Vで画面設計書から画面を生成させる - Qiita
デザインからコードへの再現も容易！ プロトタイピングツール「Figma」の開発フェーズ別便利機能【要件定義・画面設計編】
www.tokai-tv.com
www.itmedia.co.jp
www.dell.com
www.sankei.com
fukushishimbun.com
yoji3975.hatenablog.com