[B! ui] michael-unltdのブックマーク

株式会社FAKE(フェイク) | デザインドリブン®︎で新規事業やDXを支援、UIUXからシステム開発まで提供するコンサルティングファーム

プロトタイプとヒアリングを活用したデザインドリブン®︎の手法で、事業成長のためのデザインやシステムを提供するコンサルティングファームです。新規事業からプロダクトのグロース、UI/UX改善、DXなど、戦略から成長フェーズまで伴走します。

michael-unltd 2024/06/02

事例が良い

リンク

GitHub - tldraw/make-real-starter: Make it real

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. Dismiss alert

michael-unltd 2024/05/31

リンク

make real • tldraw

Draw a ui and make it real with tldraw.

michael-unltd 2024/05/31

リンク

Konsta UI - Mobile UI components built with Tailwind CSS

iOS & Material Design themesAll Konsta UI components come with pixel perfect native-like iOS and Material Design themes created using official design guidelines. Everything you need for your iOS and Android apps!

michael-unltd 2023/05/07

リンク

Tailwind Awesome

Discover the best Tailwind templates & UI kits Tailwind Awesome is a curated list of the best Tailwind templates & UI kits in the internet. We are actively searching, and curating the coolest resources out there.

michael-unltd 2023/05/04

リンク

WordPress Hosting Plans & Pricing: Fast & Secure By Elementor

michael-unltd 2020/07/26

UI Builder

リンク

アプリのアップデート300本ノックから学ぶUI改善のヒント｜宮﨑晃

こんにちは、HR業界でアプリマーケティングをしている宮﨑です。・アプリのアップデート前後のUI変化・Push通知など気になったGrowth施策こうしたものを﹁#アプリノック﹂としてTwitterで投稿すること3ヶ月。300本以上のネタが溜まってきました。今回のnoteでは﹁フォッグの消費者行動モデル﹂というフレームワークを使ってまとめていきます。行動 = 動機 × 実行能力 × きっかけザックリいうとユーザーに何か行動を促す際に﹁動機/実行能力/きっかけ﹂の3要素をどう揃えるか？というモノ。詳しくは深津さんの記事がとってもわかりやすいのでおススメです。アプリノックがUI改善の勘所だけでなく、Growthの知識も一緒に学べるコンテンツになっていくと嬉しいです。それではいってみましょう！︻動機︼がないと、やる気にならない①慣れない体験にはイメージ作りをよくわからない体験は

michael-unltd 2020/01/18

ui
*design

リンク

UI/UXデザイナーなら一度は目を通しておきたい「デザイン原則」まとめ【随時更新】

世に出ている﹁デザイン原則﹂と呼ばれるものたちをまとめてみました。ユーザビリティ関連からモバイルUX、サービスデザインにいたるまで、広い範囲のデザイン原則を網羅したつもりです。ただし、チェックリスト的にまとめたため、内容の詳細は記述していません。出典や内容を紹介している外部リンクを張っておきましたので、詳細を確認したい方はそちらをご参照いただければと思います。なお、この記事は有用なデザイン原則を見つけ次第、随時更新していきます。更新履歴 2018/10/01‥ ﹁アクセシビリティの4原則﹂﹁Material Designの原則﹂﹁AndroidTVデザイン原則﹂﹁インクルーシブデザインの原則﹂を追加 2016/12/28‥ ﹁Microsoft デザイン原則﹂を﹁Windows UXデザイン原則﹂にアップデート﹁Apple Watch デザイン原則﹂を追加 2015/10/

michael-unltd 2019/07/12

リンク

Buefy: lightweight UI components for Vue.js based on Bulma

Buefy is a lightweight library of responsive UI components for Vue.js based on Bulma framework and design.

michael-unltd 2019/03/04

リンク

アニメーションが表現できる直感的なUIデザイン・プロトタイピングツール「Atomic」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

こんにちは、デザイナーのぺちこです。今回はUIデザイン・プロトタイピングツールの「Atomic」をご紹介します。ブログのネタ探しにネットサーフィンをしていたら偶然見つけたものなのですが、サイトを見ているだけで簡単そう＆すごそう！と思ったので実際に使ってみました。 Atomicとは https://atomic.io/ まずは、思わず使いたくなった紹介動画をご覧ください。アニメーションまでつけた分かりやすいプロトタイプが、なんともサクサクと簡単に……！しかも無料。（beta版だけかもしれませんが）これはとりあえず試してみるしかない！公式サイトの「SIGN UP FOR FREE」から登録ができます。「Atomic」の特徴それでは「Atomic」の特徴について、くわしくご紹介します。ブラウザ上で使える「Atomic」は、WindowsでもMacでも使えるオンラインツールなので

