html & css の基礎はわかるけど、「ポートフォリオサイトを1から作れますか?」と聞かれると「んー・・・」ってなりませんか?
そんな方にオススメなのが、YouTubeを参考にしてゲーム感覚でポートフォリオサイトを作る方法です。
ちなみに私はこんな人です。
- MacBookを持ってる(2016年くらいの古い型)
- Progate(プログラミング学習サービス)を途中で挫折
- WordPress(コンテンツ管理システム)はそれとなく触れる
ポートフォリオサイトを作りたいけど、何から始めたらいいか分からない方の参考になれば幸いです。
①:ポートフォリオサイトはYouTubeを見て作成がオススメ
冒頭でも述べましたが、ポートフォリオサイトの作成は YouTube を見ながらがオススメです。
テキスト本やブログ記事を参考にするのも良いですが、睡魔に襲われたり、すぐに飽きてしまったりしませんか?
YouTubeなら見ながら手を動かせば自然とポートフォリオサイトが完成するので、ゲーム感覚で作れます。
しかも無料で。
正直、もうテキスト本を数千円払って買う必要はなくなります。
ちなみに私がYouTubeを見ながら作ったポートフォリオサイト(html & css)をWordPressで再構築したものが当サイトのトップページです。
制作に4時間ほどかかりました。。。
このポートフォリオサイトを作る上でとても参考になった YouTube が「玉袋浩二の知恵袋ちゃんねる」です。
②:ポートフォリオサイトは「玉袋浩二の知恵袋ちゃんねる」を見て作りましょう
いろんなYouTubeを見てきましたが、「玉袋浩二の知恵袋ちゃんねる」は群を抜いてとっつきやすいです。
また、「玉袋浩二の知恵袋ちゃんねる」を見ながら、ポートフォリオサイトを作ることで下記のような恩恵を受けられます。
- シンプルなポートフォリオサイトが作れる(あまり奇抜なサイトだと良くないらしい)
- 初心者にとっても分かりやすく、かつイケボで説明してくれるので飽きない
- 放送局で番組の制作経験があるお方なので動画の構成が見やすい
さらに要所要所で笑わせてくれるので、一般のコーディング動画と違って大変ありがたいです。
③:ポートフォリオサイトを作る際に見る順番
「玉袋浩二の知恵袋ちゃんねる」を見ながら、ポートフォリオサイトを作る際の順番を下記にまとめます。
- 【入門】HTML•CSSの開発環境を作ろう!【初心者】
- 【必見】Atomのおすすめ機能3選【プログラミング初心者】
- 初心者のためのポートフォリオの作り方【Web制作入門】
- 初心者のためのポートフォリオ作り実践編【Web制作入門】
- 画像編集もやるよ〜ポートフォリオ作り実践編②〜【Web制作入門】
- 初心者のためのポートフォリオ作り実践編③【Web制作入門】
- 初心者のためのポートフォリオ作り④【Web制作入門】
- ポートフォリオのレスポンシブ対応【前編】
- ポートフォリオのレスポンシブ対応【後編】
→ATOMという超使いやすいテキストエディタが優秀です。無料でインストールできます。
→ATOMのオススメ機能を追加する回です。
→ポートフォリオサイトの大元の参考サイトです。
→FontAwesome(アイコンフォント)がサイト内に入るだけで、それらしいサイトに早変わりします。
→PhotoScapeX で丸い画像の切り抜きに苦戦したのでこちらのサイトを参考に切り抜きしました。
動画は9本ありますが、サイトが形になってくると達成感もあって、一気に終わります。
④:YouTubeを見てもポートフォリオサイトが作れないかもと不安な場合
「YouTubeを見てもポートフォリオサイトが作れないかも」と不安に思う方もいると思います。
そんな方は、少し時間がかかりますが「玉袋浩二の知恵袋ちゃんねる」を古い順に最初から見ていきましょう。
動画の一つ一つが、初心者向けに丁寧に作成されているので、それらを1から見ることでより理解が深まります。
基本的なパソコン操作ができれば、きっとポートフォリオサイトを作れますよ。
⑤:ポートフォリオサイトの作り方(まとめ)
いかがでしたでしょうか。
玉袋浩二氏のYouTubeが素晴らしすぎて、ブログ記事に纏めるほど引き込まれました。
これだけ分かりやすい説明の動画をアウトプットしてくれているので、さぞ勉強されているんだろうなと思います。
最後に「玉袋浩二の知恵袋ちゃんねる」を見てポートフォリオサイトを作るメリットについて下記にまとめます。
- シンプルなポートフォリオサイトが作れる(※奇抜なサイトだと良くないらしい)
- 初心者にとっても分かりやすく、かつイケボで説明してくれるので飽きない
- 放送局で番組の制作経験があるお方なので動画の構成が見やすい
ぜひ、あなたも「玉袋浩二の知恵袋ちゃんねる」を見てみてくださいね。