タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
Thinkings株式会社 では sonarATS の開発にあたり、基本的にはデザイナーが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個のコンポーネント）に対して複数の表示・動作
UX（ユーザーエクスペリエンス）デザインにおける画面レイアウトの設計では、ユーザー像や機能要件をよりどころにして、ユーザー目線で使いやすい画面を作成していきます。この作業での最終的なアウトプットは「ワイヤーフレーム」と呼ばれるものです。この設計がきちんとできていないと、ユーザーが操作に迷ったり、操作を進めることに不安に感じたりするダメなUXになりかねません。 以下では使いやすい画面を作成するために重要な、ワイヤーフレームの要素を設計する3つのステップについて、詳しく解説していきます。 ステップ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）を担当してみた振り返り
AIによる爆速開発：画面設計からプログラミングまで自動化！？ - Qiita
議論がスムーズに！ プロトタイピングツール「Figma」の開発フェーズ別便利機能【要件定義・画面設計編】
ユーザーが操作に迷う「ダメUX」を回避する、画面設計のコツ
「新海監督作品に携わると、世界の見え方が変わる」映画『すずめの戸締まり』監督の緻密な画面設計を支える撮影工程
GPT4-Vで画面設計書から画面を生成させる - Qiita
デザインからコードへの再現も容易！ プロトタイピングツール「Figma」の開発フェーズ別便利機能【要件定義・画面設計編】
dropoutdiary.com
www.jiji.com
www.asahi.com
www.trip-tsugaru.com
www.yu-hikai.net
www.all-nationz.com