トマシープが学ぶ

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

デザイン

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

下のボタンを押したら画面が切り替わる。 随時追加する。 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#/ 英語を日本語に機械翻訳された…

【CC0】自分で組み合わせて使える人物イラスト

Adobe先生のこのツイート見て面白そうだと思った デザインに #人物イラスト を使いたい時にいかがですか 商用・個人ともに無料、 #AdobeXD #Photoshop #Illustrator で利用でき、表情や髪型、ポーズなどさまざまなパーツを組み合わせた人物イラストを作成で…

AdobeStockに素材投稿して一定数ダウンロードされたらAdobeCCが無料

AdobeStock ガイド AdobeStock AdobeStockというAdobeの素材サイトがある stock.adobe.com そこで素材提供者(コントリビューター)になって、素材が150ダウンロード以上されたらAdobeCCのうち一つが1年無料になるらしい! あれ?この2020年のAdobeStockボ…

XDでニューモフィズムデザインを作ってみた

ニューモフィズム 作る 明るい色と暗い色 混ぜてメインの色を作るらしい シャドウ 合体 背景 最後に ニューモフィズム この記事に余談として「ニューモフィズム」と言う名前が出てきた www.mdn.co.jp 画像検索したら、白い!フワフワ!好き!!! 実際に使わ…

AdobeXD to Unityを試した

XdUnityUI 使ってみた XDサイド Unityサイド 属性 エラー 最後に XdUnityUI XDからUnityにUIをインポートできるパッケージ github.com AdobeXD to UnityXdUnityUIv0.8 releasehttps://t.co/TFWwR3hm3mMore samples and documents.https://t.co/NeINT7sG0Y#Ad…

RGBをCMYKに変換したい

XDで作ったRGBの画像ファイルをCMYKに変換してどれくらい変わるかみてみたい。 bibinbaleo.hatenablog.com ついでにCMYKにした状態で色味を調整したい。 ツール Photoshop GIMP2 ClipStudio 調整のコツ 最後に ツール webツールあった! shimeken.com displa…

【Unity】すりガラス風の板を出す方法まとめ(ARもあるよ)

こちらのツイートを見て、Unityでどうやってすりガラスのテクスチャ作るんだろ~と思いました。 #毎日ARデザイン No.02 [可読性を考慮したデザイン]空間上に情報が重畳されることがARの特性であり、その情報が見えづらい状態は避けなければいけません。周囲…

XDで印刷用の名刺を作る

最初に行っておきますがやめたほうがいいですね。 XDはweb用のベクターツールなので印刷物を作るのに使ってはいけない。 だってキャンバス設定をcmですることすらできないのだから でも進みだした船は止まらない。 私はXDの理解も印刷物への理解も低いのであ…

VRoid Studio講座買いました!(追記:修了しました!)

4/12追記 VRoid Studio講座 環境構築 CLIPSTUDIO ペンタブ 講座が買えない VRoidStudio 学び 素体 顔パーツ 服 髪の作り方 髪のマテリアル 髪のボーン Vroidで難しい表現 修了! 撮影大会 最後に VRoid Studio講座 VroidStudioの講座ができた!イケメン作り…

パワポとフォント

パワポにフォント埋め込み dekiru.net ファイル>オプション>保存>ファイルにフォントを埋め込む 「使用している文字だけを埋め込む」にしてNotoSansJPを使って保存しようとすると「プレゼンテーション内に保存できないフォントがあります」「一般障害」と…

バーチャルっぽいイラスト・イメージ表現を作ってみる【XD】

特徴 半透明にする アウトラインを青っぽくする 白や水色のドロップシャドウ(光ってる) ぼわ~ メッシュ風 中に重ねる ぼわぼわ 作る メッシュ作る(Unity/Gimp/XD) GIMP XDで効果つける 最後に 特徴 Pintarestにまとめました。 www.pinterest.jp 半透明…

丸いデザイン

VRだと視界は丸い ディスプレイやモニターは四角が多いから今までの画面UIは四角が使われていたけど、VRなら四角である必要はない 丸は無駄な形だからあまり好きではなかった。 現実の空間も有限だから無駄のない四角い製品が好き。敷き詰められる。 テーブ…

【Cocoda!】UIを学べるサービスはじめてみる!【XD】

UIデザインを学べるサイト。 cocoda-design.com お題とか作り方とかのコースがいくつかある ゲームのUIコースもできたって! note.com はじめてのUI やってみる。 まずは「はじめてのUI」から XD公式のチュートリアルを3種類した。 XD本体のホーム外面右上に…

デザインまとめ記事まとめ

まとめすぎてどこでまとめたのか分からなくなったのでまとめる 頭が悪いことしてるみたい スクショ系 VR・AR 全般 リンク系 VR/AR 全般 最後に スクショ系 VR・AR VRコンテンツのUIのスクショを貼ってる bibinbaleo.hatenablog.com ARマーカーデザインを集め…

参考になるUIデザイン記事まとめ【Unity・全般】

見つけ次第追加していきます。 デザイン全般 ごちゃごちゃ ロゴ ユニバーサルデザイン デザインガイド ムードボード ゲームのUI UnityのUI VR・ARのUI デザイン全般 ごちゃごちゃ note.com uxmilk.jp ロゴ coliss.com ユニバーサルデザイン uxmilk.jp このpd…

ARマーカーデザイン集め

ちゃんと認識されて、かつ数種類別々に認識されて、その環境やARコンテンツに馴染んでいるデザインにするの難しすぎた。 bibinbaleo.hatenablog.com 既存の事例を集めて学習していきます! Moguraで検索! AR マーカー | 検索結果: | Mogura VR - 国内外のVR…

AdobeCCのすごい機能使う【切り抜き・Dimension】

昔調べたadobeのすごい機能 bibinbaleo.hatenablog.com AdobeCCを触る機会があったのでPhotoshopとDimensionを少し触りました。 Photoshopの切り取り マスク抜きはそれ単体で仕事(アルバイト)になるぐらいめんどくさい作業。 それをいい感じにやってくれる…