はじめに
みなさんは自分自身のポートフォリオサイトを持っていますか？
私はつい最近まで持っていませんでした。なぜならHTMLもCSSもわからないからです。
でも、自分のサイトってなんとなく憧れますよね。
という事で、
今回は「初心者がChatGPTとタッグを組んで、ポートフォリオサイトを作成してみた」です。
なお本記事は、素人の素人による素人のためにならない(?)記事です。ちゃんと学ぶ人はちゃんとした記事を読みましょう。間違った理解や記法などがあると思いますが、目を瞑っていただけると幸いです。
出来栄えを最初に見たい人はこちら↓(PC推奨)
https://nashisandesu.github.io/MyFirstPortfolio/
初期スペック
- HTML
- 一瞬Paizaラーニングで触った
- タグって言うのがあるらしいぐらいの記憶
- CSS
- 全く知らない
- CSS何もわからないのネタだけ知ってる(詳細)
- JavaScript
- オブジェクト指向らしいですね(訳:ほぼ知らない)
- Markdown
- Qiita記事が書ける
ChatGPTに丸投げしてみる
本記事でのChatGPTはo1を利用しています。(途中から制限をがかかったのでo3-mini-highに変更)
その1 すでに完成されたサイトが返ってきた
自分用のWebサイト作りたい
最初にChatGPTへ投げた入力はたったのこれだけした。
実はこれだけでシンプルなサイトは作ってくれます。
その時に提案されたフォルダ構造は以下のものでした。
my-portfolio-website/
├─ index.html
├─ about.html
├─ works.html
├─ contact.html
├─ css/
│ └─ style.css
├─ js/
│ └─ script.js
└─ images/
└─ （プロフィール画像や作品画像）
実際にHTMLやCSSのコードも書いてくれ、表示してみるとポートフォリオが完成していました。
じゃあここに自分の情報を入れて終了...は面白くないので、ここからどんどん要求していくことにしました。
その2 自分好みのポートフォリオができちゃった
要求した内容は以下の通りです。
全てを1ページで見られるようにしたい
背景がカラフルなものじゃなくて、もっと大人っぽくしたい
プログラマっぽいポートフォリオにしたい。
ほぼそのままを一行ずつ入れました。(タイピングミスを修正しただけ)
まあ流石にね、そんな簡単に作ってくれるわけ...あるんですね、これが。
ほなもっと要求するかー
その3 ChatGPTの限界
デザインを考えていた時に、経歴をタイムラインに沿って並べたい(Vertical Timelineと言うらしいです)と思ったので、それに挑戦することに。
左に年数、右に経歴、その間に数直線を引くことを想定していました(つまり直線は左寄り)が、ChatGPTは中央に線を引くデザインを返してきました。
実際Vertivcal Timelineを検索すると中央揃いのものが出てくるので、私の命令も悪かったのかも知れません。
しかし、その後左に寄せて欲しい旨を伝えましたが、以下の体裁が崩れてしまい、ChatGPTだけのコーディングに限界を感じました。
ChatGPTから学ぶ
その1 とりあえず解説してもらう
HTMLもCSSもほとんど読めないわけですから、とりあえず何を書いているかを知らないことには、話になりません。
わからないコードをコピペして、「解説して」を追加するだけ。ChatGPTは何でも答えてくれます。(たまに嘘もつきますが)
ちょっとわかった気になれます。
その2 わからないことを全部聞く
コードの解説を読んでも、「え、別にこのコード要らなくね？」となることが多々ありました。
その度になぜこのコードがいるのか、このコードがないとどうなるのかを聞きまくりました。
HTMLのお作法的なことだったり、実は重要な変数指定だったり、本当にいらないコードだったり色々でした。
ChatGPTは5分間に5個ぐらい質問投げても嫌な顔ひとつしないので嬉しいですね。
自分で書く
その1 とりあえず何か変えてみる
百聞は一見にしかずです。ChatGPTに色々聞きましたが、自分でも手を動かした方が早いと思い、「何か変えてみる」を始めました。
この時VSCodeの「Live Server」がかなり便利でした。(参考にした記事)
書き換えた内容をすぐに反映して表示してくれます。値を大きくしたり、一行消してみたり、なんでもいいです。だんだん、「じゃあ、ここいい感じに変えると上手くいくんじゃね？」という気持ちになってきます。
この感覚がかなり重要でした。
その2 検証ツールを使う
Google Chromeでは右クリックをすると「検証」という項目があって、そのサイトのHTMLが見られるようになっています。このツールは便利なことに、カーソルを当てるとどのコードがどのWebページ上の表示に対応しているかがわかるようになっています。そうすると知らぬ間にChatGPTが設定していた空白の存在に気づいたりもしました。
その3 他の人のポートフォリオを眺める
何か新しいアクションを追加するにあたって、違和感のないものにするにはデファクトスタンダードを知ることが必要だと思いました。
という事で、同じようなエンジニアの方のサイトを見たり、企業のホームページを見たり...
そうすると自分のポートフォリオに足りないものが見えてきました。
例えば、単なるリンク付きボタンも、カーソルを当てると色が変わったり、ポインターの種類が変わったりするのが一般的です。
余計なものが 「あることに対する違和感」 と普段あるものが 「ないことに対する違和感」 のどちらを探すのにも有効だったように思います。
その4 やっぱりChatGPTに聞いてみる
上記のようなことをやってもうまくいかないのがプログラミングというものです。やっぱり有能なAIに頼りましょう。
でも、きっとChatGPTに丸投げしてみるの時よりは質問が上手くなっているはずです。なぜなら、どこがダメかや成功例(他のWebサイト)はすでにわかっているのですから。
完成
ということで、無事に完成したサイトが冒頭にも載せたこちらです。(PC推奨)
https://nashisandesu.github.io/MyFirstPortfolio/
自分で新たに増やしたところは
- タイムラインデザインの修正
- GitHubやQiitaのリンクボタン
- ホバー設定(カーソルを合わせた時のアクション)
- ハンバーガーメニューの追加(画面が小さい時用)
- SNSアイコンとリンクの追加
辺りです。モバイル用にまで手が回らなかったので、PC推奨ですがそれなりに綺麗な出来栄えではないでしょうか？
おまけ コードを公開しました(2/16追記)
GitHubにコードを公開しました。所々ChatGPTっぽいコードが残っています。
おまけ ホスティングについて
いくらHTMLやCSSが書けたからといって、インターネット上で利用可能にしないと誰にも見てもらえません。
今回はこちらの記事を参考にGitHub Pagesを利用しました。
まとめ
今回はChatGPTを用いて、初心者がどこまでできるのかにチャレンジしてみました。
制作時間は20時間ぐらいだと思います。結局JavaScriptは使いませんでした。
これを機会に世の中のポートフォリオが一つでも増えると嬉しいです。