デザイナーがNuxtとContentfulでポートフォリオ開発して得た学び

経緯

理系の大学院に行くことが決まった後、入学までに何かコードを書く練習をしたくなりました。
フロント周りに興味関心が高いので自分の法人サイトを作ることに。
研究に活きるかは微妙ですが、むしろデザイナーとしてたくさん学びがあったので備忘録に。

開発したWebはこちら

moku inc.

結論: STUDIOを使えば1/4の時間で作れた

開発中1000回くらい「STUDIOで作ればよかった…」って思いました。
コードを書きたかったし、独自開発だからこだわれたこともあるので結果よかったのですが
慣れない作業でかなり時間がかかりました。
STUDIO大好きです。お仕事ではSTUDIOを推奨します。

css-gridと仲良くなれた

css-gridを使ってサイト全体のグリッドを設計しました。
cssを書く機会はなかなか無いのでこの期にさわれてよかったです。これからwebデザインでグリッドを設計するときの参考になりそうです。

Webフォント周りの知識が増えた

今回和文にAdobe font、欧文に購入したwebフォントを使用しました。
Adobe契約していれば豊富な日本語フォントが無料で使えることを知ったのでどんどん使っていきたいと思います。
有料の欧文フォントも探せば良質かつ買い切りのものが多く、思ったよりも気軽に使えることがわかりました。
フォントの導入において費用、導入方法、パフォーマンスへの影響はセットの検討事項ですよね。これからより説得力をもって提案出来そうでよかったです。

コンポーネントと変数を使って実装できた

FigmaではFigmaで運用しやすいように作っているコンポーネント。
改めて、デザインと実装を厳密に合わせるのは難しいなと感じました。個人的にはそこに過剰な労力を割く必要は無い派。
いつかデザイナーがコンポーネントのcssを書く運用にトライしたい。

デザインだけでは意識できていなかったインタラクションに気づけた

ヘッダーのスクロール時の挙動や遷移のアニメーション等。これもSTUDIOだと一瞬で出来ることをやるのにかなり骨が折れました…
自分で実装すると細かい挙動にこだわれるので、どのくらいの秒数とか色だと気持ちが良いか何度も検証できて良かったです。

サーバーレス開発できた

Netlifyわからなくて大変でしたがおもしろかったです。githubと連携するとプルリクのたびにプレビューURLが自動生成され、改修をお手伝いしてくれたエンジニアさんとのやりとりもすごく楽でした。

ヘッドレスCMSでローカライズ対応できた

自力では静的ページしかローカライズできず、CMSのローカライズはエンジニアさんに多大なるご協力をいただきました。でも、夢の多言語対応！できてよかった！

大変でしたがコードを書くのは楽しいです。とくにcss,scssなど見た目に関わるところが好きです。
エンジニアさんに改修やリファクタをしてもらい、こんな効率いい書き方が…！と気づきがあるのもとても楽しかったです。感謝！開発期間はゆっくりゆっくり4ヶ月くらいでした。

それではまた。