これはすごい便利！ WebサイトやスマホアプリのUIに今時のアニメーションやインタラクションを簡単に実装できる -Animata
WebサイトやスマホアプリのUIにアニメーション、エフェクト、インタラクションを簡単にコピペで実装できるコードをまとめたAnimataを紹介します。 112種類のアニメーション化されたUIコンポーネントが揃っており、見ているだけでもインスピレーションが刺激されます。 Animata Animata -GitHub Animataの特徴 Animata化されたUIコンポーネント animataの使い方 Animataの特徴 Animataは、WebサイトやスマホアプリのUIに使用されるアニメーション、エフェクト、インタラクションを簡単にコピペで実装できるコードを提供しています。 MITライセンスで、個人でも商用プロジェクトでも無料で利用できます。 AnimataはUIライブラリではありません。UIに動きを与えるためのコード集なので、他のUIライブラリやデザインシステムと一緒に使用できます。カ
ユニクロ公式サイトが使えません（ついでにレジも）｜ブラインドライターズ
ブラインドライターズのスタッフは9割が視覚障害者。 先日、みんなで「どうやって服を買うか」の話になりました。 マネキンの服は見えないので、コーディネートが分からない 下着を買いたいけど、店員さんの性別が分からないので声をかけづらい ロービジョンなので黒なのか紺なのかわかりにくく、店で買いづらい などと、たくさんの悩みごとがありました。 確かに、異性の店員さんに下着の相談はしにくいですよね。 タグが読めなければ、サイズも分からない。リアルでの買い物は一人ではけっこう難しそうです。 そんなときに便利なのがECサイトです。 色もデジタル表記になっていればPCが読み上げてくれるので選びやすい 下着も人に頼まなくていいので買いやすい マネキンのコーディネートは見えないので、サイトで確認したい また「リピ買いするならサイト」という意見もありました。確かに見えていないと広い店内のどこにあるのかサッパリ分
知識０から、ちょっとUIデザインに詳しくなるnote｜やました
前回は、「UIデザインってそもそも何なの？」という概論的な説明と、UIデザイン未導入の組織の中でみんなでデザインを始めてみるための施策（プロトタイピングとユーザビリティ評価）を話しました。 今回はサービス、プロダクト開発において、デザイナーではない人でも知っていて損はないUIデザインの重要ポイントについて説明します。主に以下の３つのテーマについて順番に議論をしていきます。 デバイスやソフトによるUIの違い ユーザーにかかる身体的・認知的負荷を理解する UIの重要概念（ナビゲーション、インタラクションなど）を知る 「ちょっと」と銘打っておきながらめちゃくちゃ長いnoteになってしまったので、気になる項目だけ読むか、何回かに分けて読んでいただくことをおすすめします、。 ※どこか内容に間違ってる部分やご意見ありましたらコメントいただけたら嬉しいです。 デバイスやソフトによるUIの違い皆さんがお使
文字と行間の大きさは何が良い？読みやすさとKPI両立への挑戦
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、デザイナーの鈴木です。CTO室でユーザインタフェースの研究開発を行っています。 みなさんはスマートフォン向けのアプリケーションやWebページを作成する際、文字と行間の大きさをどうしたらよいか迷ったことはないでしょうか？ 私たちはこの疑問を明らかにするためにクラウドソーシングを用いた大規模な実験を実施し、どんな大きさの組み合わせが適切であるか定量的・定性的な分析を行いました。本記事ではこの実験と分析の結果について述べ、さらにこの知見をヤフーニュースに適用した結果どのような貢献が見られたかお話しします。 予備実験 読みやすさに影響を与えうるフォントプロパティはさまざまなものが考えられます。私たちはその中から文字と行間の大き
UIのフォントサイズ、マージン、コンポーネントで黄金比や白銀比によるバリエーションを簡単に作成できるツール -Proportio
UIデザイン用にフォントやアイコンのサイズ、スペース、角丸、シャドウ、パディング、コンポーネントなどで比例スケールを使用したバリエーションを簡単に作成できるオンラインツール（ローカルも可）を紹介します。 たとえば、黄金比でフォントサイズを設計したり、白銀比でコンポーネントを設計したり、ということができます。また、作成した比例スケールは、CSSで書き出されるのですぐに使用できます。 Proportio Proportio -GitHub Proportioの特徴 Proportioの使い方 Proportioの特徴 Proportioはデザインシステムに必要となるタイポグラフィ、スペースや角丸やシャドウなどのシェイプ、コンポーネントに使用する比例スケールを簡単に作成するためのツールです。 パラメトリックデザイン（変数を基準としてサイズを決める形状作成方法）を採用しているので、体系的なデザイン
Apple公式の“デザイン素材セット”、Figmaでも公開 アプリUIに活用OK
米Appleは6月7日（現地時間）、デザインコラボレーションツール「Figma」上で、iOS 17／iPad OS 17の「デザインキット」を公開した。デザインキットとはボタンやシークバーといったUIの構成要素やテンプレートなどをまとめたもので、アプリのUI／UXに活用できる。これまでは「Adobe XD」や「Sketch」といったデザインツール上で公開していたが、初めてFigmaで公開した。 今回公開したものはβ版で、今後数週間から数カ月かけてアップデート予定。Apple PayやmacOS Sonoma、watchOS、MRヘッドセット「Apple Vision Pro」のOS「visionOS」のデザインキットを追加していくという。 関連記事 デジタル庁、Web・アプリデザインの指針まとめた「デザインシステム」公開 地方自治体の活用も見込む Webサイトやアプリの開発時、一貫したデザ
Figma上でUIデザインを考えてくれるAIデザインコンパニオン「Genius」発表 | gihyo.jp
デザインツールなどを開発しているDiagramは2月10日，Figma上でUIのデザインをユーザと共同で作成できるAIベースのデザインコンパニオンGeniusのプレビューを公開した。 Genius by Diagram URL：https://www.genius.design/ 🔅 Introducing Genius, your AI design companion in @figma It understands what you’re designing and makes suggestions that autocomplete your design using components from your design system. Genius is coming soon. Join the waitlist → https://t.co/ldAdWySptX pic
Devices from Design at Meta
Meta supports a diverse audience around the world and an equally diverse set of devices. To emphasize that in our design mocks, we redrew a range of devices to show the global diversity of the people using our products. Many of the devices come with a bitmap of the device with and without shadows. Please do not repackage and redistribute these as your own. Please see disclaimer for full details.
最高のデザインツール「Drama」が登場！SketchやXDより良いかも。 | Web Design Trends
Dramaとは Dramaは、インタラクティブなプロトタイプやアニメーションが作成可能なUIデザインツールです。 公式サイトでは、Dramaによってできることとして下記の3つが挙げられています。 インタラクティブなプロトタイプやアニメーションが作れるUIデザインツールといえば、Framer XやInVision Studioなどが思いつきますが、使いやすさや操作性、機能の豊富さを比べるとDramaは頭1つ抜け出しているような印象です。 また、SketchやAdobe XDなどと比べるとUIデザインツールとしての機能に大きな遜色は無く、むしろ動作の滑らかさではSketchよりも勝っているのではないでしょうか。 Dramaを一言で述べると、「これまでのデザインツールのいいとこ取りをしたツール」であると言えるかもしれません。 現在はまだ正式リリースはされていませんが、公式サイトからベータ版をダウ
コピペで使える！マテリアルデザインなUIアニメーション | UX MILK
近年、UIにおけるアニメーションやインタラクションの重要度が増していますが、それらをデザインしたり実装する際、様々なものを参考にすると思います。 実在するアプリもさることながら、DribbbleやBehanceなどのポートフォリオサイトではデザインコンセプトとしてアップロードされているものも多く、参考になるものはたくさんあります。 中には独創的なものもあって、実用性に欠けると感じるようなものもあるかもしれませんが、それでも固定概念を覆す機会になったり、断片的にインスピレーションを得たりもできますし、何よりも、見ていて楽しいものです。 今回は海外のUIコンセプトをたくさんストックしているMaterialUpからいくつかの作品をピックアップしてご紹介していきます。MaterialUpはその名のとおりマテリアルデザインの文脈を組んだ作品を多くそろえているサイトです。 そして多くのGIFだけのサイ
シンプルの心理学 ― 心地良いデザインのために | POSTD
私たちの誰もが理解する”シンプル”という概念の正体を突き止めることは、難しそうに見えますが、実はそうでもありません。 私たちが製品やWebサイトをシンプルと感じるかどうかの背景には、”見れば分かる”ということだけではなく、単なる直観的な反応にとどまらない何かがあります。 Steve Jobs は次のように述べています。 シンプルであることは、複雑であることより難しい場合がある。物事をシンプルにするためには、思考を整理して懸命に考えなくてはならない。しかし、努力する価値はある。ひとたび達成すれば、山をも動かすことができるのだから。 シンプルにものを作ることにそんなに力があるのであれば、なぜ私たちはそうできないのでしょうか。 なぜシンプルであることは、こうも複雑なのでしょうか。 人生における多くの事柄と同じように、シンプルさには表面的に見えている以上の何かがあります。ここでは、私たちの脳が新し
【NIXON公式】ニクソンジャパンオンラインストア | 時計、バックパック、アクセサリー
平素は、ニクソン公式オンラインショップをご利用いただきまして誠にありがとうございます。2023年5月末をもちまして、ニクソンはjp.nixon.comでの販売を終了いたしました。長きに渡りご愛顧を頂きましたこと、心より感謝を申し上げます。ニクソン商品をお求めの場合は、正規お取扱店へ在庫のご確認をお願いいたします。
デザインは基本が大切！ひとつ一つをしっかり見直しておきたい20のデザインテクニック
文字の扱い方、レイアウト、カラー、エフェクトなど、プロのデザイナーがこだわっているデザインの基本となるルールと、ついやってしまう間違いとその解決方法まで、ワンランク上のデザイナーになるためにひとつ一つをしっかり見直したい20のデザインテクニックを紹介します。 カーニングとはフォントの文字間のスペースを調整することです。カーニングの最終目的は、それぞれの文字の間が不自然な空白にならないように字面間のスペースを均等にし、テキストを美しく整然とした一つのまとまりにデザインします。 カーニングがされていない、カーニングがいいかげんな仕事は、デザインの世界において大罪の一つです。カーニングはデザイナーが早い段階で身につけるべき重要なスキルです。 20 Typography Mistakes Every Beginner Makes 基本的だけど大切なタイポグラフィのシンプルな14のルール リーダビリ
INFOBARに見る、“デザインがうまれる空間”
INFOBARに見る、“デザインがうまれる空間”2015.03.19 11:00Sponsored INFOBARの歴史、変わらないデザイン性はどんな空間で生まれ、育まれたのか。 ときは2003年、パカっと開いて使うクラムシェル型携帯電話全盛の時代に生まれたストレートタイプの携帯電話、それがINFOBARでした。 少しでもピクセル数の多い画面を、少しでも早いCPUを、またはカメラの解像度を、当時は携帯電話の開発とはスペック競争の側面がありました。そんな時代にあって、｢性能も大事だけれどデザインだって重要ですよ｣と立ち上がった、au design project。INFOBARは、このプロジェクトの第一弾としてプロダクトデザイナー深澤直人さんのデザインにより開発された携帯電話だったんです。 新型MacBookの筐体キワキワまで攻めたフルサイズのキーボードが話題の昨今ですが、初代INFOBAR
Timeline JS
TimelineJS is an open-source tool that enables anyone to build visually rich, interactive timelines. Beginners can create a timeline using nothing more than a Google spreadsheet, like the one we used for the Timeline above. Experts can use their JSON skills to create custom installations, while keeping TimelineJS's core functionality. Tips & tricks Keep it short. We recommend not having more than
45000種類のモダンなUIをパーツごとに検索できるサイト「UICloud」 | ライフハッカー・ジャパン
「UICloud」は45,000以上のモダンなUIをパーツごとに検索できるサイトです。ボタンやメニューなどのデザインを検索することができ、さらにそのパーツをPSD形式でダウンロードすることも可能です。 以下に使ってみた様子を載せておきます。まずUICloudへアクセスしましょう。 このようにパーツごとにカテゴリわけされています。カテゴリから絞り込むこともできますし、フリーワードで検索して探すことも可能です。 ダウンロードボタンがあり、ここからPSD形式で素材を手に入れることができますよ。モダンなUIを探しつつ、素材も手に入るのは助かりますね。ぜひUIをデザインする際にご活用ください。 UICloud （カメきち）
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「Tama Design University」 by 多摩美術大学 TUB
Proportio.app
【永久保存版】エンジニア・デザイナー必見！「UI/UX」の基礎が学べるSlideshare30選
Webデザインの引き出しを増そう！細部までこだわったUIデザインが参考になるDribbbleアートワークのまとめ