michael-unltd 2019/02/17

"Atomic"

リンク

こんなにあった！UIデザイナー向けアニメーションライブラリー最新ベスト9

Webサイトをおしゃれに、かっこよく演出するアニメーション系JavaScriptライブラリー。デザイナーにも使いやすいライブラリーをまとめました。デモを見るだけでもアイデアがひらめくかも？ Webデザインはこの10年間で大きく変わりました。2007年頃は雑誌のように静的なレイアウトが主流でしたが、2017年には数千のパーツが連動して伸縮しながら移動するデザインも可能になりました。これから、優れたUIデザイナーになるにはWebアニメーション技術に関する知識も必要です。この記事ではUIデザイン向けの良質なアニメーションライブラリーを9つ紹介します。現時点での最新の情報と、各ライブラリーの強みや弱み、向き不向きをまとめたので、タスクに適したライブラリーを選んでください。﹁コーディングプロ級﹂の開発者ではなくコーディングもこなせるUIデザイナーの視点で各ライブラリーを評価しました。CSSだけ

michael-unltd 2017/11/19

リンク

今さら聞けないRelativeLayoutの話 - Qiita

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="16dp"> <ImageView android:id="@+id/image_icon" android:layout_width="96dp" android:layout_height="96dp" android:layout_marginRight="16dp"/> <TextView android:id="@+id/text_primary" android:layout_width="match_parent" android:layout_hei

michael-unltd 2017/07/07

リンク

モバイルアプリにおける５つのアニメーションの活用法

10年前、ユーザーインターフェイスでアニメーションやモーションを使うことは、ユーザーのことを考慮するのではなく、むしろユーザビリティの低下につながりました。なぜなら、ピカピカする派手なWebサイトや立ち上がるポップアップ、点滅するボタンなどが多用されていたからです。しかし、アニメーションやモーションに対する認識は、ここ数年で大きく変化しました。 iPhoneやモバイルアプリの導入以来、多くのデザイナーは動的アニメーションの将来性を見越して経験を積んできました。そして、アニメーションはインターフェースデザインの重要な部分になりつつあります。なぜなら、アニメーションはデザイナーに﹁時間﹂という新たな次元を提供したからです。現代のインターフェースは、静的な画面の連続ではありません。アニメーションによって製品に時間という次元が生まれたため、機械と人間のギャップを埋めることが可能になったのです。

michael-unltd 2017/05/24

リンク

スタイルガイドジェネレーターの「Fractal」がかなり良さそう

ずっと自分好みのスタイルガイドジェネレーターを探していたんですが、ようやく見つけました！﹁Fractal ﹂というツールで、かなり良さそうなのでご紹介します。初級編、中級編の2回に分けて、初級編ではインストールと初級設定からウェブUIの起動までを、中級編ではコンポーネントのより細かい設定などについてご紹介します。公式ドキュメントは初めてだとわかりづらいところもあったので、その辺を補う形でまとめてみたいと思います。 ※先日、スタイルガイドとパターンライブラリの違いについてまとめましたが、スタイルガイドやパターンライブラリを自動生成するツールは﹁スタイルガイドジェネレーター﹂というのが一般的なようです。﹁パターンライブラリジェネレーター﹂とは呼ばないみたいですね。では早速、﹁Fractalのはじめの一歩﹂的な感じで行ってみましょう！ Fractalとはまずは、ざっくりとFractalをご

michael-unltd 2017/05/09

WebUIの書き出しが可能、良さそう。

リンク

【2017年版】海外のプロトタイピングツール11選（機能比較表つき）

Webサイトやアプリの制作過程において欠かせないプロトタイピングツール。海外のサービスも含めると、その種類は多岐に渡ります。そのため、﹁それぞれのツールの特徴ってなんだっけ？﹂と混乱することも多いでしょう。特に海外の新しいツールの情報を仕入れても、結局﹁いつもの﹂ツールに留まってしまいがちです。しかし、自らのスキルや制作したいプロトタイプレベルによって最適なツールを使い分けることは、デザイン業務の可能性を広げます。そこで今回は制作したいプロトタイプの度合いに応じて、海外のプロトタイピングツールをご紹介していきます。シンプルなプロトタイプ制作におすすめここでは、シンプルなプロトタイプ制作を行う際に推奨したいプロトタイピングツールをご紹介します。﹁使用感や見た目の心地よさの追求﹂までは行わない想定をしているので、簡易なアニメーション設定を行うことができるサービスを取り上げます。１.P

