カタツムリのつもりもむりむり

頭の中身を置いていく場所 Twitter@yyk_kk

ポートフォリオサイトを作ったよ

この記事はMD Advent Calendar 2018 7日目の記事です。

 

自己紹介

まさかMD学生の中で私のことを知らない輩はいないと思いますが助手保坂です。来年はどうなる。

アドベントカレンダーで自分の前後が空いてて先輩から煽られたりしましたが無事埋まって何よりです。

煽ってきた先輩のアドベントカレンダーで本業について話す予定なのでそちらもよろしく。

 

昨日は松枝さんの初ブログ『新人VTuberについて語る』でした。Vtuberはのじゃロリと鳩羽つぐちゃんぐらいしか存じ上げませんが色んな人がいるんですね。勉強になりました。

 

本題

ポートフォリオサイトが出来ました! とりあえず見ないと話にならないので見て!

 

かたつもりのつもり

スマホから見るとちと重いですが気合いでなんとかなるぐらいです。

 

SVGの話

そもSVGとはという人はこちらを参照に→SVGファイルとは?基礎知識と作成・変換方法を解説|ferret [フェレット]

ざっくり言えばベクター画像をWebサイトにそのまま貼れるってものです。

私のポートフォリオサイトの中では背景とボタンがSVGの記述になっています。

 

canvasとの違いはこの辺を参考に→SVGファイルとは?基礎知識と作成・変換方法を解説|ferret [フェレット]

この記事の人も言っている通り、SVGは大きいオブジェクトを描画するのに対して向いていて、canvasはたくさんのオブジェクトを描画するのに向いています。

この辺は使用用途に分けて使うのが一番だと思います。実際、ポートフォリオサイトの背景は1つのSVGでパスを書いて動かしています。

 

SVGアニメーションの話

ここの波のアニメーションを参考に動かしてみました→SVGを動かす [cssアニメーション/クリッピングマスク/波/線を描く] – 東京のホームページ制作 / WEB制作会社 BRISK

 

波形に動かしている訳じゃなくてただ単に違うパスを繋げて動かしてるだけなんですね。簡単ですね。

他の動きはこの辺を参考にするといいかも→「10分でわかるSVG 応用編」サンプル

本当はSVGアニメーションの話をしようかと思いましたが調べれば死ぬほど出てくるので興味がある人はググってください。SVGアニメーションは複雑なアニメーションはくそほど記述量が増えますがシンプルなアニメーションならサクッと書けるので良いと思います。

 

ちなみにそもそもアニメーションさせる必要があるかどうかというユーザビリティの観点での問題がありますがその辺は自分の匙加減です。ポートフォリオサイトにどのぐらいのユーザビリティが必要かはよくわかりません。

 

コストの話 

そういえば助手ナイトセッションでちょっと話しましたが、私は助手になってから「この仕事をする労力は、私が得られる報酬に見合った内容/方法か」ということを考えながら仕事をするようになりました。

MDの図書一覧サイトを作った時も少し書きましたが、学習というのは馬鹿にならない時間と労力がかかるものなので、デザイナーみたいな成果物とお賃金*1がイコールで結ばれがちなお仕事は、そういうのを考えて作った方が自分が幸せになれるんじゃないかな〜と思っています。身を削りすぎると痩せ細って死んでしまいますからね。

 

勿論そのコストは人によって感じ方はマチマチなので一概には言えませんが、大体の人間は自分が興味無いことや苦手なことを学習するのは嫌なのでぼちぼち続けられるぐらいの学習が出来るようにセルフプロデュースできれば一番幸せですね。そうもいかない時はアイマスを信仰して幸せになりましょう。

 

上の話に関連しているようなしていないような話ですが、セルフプロデュースするのにあると良いのが「記録」だな〜と思います。日記もそうだし、ポートフォリオもそう。

少しデータが蓄積すると自分が昔何に困って何が解決できたのかとかを思い返せるので、今自分の一年後の未来が不安な人はとりあえず日記を付け始めれば良いと思います。今救われなくても一年後の自分が救われる。

 

明日はNaKaTa(@Myo30t1s)さんの「何書こう…(そして、結局2枠頂いてしまった)」です。積極性があるのはとても良いですね。思い付かない場合は推しの話をすると幸せになれますよ。

*1:これはお金だけでなく完成した時に得られる経験値とか今後も活用出来るかとかの見えない報酬も含めます