【定期振り返り】2020年/1月
なんだか年が明けてからが一瞬だったように感じています...！
みなさんいかがお過ごしでしょうか。
今月は いろいろさわってみる/つくってみる を実行できた1ヶ月になったように思います。
さて、2020年さいしょの振り返り！
Webコーディング
年末に作成した自作PhotoshopカンプからXDにおこし、コーディングしました！
Webデザイン
新しいオリジナルデザインを制作中です。
今回は、【アイスクリーム専門店の仮想LPサイト】で作成しています。
後述するFrescoで水彩画テイストのイラストを頻繁に描くようになったので、それを活かしたWebページをつくってみたい！といろいろ考えた結果、イメージに一番近かったためにこのテーマになりました。
(本記事のアイキャッチ画像、ふーしゃアイコンもFresco自作です！)
また、サブテーマとして、
- SVGでマスクをかける
- JavaScriptでやったことのない動きを実装する
- 自作したことのないレイアウトにする
を掲げています。
マスクのお手本としてはこちらのサイト。
従業員へ向けて | 株式会社FiNC Technologies（フィンクテクノロジーズ）
やったことないぬるぬる動きとレイアウトの見本はこちらのサイト。
豆乳アイス、はじめました。
こういったぬるぬる動く系サイト、
レイアウトや配色なども凝っていることが多くて、見てて楽しいですね。
憧れているだけじゃなくて、自分の出来る範囲でも一歩踏み出してやってみようという...試みです。笑
ちょうどこの記事と並行して、XDのワイヤフレームが完成しました！(一部)
(素材も自作ってたのしみすぎる！)
Vue.js、Nuxt.js、Firebase
現在の自分のHPはちょうど1年前ほど、
Webデザイン/コーディングについてほぼ知識のない状態で
Hugo製テンプレート生成から
GitHub AuthでNetlify Hosting/Netlify Formを利用した形でした。
しかし、昨年から模写・オリジナルでWeb制作をすすめて成果物を掲載していくにあたり、
掲載領域が少ない(どちらかというと写真家/Web他デザイナー向け)ように思うようになりました。
そこで、
これらの機能をもつポートフォリオをVue/Nuxt.js、Firebaseを用いて作成する
という野望がふつふつと沸き上がり...
(昨年にこちらのサイト と 制作者様の記事と出会ったのが大きかった)
開発環境をいれて、手を付けはじめました。
はじめからすべてでは敷居が高すぎたので、小分けにして挑戦中です。
まずはここから...
で、先日認証機能をつくることができました。
気になったのは、Firebase API Keyが公開しっぱなしになる前提になっていた点です...
こちらの記事によると公開で問題ないとのこと。
ただ、DBのルール設定の記述は現状しっかり書けない(というよりしばらくはテストモードでウェルカムゆるゆるでしょう)ので、そのままは気が引けたためにGit管理にあたってはgitignoreしておくことに。
次は画像にいこうかーというところでこの記事を書いています。
Frescoはいいぞ
2018年からリリースされたFrescoを試してみたところ、ドハマりしてしまいました。笑
そしてここ数日ためしてめっちゃたのしいです
— ふーしゃ@web (@fuchsia_84) 2020年1月28日
Fresco😆💕 pic.twitter.com/BiEEgLX74H
iPadとApple Pencilを使用していますが、デジタルなのにアナログで塗っているかのように滲みます。そして、デジタルだから何度でも戻ってやり直せます...
イラストの中では透明水彩と厚塗りがタイプだったので心をすっかり掴まれてしまいました。
気付けば毎日Frescoで描いているような。
色彩検定受けてから、カラーホイールから組み合わせをみつけて重ねるのが一層楽しくなったようにおもいます。
Photoshopで写真レタッチ
1月の真ん中あたり、家族で沖縄旅行へ。
天気は実はあまり優れなく、沖縄にしてはかなり寒く感じるなか、ふだん見ることのできない鳥たちがたくさん見られたことに歓喜。
この旅行での決定的な1枚をとるべく、カメラを振り回し...
撮った写真の中で、顔が暗く写ったものなどの調整にレタッチをしてみました。
デザインカンプをつくる時に応用できそうです。
Mac BookにGPU外付け
Photoshopで写真のオリジナルデータをガンガン編集しようとしていたら割と灼熱地獄・画面グルグルフリーズ頻発とかわいそうなことになってきたため、組立は家族に手伝ってもらってGPUを外付けしてモリモリ増強。
こちらの記事を参考に設定。
※一部スクショ画像が'disable'を実行しないものになっている点に注意
Photoshopやその他アプリケーションがGPUを使用するように設定する方法は以下。
support.apple.com
WebGL/three.jsへの興味
先日、模写対象・デザインの参考にするSANKOU!にて目にとまったサイトが、ぐりぐりと奥行きのある動きをするのを目にしてビックリ仰天。
調べてみると、three.jsを使用したものだとしりました。
exampleをみにいくと、なんと初音ミクが音楽に合わせて踊り始めたではありませんか(MMDもUnityも知ってるけど、ブラウザ上で踊っちゃうの...？！という驚き)
卒論でKinectをつかったものとしてはまたも心を掴まれてしまい、テストを動かす。
テスト。three.js🔸🔷🔹🔶 pic.twitter.com/uky5uKI4Vn
— ふーしゃ@web (@fuchsia_84) 2020年1月31日
GPU外付けのタイミング、偶然だけどやっておいてよかった...！
パッと見て想像したのは、MMDサンプル動かしたいー！、Audio Visualizerとかつくってみたいー！というもの。
でもここで思ったのが、あれ...？Unityでできないっけ？ということ。
調べてみると、UnityとWebGL/three.jsではファイルサイズに差があり、ブラウザ上で軽く動かすなら後者として使い分けるらしかった(ツイートを発見)。
しかし、ここで昨年、UnityがTiny Unity(Tiny Mode)という、ブラウザ上でもサクサク動作するような軽量化モードをリリースしたとわかる。ただし、現在は2Dのみ対応で、いずれは3Dも視野に、とのこと。
すると、さきほどの線引きが崩れ去ることになる可能性がある... ということなのですね...。ほぇー...！
じゃあUnityやっとこ、と言いかねない感じで書き連ねましたが、htmlとjavascriptで3Dがぐりぐりできるとここではじめて知ったために感動を覚えてしまったので、きっかけになったthree.jsを、いまは趣味の領域としてさわっていこうかなと。 (Vueと組み合わせる記事もみつけたので、もしかしたら面白いことになるかもしれない)
さいごに
今月は いろいろさわってみる/つくってみる を実行できた1ヶ月になったように思います。
引き続き、手をうごかしていきますー！
