目次
1.はじめに
2.ポートフォリオサイトへの案内
3.使った技術、マイクロCMSの紹介、figmamakeの紹介
4.実装中感じたこと
5.おわりに
1. はじめに
☝今回参考にさせていただいた記事です。
microCMSとFigmaMakeを使用してポートフォリオサイトを製作しました。
作ろうと思ったきっかけは、ポートフォリオサイト作りたいな～とぼやいてたら先輩から今回紹介するやり方を教えてもらったので製作することにしました。私は記憶力皆無なので実績まとめとくところ作らないと忘れていっちゃうのでね。
2. ポートフォリオサイトへの案内
https://gypsophila-portfolio.vercel.app/
いずれここにURLを貼ります貼りました！
↑のリンクからポートフォリオサイトが閲覧可能となっています。最初のロードがちょっと長いので耐えてもらえると嬉しいですm(_ _)m
3. 使った技術、マイクロCMSの紹介、figmamakeの紹介
使用技術
・Next.js
・TypeScript
・microCMS
・FigmaMake
・GitHub
microCMSとは
詳しくは上のリンクから見てみてください
CMSとは、「Contents Management System：コンテンツ・マネジメント・システム」の略で、Webサイトのコンテンツを構成するテキストや画像、デザイン・レイアウト情報などを一元的に保存・管理するシステムのこと。
ヘッドレスCMSとは、フロントエンド機能を持たず、バックエンド機能のみを備えたCMSのこと
そしてUI周りを作成してもらったのはFigmaMakeというFigmaにあるAIです。だいぶフワッとしたプロンプトを投げてもイケてるUIを生成してくれるので便利です。今回は１回目に投げたプロンプトの「エンジニアが喜びそうなゲーム風ポートフォリオサイトを作って」で8割完成していました。
4. 実装中感じたこと
microCMSめっちゃつかいやすい
FigmaMakeすげぇぇぇ
microCMSは直感的な操作でAPI作れちゃうのでコードに慣れていない初心者の人にもおすすめできると思います。
ただ、今回参考にさせていただいた記事はフロントでAPIからデータを取得していますが、サーバーサイドで取得してあーだこーだしようとしたらNextの知識が必要になってくるのでキャッチアップは必要だなと思いました。(あったり前田のクラッカー)
あと、FigmaMakeで作ったUIというかページをそのまま実装に使用したのは今回が初めてだったんですが、とにかくコードがなげぇ。。。 レスポンシブ対応とかにするとPC用とスマホ用をおんなじファイルに書くのでコードの長さが尋常じゃないくらい長くなります
読むのに一苦労です。
けど最近はありがたいことにAIが発達しているので要約してもらったりして理解すると早かったですね。
5. おわりに
今回ポートフォリオサイトを製作してみて、いつもハッカソンで作っているプロダクトと違ってデザインとか動きとかを楽しみながら楽に作れたので良かったですね。今後実績が増えたときとかも随時更新していこうと思ってまーす。