michael-unltd 2017/03/31

“Indigo Studio”が気になります。

ui
UX

リンク

インタラクションの参考にしたいUIアニメーション５選

MatthieuはUpLabsの創設者で、MaterialPaletteとWOW.js.のクリエイター。良いユーザー体験のためには格好良いデザインだけではなく、仕組みや構造、使いやすさにも気を配る必要があります。近年ではUXデザインの重要性が叫ばれ、こういった考え方も徐々に浸透してきてはいますが、だからといってビジュアルやインタラクションのデザインを軽視してもいいと言うわけでもありません。この記事では過去にも何度か取り上げている、UIコンセプトギャラリーサイトのUpLabsからまたいくつかのUIコンセプトを実装コード付きでご紹介します。ユーザーがサイトを使うときの心地よさを演出するためのヒントがたくさん詰まっていますので、是非参考にして下さい。 ※各項目ごとにCodePenを埋め込んでいるため、読み込みに少し時間がかかる場合があります UpLabsのオススメUIコンセプト5選 1. カ

michael-unltd 2016/12/19

リンク

アニメーションが心地よいマテリアルデザインのUIサンプル５選

徐々に浸透しつつあるGoogleのデザインガイドライン、マテリアルデザインですが、先日ようやく日本語版も公式にリリースされました。マテリアルデザインやマテリアルモーションは実世界のモチーフを用いて、ユーザーがより直感的にUIを把握・誘導できるようにするためのものです。詳しくは以下の記事をご覧ください。 UIデザインの歴史に学ぶシャドウと奥行きの使い方この記事ではUIコンセプトやポートフォリオをたくさん掲載しているMaterialUpから、マテリアルデザインを用いたデザイン例をピックアップしてご紹介していきます。すべてCodePenで実装済みの作品なので、裏側のコードを見て実装のヒントに役立ててください。 MaterialUpのオススメUIコンセプト5選 1. ミュージックプレイヤー楽曲再生アプリのUIコンセプトです。プレイボタンを押すとジャケットやシークバーがレコードのように変わりア

michael-unltd 2016/10/14

リンク

16種類（45カテゴリ）の業界150サイトの調査から分かるスマートフォンサイトUIの現状10選

多種多様な業界のスマートフォンサイト（150サイト）をひたすら調査し、そこで見つけた昨今のスマートフォンサイトで取り入れられているUIのルールや手法、共通点などをご紹介します。Read less

michael-unltd 2016/08/05

*design
ui

リンク

Sketch 3対応ですぐに使える無料アプリUIキット8選

アプリをデザインしたり、モックアップを作るとき、毎回ゼロからデザインを作るのは大変です。最近ではPhotoshopやSketch 3で使えるUIのテンプレートキットなどが幅広く出回っており、しかも多くが無料で使用可能です。そんなお手軽にUIを作ることのできるキットですが、今回は中でもSketch 3に対応している無料のものを集めてみました。 Avital Mobile UI Kit Avital Mobile UI Kit ※ダウンロードにはメールアドレス登録が必要です Phoenix UI Phoenix UI: Vol 1 by Adrian Chiran Carbon: Material UI kit for eCommerce apps Carbon: Material UI kit for ecommerce apps ※ダウンロードにはTwitterでのシェアが必要です F

michael-unltd 2016/07/31

Free UI Kit

リンク

Prottとsketchとzeplinのススメ

書籍化し、12万部突破しました。︻SlideShare広告回避用︼ https://www.docswell.com/s/morishige/K3MXPZ-howtodesignslides ・PDFは無料でダウンロードできます・自己学習や勉強会などの目的でしたらご自由にお使いいただけます・授業・研修への利用はフォーム( https://forms.gle/WwgXTT974xFW78mFA )にご報告ください・記事への参考資料にする際は適切な出典明記をお願いいたします︻使っているフォントについて︼ M+フォント﹁MigMix1P﹂です。こちらもメイリオ同様おすすめです。フリーで使えます。︻個人HP︼ > https://mocks.jp > 仕事のご依頼はこちらから︻書籍情報︼デザイン入門‥https://amzn.asia/d/4WDsTI6 デザイン図鑑‥https

michael-unltd 2016/07/17

リンク

はてなブックマーク

タグ

関連タグで絞り込む (67)

uiに関するmichael-unltdのブックマーク (46)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第2週）

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

今週のはてなブックマーク数ランキング（2024年7月第1週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス