トマシープが学ぶ

Unity/VR/AR/デザイン好きのミーハー 記事内容は自分用のメモです

デザイン

XD⇨Unity試す

XDファイルをUnity上に変換してくれるアセット試す こちらを使ってみる AdobeXD -> Unityの自動変換行うアセットはいくつも見てきたけれど、ここまで綺麗に再現出来るのはうちだけだと思う本当にXDファイル突っ込むだけで、ここまでピッタリ合うのは努力の賜…

はてなブログのアイキャッチをCanva連携で作れるようになった!

おおー! 記事編集画面内で、誰でも簡単に「アイキャッチ画像」を作れるようにしました!100種類のテンプレートから選んで編集することも、自分でゼロから作成することもできます。グラフィックツール Canva @CanvaJapan と連携した機能です。どうぞご利用く…

デザイン修行Part2 【XD】

以前やったデザイン修行が楽しかったので、またやる! bibinbaleo.hatenablog.com 今回はこちらのサイトやtwitterのを真似してみる desaken.com twitter.com 随時更新予定 背景写真ぼかし 線で繋ぐ文字 インパクト文字 左上 ポップな文字 写真の一部切り抜き…

フォントワークスがGithubで公開したフォント使ってみた!

例のフォントワークスがgithubにあげたフォント使ってみた! 事件!!!!!フォントワークスがGitHubでフォントフリー公開はじめてた!!!!!!レゲエとかトレインとかクレーとかランパートとかあるんだけどえ、これが無料で!?!?は!?!?https://t.…

コメント・チャット入力UI

Slack zoom Teams GoogleMeet Cluster Hubs アイコン Slack 入力したら右下のSendマークがアクティブになる Slack通話だとこんな感じ zoom Enterを押したら入力される Teams GoogleMeet Sendマークがある 入力したらSendマークがアクティブになる ちなみにチ…

アコーディオンUIとサイドバーの開閉UI

アコーディオンUI サイドバーの開閉 XD Inoreader Youtube Notion Twitch アコーディオンUI サイドバーとかでよくある▶を開くと子が出てくるUIをアコーディオンUIというらしい 狭い表示領域の有効活用 www.hypertextcandy.com Unityで実装するにはどうしたら…

3Dデザインツール「Spline」使ってみた!

Spline サンプルを見る ドキュメント Shape Material調整 Texture Frenel Noise Grandient Depth Light Status、アニメーション エクスポート機能 PublicURLとWebContent Image Video 最後に Spline 3Dのデザインが作れるソフト。 最近できたっぽい Spline …

CEDEC2020の聞いたセッションメモ50

タイムシフトで見たり記事読んだセッションメモ。 記事になっているものは記事を貼ったので、CEDECのパスを買っていない人にも参考になると思う。 くくりは私の雑な括りです。 CEDiLで発表スライドのpdfはみれます cedil.cesa.or.jp 各社のCEDEC2020記事リン…

カラーパレット保存サイト【Coolors】

キャラクターの色とかを保存しておきたい。 カラーパレットを作って保存できるサイトあるのか調べた webdesign-trends.net Coolors カラーパレット作る パレット保存 書き出し その他機能 配色提案 いまいちな点 ColorPick Eyedropper Adobe Color 最後に Co…

Unityデザイナーズバイブルを読んだメモ①【エディタ/uGUI】

こちらの本をやっていく www.borndigital.co.jp Unity2019.4.5f1使用 エディタ PackageManager オブジェクト操作 UI操作(RectTransform) おまけ)UIScaling レイアウト uGUI 9スライス FillCenter 画像サイズ AspectRatioFitter Outline2重付け グラデーシ…

音量ゲージ・音量調整バーのUIスクショまとめ

音量ゲージにも何種類あって、 ・自分のマイクの音量を示すもの ・相手の出力音量を示すもの ・出力音量を変更するスライダー など それぞれの種類を見ていきたい。 自分のマイク音量 相手の出力音量 出力音量を変更するスライダー 最後に 自分のマイク音量 …

【Unity】ボタンにホバーした時のテキスト表示をスクリプトなしで実装する【EventTrigger】

よくVRのUIで、ボタンアイコンにレーザーを当てたらそのボタンの説明が出てくるUIあるじゃないですか。 あれを簡単に実装したい。 できた EventTriggerを使う とっても簡単で、ButtonにEventTriggerコンポーネントを付けて、PointEnterとPointExitに表示非表…

あるあるデザイン45種類全部使ってみる!!

あるあるデザイン やり方 作る題材 ブログアイキャッチ画像 Youtubeのサムネ Boothサムネ その他各種カバー画像等 1.だいたいツートンで行ける+44.またがる文字 2.丸インパクト 3.太枠を入れてみる 04.左から4分の1の法則 05.さんかく散らす/20.抜け感中…

白ニューモフィズムデザインのアプリをUnityで作った【制作編】

前回構想したので、作ります。 bibinbaleo.hatenablog.com ストップウォッチ事例 素材とか パーツ制作 音 フォント ThirdParty表記 アプリアイコン Unity コード DeviceSimulator UIとか MacBuild Github 最後に ストップウォッチ事例 必要な要素はとか表示…

白ニューモフィズムデザインのアプリをUnityで作りたい【構想編】

前作ったニューモフィズムデザイン bibinbaleo.hatenablog.com いまだにアプリやwebで見たことないので、自分で作ってみたい。 題材考える ストップウォッチ ニューモフィズムUIの例 音 最後に 題材考える シンプルなスマホのツールがいい。 できればストア…

