ワタナベ

デジタルをメインに色々デザインしてます。学習したメモを公開する感じのページです DT…

ワタナベ

デジタルをメインに色々デザインしてます。学習したメモを公開する感じのページです DTPデザイナー → ソシャゲのアートD → 制作会社経営 → デジタル広告のAD/CD/UI・UX。 鳥を飼っています。

Splineのチュートリアルを消化してみる［人型アイコン③］

第三段です。1回目モデリング、2回目マテリアル、そして今回３回目はインタラクションです。出典はこちら ３DをWEBに埋め込んだらやっぱりなんらか動いてほしいですね マウスポインターを目で追うような動きがつけれるみたいです しかし今のご時世PCで見てくれる人も少ないのでスマホではどういう挙動をするのか、このあたりも気になるとこですね。 早速いってみましょう チュートリアルとUIが変わってますがたぶん名前が変わってるだけでしょう 基本の動きをつけます Faceのグループを

ワタナベ

    • Splineのチュートリアルを消化してみる人型アイコン②

      前回からの続きです。前回モデリングを行ったので今回はマテリアル 出典はこちら 色 質感 ライディング を設定していきます。 準備 まずはなにもないところを選択して背景色を変更します リネームします マテリアルを作成してスキンという名称をつけてデプスを追加しておきます 肌の設定をします 髪の毛を非表示にしてマテリアル横の四点からマテリアルメニューを表示、顔と耳を左タブで選択した状態で作ったスキンを選択すると適応します マテリアルのスキンを編集していきます、

      ワタナベ

      • Splineのチュートリアルを消化してみる［人型アイコン①］

        今回のお題はこちら チュートリアルも複数に分かれているので記事も複数に分けてお送りします。 さて… 来ました。人型。今までMAYA、MODO、Blenderといじったことあるのですがことごとく人型で挫折。とにかくやることが多いしパーツが多い。形状が有機的でモデリングが難度高い。質感も多い。動かすと腕が脇にめり込んだり。ガクガクな動きになったり。ズボンから足が突き抜けたり。 大体チュートリアルをやってて絶望的な気分になって。「餅は餅屋に」という結論になります。 肌感覚ですがそ

        ワタナベ

        • Splineのチュートリアルを消化してみる［幾何学背景とフォグの使い方］

          真っ白じゃなんだし煩くなっても嫌だし。 画像をリピートするだけだと手抜きにみえるし。 動画を敷くと重いし、アクセシビリティで止めろとか言われるし。 特に意味のないなんでもない背景って意外と悩みませんか？ そんなときに使えそうなネタを見つけました。 今回のお題 まずは背景色を適当に設定して上のタブからキューブをつくります 位置をリセットしてXYZの値を全部100に Splineって単位がないですがWEB前提のツールなのでpxなんですかね。。 続いて光源を選択してシャドウを

          ワタナベ

        Splineのチュートリアルを消化してみる［人型アイコン③］

        ワタナベ

          Splineのチュートリアルを消化してみる［不定形な形状のループアニメ］

          仕事が忙しく勉強がはかどりませんでした。 さて掲題の通りSplineを掘り下げていきます。チュートリアルを興味ある順に再現して行こうかと思うのですが、そんなのYouTube観たらいいってことだとは思うのですがYouTubeは英語なので日本語で解説するのと動画観るのって日本語であっても面倒。また、実際つまずいたとこを忘備録としてのこしておこうかと。 今回のお題はこちら。こんな不定形がうねうね動く３Dを作ります。 私、実は自社のサイトで数年前。２０１５年くらい？こんな３Dのサイ

          ワタナベ

          Splineのチュートリアルを消化してみる［不定形な形状のループアニメ］

          ワタナベ

          figma＋Spline+Framerで3D表現のサイトモックアップをつくってみる　後編

          中編からの続きです。 今日やることは Splineで３DをつくってURLを吐き出して Framerに貼り付けて ブラウザで確認する という感じです。 この公式チュートリアルを参考に必要な最小限の要素だけピックアップしてもっとシンプルなものをつくってみます Spline作業モデリング ますSplineを立ち上げて新規ファイル→デフォルトのオブジェクトを削除します 上部のメニューからSphereを選択して球体を作って⌘＋shift＋ドラックで複製します 適当に大き

          ワタナベ

          figma＋Spline+Framerで3D表現のサイトモックアップをつくってみる　後編

          ワタナベ

          figma＋Spline+Framerで3D表現のサイトモックアップをつくってみる　中編

          前篇からの続きです。あまり調べずにやったらむちゃくちゃ素人っぽい感じで躓いたのと長くなりそうでしたので別投稿にしました。 しらべてみるとPCに全要素を配置してタブレット、各画角で表示非表示を切り分けるといいみたいです。 レスポンシブの作成ハンバーガーメニューの作成 まずハンバガーですがフレームから作れそうです。 ハンバガーを選択してVisibleからNoにすると存在してるけど非表示という扱いになります。 左端に固定 続いてこれ。メニューを右上端に固定します。さらっと

          ワタナベ

          figma＋Spline+Framerで3D表現のサイトモックアップをつくってみる　中編

          ワタナベ

          figma＋Spline+Framerで3D表現のサイトモックアップをつくってみる　前編

          全然関係ないですがnoteで白背景のアイキャッチを設定すると右肩に線が入るのって仕様ですかね。鬱陶しいですね。 さて。予告の件です。まずゴールと要件を明確にしましょう ゴールの設定WEBブラウザで確認できる レスポンシブする ３Dオブジェクトが埋め込まれる この3点を満たす。ことを達成します。 準備 figma、Splineは以前の投稿で説明したので割愛。Framerはここからデスクトップアプリをダウンロードします。ブラウザでも使えますがアプリがあるものはアプリ

          ワタナベ

          figma＋Spline+Framerで3D表現のサイトモックアップをつくってみる　前編

          ワタナベ

          Framerを使ってみる①

          ②があるのかわからないですが①です。 なぜころころと記事のツールを変えるのかと。みなさん一番興味あるのFigmaですよね。細かい使い方とか。 きっかけはなんとなくインスタみててこの投稿。これ、わかりますか。 ３Dでグリグリ動くプロトタイプを作ってるんです。確かにFigmaってUIデザインをサクッと作るには最適なツールでアドビに買われたことを考えるとこれから数年は必須のツールになることは確実な気がする一方で使ってて結構プロトタイプは不便でコードで書いたほうが早いんじゃないか

          ワタナベ

          Framerを使ってみる①

          ワタナベ

          Splineを使ってみる準備編

          さて。figmaの記事ばかり書いてて飽きてきました。 今日はタイトルの通りSplineを使ってみたいと思います。 スプライン。 ３DソフトでWEBでも動く、共同編集ができる。FigmaライクのUIでカンタン。フリーで使える。他のソフトで編集できるように書き出せるという夢のようなソフトらしくこれは触ってみましょうという話です。 ワタシ、大昔にMAYAを使って挫折。最近Blenderを使って基本的なモデリングまでは作れるようになりましたがヒト型のモデルを動かしたりするとこで関節

          ワタナベ

          Splineを使ってみる準備編

          ワタナベ

          XDのサブとしてなんとなく使っていたFigmaに完全移行した話その⑤（デザイナー向け動的UI編その２：ファーストビュー）

          あるあるなファーストビューを作ってみます。全面画像のスライドショーがあり、下層にコンテンツがあることを示すscrollの誘導UI。それぞれが自動でループします。 デザイナー向けな内容ですが非常にカンタンなのと頻出な表現なので全職能対象かと。 こんなものも基本機能だけでサクッと作れそうだったのでみていきます。 scrolldownUIの作成これはまぁベクターとテキストでお好きなようにつくってください。 素材にするのでframeの外側に作っておきます。 scrolldown

          ワタナベ

          XDのサブとしてなんとなく使っていたFigmaに完全移行した話その⑤（デザイナー向け動的UI編その２：ファーストビュー）

          ワタナベ

          XDのサブとしてなんとなく使っていたFigmaに完全移行した話その④基本操作オートレイアウト編

          動きの話を始めてたんですが動きを作るにはオートレイアウトを入れ子にするシーンがちょこちょこあり、一度脱線してオートレイアウトを学習しようかと。 UIデザインの専用ツールで特に優れているのはやっぱりレスポンシブの見え方の作り方がカンタンということじゃないでしょうか。 デザイナー向けか広く一般向けかと言うとややデザイナー寄りですが非デザイナーも斜め読みしてどういう構造になっているか知っておいてもいいような内容にしたいと思います。 レスポンシブで変形する記事系の一覧を作ってみます

          ワタナベ

          XDのサブとしてなんとなく使っていたFigmaに完全移行した話その④基本操作オートレイアウト編

          ワタナベ

          XDのサブとしてなんとなく使っていたFigmaに完全移行した話その③（デザイナー向け動的UI編その１：アコーディオン）

          デザインを提案する際、静止画を書き出してプレゼンツールに貼り付けて提案したり、プロトタイプをシェアしたりしますよね。 前者は確実に見てもらえて安心ですが正しく伝わっているかどうか。後者は偉い決済者は見てくれてないのではないかと不安になります。 動きを多分に含んだWEBサイトの場合は静止画で説明するには紙芝居的にしないとならず。プレゼンテーションする際やりにくく。その手のダイナミックなサイトを皆様どうやって通しているのか？というのが目下の疑問であったり。 今回はよく使う動きを

          ワタナベ

          XDのサブとしてなんとなく使っていたFigmaに完全移行した話その③（デザイナー向け動的UI編その１：アコーディオン）

          ワタナベ

          XDのサブとしてなんとなく使っていたFigmaに完全移行した話その②（非デザイナー向け基本操作編）

          意気込んで始めたもののすっかり1ヶ月すぎてしまいました。。前回はFigmaの概要を書いてみましたが今回は実際に触ってみましょうと。 UIデザイナーであれば触りながら覚えて行けると思うのですが、今回はAdobe系ツールに慣れていない非デザイナーが共同編集できるようになるために必要な最低限の情報に絞ってお伝えできたらと思います。デザインのノウハウみたいのは本記事は含みません。億劫だったけど新しいツールを触ってみようと思ってもらえたら幸いです。 Figmaは非常に多機能なので網羅し

          ワタナベ

          XDのサブとしてなんとなく使っていたFigmaに完全移行した話その②（非デザイナー向け基本操作編）

          ワタナベ

          XDのサブとしてなんとなく使っていたFigmaに完全移行した話その①

          前書き半年遅い感じの記事ですが項目だてて非デザイン職にもわかりやすく書けたらと思います。 私は数年前からちょこちょこFigmaは使っていましたがあくまで非デザイナーとのコミュニケーションツールのような使い方をしておりWEBサイトのデザインを詰めるのはもっぱらXDでした。なので使っていたがよく分かっておらず。 周知の通りAdobeのFigma買収、XDの単体プランの停止という動きを受けてFigmaに流れたユーザーも多いことでしょう。 Sketch、Figma、XDと乱立してい

          ワタナベ

          XDのサブとしてなんとなく使っていたFigmaに完全移行した話その①

          ワタナベ