この記事では、Webデザインやグラフィックデザインの制作スピードを短縮し、生産性をアップする、便利な最新オンラインツールをまとめてご紹介します。 「もっと早く知りたかった」と思わせる、面倒な作業をサクサクこなす時短ツールが勢揃いです。カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. デザインコレクション 3. イラスト系ライブラリ 4. 配色ツール 5. プロトタイプツール 6. コラボ、リモートワークツール 7. 面白、クリエイティブツール Web制作の常識が変わる、便利な最新オンラインツールまとめ Web制作便利ツール The Hero Generator ウェブサイトの魅力的なヒーローイメージを作成できるオンラインツール。グラデーションオーバーレイやボタンスタイル、見出しタイトルの余白など細かい部分も手
デザインシステムとは、サービス開発する上で必要となるデザインの概念、スタイルガイド、コンポーネント集などで構成されるデザインのルールです。 Salesforce.comの「Lightning Design System」が2015年に登場して以来、多くの企業がこのデザインシステムを導入するようになりました。 プロトタイピングツールで有名なUXPinが提供するデザインシステムプラットフォーム「adele」では、90個以上（2019年12月現在）ものデザインシステムが公開されています。その企業のラインナップを見ると、大手ITベンダー、SaaSベンダーのみならず、自治体、金融機関、大学など多くの業界で、組織のブランド確立のために、デザインシステムを活用していることが分かります。 GoogleやAppleが提供するデザインシステムは、既に多くのブログで語りつくされていますが、その他の企業でも素晴ら
Midjourney/Memeplex(StableDiffusion)などの画像生成AIで思い通りの画像を出すヒント｜shi3z
このnoteの収益を使ってStable Diffusionを使ったWebサービス https://memeplex.appを公開しました。誰でも無料で何枚でもAI作画をすることができます(そのかわり、混み合ってる時は時間がかかると思います)。 このnoteで学んだことをぜひ活用して、AIによる新しい時代の風を感じてください。 また、本文中にMidjourney、StableDiffusion、DreamStudio、Memeplexなどの言葉が頻出するため、全面的な修正を行うことにしました。StableDiffusionに統一しておきたいと思います。 現状(2022/8/28)は、StableDiffusion=DreamStudio/Memeplexと考えて構いません。Memeplexは将来的にStableDiffusion以外のアルゴリズムもサポートする予定だからです。
最高のデザインツール「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. コラボレーション、共同作業ツール 7. 面白ツール 8. デザインコレクション ウェブデザイン制作を爆速に！便利な最新オンラインツールまとめ デザインツール SVG Colorizer 用意されたアイコンやキャラクターなどのSVG素材の配色をカスタマイズできる
デザイナーがWebサイトのUIを実装する際にデベロッパーに渡すデザイン仕様書・指示書の作り方を紹介します。 仕様書を作成する基本ツール、指示に適したフォントやカラー、グリッドや要素間の距離を自動的に計算するツールをはじめ、レイアウトや各UIコンポーネントのデザイン仕様の記述例まで、デザインを仕様化する解説記事です。 ブレイクポイントの説明、スティッキー要素の仕様説明、相対サイズの要素の説明方法、ボタンの文字数の説明、アニメーションする要素の説明方法など、デベロッパーに分かりやすく、デザイナー自身も見直せるデザイン仕様書を作成します。 The Art of Design Spec'ing by Mahdi Farra 🍉 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 デザイン仕様書とは デザイン仕様書に使用するツール デザイン
商用利用無料、UIデザイン用のSVGアイコンが1100種類！Adobe XDやFigmaのツールも完備されてて、これは便利
企業サイトをはじめ、プロダクト、オンラインショップ、アプリ、ブログなど、さまざまな商用プロジェクトで無料で利用できるSVGアイコンを紹介します。 SVGアイコンの数は1,100種類以上で、しかもオープンソース！ さらに、Adobe XD, Figma, Sketchなどでアイコンが簡単に使えるツールもリリースされています。
WebサイトやスマホアプリのさまざまなUIデザインに適した、シンプルなデザインのSVGアイコンが完全無料で利用できるiconsaxを紹介します。 ホーム・サーチ・アロー・カート・メールなど、Webページやスマホアプリでよく使用されるアイコンが揃っています。スタイルは6種類、フォーマットはSVGをはじめ、Adobe XD、Figma、Sketch、Illustratorとさまざまなアプリ用のファイルも用意されています。 iconsax iconsax -GitHub iconsaxの特徴 iconsaxのダウンロード iconsaxのアイコン iconsaxの特徴 iconsaxは、vue.jsのオープンソースのフレームワーク「vuesax」の公式アイコンです。個人でも商用プロジェクトでも完全無料で利用できますが、別の名前で販売および配布はできません。詳しくはライセンスをご覧ください。
自作 OSS のためのロゴを作る | micnncim
著名 OSS にあって自作 OSS に無いものの一つにロゴがあります。 OSS において README の出来不出来はユーザへのリーチを高める重要な要素であり、詳細な Description や GIF によるデモはもちろん、ロゴがあればより魅力的な README になるでしょう。 また、SNS でシェアされる際もロゴがあればより良いでしょう。 はじめにソフトウェアエンジニアの多くはデザイナーではないためロゴを作るコストは低くなく、テキストだけ作るのであればまだ簡単ですが、自作アイコンを作ることはかなりの労力を要することでしょう。 僕も同様で、デザイナーではないため、結論として非デザイナーでも出来る戦略を考えることになりました。 今回は、micnncim 流の、出来るだけ低コストで低くないクオリティの OSS のためのロゴの作成方法について解説します。 慣れれば上の画像のようなロゴが 5
「エンジニアリングに興味があるデザイナー、デザインに興味があるエンジニア Advent Calendar」20日目の記事です。 今年の５月から、社内でクライアントワークのチームから自社事業のチームに異動し、映画・ドラマ・アニメのレビューサービスのFilmarksで有料会員機能のPMを担当しています。 以前はUIデザインやアプリ開発、あるいはその中間的な仕事としてプロトタイプ開発やディレクションなどを経験してきました。 PM業の傍ら、社内のデザイナーとエンジニアの受け渡し部分の改善に取り組みました。その検討過程について紹介します。 要件定義・UIデザイン・開発間のワークフロー改善もともとFilmarks内ではディレクターがGoogleスライドなどで要件資料とGithub Issueをつくり、 デザイナーがSketchでUIをつくりZeplinで書き出したURLをエンジニアに受け渡し、エンジニ
笑顔でこんなポーズ、泣き顔でこんな仕草、希望通りのイラスト素材が完全無料で商用利用できるOpen Peepsを紹介します。 普通のイラスト素材はそのまま使用するしかないですが、人物の表情や髪型、ポーズ、動作などさまざまなパーツを組み合わせて、584,688通りのキャラクターを作成することができます。 Open Peeps Open Peepsの特徴 Open Peepsのダウンロード Open Peepsのイラストライブラリ Open Peepsの特徴 Open Peepsは商用でも個人でも完全無料で利用できるイラストのライブラリで、ライセンスはCC0です。 イラストはすべて手描きのベクターで、さまざまなパーツを組み合わせることで584,688通りのキャラクターを作成することができます。アプリは、Adobe XD、Sketch、Figma、Studioをサポートしています。
これでもうモックアップ素材に困らない！スマホ、タブレット、デスクトップほとんどすべてのデバイスが揃ってる -Devices
スマホ、スマートウォッチ、タブレット、コンピュータ、ディスプレイなど、ほとんどすべてのデバイスが網羅されたモックアップ素材を紹介します。 iPhone 11 Pro, Google Pixel 3などの最新機種をはじめ、古い機種のモックアップ素材も揃っています。
Facebook, Twitter, Instagram, TikTokなど、各ソーシャルメディアで最適な画像・動画サイズのまとめ -SocialSizes
Facebook, Twitter, LinkedIn, Instagram, Pinterest, TikTok, YouTube, AppStoreなど、各ソーシャルメディアで最適な画像のサイズ、最低限必要なサイズ、動画の長さなどをまとめてダウンロードできるSocialSizesを紹介します。 Adobe XD, Figma, Sketch, Photoshop用のファイルが用意されており、個別でも一括まとめてダウンロードもできるので非常に便利です。 SocialSizesでサポートされているソーシャルメディア Facebook Instagram LinkedIn Twitter Snapchat YouTube Pinterest Twitch Whatsapp AppStore TikTok ProductHunt Vk PlayStore 各ソーシャルメディアで最適な画像・動画
ニューモーフィズムとは、要素が背景と同じ素材で作られており、シャドウを与えて押し出されたような窪んだようなスタイルです。最近注目されているUIデザインのトレンド「ニューモーフィズム」を簡単な手順でデザイン・実装する方法を紹介します。使用するソフトウェアは、FigmaでもIllustratorでもAdobe XDでもSkecthなど、なんでもOKです。 ニューモーフィズムのデザイン方法、使用するカラーの選び方、UIデザインに適用するCSSの実装コードなど、すぐに実践できます。 Neumorphism (Soft UI) in User interface design - Tutorial by Kanhaiya Sharma 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 新しいトレンド「ニューモーフィズム」 ニューモーフィズム
UIデザイナーの仕事は試行錯誤の繰り返しで、ちょっとしたことで印象が大きく改善されます。デザインを改善するために役立つ実践的なテクニックを紹介します。 今手がけているUIデザインを改善するだけでなく、次のプロジェクトを開始する際の指針としても簡単で実践しやすいテクニックです。 9 tips to quickly improve your UI designs by Marc Andrew (mrcndrw.com) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. 要素をより明確に表示する 2. デザインに使用する書体は1つで十分 3. 長いコンテンツは文字のサイズに気をつける 4. ユーザーのオンボーディングエクスペリエンスを改善する 5. シャドウを使う時は光源を意識する 6. テキストと画像のコントラストを改
Sketch - The digital design toolkit 画像はSketch最高っていう顔です。 HTMLやCSSを書くWebフロントエンドエンジニアにとって、Webデザイナーが用意した理想像を現実に落とし込むことは1つの使命であり、費用対効果への葛藤に揺れる中で「技術的に難しいから」という理由でデザインを却下したくないのは誰しも同じだと思います。一方で、技術的に難しくなくとも、デザインファイルの作り方次第ではエンジニアの実装効率も多少なりとも変わってきます。そこで、僕のデザイナー及びエンジニアとしての経験則から、HTML/CSSで実装しやすい（≒Webフロントエンドエンジニアにやさしい）デザインファイルの作り方を、Sketchでの用例も挙げつつまとめてみます。近年はFigmaが注目されつつありますが、基本的な話は共通すると思います。 本来ならばデザイナーにこそ読んでいただき
Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them.
英Stability AIは7月13日（現地時間）、ラフなスケッチにテキストのプロンプトを添えると高度な画像に変換する新ツール「Stable Doodle」を公開した。ログインしなくても何度か試せる。 Stability AIが3月に買収したInit MLのプラットフォーム「ClipDrop」で利用できる。用意されたキャンパスにマウスやスタイラスでスケッチを描き、その下のプロンプト枠に例えば「猫、3Dで」などと（英語で）入力すると、候補画像が3枚生成される。 Stability AIは、「AIツールに精通しているかどうかに関係なく、基本的な描画スキルとオンラインアクセスがあれば誰でも数秒で高品質のオリジナル画像を生成できる」としている。「デザイナーやイラストレーターなどのプロフェッショナルな方々が、貴重な時間をよりクリエイティブな方面に有効活用し、作業効率を最大化するためのユーザーフレンド
こんにちは、デザイナーの本田です。こちらは Enigmo Advent Calendar 2020 の2日目の記事です。 今年でエニグモへ入社して3年目。昨年末からUXデザイングループへ異動し、BUYMAのアプリケーション UIデザインがメインになったので、考えることややることが大きく変わった1年だったと感じています。 業務の幅も広がって何を書こうか迷うのですが、今年を振り返ると今までで1番デザインツールと向き合っていたし、学んだことも多かったので デザインツールをXd→Figmaへした話 プロトタイプ作るようになった話 の2つについて書こうと思います。 1. デザインツールをXd→Figmaへした話 デザインデータ引き継ぎの関係上、Adobe Xdをメインで使っていたのですが、今年の7月頃からFigmaへ移行しました。 Xdも使いやすいですし、何よりAdobe Creative Clou
Wantedly の UI デザインシステムは「WantedlyのUIをデザインする上での共通の考え方とツール＆アセット」でありエンジニアとデザイナが効率よくコミュニケーションするための共通言語となる デザインシステムを (Web) Frontend に持ち込む際は、単なるコンポーネントカタログではなく、システムが定義するものと同じレベルの抽象を持つライブラリ・フレームワークとして実装することで、より有効性を発揮する Wantedly におけるデザインシステムは、「プロダクト・デバイスをまたいでも・誰がデザインしても体験やブランドとしての一貫性を保つ」「デザインの生産性を向上させ、デザイナ - エンジニア 間コミュニケーションを改善することで、ユーザに価値を届ける速度を向上させる」といった目的のために作られたものです。 より詳しくは、デザインシステムが加速させるプロダクト開発 / Desi
Webサイトやスマホアプリの画面遷移や構造を設計するための無料フローチャート素材 -Greyhound Flowcharts
Webサイトやスマホアプリで見かけるレイアウト・コンポーネント200種類以上のフローチャートが揃ったSketch, Figma対応の無料素材を紹介します。 無料とは思えないほど、非常に高品質です。 プロトタイプをデザインする時に、そしてサイト構造やユーザーフローを設計する時にも役立つ便利な素材です。
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つのツールの比較について補足したいと思いました。 前回の記
Sketch × inVision × Zeplin × GitHub(Abstract)からFigma に移行してみて｜Spacemarket Design
こんにちは！ 株式会社スペースマーケットデザイン部の久保です。 ここ数年はデザインツールの戦国時代と言われるほど世の中には色んなデザインツールがありますが、2019年10月現在のスペースマーケットのデザイン部ではFigma をメインに使用しています。 この4年間でPhotoshop → Sketch ⇔ XD → Figma とスペースマーケットに合ったデザインツールを探して右往左往していましたが、今のところはFigma を使用するのが最適解だと感じています。 Sketch → Figma 移行時の背景や実際に移行してみての実践等は横井が詳しく記事にしてくれていますのでそちらを参考にしていただき、今回はSketch からFigma へ移行した際、そもそもなぜ移行したかったのかの掘り下げと、移行して楽になったことなどの効率面をまとめました。 移行に迷っている方から普段Figma に慣れ親しん
UIデザイナーはダウンロードしておこう！iOS 14のデザインテンプレート・UI要素が揃ったAdobe XD用の素材がApple公式からリリース
先週リリースされたばかり、iPhoneやiPadに採用されているiOS 14のデザイン用のテンプレートやUI要素が揃ったAdobe XD用の素材を紹介します。 素材はAdobe XD用だけでなく、Photoshop用やSketch用も揃っており、9月に新しくなったSF Symbols 2もダウンロードできます。 Apple Design Resources UIデザイン素材は、ページのちょい下からダウンロードできます。 iOS 14のAdobe XD用の素材は先週リリースされたばかりで、Photoshop用とSketch用、そしてiOS 13もダウンロードできます。
150種類以上のコンポーネントと50種類以上のすぐに使えるスマホスクリーンが含まれたワイヤーレフーム素材を紹介します。 アイデアを素早くプロトタイプ化するためのスターターキットで、スタイルガイドを利用して新しいコンポーネントやスクリーンを簡単に作成することもできます。 かわいいデザインで、見るだけでも楽しめます！
PMにデザインツールの使い方を共有したら、作業効率と精度が飛躍的に上がった話。｜Mercari Design Blog
こんにちは、メルペイデザイナーの東野です。 デザイナーの皆さんは、普段の業務でディレクターやPM（プロダクトマネージャー）とのやりとりをどのように行っていますか？ 私たちのチームでは、デザイン・ワイヤーフレーム作成ツールとして、Sketchを使っています。そのため、Sketchを介して、PMとデザイナーがコミュニケーションをとる場面が多くなります。 そんな中、PMのとある一言がきっかけとなって、Sketch共有会を開くことにしました。今回の記事ではそこからの学びを共有します。 きっかけの一言きっかけはPMから、思いもしなかった一言を聞いたことでした。 まず、シンボルを解除することからはじめます Sketchをご存じない方にとってはなんのことやら？ですが、シンボルというのは、デザインの骨格にあたるパーツのようなもの。それを解除してしまうと、デザインの基盤が崩れかねません。 ツールの使い方を我
アイデアをカタチにするツールはたくさんありますが、個人的に最高のアニメーションツールは引き続きAfter Effectsと言えるでしょう。ただし、利用できるプラグインが多すぎて、どれを使って良いのか迷ってしまうのが悩みどころ。 今回は、現役デザイナーがウェブサイトやアプリのアニメーション作成で実践しているプラグインやツールを、7つのシンプルな手順を追ってご紹介します。このガイドラインでは、デザイナーとデベロッパーが一緒にプロジェクトを進める効果的な方法をマスターできます。 No.1 SketchかFigmaでデザイン開始 レイヤーにきちんと名前を付けているか確認しましょう。After Effectsに取り込んでしまうと、レイヤーを見つけるのが難しくなってしまいます。 AEUXプラグインを利用することで、SketchまたはFigmaで作成したレイヤーをAfter Effectsにボタンひとつ
Muse: Text-To-Image Generation via Masked Generative Transformers
Muse: Text-To-Image Generation via Masked Generative Transformers Huiwen Chang*, Han Zhang*, Jarred Barber†, AJ Maschinot†, José Lezama, Lu Jiang, Ming-Hsuan Yang, Kevin Murphy, William T. Freeman, Michael Rubinstein†, Yuanzhen Li†, Dilip Krishnan† *Equal contribution. †Core contribution. We present Muse, a text-to-image Transformer model that achieves state-of-the-art image generation performance
2019年9月の、これだけは押さえておきたいWeb関連の動き
Webニュース 2019年9月の、これだけは押さえておきたいWeb関連の動き Monday, September 30th, 2019 「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 Figma XD→Figmaに変えた理由とその運営方法やメリットについて｜駒ヶ嶺 亮一｜note 今月はXDやSketchからFigmaへの乗り換えの記事が多かった気がします。 共有用と開発用のURLを生成・更新する必要がなく、共有用のURLは即自に共有できる というのはXDと比較したメリットですね。 デザインツール「Figma」を5名のデザインチームに導入して半年経った振り返りとビジネスメリットについて｜rinoside｜note こちらはSketchからFigma
Webサイトやスマホアプリをはじめ、最近ではテレビのCMなどでも背景として使用されている、グラデーション・グラデーションメッシュ素材をダウンロードできるサイトを紹介します。 UIデザインやグラフィック用の高解像度の画像ファイル（.ai, .jpg, .png）から、グラデーションを生成できるオンラインツール、グラデーションのCSSを生成できるツールなど、デザイナーからコーダーまで役立ちます。 まずは、グラデーションメッシュ素材から。 グラデーションメッシュとは、複数のポイントからグラデーションをさまざまな方向に流し込んだものです。有機的で美しく、最近のデザインでよく見かけます。 Free Mesh Gradient Collection レインボー、パステム、ナチュラルをテーマにした、グラデーションメッシュ素材。各グラデーションメッシュの右上「↓」から高解像度の.jpgがダウンロードできま
UIデザインツールで作ったファイルのバージョン管理をきちんと行っていますか？バージョン管理を行うことによって、作業の内容が明確になり、チームでのデザイン制作が効率的になるというメリットがあります。 ツールの料金を払いたくないから見送っていたという人も、Githubを使えば無料でバージョン管理が行えます。 エンジニアはGitによるバージョン管理がすでに一般的な習慣として定着していますが、UIデザイン制作でも同様にバージョン管理を行うことが一般的になりつつあります。 今回は、デザイン制作の主要バージョン管理ツールとその特徴についてご紹介したいと思います。 バージョン管理ツールとは バージョン管理ツールとは、デザインツールなどでデザインを制作したり編集した時に、それぞれの変更内容を管理するためのツールです。 エンジニアは当たり前のようにプログラムのコードのバージョン管理を行っていて、それによって
Figmaがこれからの人にも、すでに使用中の人にもお勧めです。macOS対応の公式より快適に動作するFigmaアプリを紹介します。 .figファイルはもちろん、.sketchファイルを編集したり、.pdfに書き出したり、共同作業やバージョン管理なども簡単にできます。 Figmaは無料で利用でき、Figmacも無料で利用できます。 Figmac Sketchファイルを開きたいけど、Sketchがない人にも便利です。 Windowsの場合は、下記をご覧ください。 SketchファイルをWindowsで開いて、編集・保存できる無料アプリが登場 -Lunacy Figmacの特徴 Figmacのダウンロード Figmaとは Figmacの使い方 Figmacの特徴 Figmacは、BlocsやSolisなどのmacOS用のUIデザインツールを開発したNorm氏の新しいアプリで、Figmaの公式アプ
Clipdrop - Stable Doodle
Transform your doodles into stunning landscape illustrations, regardless of your drawing skills, and witness vibrant scenes come to life with captivating details and colors. Try with this doodle
GitHub - Mukosame/Anime2Sketch: A sketch extractor for anime/illustration.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
フィッシュアジア | FFishAsia | Bio-photogrammetry | 3Dデジタル生物標本| 3D Digital Specimens | 生物3D
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。ヤフーで社内システムを担当しているデザイナーの今河、田嶋です。 以前、「社内システム特化なデザインシステムのメリット 〜 ヤフー社内のデザインシステム紹介」という記事で、社内のデザインシステム「SAYA」を紹介しました。 今回は、「SAYA」のリソースの1つである「UIkit」の作り方のtipsや運用方法について詳しく紹介します。 UIkitとは、デザインシステムで定義されているカラーやコンポーネントなどをUIアセットとして、1つのデザインファイルにまとめたものです。 世の中にはSketchやAdobe XD, Figmaなどを筆頭にさまざまなデザインツールがありますが、SAYAではSketchをメインに使っています。
アイコンは、UIデザインにおいて重要な役割を果たします。 メッセージを伝え、独自のブランド観をデザインで表現できます。 しかし、アイコンひとつずつを作成するには時間だけでなく、当然スキルも必要です。 また、プロダクトデザインなどでは、プロジェクトの進行に応じてアイコンは変更されがちで、何度も修正することもあります。 解決法はずばり、どんなプロジェクトに対応するアイコンライブラリを利用すること。 今回は、無料で使えて、クリエイティブな時間を節約できる、高品質な無料SVGアイコンライブラリをまとめてご紹介します。 あらゆる案件に対応できる豊富なファイル形式 豊富な収録数に加え、サイズや配色などのカスタマイズ性、モダンデザイン対応のヴィジュアル性もアピールできる、使い勝手の良いシンプルなアイコン素材が揃います。 MITライセンスで、商用利用も可能なオープンソースの素材が中心で、クライアント案件で
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
GitHub - excalidraw/excalidraw: Virtual whiteboard for sketching hand-drawn like diagrams
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Webページやスマホアプリのプロジェクトで、チームと開発者向けのドキュメントを作成する際に使用するサイズ・スペース・コメントなど、236種類の要素をまとめた無料のデザイン素材を紹介します。 デザインガイドラインを見栄えよくしたい人にオススメです！ UXUI Doc Kit for Sketch/Figma UXUI Doc Kitの特徴 UXUI Doc Kitのダウンロード UXUI Doc Kitの中身 UXUI Doc Kitの特徴 UXUI Doc Kitは、デザインファイルに仕様を加えるための素材です。SketchとFigma用が揃っています。 UXUI Doc Kitには、以下の素材が含まれています。 アロー: 26種類 スペース・サイズ: 水平および垂直 ノート: ステッカー、ラベル、ダイアログ、コメント カーソル ライドモード・ダークモード 各要素はカスタマイズが可能です。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web制作の常識が変わる、便利な最新オンラインツール48個まとめ
UIデザイナーが知っておきたい海外の優れたデザインシステム17選 | ベイジのUIラボ
ウェブデザイン制作が加速中！便利な最新オンラインツール53個まとめ
これなら分かりやすい！Webサイトのデザイン仕様書・指示書の作り方
もうこれでUI用のアイコンには困らない！商用でも完全無料で利用できる、SVG完備のアイコン素材 -iconsax
デザイナーとエンジニアを巻き込んだワークフローの改善｜鈴木慎吾 / TSUMIKI INC.
表情やポーズも変更できる、人物のイラスト素材が登場！商用でも完全無料の太っ腹ライセンス -Open Peeps
ニューモーフィズムとは、デザインする時に知っておきたいポイント、CSSでの実装方法
プロのデザイナーに学ぶ！ひと手間加えて、UIデザインの印象を改善するデザインのテクニックのまとめ
Webフロントエンドエンジニアにやさしいデザインファイルの作り方 - Qiita
Excalidraw — Collaborative whiteboarding made easy
Stability AI、スケッチを高度な画像に変換する「Stable Doodle」無償公開
デザインツールをXd→Figmaへした話 / プロトタイプ作るようになった話 - エニグモ開発者ブログ
Web アプリのデザインシステムライブラリ | Wantedly Engineering Handbook
CC0の太っ腹ライセンス！スタイルガイドと150種類以上のコンポーネントが揃ったワイヤーフレーム素材 -Contra
現役デザイナー直伝！最高のアニメーションを作成する7つの小技テクニックまとめ
商用利用無料！美しいグラデーション素材・グラデーションメッシュ素材をダウンロードできるサイトのまとめ
もうUIデザインのバージョン管理をサボるのはやめよう | Web Design Trends
Figmaがこれからの人にも、すでに使用中の人にもいい！公式より快適に動作するmacOS用アプリ -Figmac
ffish.asia / floraZia.com (@ffishAsia-and-floraZia)
「使いやすい＆運用しやすい」を目指したデザインシステムのSketch管理
【商用無料】シンプルなUIデザイン向けベストSVGアイコンライブラリ42選
デザインファイルに仕様（サイズ・スペース・コメントなど）を加えるためのデザイン素材 -UXUI Doc Kit
sara.ag.ebb.jp
kyucom.sblo.jp
iwa-maru.hatenablog.com
diamond.jp
blog.kobephotomic.work
www.cross-ja45.com