フォント管理プレビューアプリfontvuerとWindowsフォント一覧画面

fontvuer こちらの記事で知った coliss.com MITライセンス。こちらからダウンロードできる fontvuer.netlify.app 自分で打った文字で一覧表示できる!フォントサイズ変えたり文字幅も変えられる。 ダークモードにもなるよ!いいね! Monospaceは等倍 最近見…

タブバーのデザインまとめ【アプリ事例】

下のボタンを押したら画面が切り替わる。 随時追加する。 VR ambr ios AppStore(iPad) GooglePlayStore Googleフォト Twitter Instagram デンソーのQRコード Yahoo乗り換え 時計(Android公式?) Lips ユニクロ GU Honeys 東京流通センター ABCマート ノジ…

UI/UXの本3冊読んだ【なるほどデザイン】【UIの教科書】【つい】

なるほどデザイン はじめてのUIデザイン UIのコンポーネント種類 UIの見えない部分 スマホアプリ(iosとアンドロイド) キャンセル Web レスポンシブデザイン UIを作る 命名 検証 ロゴ つい 三つの体験デザイン 直感のデザイン 驚きのデザイン 物語のデザイ…

おしゃれなQRコードを含むデザイン

QRコードメーカー QRコードの周り 背景色+白 QRコード自体のデザイン QRコードの色を変える QRコード自体に模様を入れる 事例 QRコードメーカー 私がいつも使っているもの。シンプルでいい感じ! www.kenjisugimoto.com こちらはデンソー公式 m.qrqrq.com Q…

UnityでのLoadingUI【インジケーター】

インジケーター、スピナー アイコン アセットストア Google Material Design Loading screen animation uGUIで作る 実装参考 進捗率を取る インジケーター、スピナー 何かをロードしている時や、処理中の時に出るあれ 種類によって名前が分かれている。 イン…

XDで作った素材をUnityのuGUIで指定の位置で配置するには・・・?

位置 おまけ:canvasの描画順 位置 XDのコンポーネントのX,Yはコンポーネントの左上&アートボードの左上との距離。 UnityのuGUIのPosX,PosYはデフォルトだと素材の真ん中&Canvasの左上の距離 まずそこが違う。 Unityで素材の原点(Pivot)を変えるにはUnity…

【XDプラグイン】コントラスト比と色覚異常の見え方をチェックする【Stark】

「作ったデザインをモノクロ表示にしたら、コントラストのある良いデザインかがわかる」という記事を見た。 CTAのバランスや色、位置が適切かどうかをテストするためのよい方法は、できあがったデザインを一旦グレースケールにしてみることです。その状態で…

UXにおけるSoundについて

MESONさんの発表で「XRコンテンツではまず全てにサウンドをつけて、そのあと余計なものを取り除くぐらいでちょうどいい」って言ってた。 その発表の関連資料にあった記事を読む。 Sound Advice: A Quick Guide to Designing UX Sounds The Role of Sounds in…

【Unity】スプラッシュスクリーンの背景を設定しておしゃれにする🔆

Unityのロゴが最初に出るあれ。スプラッシュスクリーンといいます。 デフォルトだと黒背景に白Unity ボククロキライ なので背景を設定しておしゃれにするのが私は大好きです。 Splash一覧 設定 背景画像 単色背景 ロゴ追加 Light,Darkを選ぶ プレビュー 最後…

XRコンテンツのオブジェクトサイズ定義で使われるdmmとは?【distance-indipendent millimeter】

dmm 使い方 発祥 計算 実装 dmm distance-indipendent millimeter https://youtu.be/ES9jArHRFHQ?t=484 より XRコンテンツ(VR,AR,MR)で空中にUI等を出すとき、近づいたら小さく、離れたら大きくすることによって、見た目の置きさは一定にすることがある。 ht…

XRDesignの動画を見たメモ

こちらの動画を見ます www.youtube.com GoogleのSENIOR INTERACTION DESIGNERの方みたい。 Product | MikeAlger docs.google.com 以下はメモです。すごく間違っている気がします。 黒い長方形 五感? 試行錯誤 VRキーボード テレポート UIを作る UIの大きさ …

マイクロインタラクション

UIを学んでいるcocoda!で「マイクロインタラクション」というコースを始めました。 マイクロインタラクションとは????? 事例 404 クレカ disabledはグレーじゃなく半透明 作ったもの 最後に マイクロインタラクションとは????? 初めて聞いた言葉。…

iosデザインガイドラインをもとにUIデザイン

Cocoda!でUIデザイン ガイドライン テンプレートダウンロード フォント 日本語 デザイン ステータスバー ナビゲーションバー タブバー スイッチとSegmentedControl ボタン 最後に Cocoda!でUIデザイン Cocoda!というUIのweb学習コンテンツサイトでのお勉強を…

【Windowsアプリ用】UIデザインキットとFluent Design System

デザインツールキット 中身 Fluent Design System デザインツールキット ここからXDやAIなどいろいろな形式でダウンロードできる。 docs.microsoft.com 中身 XDファイルを開いたらこんな感じ! iosのテンプレートみたいにいろいろなUIパーツがある! チェッ…

【Hololens2】アプリの設計デザインについて学ぶ【公式ドキュメント読むシリーズ】

公式ドキュメントを見て粛々と勉強していくシリーズ第1弾は「設計デザイン編」 操作やUX、フォントについて書いてある。 https://partner.microsoft.com/ja-JP/asset/collection/designing-a-quality-hololens-2-application#/ 英語を日本語に機械翻訳された…