表情やポーズも変更できる、人物のイラスト素材が登場！商用でも完全無料の太っ腹ライセンス -Open Peeps
笑顔でこんなポーズ、泣き顔でこんな仕草、希望通りのイラスト素材が完全無料で商用利用できるOpen Peepsを紹介します。 普通のイラスト素材はそのまま使用するしかないですが、人物の表情や髪型、ポーズ、動作などさまざまなパーツを組み合わせて、584,688通りのキャラクターを作成することができます。 Open Peeps Open Peepsの特徴 Open Peepsのダウンロード Open Peepsのイラストライブラリ Open Peepsの特徴 Open Peepsは商用でも個人でも完全無料で利用できるイラストのライブラリで、ライセンスはCC0です。 イラストはすべて手描きのベクターで、さまざまなパーツを組み合わせることで584,688通りのキャラクターを作成することができます。アプリは、Adobe XD、Sketch、Figma、Studioをサポートしています。
プロのデザイナーに学ぶ！ひと手間加えて、UIデザインの印象を改善するデザインのテクニックのまとめ
UIデザイナーの仕事は試行錯誤の繰り返しで、ちょっとしたことで印象が大きく改善されます。デザインを改善するために役立つ実践的なテクニックを紹介します。 今手がけているUIデザインを改善するだけでなく、次のプロジェクトを開始する際の指針としても簡単で実践しやすいテクニックです。 9 tips to quickly improve your UI designs by Marc Andrew (mrcndrw.com) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. 要素をより明確に表示する 2. デザインに使用する書体は1つで十分 3. 長いコンテンツは文字のサイズに気をつける 4. ユーザーのオンボーディングエクスペリエンスを改善する 5. シャドウを使う時は光源を意識する 6. テキストと画像のコントラストを改
ニューモーフィズムとは、デザインする時に知っておきたいポイント、CSSでの実装方法
ニューモーフィズムとは、要素が背景と同じ素材で作られており、シャドウを与えて押し出されたような窪んだようなスタイルです。最近注目されているUIデザインのトレンド「ニューモーフィズム」を簡単な手順でデザイン・実装する方法を紹介します。使用するソフトウェアは、FigmaでもIllustratorでもAdobe XDでもSkecthなど、なんでもOKです。 ニューモーフィズムのデザイン方法、使用するカラーの選び方、UIデザインに適用するCSSの実装コードなど、すぐに実践できます。 Neumorphism (Soft UI) in User interface design - Tutorial by Kanhaiya Sharma 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 新しいトレンド「ニューモーフィズム」 ニューモーフィズム
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つのツールの比較について補足したいと思いました。 前回の記
もうこれでUI用のアイコンには困らない！商用でも完全無料で利用できる3,000種類のシンプルなアイコン素材
商用でも無料で利用できる1,000種類のアイコンが3つのスタイル、そしてPhotoshoop用・Adobe XD用・Sketch用・Figma用・inVision用、そしてSVGまで完備されたMaterial Icons Libraryを紹介します。 一度にすべてのアイテムがダウンロードできるので、備えておくと便利だと思います。 Material Icons Library ラインセスはApache License Version 2.0で、個人でも商用でも無料で利用できます。 アイコンはMaterial Designを踏襲しており、全部で1,000種類のアイテムが揃っています。スタイルは角丸・アウトライン、ツートーンの3種類。合計すると、3,000種類以上になります。 アイコンの特徴 フォーマットは、Photoshop, Adobe XD, Sketch, Figma, inVision
プロのUXデザイナーから学ぶ！デザインをする時にグレースケールで始めると、デザインがよくなる4つ理由
Webページやアプリをデザインする時、空白スペースが効果的に使えない、要素のグループ化や情報の構造化が苦手、そんなデザイナーの人にお勧めなのが、カラー無しのグレースケールでデザインを始めることです。 カラーを使用する前に、グレースケールでデザインを作成すると、レイアウトを明確に考えることができ、UXデザインの優先順位を決めることができます。 4 Reasons Why You Should Design Without Color First by Anand Satyan 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. レイアウトとスペースの扱いに集中できる 2. クライアントは適した質問をするようになる 3. デザインを作成する時の重要なポイント 4. デザインに一貫性を作り出す 1. レイアウトとスペースの扱いに集中
商用でも完全無料！Webサイトやスマホアプリをプレゼンで魅せるためのベクター素材 -Vector Mockups Library
Webサイトやスマホアプリのプレゼンテーション用に便利な無料のベクター素材を紹介します。iPhone, Androidをはじめ、スマホ・タブレット・デスクトップ・ブラウザなど、さまざまなデバイスが揃っています。 Vector Mockups Library 素材はMITライセンスで、個人でも商用でもクライアントのプロジェクトでも無料で利用できます。クレジットの記載は必要ありません。 ライセンスページ Vector Mockups Libraryには、以下のデバイスが揃っています。 iPad iPad Pro 12.9 iPad Pro 11 iPad Pro 12.9 iPad Pro 10.5 iPad 9.7 iPhone iPhone X iPhone 8 iPhone 5S Mac iMac Macbook Pro Watch Watch Series 4 Watch Series
UI用のカラーシステムを構築する新しい方法とツール
少人数で一回限りのプロジェクトであれば、カラーシステムは割と簡単に構築できます。しかし、大人数や長期間のプロジェクトになると、そう簡単ではありません。 Webサイトやスマホアプリで、長期的に使用でき、拡張性があり、アクセシブルなUI用のカラーシステムを構築する新しい方法を紹介します。 Re-approaching Color 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに カラーの名前の付け方 カラーの選択方法 カラーのアクセシビリティ はじめに カラーとは世界を認識するのに役立ち、そしてインターフェイスにとっても重要な存在です。わたし達が予測して、そして理解し、意思決定するのをカラーは導きます。 例えば、レッドの文字は注目し、グリーンの数字はリラックスし、グレーの文章の前にブラックの文章を読むでしょう。ブルーの文字は
Zeplinがかなり便利！Adobe XDやPhotoshopからデザインの指示書やスタイルガイドを簡単に自動作成できる | コリス
Webサイトやスマホアプリのデザインの指示書やスタイルガイドをわざわざ作成するのは時間がかかり、なかなか面倒です。Adobe XDやPhotoshopなどで作成したファイルから、Zeplinでこれらを自動生成する方法を紹介します。 Zeplinは1プロジェクトまで無料で利用できます。Adobe XDにもデザインスペックという機能でデザイン指示書を自動生成できますが、Zeplinの方が一枚上手だと思います。 ZeplinはAdobe XD, Photoshop, Sketch, Figmaに対応しており、ここではAdobe XDを使用して解説します。基本的な使い方は同じです。 準備: Adobe XDとZeplinのインストール Adobe XDでデザインを開く Adobe XDからZeplinにファイルをインポート Zeplinでデザインの指示書・スタイルガイドを作成 準備: Adobe
もうアイコン素材に困らない！CC0でSVG完備、420種類のシンプルにデザインされたアイコン素材 -Evericons | コリス
シンプルなアイコン素材は、重宝しますよね。 Webサイトやブログ、スマホアプリなどにぴったりな、シンプルにデザインされた無料で利用できるSVG完備のアイコン素材を紹介します。 CC0なので、商用利用時のクレジット表記は不要、複製、改変、配布などもOKで、使い勝手がかなりよいと思います。
商用利用無料！Webサイトやスマホアプリの美しいサイトマップやワイヤーフレームを作成できるベクター素材
300種類以上のコンテンツ、カード・ライン・アローなど、フローチャートで使用する形もベクターで収録された、サイトマップ・ワイヤーフレームを作成できる無料素材を紹介します。 商用レベルの美しいフローチャートを簡単に作成できる素材セットです。
UIデザインの作業状況やワークフローの変化を知り、自分にあった良い方法はどんどん取り入れよう！
Webデザイナーやデベロッパーの実際に作業しているファイルを元に、UIデザインの作業状況を調査したレポートを紹介します。 UIデザインに使用しているツール、ファイル、シンボル、レイヤー、ベクターグラフィックなど、どのようなワークフローが実践されているか垣間見ることができます。 Avocode 2017 UI Design Report 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 2017年、UIデザインの作業状況に関するレポート 1. Webデザイナーが使用しているツール 2. ファイルの容量 3. デザインのコンポーネント化 4. レイヤー管理 5. テキストのレイヤー 6. ベクターグラフィック レポートのダウンロード 2017年、UIデザインの作業状況に関するレポート 本レポートは、デザイナーとデベロッパーのコラボツー
簡単すぎて驚いた！ユーザーフローとプロトタイプが短時間で作成できてしまうツール -Overflow
Webサイトやスマホアプリのデザインで重要なのは、単一の画面ではなく、ユーザーがどのように遷移するか全体の流れを通して画面をデザインすること。 しかし、ユーザーフローやプロトタイプを作成するのは、なかなか面倒です。 Sketch（Photoshop, Adobe XDにも対応予定）ファイルからアートボードを自動同期し、ユーザーフローとプロトタイプを簡単に短時間で作成できるツールを紹介します。 現在はベータ版でmacOSのみですが、Windows版のリリースも予定されています。 Overflow Overflowの特徴 Overflowのダウンロード Overflowの使い方 Overflowの特徴 Overflowは、ユーザーフローとプロトタイプを簡単に作成することができるデスクトップ用のツールです。 オンラインツールではないので、安心して利用できると思います。 ユーザーフローの作成 Ov
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
簡単で便利！Sketch, Figma, AdobeXDなどにコピペで利用できるUIデザイン用のカラーパレットを生成 -CopyPalette
Webサイトやスマホアプリの画面遷移や構造を設計するための無料フローチャート素材 -Greyhound Flowcharts
商用利用無料！クリスマス用の高品質なイラスト・写真・フォントがダウンロードできる -Christmas HQ
iOS 12に使用されている全てのUI要素・スクリーンが収録されたAdobe XD, Sketch, Figma用の無料デザイン素材
最近のHTMLメールで見かけるさまざまなレイアウトやコンポーネントが揃ったデザイン素材 -Email Design System