宮崎県から出された公募が前代未聞な形で話題になっています。github にプロトタイプが公開されている他、技術的に「分かっている」人が書いた感が漂っており、多くの人の興味を引いています。 さらに、これを書いた職員は実は生え抜きの公務員で、独学でプログラミングを学んだとか・・・
宮崎県の統計システムの公募がすごい。
宮崎県から出された公募が前代未聞な形で話題になっています。github にプロトタイプが公開されている他、技術的に「分かっている」人が書いた感が漂っており、多くの人の興味を引いています。 さらに、これを書いた職員は実は生え抜きの公務員で、独学でプログラミングを学んだとか・・・
私は ある出来事 をきっかけにAdobe製品をやめて他社の製品でWebデザインをしようと考えていました。 最初に考えていたのがPhotoshopの代わりにAffinity Photo、Illustratorの代わりにAffinity Designer、そしてAdobe XDの代わりにSketchまたはFigmaのようなプロトタイピングツールを使用しようと考えていました。 最初はこうしようと思っていた しかし、さまざまな可能性を試した結果、今までPhotoshopとIllustratorとAdobe XDの3つのアプリでおこなっていたことをたった1つのアプリで完結させることができ、しかもあらゆる作業をAdobe XD並みの速度でできる方法があるという事に気づきました。 たった1つのアプリで完結させることができるという事に気づいた ここ最近はたった1つのアプリでWebデザインを完結させるワーク
この記事では、Webデザインやグラフィックデザインの制作スピードを短縮し、生産性をアップする、便利な最新オンラインツールをまとめてご紹介します。 「もっと早く知りたかった」と思わせる、面倒な作業をサクサクこなす時短ツールが勢揃いです。カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. デザインコレクション 3. イラスト系ライブラリ 4. 配色ツール 5. プロトタイプツール 6. コラボ、リモートワークツール 7. 面白、クリエイティブツール Web制作の常識が変わる、便利な最新オンラインツールまとめ Web制作便利ツール The Hero Generator ウェブサイトの魅力的なヒーローイメージを作成できるオンラインツール。グラデーションオーバーレイやボタンスタイル、見出しタイトルの余白など細かい部分も手
この記事では、ますます進化するウェブ制作の現場で重宝する、便利な最新オンラインツールをまとめてご紹介します。 「こんなツールが欲しかった」をかたちにした、制作ワークフローを改善できる時短ツールが多数揃っています。カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 前回のオンラインツールまとめと一緒に確認しておくと良いでしょう。 Web制作の常識が変わる、便利な最新オンラインツール48個まとめ コンテンツ目次 1. Web制作便利ツール 2. デザインコレクション 3. イラスト系ライブラリ 4. 配色ツール 5. プロトタイプツール 6. アイコンツール 7. コラボ、リモートワークツール 8. 面白、クリエイティブツール Web制作が面白いほどはかどる！便利な最新オンラインツールまとめ Web制作便利ツール Squircley デザイン制作で使える美しいSV
最高のデザインツール「Drama」が登場！SketchやXDより良いかも。 | Web Design Trends
Dramaとは Dramaは、インタラクティブなプロトタイプやアニメーションが作成可能なUIデザインツールです。 公式サイトでは、Dramaによってできることとして下記の3つが挙げられています。 インタラクティブなプロトタイプやアニメーションが作れるUIデザインツールといえば、Framer XやInVision Studioなどが思いつきますが、使いやすさや操作性、機能の豊富さを比べるとDramaは頭1つ抜け出しているような印象です。 また、SketchやAdobe XDなどと比べるとUIデザインツールとしての機能に大きな遜色は無く、むしろ動作の滑らかさではSketchよりも勝っているのではないでしょうか。 Dramaを一言で述べると、「これまでのデザインツールのいいとこ取りをしたツール」であると言えるかもしれません。 現在はまだ正式リリースはされていませんが、公式サイトからベータ版をダウ
この記事では、日常行っているWebデザインやグラフィックデザインの制作が格段スピードアップする、便利な最新オンラインツールをまとめてご紹介しています。 カテゴリ分けされたこれらのツールやサービスを利用することで、面倒な作業を自動化し、生産性をアップすることができるでしょう。一度使いはじめると「これなしじゃ考えられない。」、そんな便利ツールが揃います。 コンテンツ目次 1. デザインコレクション 2. イラスト系ライブラリ 3. モックアップツール 4. デザインからコードへの変換ツール 5. プロトタイプツール 6. 生産性アップツール ウェブ制作がすご楽！便利な最新オンラインツールまとめ デザインコレクション SVG Arista このツールはCSSコードを使って、アップロードしたSVGファイルのstrokeとfillプロパティのアニメーションを作成するAnimistaのスピンオフ・プロ
ウェブサービスを開発しても、実際にユーザーに手に取ってもらえるようになるまでには時間と努力が必要です。どうすればユーザーが自社サイトを訪れてくれるのか、どうすればユーザーが定着するのかというアドバイスを、データセットを販売する企業「YipitData」の共同創設者兼CEOであるヴィニシウス・ヴァカンティ氏が語っています。 How To Get Your First 1,000 Users | Vinicius Vacanti http://viniciusvacanti.com/2011/02/08/how-to-get-your-first-1000-users/ ヴァカンティ氏が言うには、1000人程度をウェブサイトに導くことは、一般的に考えられるよりも簡単なことだとのこと。しかし、その1000人を繰り返し訪れてくれるユーザーに変えたり、サイトのアカウントを作成してもらったりするには大
「さあ、デザインするぞ！」 そう思ってmacに向かい、デザイナーなりたてホヤホヤの1年前の私はいきなり画面のビジュアルからつくり始めました。情報設計せず、最初からワイヤー書いて、色をつけていく…。今思い返すと失神しそうです😇 デザイナーになりたての方、もしくはデザイナーになろうとしている方のなかには「デザイナーはイケてるデザインを作るのが仕事」と思っている方も一定数いるのではないでしょうか。(決して間違ってはないけどね！) でも私は今こう思っています 「良いインターフェースは見た目から始まるわけではない」と。 今回は「はじめてのUIデザイン」を参考に自分が歩んだプロセスをしっかりと文字にして残しておきたい&私の経験が誰かの役に立てたら、と思いこの記事を書いています。 さ！前置きはこれくらいにして始めよう💨 [目次] 1.「はじめてのUIデザイン」について 2.私がデザインを担当したプロ
v0とは v0は自然言語で作りたいUIをAIに指示するとそのUIをTailwind (shadcn/ui)ベースで作ってくれるサービスです。 shadcn/uiとは shadcn/uiはRadix UIというUIをもたないヘッドレスUIに対してスタイルを当てたコンポーネント集で、TailwindというCSSライブラリを使ってRadix UIに対してスタイルを当てています。 shadcn/ui本体のライブラリがあるわけではなく、自身のプロジェクトにコンポーネントを直接コピーして使うことが特徴です！ Tailwindが好きな人にはたまらないコンポーネント集ですね！ shadcn/uiに最適に作られていますが、Tailwindユーザーであれば作られたUIをほぼそのまま使うことができます。 下の画像のようなチャット風のUIが特徴なサービスになっていて、このチャットに指示を出すことでUIを作ってくれ
先日ローンチされたAdobe XD Trailから、Adobe XDの使い方がよく分かるワイヤーフレーム・プロトタイプを制作するチュートリアルファイルを紹介します。 Adobe XDの基本操作をはじめ、ワイヤーフレームの作成、スタイルの適用、プロトタイプの作成、コラボレーションなど、実践的な使い方がこれでよく分かります。
JavaScriptにはどのオブジェクトにもプロトタイプと呼ばれる便利な隠しプロパティがあります。プロトタイプ継承の仕組みについてGIFアニメーションで分かりやすく解説された記事を紹介します。 🎉👨👩👧👧 JavaScript Visualized: Prototypal Inheritance by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 JavaScriptを視覚的に解説: プロトタイプ継承 文字列や配列、オブジェクトに対して.length, .split(), .join()のような組み込みメソッドを使用できるのか、疑問に思ったことはありませんか？ それらを明示的に指定したことはありませんが、どこからきたものでしょうか？ これは、プロトタイプ継承（prototypal in
Figmaを最強のデザインツールに変えるプラグインを厳選してまとめてみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回はブラウザ上でWebデザインやプロトタイプを作成できる「Figma」をパワーアップしてくれる、厳選された拡張機能をまとめてご紹介します。 デザインの構築を便利にしてくれるものから、Web開発の即戦力となるプラグインやツールの枠を超えたユーティリティを提供してくれるものまで、幅広くピックアップしていますのでぜひ参考にしてみてください！ ■Figmaのデザインをコードに変換できるプラグイン 【 Figma to Code 】 Figmaで作成したWebデザインを、そのまま実際の開発に利用できるソースコードに変換してくれるプラグインが「Figma to Code」です。 2020年11月時点では、汎用性の高い「Tailwind CSS」を利用したHTMLへの書き出しに対応しており、他にもFlutterやSwiftUIのソースコードが出力可能です。
Figmaをこれからはじめようというひとがまず知っておきたい、基本の機能や使い方を網羅した完全ガイド2022年版。 ウェブサイトのデモデザインを実際に作成しながら、Figmaの基本となる使い方を一緒に学びましょう。 この記事が読み終わったとき、Figmaの基本的なツールの使い方はもちろん、ウェブデザイン制作の具体的な進め方や、動きのあるプロトタイプの作成、チームによる共有やリアルタイム同時編集まで、一連の流れをまとめています。 コンテンツ目次 1. Figmaを使う前準備 2. Figmaの基本的な使い方について 3. 背景デザインの作成 4. グリッドレイアウトの追加 5. 基本ツールでロゴの作成 6. ナビメニューの作成 7. ヒーローセクションの作成 8. 3カラムレイアウトの作成 9. プロトタイプ機能の使い方 10. Figmaの使い方はアップデート継続中 Figmaを使う前準備
コードを書き続けるためにやってること
この記事は 6 年前に書いた記事を更新したものです プログラミングの生産性を上げるには - Cside::Private とても面白かったのでマネしてみた。人それぞれあると思うので自分のスタイルを。 といっても、かなり不真面目なので参考にはならないと思う。 1. README.rst を書く まず最初に何がしたいのか、どんなことをしたいのかを書く 概要、ゴール、実装方法、使用ライブラリ、TODO などを書いていく そして README.rst に擬似コードを書き始める コンパイルが通る必要は無い コメントもガンガン書いていく とにかく issues とか使わず全て README.rst に書いていく 一通り出来てきたら GitHub Issues にタスクを移す 2. 擬似コードでプロトを書く コードを書いてみないと分からない事が多いのでまずはコードを書く 自分が一番かける Erlang
まえがき アクセシビリティーの観点からWebサイトを診断し、AIプラットフォームを利用して得た情報をもとにベストプラクティスを提案してくれるオープンソースのWebサービス「Visible」を開発しました。 WebサイトURL: https://visi.dev GitHubリポジトリ（Starください！）: https://github.com/visible/visible GoogleのLighthouseなど、Webサイトの診断を行ってくれるサービスは以前からありましたが、診断だけではなく改善点の提案も行う新しいサービスになっています。また、アクセシビリティーに関する理解を深めてもらえるように工夫をした設計にしていたり、コマンドライン版ではスタンドアロンで実行可能なようになっています。 2020年度の「独創的アイデアと卓越した技術を持つ小中高生クリエータ支援プログラム」未踏ジュニアに
Caterpillar、PayPal、Weir Groupなどの企業におけるリーダーやデザインシステム貢献者が、どのようにデザインシステムを構築し、成長させているかについての無料レポートをダウンロードしてください。デザインシステムの成熟度や運用に関する重要な教訓を学ぶことができます。
この記事では、Webデザインやグラフィックデザインの制作スピードが爆速になる、便利な最新オンラインツールをまとめています。 うまくツールやサービスを利用することで、時間や労力の必要な作業もラクラクこなし、よりプロジェクトを円滑にすすめることができるでしょう。気に入ったツールを制作ワークフローに取り入れ、さらなる制作スピードアップを目指しましょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. イラスト系ライブラリ 2. Web制作お役立ちツール 3. モックアップツール 4. デザインからコードへの変換ツール 5. プロトタイプツール 6. アイコン素材パック 7. デザインコレクション 8. 面白ツール Webデザイン制作が変わる！便利な最新オンラインツールまとめ イラスト系ライブラリ Fresh Folk スタイリッシュなイラストを作成で
この記事では、Webデザインやグラフィックデザインの制作スピード、生産性がアップする、便利な最新オンラインツールをまとめてご紹介しています。 カテゴリ分けされたこれらのツールやサービスを利用すれば、面倒な作業をラクにこなし、作業の効率化をアップできるでしょう。「なぜ今まで使っていなかったのか」、そんな気持ちにさせる便利ツールが揃いました。 各ツールはカテゴリごとに整理しています、以下のリストを参考にどうぞ。 コンテンツ目次 1. Web制作便利ツール 2. イラスト系ライブラリ 3. 配色ツール 4. デザインコレクション 5. プロトタイプツール 6. コラボレーションツール 7. 面白、クリエイティブツール Web制作フローが変わる！便利な最新オンラインツールまとめ Web制作便利ツール BrowserFrame 各種ブラウザ付きでスクリーンショットを撮影できるオンラインツール。目的の
この記事では、Webデザインやグラフィックデザインの制作が捗る、公開されたばかりの最新便利オンラインツール、無料デザイン素材をまとめています。 これらのツールやサービスを利用すれば、デザイン制作で面倒な作業も手軽に、短時間で行うことができ、より効果的にプロジェクトを進めることができます。制作ワークフローに取り入れてみてはいかがでしょう。 ウェブ制作が捗る！便利すぎる最新オンラインツール、無料素材まとめ 404 Illustrations ウェブサイトの404ページで利用できる、ユニークでかわいいイラストを集めた無料デザイン素材キット。 Adobe XD 19 このアップデートでは大幅に機能が強化され、より使い勝手の良さを追求したプロトタイプツールとなりました。 Amadine Mac専用のベクター描画アプリで、Illustratorの代替ツールとしても利用できそう。無料トライアルも用意され
とにかく早くプロダクトのプロトタイプを作るための技術についてまとめます。 この技術は運用しやすく作る技術とはまた別の技術です。 （綺麗に作るのは後でやる） かなり偏った考え方もあると思いますがご容赦ください。 プロトタイプを作る上でやらないことを決めます。 実はやることよりもやらないことを決めることの方が難しいです。 UXに基づいて後回しにするという意思決定が必要です。 プロトタイプでやるべきこと コンセプトの決定/チャネルの調査： なぜ作るのか、誰をターゲットとして作るのか、競合プロダクトの調査 コア機能の実装： ユーザの苦痛を解消させるプロダクトのコア機能の実装をします。 ここで想定しているコア機能とは一画面に収まるアプリケーションのメイン機能の事を指します。 デザインはモックレベルではなく、ユーザが使う想定のデザインテーマ、レイアウト、アフォーダンス、メンタルモデル、UI、アニメーシ
この記事では、2020年に入ってから公開された、Webデザインを快適にする最新オンラインツールをまとめてご紹介します。 ウェブデザインに限らず、グラフィックなどあらゆるクリエイティブな案件、プロジェクトで活躍しそうな新しいツールを中心に揃えています。 新しいツールや機能をうまく駆使することで、時間のかかる面倒な作業もラクにこなし、より円滑にプロジェクトを進めることができます。お気に入りのツールをワークフローに取り入れ、より快適で、スピーディーな制作を目指しませんか。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. デザインコレクション 2. イラスト系ライブラリ 3. デザインからコードへの変換ツール 4. Web制作お役立ちツール 5. プロトタイプツール 6. コラボレーションツール 7. アイコン素材パック 8. 面白ツール Web制作フ
Flutter FAQ 🇯🇵
さらに自分なりに表現すると、次のように思っています。 Hot Reload/Restartによって、実装と確認のフィードバックサイクルが極めて速い(ビルドで数十秒以上程度待たされることの多いネイティブ開発環境と比べて)ネイティブアプリと見分けの付かないような高クオリティ・高パフォーマンスなアプリの開発も可能リッチなフルカスタムUIも組みやすいさらに、Google I/O 2019でもアピールされていたデスクトップ・Webへのクロスプラットフォームアプリの開発も可能になりつつある(まだプレビュー版で現時点でのプロダクション利用は厳しい)のも、今後への期待ポイントです。 Flutterの学習コストは？個人的には、以下程度に思っています。 簡単なプロトタイプ・ごくシンプルなアプリ: まあまあ簡単ある程度複雑・中規模以上のアプリ: 簡単ではない(iOSネイティブよりも少し習熟しやすいかも？程度)簡
プロダクトデザイナーのスキルマップを考えてみた
何でも屋が増えてもスケールしない「UXが付く肩書きがもつ不安感 」という記事で、UX デザイナーが『何でも屋』になっているのでは？という疑問を投げかけました。ひとりのデザイナーとして様々な分野に関わりたいと思うものの、UX の文脈で求められるスキルと知識の幅は広いので、すべてをカバーするのが極めて難しいです。また、ひとりですべてを抱え込むと、組織が求める品質とスピードに応えることができない場合があります。 初期は複数の役割を受け持つことになりますが、プロダクトと組織が成長していかなければいけないときも同じように何でも携わるというやり方が適しているとは限りません。専門性を伸ばしていくことでより高度な提案とアウトプットができますし、互いの弱みを補いながらチームとして動く意味も増していきます。 デザイナーをひとりしか雇えない環境では数多くの分野に精通している人のほうが良いですが、そういう人ばかり
この記事では、Webデザインやグラフィックデザインの制作がグンと捗る、便利すぎる最新オンラインツールをまとめてご紹介します。 通常、時間のかかってしまう面倒な作業も、これらのツールやサービスをうまく活用することで、より快適にデザイン制作をすすめることができます。お気に入りのツールを自分のワークフローに取り入れ、自分だけの爆速制作スタイルを確立してみませんか。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. イラスト系ライブラリ 2. デザインコレクション 3. モックアップツール 4. デザインからコードへの変換ツール 5. Web制作お役立ちツール 6. プロトタイプツール 7. アイコン素材パック 8. 面白ツール Webデザイン制作が変わる！便利な最新オンラインツールまとめ イラスト系ライブラリ Illustrations 商用利用もでき
Next.js + Tailwind UI を使うとたった6時間で技術ブログのプロトタイプを作れる - パンダのプログラミングブログ
Gatsby から Next.js に載せ替えた動機 本ブログを Next.js でリニューアルしました。 元々このブログは Gatsby で作っており、2019年3月にリリースしましたが（最初の投稿）、ついに Next.js に移行しました。移行のモチベーションはバージョン追従を避けたこと、デザインを一新したいこと、また記事が表示されないというバグが発生する事象があったことです。 まず Gatsby のバージョンアップについて。現在、Gatsby の最新バージョンが4系です。しかし、自分が使っていたテンプレートは3年前に1系から使い始めて、2年前に2系にバージョンアップしました。その後、自分は業務と個人開発で Next.js を使い始めたため、このブログでしか使っていなかった Gatsby の情報を追うのを止めて、記事だけ追加する運用をしていました。 その頃にはバージョンアップをするより
UIデザインやワイヤーフレームの作成に便利なデザインツールがほしいと思ったことはありませんか？Adobe XDやSketchなどがメジャーなところですが、他にもインターフェースがわかりやすく、操作性と利便性の高いツールがいくつかあります。 今回紹介する「Figma（フィグマ）」は、それらに引けを取らず、さらに便利な機能も備えたツールです。Figmaがどのように役立つものなのか、使い方を初心者にもわかりやすいようにシンプルにまとめました。 ▼ディレクターとデザイナーで読みたい資料 マーケ思考のデザイナーは強い！ 提案型デザイナーのススメ リード獲得が重視される「広告・LP・サービスサイト」などに携わるデザイナーの皆様に向けての資料です。成果を出すデザインにするために心がけたいポイントを制作前、制作中、提出と修正、公開後の効果検証まで一連の流れに沿ってまとめています。 Figma（フィグマ）と
全部無料！ワイヤーフレームからプロトタイプ作成まで完結できる「Evrybo」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、ゼロからワイヤーフレームを作って、インタラクティブに動作可能なプロトタイプ開発まで完結できる無料のWebサービスをご紹介します。 作成できるプロジェクト数やユーザー数に制限がなく、自分好みのプロトタイプを作成してそのまま公開・シェアが可能。さらに簡単なテストもできる機能が搭載されています。 ワイヤーフレームの作成やプロトタイプ開発に興味ある人はぜひ参考にしてみてください！ 【 Evrybo 】 ■「Evrybo」の使い方 それでは、最初に「Evrybo」をどのように使い始めたらよいのか実際に触りながら見ていきましょう！ まずはサイトにアクセスしてトップページにあるボタンをクリックします。 ユーザー登録の画面が表示されるので、メールアドレス・パスワードを入力しましょう。 登録が完了すると最初のプロジェクトを作成できる画面になります。 プロ
まだ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ビ
WebページやスマホアプリのUIデザインで、一貫したコンポーネント・テーマ・カラー・タイポグラフィ・アイコンなどを作成・管理できるAdobe XDの無料プラグイン「Spectrum」を設計したAdobeのデザインシステム・デザインマネージャーの解説記事を紹介します。 Spectrum for Adobe XD: Adobe’s design language in its experience design tool by Jacob Frank 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Spectrumの機能と開発した経緯 Spectrumを使用した結果 Spectrumのインストール方法 Spectrumの今後の機能 ご意見をお聞かせください はじめに アドビのデザインシステムであるSpectrumは、5年前
Adobe XDステート機能を使いこなそう！ ホバー、カルーセル、ハンバーガーメニューの効率的な作り方 AdobeXD2019年11月の大型アップデートで「ステート機能」が登場し、リッチなインタラクションを作成しやすくなりました。従来はアートボードを複数枚組み合わせて表現するしかなかったのですが、ステート機能の登場によって簡単にできるようになっています。 今回はホバーボタン、スライダー、ハンバーガーメニューなど実例を交えながら、ステート機能の基本と一歩進んだ使い方を紹介します。AdobeXDは使っているけどステート機能は触ったことがない、ステート機能をイマイチ使いこなせてないという方はぜひご覧ください。 ステート機能の基本 簡単にステート機能について振り返っていきます。 ボタンなどの要素は、ユーザー操作によって状態が変わることがあります。たとえば、一般的な「いいねボタン」であれば最低でも「
近年、UI/UXデザインで活躍するデザインツールとしてAdobe XD、Figma、Sketch、InVisionなどさまざまなツールが登場しています。本記事では日本での人気が高い「Adobe XD」と近年盛り上がりを見せている新進気鋭のデザインツール「Figma」にフォーカスして機能の紹介、比較をします。 UI/UXデザインツールには、大きく分けてデザイン機能とプロトタイプを作成し共有する機能の2種類の機能があります。今回の記事では、デザイン機能に重点を置いて紹介します。 Adobe XDを使っているけどFigmaも気になっている方や、その逆という方のデザインツール選定のヒントになればと思います。 Adobe XDとは？ Adobe XDとは、2017年に正式リリースされたUI/UXデザインツールです。IllustratorやPhotoshopと操作感が似ておりAdobeユーザーであれば
Webサイトやスマホアプリの画面遷移や構造を設計するための無料フローチャート素材 -Greyhound Flowcharts
Webサイトやスマホアプリで見かけるレイアウト・コンポーネント200種類以上のフローチャートが揃ったSketch, Figma対応の無料素材を紹介します。 無料とは思えないほど、非常に高品質です。 プロトタイプをデザインする時に、そしてサイト構造やユーザーフローを設計する時にも役立つ便利な素材です。
もっと早く読んでおけばよかった！ Figmaの一歩踏み込んだ実践的な使い方まで、詳しくていねいに解説された良書 -Figma for UIデザイン
Web制作やUIデザインの必須ツール「Figma」は2022年7月に日本語版がリリースされ、9月にはAdobeの傘下になることが発表され、今後もますます必須ツールとして欠かせないものなるでしょう。 Figmaの基本的な使い方をはじめ、実践的なUIデザインの制作、Figmaならではの生産性を上げ効率的なテクニックなどを詳しく解説した解説書を紹介します。 本書はリファレンスとプラクティス両方の側面があり、Figmaをこれから始める人にも、Figmaをもっと使いこなしたい人にもお勧めの一冊です。 本書は、Figma日本語版に対応した解説書です。インストール・セットアップをはじめ、基本的な使い方、Figmaならではの生産性を上げる機能の解説だけでなく、ワイヤーフレームやプロトタイプや詳細デザインの作成など実践的な作業フローまで学べます。チュートリアルに使用されるファイルは、サポートサイトからダウン
Webサイトを作る際にユーザフロー（ワイヤーフロー）を作ります。Webサイトの画面を並べて、リンク先をつないでいくことで、フローを明確にします。そして目的のページまでたどり着くのに深くなりすぎていないか、分かりづらい流れになっていないかなどをチェックできます。 今回紹介するWireflowはWeb上か簡単にワイヤーフローが作成できるソフトウェアです。 Wireflowの使い方 例です。左側にあるパーツをドロップして、線でつないでいくだけという簡単さです。 拡大できます。 パーツを縦につなげることで、長いページも表現できます。 グルーピングも可能です。 Wireflowを使えばワイヤーフローが手軽に作成できます。あらかじめ多数の画面モックアップが用意されていますので、ページの雰囲気に合わせて自由に作成できるでしょう。Wireflowを使えばWebサイトの構造を検討したり、パーツをカスタマイズ
Adobe XDがSketchよりも優れている理由
最近、私の周りでもAdobe XDを使用する人が増えてきました。特に日本では、SketchユーザーよりAdobe XDユーザーの方が勢いがあるように感じます。 SketchとAdobe XDを長きに渡り使用し、その結果Adobe XDを使用することにしたUIデザイナーの比較記事を紹介します。海外だとSketchの方が多く感じてましたが、そういう流れなのでしょうか。 Why Adobe XD is better than Sketch. by Simon Fairhurst 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Sketchの特徴 Adobe XDの特徴 はじめに 私の前回の記事では25,000を超える閲覧と共有があり、SketchとAdobe XDの2つのツールの比較について補足したいと思いました。 前回の記
こんにちは、 CTO 室の山田です。 私は新卒入社から現在までずっと Amazon Alexa や LINE Clova などのいわゆるスマートスピーカーやスマートディスプレイ向けのアプリケーション開発に携わっています。 特に Amazon Alexa に関しては、日本だけでなく、スペイン、メキシコ、アメリカ、ブラジルの計 5 カ国にてサービスを展開しています。 現在は上記のプラットフォームへアプリケーションを公開する形でサービスを提供していますが、私たちが掲げている目標は「Voice User Interface の特性を活かし毎日の料理をもっと楽しみにする」ことであり、必ずしも特定のデバイスやプラットフォームに特化をして開発をするわけではありません。 例えば iOS/Android などのモバイルデバイス上での方が今より良いサービスを提供できるかもしれませんし、私たちでハードウェアを開
AIが手描きのスケッチを美しいプロトタイプに変換してくれる「uizard」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、手描きしたスケッチをAIが美しいワイヤーフレームに自動変換して、動くプロトタイプを誰でも簡単に作成できるWebサービスをご紹介します！ 現時点ではクローズドベータによる参加となりますが、すでに実用的なレベルに調整されています。これからプロトタイプを作成しようと考えている人は、ぜひ参考にしてみてください。 【 uizard 】 ■「uizard」ってどんなサービス？ 最初に「uizard」でどんなことができるのか簡単にご紹介しておきます。 このサービスのポイントは、手描きのスケッチをAIが美しいフレームワークに自動変換してくれることです。 変換方法は簡単で、手描きのスケッチをスマホのカメラで撮影するだけです！ するとAIがスケッチを分析してワイヤーフレームに変換してくれます。 さらに、PCのブラウザからプロジェクト画面を開いて自由に編集で
150種類以上のコンポーネントと50種類以上のすぐに使えるスマホスクリーンが含まれたワイヤーレフーム素材を紹介します。 アイデアを素早くプロトタイプ化するためのスターターキットで、スタイルガイドを利用して新しいコンポーネントやスクリーンを簡単に作成することもできます。 かわいいデザインで、見るだけでも楽しめます！
すごいツールが登場しました！ コードは一切必要とせず、スマホアプリのデザイン、プロトタイプ、アニメーションが手軽に作成できるmacOS用のアプリを紹介します。 実際に試してみたところ、操作は非常に簡単で、動作も快適、さまざまなスマホアプリの構築に役立つと思います。 Drama Dramaの特徴 Dramaのダウンロード Dramaの使い方 Dramaの特徴 DramaはPaintCodeのクリエイターによる、デザイン、プロトタイプ、アニメーションがオールインワンになったmacOS用のアプリです。先月リリースされたばかりで、現在はベータ版として提供されており、無料で利用できます。 Dramaのキャプチャ ユーザーインターフェイスを描画 コードは一切不要、プロトタイプの視覚的な状態をシーンに描きます。 インタラクティブなプロトタイプを作成 各シーンをトランジションに繋げるだけで、インタラクティ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PhotoshopとIllustratorのほぼ全機能を搭載したAdobe XD並みに軽いプロトタイピングツールが発売
Web制作の常識が変わる、便利な最新オンラインツール48個まとめ
Web制作が面白いほどはかどる！便利な最新オンラインツール54個まとめ
![さくらインターネットで活躍中の id:y_uukiを訪問 | はてな卒業生訪問企画 [#9] - Hatena Developer Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/5b5961cfe7e9736ef0e88bc0290b1599481d2626/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fh%2Fhatenatech%2F20240319%2F20240319125826.jpg)
ウェブ制作がすご楽に！便利な最新オンラインツール33個まとめ
ウェブサービスで最初の1000人のユーザーを獲得するために行うべき8つのこと
はじめてのUIデザインを読んで実践したら多くの変化があった｜Funakoshi Kiyomi
指示したUIをAIがTailwindベースで実装してくれるv0が凄い
Adobe XDの使い方がこれでよく分かる！Adobe公式、ワイヤーフレーム・プロトタイプのチュートリアルファイル
JavaScript プロトタイプ継承の仕組みをGIFアニメで分かりやすく解説
はじめてのFigma使い方ガイド 基本からプロトタイプ共有まで完全デザイン
機械学習APIでWebサイトの改善点を提案するサービスを作った話 - Qiita
UXPin | The Full-Stack UX Design Platform
Webデザイン制作が変わる！便利な最新オンラインツール45個まとめ
便利で爆速！ウェブ制作向け最新オンラインツール、無料素材37個まとめ
ウェブ制作が捗る！便利すぎる最新オンラインツール、無料素材56個まとめ
（兎に角）早くプロトタイプを作る技術（初心者向け） - Qiita
Web制作フローが変わる！便利な最新オンラインツール43個まとめ【2020年版】
ウェブ制作をスピードアップ！便利すぎる最新オンラインツール、無料素材51個まとめ
Figma（フィグマ）とは？初心者でも分かるWebデザインツールの使い方
世界初公開されたソニー・ホンダの新型EVプロトタイプは、プロトタイプ感の高いクルマだった
WebページやスマホアプリのUIデザイン・モックアップが簡単に！Adobe XDのプラグイン「Spectrum」が便利
Adobe XDステート機能を使いこなそう！ - ホバー、カルーセル、ハンバーガーメニューの効率的な作り方 - ICS MEDIA
最新版で比較するAdobe XDとFigmaの違い - デザイン機能編 - ICS MEDIA
Wireflow - Webサイトのユーザフロー/ワイヤーフローを自由に作成 MOONGIFT
日々の簡単なプロトタイピングに Flutter を活用する - クックパッド開発者ブログ
CC0の太っ腹ライセンス！スタイルガイドと150種類以上のコンポーネントが揃ったワイヤーフレーム素材 -Contra
便利なのが登場！UIのデザイン、プロトタイプ、アニメーションがコードなしで、手軽に作成できるツール -Drama
finance.yahoo.co.jp
approach.yahoo.co.jp
qiita.com/samezi
bel-itigo.com
www.nikkansports.com
engrholiday.jp