AIを活用し、初心者でも魅力的な自己紹介サイトを作成する方法
はじめに
こんにちは。りんです。
今回は私が制作した「AIを採用したWeb制作報告書」という資料をもとに気軽にWeb制作を行う方法を教えたいと思います。
詳しくは私の資料を貼っておくので見てください。
こちらは学校の課題の一環で制作したレポート(?)になるんですが、AIプロダクト開発を行っているエンジニア様からとても良くできていると、評価されました。
とても嬉しかったです。＾＾
目的・ターゲット
ターゲット
この記事の目的は新卒で就活のために自分の制作物をWebサイトに公開したい。という方向けに制作しています。
Webエンジニア・Webデザイナーになりたいけどどうやって作るかわからない！ なんかよくわかんないし難しそう！ と言う方でもわかりやすく書きます。
今回はコードエディタ（Visual Studio Code）はインストール済みの前提でお話しします。
目的
エンジニアとして今後、活躍するためには技術の変化に対応する必要があります。
そこで「AIを使用し、Web開発をした」と自分のWebサイトを書類選考に通せばそれだけで評価されます。
私の見解だと、ITエンジニアならどんな職種だろうと作るべきだと考えています。
私の知り合いの優秀なエンジニアさんは全員Webサイトを公開していますし、決してハードルも高くないのでぜひ就活しているエンジニア学生さんは挑戦してみましょう。
環境構築
Node.jsのインストール
下記のサイトから使用している環境のものをインストールしてください。
Reactのインストール
今回はJS,TSのフレームワークであるReactを採用します。
コンポーネント指向が特徴的でとても便利です。
コンポーネント指向とは…
ソフトウェアやアプリケーションを「コンポーネント」と呼ばれる再利用可能な独立した部品として設計・実装するプログラミングの考え方です。
npx create-react-app <プロジェクト名>今回は「my-website」にしました。
環境にもよりますがインストールに1~3分ほどかかります。
npx create-react-app my-websiteインストール後、Visual Studio Code(以下VSC)からフォルダを開くを押して作成したファイルを開いてください。
おめでとうございます。これでReactのプロジェクトの作成ができました！
ローカルサーバーの起動
プロジェクトを作成した際はテンプレートのファイルがあると思います。
試しにこのままローカルサーバーを立ち上げてみましょう。
npm startコマンドを入力すると勝手にブラウザが立ち上がると思います。
このような画面になれば成功です。
これから頻繁に使っていくので、ピンしたり、フォルダーに入れとくと便利かもしれません。
いらないファイル削除・修正
テンプレートはもう用済みなので削除します。
src/App.css（AppコンポーネントのCSSファイル）
src/index.css（グローバルなCSSファイル）
src/logo.svg（Reactのロゴ画像）
src/reportWebVitals.js（パフォーマンス測定用のコード）
src/setupTests.js（テスト関連のセットアップコード）
そして修正するファイルです。
src/App.js
import React from 'react';
function App() {
return (
<div>
<h1>MyWebSite<h1>
</div>
);
}
export default App;src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
こちらで一旦、保存して立ち上げたローカルサーバーをみてみましょう。
Reactはホットリロードなので保存すると即座に反映されます。
ホットリロードとは…
開発中にコードを変更した際、その変更をアプリケーションに即座に反映する機能のこと
AIを使用して制作してみよう！
さて、ついにここからAIにwebサイトをつくらせてみます。
ここからはオリジナリティが大事だと思うので今回は私が作成したものを説明しますが、自分好みに変えてみてくださいね！
OpenUIを使ってみる
私の資料にも載っているOpenUIというAIを使用してみます。
これは自分の作りたいものを入力すれば自動で作ってくれるサイトです。
サインインにGithubの連携を求められます。
ログインできたら目の前にテキストフィールドがあると思います。そこに、
1.自己紹介サイトを生成して
2.文字を全て黒にして
と言う命令を行いました。さて、結果を見てみましょう。
素晴らしいですね。
自分が初めて利用した際はこんな綺麗に出力されなかったので感動しています。
さて、もっと何か欲しいなと感じたので続けて「経歴や趣味を紹介してみて」と命令してみます。
いいですね！これだけで立派なサイトになってます。
VSCでの制作について
ここからはVSCで先ほどAIに出力したコードをコピペしていきます。
コピペといってもコンポーネント化でしたり、色々することがあるのですが今回は最低限の説明をします。
もし知りたい場合はコメントにて教えてください。
投稿させていただきます。
コードを見る
先ほど出力したコードを見てみましょう。
右下にある</>ようなマークをクリックしてみてください。
ここからJSXを選択しコピーしましょう。
次はペーストを行います。
VSCを開き、App.jsのreturnの下にペーストしてみます。
そのままペーストした場合、こうなってしまいました。
これはおそらくスタイルの問題なのでこれは各自で直すことをお勧めします。(私の命令が悪かった可能性もありますので)
もし治したい場合
私の場合、このままですとTailwind CSSを割り当てているので可読性が低いです。cssファイルと分けます。
試しにこれもAIを使用してみましょう。
ChatGPTに先ほどのコードを見せて、「jsxとcssに分けてください」と命令します。
その後、ChatGPTから分けられたコードが出力されるのでCSSファイルを作成してApp.jsにインポートします。
先ほど見たOpenUIの出力画面とほぼ同じですね！
これでStyleの問題は解消されました！
自分のことを上書きしていく
今のままだとOpenUIが出力したテンプレートがTextとして割り当てられています。
これを自分好みにカスタマイズしましょう。
私はこんな感じで終わります！
結構いいですね！ほとんどAIに任せたなんて思わないクオリティです。
今回のコード
最後に、今回のテンプレートのApp.jsとStyleを載せときます。
参考程度にお使いください。
//App.js
import './App.css';
function App() {
return (
<div className="container">
<div className="content">
<header className="header">
<h1 className="title">Your Name</h1>
<nav>
<ul className="nav-list">
<li><a href="#" className="nav-link">Home</a></li>
<li><a href="#" className="nav-link">About</a></li>
<li><a href="#" className="nav-link">Portfolio</a></li>
<li><a href="#" className="nav-link">Contact</a></li>
</ul>
</nav>
</header>
<main className="main">
<img src={ } alt="Profile Picture" className="profile-pic" /> {/* 修正済み */}
<h2 className="subtitle">Frontend Developer</h2>
<p className="description">
Passionate about creating beautiful and responsive web experiences.
</p>
<div className="card experience">
<h3 className="card-title">Experience</h3>
<p className="card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div className="card hobbies">
<h3 className="card-title">Hobbies</h3>
<p className="card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</main>
<footer className="footer">
<p>© 2023 Your Name. All rights reserved.</p>
</footer>
</div>
</div>
);
}
export default App;
//App.css
.container {
background-color: var(--background);
color: var(--primary-foreground);
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.content {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.header {
padding: 16px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.title {
font-size: 2rem;
font-weight: bold;
}
.nav-list {
display: flex;
gap: 16px;
}
.nav-link {
color: var(--primary-foreground);
text-decoration: none;
}
.nav-link:hover {
text-decoration: underline;
}
.main {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.profile-pic {
border-radius: 50%;
width: 8rem;
height: 8rem;
margin-bottom: 1rem;
}
.subtitle {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 0.5rem;
}
.description {
text-align: center;
max-width: 400px;
color: var(--secondary-foreground);
}
.card {
background-color: var(--card);
color: var(--card-foreground);
padding: 24px;
border-radius: 8px;
margin-top: 2rem;
max-width: 400px;
text-align: center;
}
.card-title {
font-size: 1.25rem;
font-weight: bold;
margin-bottom: 1rem;
}
.card-description {
color: var(--secondary-foreground);
}
.footer {
padding: 16px;
width: 100%;
text-align: center;
color: var(--secondary-foreground);
}公開
世の中にはいろんな公開方法がありますが、私が知っているものを紹介します。
1. GitHub Pagesを使って無料公開
GitHub Pagesは、静的なWebサイトを無料で公開できるサービスです。GitHubにリポジトリを作り、サイトのファイルをアップロードするだけで簡単に公開できます。
SSLも自動で設定されるので、安心です。静的なブログやポートフォリオにはぴったりです。
2. 自分でWebサーバーを立てる
VPSを使って自分でサーバーを立てる方法です。
NginxやApacheをセットアップして、自由にカスタマイズできます。ドメインを設定し、ブログファイルをサーバーにアップすれば公開完了。自由度は高いですが、管理やセキュリティ対策の手間がかかるので注意。
3. レンタルサーバーを利用
XserverやAWS Amplify, S3のなどのレンタルサーバーを借りて、ブログを公開する方法です。手軽にWordPressも使えるし、簡単な管理画面で初心者にもやさしいのが特徴。サーバーの管理は任せつつ、動的なブログも運営できます。
私はロリポップを使用してサブドメインを取得しています。
理由は親が使っていたからです。w
エンジニアさんはAWSを利用するとそれも評価されるかもしれません。
まとめ
全てを詳しく解説していくととても長くなってしまうので少し簡潔に書かせていただきました。
今後はもっと便利なAIが出てくると思いますし、自分なりにUIを生成してくれるAIを調べてみると良いかもしれません。
情報収集としてお勧めなのはinstagramのリールです。
XやYoutubeよりもレコメンデーションシステムがよくできていると思います。
そしてよければ私のWebサイトもご覧ください。
終わりに
初めての技術ブログでしたが、無事にまとめられてよかったです。
いいね、フォローしてくださるとこれからのブログ継続につがります。
長かったですが最後まで見てくださり、ありがとうございました。
この記事が気に入ったらサポートをしてみませんか？