【海外記事】AIを使いながら5分でポートフォリオを作る方法
本日はこちらの記事を読んでみます。なお、画像も以下から引用します。
ポートフォリオづくりが超苦手なので、この記事を読んで勉強したいと思います。なお、このやり方を実現するにはChatGPTの有料プランへの加入が必要なようなので、予めご了承ください。
本日もよろしくお願いいたします。
AIの力を借りながら私が5分でポートフォリオを作った方法
私はNotionやBento portfolioに頼らず、5分でポートフォリオをデザインしました。
そのやり方をここに記載します。あなたも同様にできます。
Step1:テンプレート機能のあるのーコードプラットフォームを選択する
最近ではほとんどのノーコードプラットフォームがテンプレート機能を提供しています。その中でも有名なものをこちらで紹介しますので、あなたもここから選んでみてください。
Framer:Figmaと似たインターフェイスで、簡単に使い方を学習することができます https://www.framer.com/
Webflow:少し使い方が難しいですが、機能が豊富なプラットフォームです https://webflow.com/
Wix:ドラッグアンドドロップでWebを簡単に作れます https://www.wix.com/
WordPress:高度なカスタマイズ性のあるノーコードプラットフォームですが、やや複雑です https://wordpress.org/
私は最近個人的に最も好きなFramerを選びました。
Step2:好きなポートフォリオテンプレートを選ぶ
上で挙げたノーコードプラットフォームは豊富なポートフォリオテンプレートを持っています。これらは無料で使えますのでご心配なく。
以下に全ノーコードプラットフォームのライブラリーを記載します。
Framer:https://www.framer.com/templates/categories/portfolio/
Webflow:https://webflow.com/templates/tag/portfolio-websites
WordPress:https://elements.envato.com/wordpress/elementor+portfolio+template
上でも述べた通り、私はFramerを使っています。今回私が使う無料のポートフォリオテンプレートも貼っておきます。
https://www.framer.com/marketplace/template/easyfolio/
Step3:全ポートフォリオページのスクリーンショットをとり、コピーを作るためにChatGPTを利用する
さて、最も面白いパートに入ります。まずGoogle chromeのプラグインであるGoFullPageでページ全体のスクリーンショットをとります。
そして、ChatGPTにスクリーンショットをアップロードし、あなたの情報を含めたテンプレートのコピーを生成するために以下のプロンプトを入力します。(なお、画像のアップロードには有料プランの加入が必要です)
その後、以下のプロンプトを追加してください。
上記のプロンプトは、プロフィール写真や画像など変更が必要なものの情報を見るためのものです。
ChatGPTは嘘をついたりもするので、もし結果が気に入らなければ何度もやり直すようにしてみてください。
あなたの理想のポートフォリオが5分で出来上がることを願っています。
感想:参考にはなるけど5分はさすがに無理
今回はテンプレートのスクリーンショットをChatGPTに読み込ませて、チャットベースでポートフォリオを作ってしまうというものでした。
確かに自分でポートフォリオの内容を考えるよりはチャットベースでコンテンツを作れるのは良いようにも思いますが、さすがにこの行程を5分で行うのは難しいし、コンテンツがChatGPT上でできたとしても、それを実装するにはまた別の工数が必要になります。
ChatGPTにHTMLやCSSを書き出させる方法もあるかと思いますが、まだ実装の不正確さがある上に、そもそもノーコードプラットフォーム上のテンプレートを使っているのでそのプラットフォームに合わせて実装する必要があるでしょう。
ただ、こういったかたちで自分が今までやってきたことの一部をChatGPTに代替しながら使い方を模索していくことは非常に良いこととも思うため、参考にできたらと思いました。
個人的に気になった海外記事を週数本メモしていますので、よければフォローおねがいします
ポートフォリオ
X(noteの更新などをお伝えします)
https://twitter.com/yamashita_3
__________________________________________________________
#デザイナー #UIデザイン #UX #UXデザイン #UI #海外記事翻訳
サポートいただいたお金は今後の発信活動に関わるものに活用させていただきます。