トマシープが学ぶ

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

デザイン

商品一覧UI

Amazon 商品情報3行で溢れた分は・・・ PayPayモールのZOZOタウン 同じPayPayモールでもショップで表示違うんだね ビックカメラ。商品名が…表示になるのはどういう条件なんだろう?文字数? 結構文字小さい pictSQUARE bibinbaleo.hatenablog.com

アプリのメイン画面(ワクワク感)

自分たちの作ったアプリのコンセプト的にわちゃわちゃ感や祭りを感じさせたいのに、メイン画面がしーん・・・としていると感じた。 なのでワクワクさせたいアプリは何かしら動く要素があるのではという仮説のもと色々見ていった。 ゲーム 歩く系 配信・動画…

外部サイトへのジャンプ注意UI

最近、別のサイトにジャンプする時に注意のダイアログが一旦入ることが多い。 邪魔だよね〜 まとめてみる GoogleMap Discord ? 最後に GoogleMap GoogleMapのブラウザでお店のURLを押したら、別タブで確認のページが表示されるようになった 特におしゃれさ…

デザイン大全39種類やっていきたかった【デザイン修行Part3】

39種類のデザイン(12章)が載ってるのでやっていく〜 Part1 bibinbaleo.hatenablog.com Part2 bibinbaleo.hatenablog.com いつものようにYoutubeのサムネメイン ビビンバ_トマシープ - YouTube Chapter1 きれいな 01:透明感 02:ピュア 03: 洗練された 04: …

アップデート通知UIまとめ(まとめじゃない)

まとめようと思ったのに全然出会わない。もう公開しちゃえ Cluster PC版 Neoket Neoketのサイトが開く bibinbaleo.hatenablog.com

美術展や舞台のチラシが届くおちらしさん!【デザイン】

紙のデザインの参考になるサービスとして、「おちらしさん」という舞台や美術展のチラシを届けてくれるサービスが紹介されてた 紙とWEBの無料おすすめサービス pic.twitter.com/QdNddsXiw0 — デザイン研究所 (デザ研) (@designkenkyujo) 2021年4月7日 このツ…

Figma使ってみた

いつもデザイン修行する時も会社でもXD使ってるけど、Figmaも使ってみたい Figma 作成 角丸 画像 エフェクト 色・塗りつぶし 文字 フォント 書き出し プラグイン 最後に Figma WebでXDみたいにデザインできる。共有やコラボレーションが簡単なのが良さそう!…

Gravit

自分のブックマークを整理しようと見てたら、色々使ってないし存在もわからないやつがいっぱい その中の一つGravit Webで使えるイラレだって! bibinbaleo.hatenablog.com Twitterで検索したら今も結構使っている人いる。最近デザイン修行をたまにするけど、…

トップページ+利用規約同意+ロード画面まとめ

PC NEOKET 同じ会社のスマホ版 利用規約 Cluster アバター選択を閉じたらこんな感じ。意外と質素 VirtualCast Steamでアップデートするときにも利用規約出た。 Altspace 利用規約 ローディング Steamでインストールするときにも出るよね FallGuys START文字…

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…