この記事では、Webデザインやグラフィックデザインの制作スピードを短縮し、生産性をアップする、便利な最新オンラインツールをまとめてご紹介します。 「もっと早く知りたかった」と思わせる、面倒な作業をサクサクこなす時短ツールが勢揃いです。カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. デザインコレクション 3. イラスト系ライブラリ 4. 配色ツール 5. プロトタイプツール 6. コラボ、リモートワークツール 7. 面白、クリエイティブツール Web制作の常識が変わる、便利な最新オンラインツールまとめ Web制作便利ツール The Hero Generator ウェブサイトの魅力的なヒーローイメージを作成できるオンラインツール。グラデーションオーバーレイやボタンスタイル、見出しタイトルの余白など細かい部分も手
JavaScriptにはどのオブジェクトにもプロトタイプと呼ばれる便利な隠しプロパティがあります。プロトタイプ継承の仕組みについてGIFアニメーションで分かりやすく解説された記事を紹介します。 🎉👨👩👧👧 JavaScript Visualized: Prototypal Inheritance by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 JavaScriptを視覚的に解説: プロトタイプ継承 文字列や配列、オブジェクトに対して.length, .split(), .join()のような組み込みメソッドを使用できるのか、疑問に思ったことはありませんか？ それらを明示的に指定したことはありませんが、どこからきたものでしょうか？ これは、プロトタイプ継承（prototypal in
Streamlit turns data scripts into shareable web apps in minutes. All in pure Python. No front‑end experience required.
とにかく早くプロダクトのプロトタイプを作るための技術についてまとめます。 この技術は運用しやすく作る技術とはまた別の技術です。 （綺麗に作るのは後でやる） かなり偏った考え方もあると思いますがご容赦ください。 プロトタイプを作る上でやらないことを決めます。 実はやることよりもやらないことを決めることの方が難しいです。 UXに基づいて後回しにするという意思決定が必要です。 プロトタイプでやるべきこと コンセプトの決定/チャネルの調査： なぜ作るのか、誰をターゲットとして作るのか、競合プロダクトの調査 コア機能の実装： ユーザの苦痛を解消させるプロダクトのコア機能の実装をします。 ここで想定しているコア機能とは一画面に収まるアプリケーションのメイン機能の事を指します。 デザインはモックレベルではなく、ユーザが使う想定のデザインテーマ、レイアウト、アフォーダンス、メンタルモデル、UI、アニメーシ
Penpot is the web-based open-source design tool that bridges the gap between designers and developers.
Figmaのワイヤーフレーム・フローチャート・プロトタイプ用の素材を紹介します。 Webサイトやスマホアプリで使用されるさまざまなコンポーネントやUI要素、基本的なスタイルが用意されており、短時間で作成できます。 UI Template 日本人クリエイターが制作した、Figmaのワイヤーフレーム用テンプレート。基本的なスタイル、コンポーネント、ワイヤーフレーム用のアセットが用意されており、デザイナー以外のエンジニアやディレクターでも使いやすい素材です。
他にもStripeや Pay.jpのようなpayment系、Typeformのようなアンケート作成系、Mailchimpやsendgridのようなメールツール系、AsanaやTrelloのようなタスク管理系もその類とする意見があります。 要は「便利ツール」たちといっても間違いないのかもしれません。 NoCodeの何が楽しいのか僕はデザイナーです。 一般的にデザイナーと言えば、サービス全体の体験設計や、ビジュアル制作、マーケティングチームとのコミュニケーションなどがその仕事の中心でしょうか。その範囲は多岐に渡るものの、肝心の「動くもの」を作ることは僕らにとって困難です。 例えるなら、デザイナーは人形を作れますが、エンジニアさんがそれに命を吹き込んでくれて初めてプロダクトになるような。 そんな非エンジニアの力を拡張してくれる存在として、僕はNoCodeツールに魅了されています。 エンジニアを否
こんにちは！ UIデザイナーのmarinです。 1年半前にメインデザインツールをFigma に移行した際の記事を書いたのですが、理由のひとつにプロトタイピングがしやすいことを挙げていました。 今回はその件についての深堀りを、Figma のプロトタイプを実際の業務でどのように用いているのか例を挙げて書きます。 ※Figma のプロトタイプが初見の場合は、公式のFigma Tutorial: Prototyping を見ておくのをおすすめします。Figma のプロトタイプの作り方Figma のプロトタイプ機能はデフォルトで備わっていて、作成したデザインに画面遷移・マイクロインタラクションの再現ができます。設定方法はとても簡単かつ直感的なので、実際にやってみましょう。 まずはプロパティパネル（デフォルト右側のパネル）の上にあるPrototypeをクリックしプロトタイプモードにします。 試しに、た
Figmaに関するnoteと比べて反響が弱かったので、今回は少し違ったアプローチでnoteを書いてみようと思います。 Figmaと比べて利用人口が少ない上に、ツールの特性上、Figmaより流行る可能性はほぼ０なので、ProtoPieの使い方を説明するより「こんなことできるんだぜ」っていう内容の方が良いのではと思いました。 分かった。Figmaで絶対作れない(or クッソめんどい)ようなプロトタイプ作品集みたいなのをnoteに書くわ。ProtoPie、そもそも使ってる人少ないので、使い方説明するより「こんなのできるぜ」の方が需要ある。 — うっくん@早寝早起き (@HIRO_YUKI_) March 15, 2020 と、ツイートすると結構いいねももらえたので、確かに需要ありそう。 それでは１つ目から。 1. スワイプ・タップできる３タブUIAndroidなどでよく見るUIパターン。ナビゲー
Docs for shaping product ideas
WireframesBuild low-fidelity wireframes with drag-and-drop components.
はじめにフューチャーでは、FigmaやAdobe XDなどのデザインツールの利用が以前よりも少しづつ増えています。今回の題材はFigmaです。 先月の「Adobe XDからFlutterに変換する」の記事では、Adobe XDで作成したデザインをFlutterコードに落とし込むためのTipsを渋川さんが紹介してくれました。XD→Flutterの変換は、AdobeとGoogleが協力して開発しているプラグインがあるため、変換ツールの選択肢で迷うことはあまり無いのかなと思います。 それに対して、Figma→Flutterの変換は公式で開発 or 推奨されているツールが無く、様々な個人・企業が出しているツールからどれかを選択して利用する必要があります。この記事では、Figma→Flutterの変換をサポートする主なツールを紹介し、実際にそれらを使ってFlutterコードを出力した結果の比較を行っ
Microsoftが「Surface Duo」と共に2019年に発表した「Windows 10X」搭載2画面端末の「Surface Neo」は、その後、公式サイトから情報が削除されたものの、開発中止などの正式なアナウンスはなく、実際にどうなったのかよく分からない状況となっていますが、本日、その「Surface Neo」の試作機の新たな写真が公開されました。 写真を公開したのはAndroid PoliceのMax Weinbach氏で、開くとディスプレイがなく、内部構造が見える状態となっています。 Neo pic.twitter.com/1RXrh2FSiN — Max Weinbach (@MaxWinebach) October 24, 2021 Neo Duo! pic.twitter.com/5Y6OF6f8Sl — Max Weinbach (@MaxWinebach) Octob
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web制作の常識が変わる、便利な最新オンラインツール48個まとめ
JavaScript プロトタイプ継承の仕組みをGIFアニメで分かりやすく解説
Streamlit • A faster way to build and share data apps
（兎に角）早くプロトタイプを作る技術（初心者向け） - Qiita
Penpot: The Design Tool for Design & Code Collaboration
Figmaで簡単に作成できる！ワイヤーフレーム・フローチャート・プロトタイプ素材のまとめ
NoCodeというツールを活用する。｜三上蒼太 / Sota Mikami
Figma でモーダルやポップアップ等の状態変化をプロトタイプする｜marin
ProtoPieで作る本格プロトタイプ作品７選！｜UI/UXデザイナー うっくん
FigmaからFlutterに変換するプラグインを比較する | フューチャー技術ブログ
｢Surface Neo｣の試作機の新たな写真が公開される | 気になる、記になる…