エンジニア向けFigmaの使い方を徹底解説 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
続いてそれぞれのユースケースについて、具体的な使い方を解説します。 Figmaの使い方・操作方法 デザインをもとにコーディングする場合 ‐ Dev mode Dev modeの利用がおすすめです。現在ベータ版で公開されており、2024年中に有料プランのみ使用可能となります。 主な機能として、作成したデザインをもとにコードを自動で生成させることができます。CSS、iOSのSwiftUI、AndroidのXMLなどに対応しています。 具体的な使い方は次のとおりです。今回はログイン画面を例にしています。 画面をセクションで囲む セクション名の右横のコードアイコンをクリック Open in Dev modeでDev modeに切り替える コード化したいコンポーネントを選択すると、右側のInspectでコードを参照できる ワイヤーフレームを作成する場合 ‐ コンポーネント機能 コンポーネント機能を利
＜続編＞Webサイトのワイヤーフレームの作り方 ― FigmaやXDを開いた後の工程｜重松佑 / Shhh inc.
この記事ではワイヤーフレームを作成するとき、FigmaやXDを開いて手を動かす前に、情報設計をどのように整理し、考えていくかについてまとめています。記事内でWebサイトでワイヤーフレームを作成するときに注意したい点として、下記のように書きました。 ツールを立ち上げてアレコレと考えながら手を動かすとフォントやレイアウトにこだわりだしたりしてしまい、あっという間に時間がなくなってしまいます。考えてから形に落とすことを徹底するためにIA（情報設計）を考え抜くことが大切です。 0. 情報設計とトンマナ設計を分けて考える情報の優先度、情報の量、情報の回遊性といったIA（情報設計）を考え抜くことはワイヤーフレーム作成において最も重要です。IAを考え抜いたその後に、FigmaやXDを使ってワイヤーフレームを形にしていきます。では実際にワイヤーフレームを形にしていくとき、どのような工程で進めていくと良いか
ただのワイヤーフレームと一歩差をつける！作成するときの10のコツ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、Webディレクターのなべちゃんです！ 今回はWebサイト制作では欠かせない、サイトの骨格である「ワイヤーフレーム」の作り方について、紹介していきたいと思います。 LIGではデザイナーがワイヤーフレームを作成することが多いのですが、今回は先輩ディレクターでありデザイナーでもあるほそさんにフィードバックをいただきながら作成していきました。 お客様にとって内容がわかりやすいのはもちろん、デザイナーにとってもデザインしやすいという観点でのフィードバックが、目から鱗の内容だったので、今回学びのアウトプットとしてまとめていきたいと思います！ そもそもワイヤーフレームとは 冒頭でチラッと書きましたが、サイトの骨格・情報の設計図のようなものです。 Webサイトを作成するときに、いざデザインをするとなると、この情報は必要なかった、この情報は入れてほしい、表示順を変えてほしいと出戻りが起こってしま
時短してますか？Web制作が変わる最新オンラインツール38個まとめ
日頃の忙しい業務を少しでも楽にしたい、効率化したいと考えている人にぴったりな、Web制作で使える最新オンラインツールをまとめてご紹介します。 コピペで利用できるお手軽CSSツールやSVGツール、コード知識不要のノーコードツール、色に困ったときに便利な配色ツールなど、クリエイティブな案件で活用したい新しいツールを揃えています。 カテゴリごとに整理しているので、制作フローに新しく追加してみてはいかがでしょう。 コンテンツ目次 1. Web制作便利ツール 2. 配色ツール 3. デザインコレクション 4. プロトタイプ、アイコンツール 5. コラボ、リモートワークツール 6. 面白、クリエイティブツール Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ Web制作便利ツール クリックで一発コピペできる、120種類以上のCSSボタンを集めたライブラリ。3Dやグラデーション、レトロな
Bloo Lo-Fi Wireframe Kit
DisclaimerNo designers were hurt in the creation of this wireframe kit. All styles and components were created for fun but are extremely useful for when you want to quickly turn your ideas to design and test with crazy folks. Any resemblance to a real product, available or unknown, is purely coincidental. You are free to design anything for personal or commercial purposes, with the help of this ui
CC0の太っ腹ライセンス！スタイルガイドと150種類以上のコンポーネントが揃ったワイヤーフレーム素材 -Contra
150種類以上のコンポーネントと50種類以上のすぐに使えるスマホスクリーンが含まれたワイヤーレフーム素材を紹介します。 アイデアを素早くプロトタイプ化するためのスターターキットで、スタイルガイドを利用して新しいコンポーネントやスクリーンを簡単に作成することもできます。 かわいいデザインで、見るだけでも楽しめます！
テレワークのミーティングに役立つツールが全部無料で使える！Adobe XDの協業用プラグインが登場 -Whiteboard
テレワークで困るのが、複数人でのミーティングやアイデア出しなどの意見を交わす場を持てないことです。Adobe XDの便利なプラグインが登場しました！ Whiteboardの名の通りホワイトボードをはじめ、ブレインストーミング、カードソーティング、ワイヤーフレーム、フローチャート、マインドマップなど、Webサイトやスマホアプリのミーティングで使用するさまざまなツールが簡単に利用できます。 複数人での使用はもちろん、個人で使用するのにも便利です。 Adobe XDのビジュアル協業プラグイン「Whiteboard」 Adobe XDのプラグイン「Whiteboard」とは Adobe XDのプラグイン「Whiteboard」のダウンロード Adobe XDのプラグイン「Whiteboard」の使い方 Adobe XDのプラグイン「Whiteboard」とは Adobe XDはAdobeユーザーは
UI / UXデザイン | ふたり会議｜ムラキ｜note
［概略］ 株式会社すきだよ様のサービス『ふたり会議』のUI / UXデザインを担当。パートナー間のコミュニケーションツールとして、どのような形のパートナーシップでも抵抗なく使えるデザイン、文言、動線を目指して設計を行いました。01 | 目的・背景「ふたり会議」は結婚前にパートナーと価値観を確認できるサービス。2019年9月のリリースに伴い、WEBサイトのデザインのご依頼を頂きました。当初のご相談内容は以下の通り。 ① 質問形式で価値観を確認するものである ② 回答をパートナーと比べて、相違点を発見できるものである ③ WEBブラウザ上で閲覧を行う ④ 今回のサービス立ち上げはβ版の位置付けであり、完璧さよりも早期のリリースを優先する 02 | 要件整理今回はβ版の位置付けとのことで、まず最初に「達成したい目的」「やること / やらないこと」といった、基本的な部分の擦り合わせを行わせて頂きま
Adobe XDで簡単にワイヤーフレームやモックアップを作成できる無料素材 -Quick Mockup
12/3にパシフィコ横浜で開催された「AdobeMAXJapan」に合わせて、Adobe XD用の便利なプラグインが登場しました！ プラグインは通常、英語圏内に特化されたものが多いですが、「Quick Mockup」はなんと日本のデザイン現場向けに特化されたもので、簡単にワイヤーフレームやモックアップが作成できます。 日本のUXデザイン用に開発されたAdobe XD用プラグイン「Quick Mockup」 Quick Mockupの特徴 Quick Mockupのインストール Quick Mockupの使い方・動画 Quick Mockupの特徴 Quick Mocukupは、日本のデザイン現場で使用頻度の高いUI要素のサンプルから簡単にワイヤーフレームやモックアップを作成、さらにスタイル、ステート、コンテンツのカスタマイズで簡易プロトタイプをすばやく簡単に作成できます。 Quick Mo
まだAdobe XD使ってないの？はじめての人もこれを読めばすぐに使えるAdobe XDのトリセツ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
やっとかめだなも！ LIGのWeb事業部でマネージャーをしているちゃんれみです！ 最近、周りの人からAdobe XDについて質問されることが増えてきました。すっかり「XDおばさん」の名が定着してきたようです。 Adobe XDとは Adobe XDは、Webアプリやモバイルアプリ用のユーザー操作性をデザインし、プロトタイプ化するためのベクターベースのツールです。ワイヤーフレーム、ビジュアルデザイン、インタラクションデザイン、プロトタイプ化、プレビュー、共有間の切り替えが簡単な、オールインワンの強力なツールです。（公式サイトより） ところが先日公開されたAdobe XD対談記事をシェアしたところ、意外にも「XDがんばって覚えねば……」「XDそろそろやらなきゃ」というコメントがいくつか寄せられ、まだまだAdobe XDを使ったことない方がいるんだな、と感じました。今回はそんなAdobe XDビ
ウェブデザイン制作が爆速に！便利な最新オンラインツール47個まとめ
ウェブデザイナーやグラフィックデザイナーのデザイン制作をスピードアップさせる、便利な最新オンラインツールをご紹介します。 ゼロから作ると時間のかかってしまいそうなことも、これらのツールを使うことで大幅に制作時間を短縮できるツールが揃います。今後のデザイン制作のワークフローに取り入れてみてはいかがでしょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. モックアップツール 2. デザインツール 3. デザインからコードへの変換ツール 4. プロトタイプツール 5. サウンドツール 6. アイコン素材パック 7. コラボレーション、共同作業ツール 8. 面白ツール 9. フォント、書体ツール ウェブデザイン制作を爆速に！便利な最新オンラインツールまとめ モックアップツール Design Camera アニメーション付きの３Dモックアップを数秒で作
bruck - コーディングベースのプロトタイプシステム
Webサイトのプロトタイプを作成する際には、こだわり過ぎないくらいのデザインに留めておくのが大事です。文字の大きさや画像の内容など、本来関係ない部分までデザインしてしまうと余計な議論に繋がりかねません。 そこで使ってみたいのがbruckです。HTMLタグベースでプロトタイプをさくさくと作れます。 bruckの使い方 左側がエディタ、右側にプロトタイプが描かれます。Webコンポーネントベースになっています。 パラメータを変更すれば、内容が即座に反映されます。 画像部分の大きさを変更するのも簡単です。 bruckは専用のタグさえ覚えてしまえばプロトタイプをコーディングベースでどんどん作成できます。ミーティングをしながら、その場で反映するのも問題なくできるでしょう。常に同じ結果ではなく、テキストの区切り部分が異なるのも面白いです。 技術的にはHoudini Paint API（CSSペイントAP
2018年 導入してよかったデザインツール｜灰色ハイジ｜note
Twitterのタイムラインで「2018年なんとかまとめ」というリンクをよく見かけることで年末を感じている灰色ハイジです。こんにちは。 日々いろんなツールが増えていますが、個人的に今年導入してみて良かったデザインツールをまとめてみました。 - Contrast - Principle - Figma - RealtimeBoard - IconJar - UXKit - Notion - ConceptsContrast WCAG（ウェブコンテンツ・アクセシビリティ・ガイドライン）が定めた数値で色のコントラストチェックができます。これまでにも同様のツールはありましたが、Sketchのプラグインだったり特定のソフトウェアでしか使えなかったものが、これだとMac Appでメニュー バーから起動できるのでどのソフトウェアでも使えます。 Principle アニメーションやインタラクションがつくれ
Form: Free wireframe kit from InVision
Speed up your design processThis free wireframe kit is ideal for creating beautiful, seamless, large-scale design projects, faster. Designers can pull from a massive library of readymade layouts, components, and symbols, allowing them to focus on what really matters: creating beautiful designs (rather than building repeatable processes from the ground up each time). Test and iterate quicklyForm he
目的別に探す！確認しておきたい無料ワイヤーフレーム50個まとめ 2018年度
プロジェクトの初期段階で、アイデアが完成に固まっていないとき、モバイルやWebプロジェクト用ワイヤーフレームを作成することで、機能とユーザーの流れをうまく計画することができます。ホワイトボードや鉛筆と紙でワイヤーフレームを作成するだけでも、デザイン制作において重要な役割を果たしてくれます。 今回は、探している特定の無料ワイヤーフレームを簡単に見つけることができるよう、マテリアルデザインやiOS向け、多目的モバイルアプリ、ウェウデザイン、UXデザインにカテゴリ分けしてご紹介します。 仕様やガイドライン、デザイントレンドは絶えず改善されており、以下の最新ワイヤーフレーム用テンプレートを活用してみましょう。 1. iOS ワイヤーフレーム素材 2. マテリアルデザイン用ワイヤーフレームキット 3. 多目的モバイル向けワイヤーフレームキット 4. Webデザイン向けワイヤーフレームテンプレート 5
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
)
Wireflow - Webサイトのユーザフロー/ワイヤーフローを自由に作成 MOONGIFT
Adobe XDの使い方がこれでよく分かる！Adobe公式、ワイヤーフレーム・プロトタイプのチュートリアルファイル
The Blog | Welcome to Adobe Blog
Collector iOS Wireframe UI Kit
【作り方の参考にも】WEB・アプリ制作に便利なワイヤーフレーム無料ツール11選【サンプル多数/テンプレート】
