こんにちは。U235です。ポートフォリオサイトが完成しました！
ポートフォリオサイトはこちらです。
今回の記事では、ポートフォリオサイトの具体的な作成工程やかかった時間をお伝えしようと思います。
これからポートフォリオサイトを作成される方もいらっしゃると思うので、ぜひ参考にしてください。
なお、作成手順はWEBCOACHの教材に概ね沿っています。
デザインをする 2日間
ノーコードで作ろうが、自分でコーディングしようが、まずはデザインです。
デザインというのは見た目の華やかさもそうですが、「何を載せるか」もデザインです。
ポートフォリオサイトの目的を考えつつ、何を載せたいかをリストアップして、それから見た目を考えていきましょう！
① 他の人のポートフォリオサイトを眺める
他の方のポートフォリオサイトというのをほとんど見たことが無かったので、以下の点に着目しながらたくさんの人のポートフォリオサイトを眺めました。
- グローバルメニューの項目（載せたい情報）
- 載せたい情報の順番
- デザイン（見た目）
- 制作物詳細ページの内容
多分30サイトくらいは見た気がします。
そこでわかったのは、WEBデザイナーさん、コーダーさん、フォトグラファーさん、グラフィックデザイナーさん、俳優さん……と、業種によってかなり特徴が違うこと。
インスピレーションを得るという意味で他業種の方のポートフォリオを見るのもおすすめですが、自分と同じWEBデザイナーさんやコーダーさんのポートフォリオサイトを中心に閲覧しました。
ギミックが沢山ありめちゃめちゃオシャレなサイトもあれば、シンプルで簡潔なサイトもありますし、個性的なデザインのサイトもありました。
自分がわくわくするような、こんなポートフォリオサイトを作りたいな、というサイトをいくつかピックアップしておくと、あとで参考にしやすいです。
② ターゲットと目的を明確にする
「誰に」「何を」「どう」伝えるのかを考えてみます。
このターゲットや目的を、なんとなーくぼんやり考えるのではなく、しっかり言語化しておくと、一貫性のある魅力的なページができるだけでなく、あとで制作物詳細ページを作るときに楽になりますよ。
ターゲットを決める
ポートフォリオサイトを誰に見てもらいたいか、ということを考えてみます。
そもそもなぜポートフォリオサイトを作成するのかというと、この世界でお仕事を受けるため、ですよね。
では、「誰から」「どのように」仕事を受けたいですか？
ここは人によって様々で、
WEB制作会社に転職して仕事をしたい
→WEB制作会社の採用担当者にポートフォリオサイトを見てもらいたい
という人もいれば、
副業やフリーランスとして直接仕事を受けたい
→WEBデザインやコーディングの依頼を検討している企業や個人事業主にポートフォリオサイトを見てもらいたい
という人もいると思います。
私は副業やフリーランスでの活動を考えているため、後者をメインターゲットとしました。
ターゲット像をもう少し深堀りする
「WEBデザインやコーディングの依頼を検討している企業や個人事業主」ってどんな人かな、ともう少し具体的に考えてみます。
私は保育園看護師のキャリアがあるので、将来的には保育関係や医療関係の仕事が受注できたら知識を活かせて素敵だなと日々妄想しています。
そのため、ターゲットは「WEBデザインやコーディングの知識はほとんどない」「忙しい中WEB制作の依頼をしてくる」「わかりやすさを求める」という特徴があるかな、と考えました。
目的を決める
ではターゲットにポートフォリオサイトを見てもらって「何を」「どう」伝えるのか。
ターゲット目線で考えてみましょう。
あなたがWEBデザインやコーディングを依頼したいクライアント側だったとして、ポートフォリオサイトから何を知りたいと思いますか？
それを踏まえて、何を伝えるべきか。私が考えたのは以下の通りです。
- どんな人か
- どんなことができるのか
- どんな経験があるのか
- どんな思いなのか
- 具体的にどんなものを作ってきたのか
そしてこれらをターゲットに見てもらって最終的にしてほしいことはなんでしょうか。
それは「仕事を依頼してもらう」じゃないかなと思います。
じゃあどうやって仕事を依頼してもらうのか？コンタクトフォームを設置するのか？メールアドレスを載せるのか？SNSアカウントからDMをもらうのか？自分のわかりやすい方法を考えましょう。
③ 載せたい情報をリストアップする
①でたくさんのポートフォリオサイトを見ても、②で目的を考えても、大体同じような内容が「載せたい情報」になるのかなと。
あとは具体的にどんなことを載せたいか、メモしておいてもいいと思います。
私のポートフォリオサイト作成前のメモはこんな感じ。
- メインビジュアル
- U235のポートフォリオサイトだと伝える
- WEBデザイン、コーディングをしていることを伝える
- About
- プロフィール：名前、生年月日、好きなもの、趣味
- スキル：HTML、CSS、JavaScript、WordPress、Figma、WIXなど、何がどれくらいできるのか
- 経歴：タイムライン形式で、持っている資格も
- メッセージ：価値観、目標
- Works
- WEBデザイン、コーディング、バナー、その他
- トップページにはメインで見てほしい制作物を載せる（モックアップ画像）
- MOREボタンをつけて、すべての制作物一覧ページへ飛ぶようにする
- すべての制作物一覧ページ：フィルター機能をつける
- 制作物詳細ページ：概要、ターゲット、目的、情報設計、制作期間、使用ツール
- Contact
- Googleフォームを埋め込む
- 名前、フリガナ？、メールアドレス、電話番号？、内容
- 希望納期、予算感、参考URLの欄もつくるか？
ここから変えた部分も多くありますが、当初のメモはこんな感じでした。
④ サイトマップを作成する
さっきのメモをマッピングするとこんな感じに（メインビジュアルは省いてます）。
本当はもうちょっと書き方あるやろ……と思うのだけど（これだとプロフィールの下層コンテンツとしてスキルがきているような書き方になっている）、とりあえず自分がわかればいい。
お仕事を取ったときのことを考えて、何かしらツールを導入したいなーと思うなどしました。
ちなみにこれはGoogleスプレッドシートを使って作成していますが、項目ごとに色を変えられないし使い勝手はあまり良くないのでおすすめしません。
⑤ ワイヤーフレームを作成する
Figma等で作るのが基本かと思いますが、提出もしないしもう……ね。
どんなんにしよっかなあ～～～とノートにいくつかザカザカ書いて終わりました。
こんな。
たくさんのポートフォリオサイトを見る中で、AboutとWorksの順番はマチマチでした。
どっちが正解とかはないと思いますが、私はこんな人で、こんなものを作りましたという順番にしたくてこの並びにしました。
あとはスキルを一つのセクションとして取っている人も多かったです。
私はAboutの中に組み込みました。
⑥ デザインカンプを作成する
さっきのを一応簡単にFigmaにおこしてみます。
このときの黒猫ちゃんのイラストは、フリー素材をあてていました。
トップページの構造を解説すると、各セクション（メインビジュアル、About、Works、Contact）を100vhごとに分けて、セクションの中身（プロフィール、スキル、経歴、メッセージ）はタブで切り替える感じにしました。
意図としては、「忙しい中WEB制作の依頼をしてくる」「わかりやすさを求める」人をターゲットにしているので、欲しい情報にすぐアクセスできるようにしたいからです。
色も各セクションで全然違う色を採用していて、自分がいまどのセクションを見ているのかがわかりやすい構造にしています。
統一感がないかなと少し悩みましたが、印象には残りやすいかなと理由をつけて良いことにしました。
しかしこれはデザインカンプというより、ワイヤーフレームからデザインをおこしてる途中……って感じですね。モバイル版も作ってないです。もうこれでええや。コーディングさせてくれ。という気持ちで終了（ダメだと思う）。
みんなはちゃんとデザインやってね。ちゃんと後々困ったよ！
⑦ オリジナルイラストを作成する
黒猫ちゃんのイラストを、フリー素材からひっぱってきても良かったのですが、せっかくだから自分で描こうかなと。オリジナリティってやつ。
しかしデジタルイラストは10年近くぶり。イラストソフトも一度購入はしていたのですがIDとパスワードを紛失してしまって新しいパソコンに引き継げていなかったので、どうしようかなと。
昔使っていた板タブ（なんと2007年製の化石ｗ）と、アイビスペイントの無料版で描きました。
凝ったイラストではないので1イラスト5～10分くらいです。
よく見ると全然顔つき違うな。等身も。まあええじゃろ。黒猫可愛い。
コーディングをする 約10日間
① トップページを作成する
デザインができたら（できたと言っていいのかわからないけど）、いざコードにおこしてみましょう！
メインビジュアル
結構シンプルなデザインですが、意外と悩みは多かったです。
特に悩んだのは、スマホなどの画面幅が狭い媒体で表示させたときに、黒猫と吹き出しのサイズや位置をどう調整するかでした。
ま、画像でやっちゃえば楽なんだけどね。
Aboutセクション
タブはjQuery講義で勉強したことを使って作りました。
スキルタブを開くと、プログレスバーがにゅっと伸びるアニメーションを使用しています。
こちらの記事を参考にさせていただきました。
経歴はタイムラインで載せました。
タイムラインの作り方はこちらの記事を参考にさせていただきました。
Worksセクション
ここはコーディングをしながらデザインから結構変えています。
MOREボタン（制作物一覧ページ）を作らないことにし、タブの項目名を変更しました。
何故かというと、欲しい情報にすぐアクセスできるようにしたいからです。制作物一覧ページを作ると、ワンクッションが必要じゃないですか。
今までどんなものを作ってきたのかな、とずらっと見たいときにページ移動をしなきゃいけないのはめんどくさいと思って。トップページで全部見られたらいいじゃないかと。
そしてタブの項目名は結構迷走していたのですが、「Website」「Graphics」「Others」に落ち着きました。
コードありでも、ノーコードでも、WEBデザインだけでも、WEBサイト作成の一環だったら「Website」。バナーやロゴなどのグラフィック作成なら「Graphics」、その他をやることがあれば「Others」。で、どうでしょう。
ただWebsiteがメインのお仕事になる予定なので、今後制作物が増えてここがとっちらかるようだったら考えないとなと思っています。
MOREボタン（制作物一覧ページ）をやっぱり作るのか、タブの項目名をWebsiteを細分化できるように分けるのか。またいずれ考えるということで。
モックアップを作成する
モックアップとはサンプルみたいなもののこと。
パソコンやスマートフォンの画面に作ったサイトを表示させたような画像のことです。
これをWorksセクションで並べて表示し、画像をクリックすると制作物詳細ページに飛ぶように設計しています。
無料かつブラウザで完結するモックアップジェネレーターを使うも良し、Canvaのアプリを使うも良し、Figmaのプラグインを使うも良し、Photoshop等で自分で当て込むも良し。
自分のやりやすい方法でやれば良いと思います。ジェネレーターを使うのが一番簡単かな。
私は制作物詳細ページでモックアップ画像を拡大して表示させたかったのですが、ジェネレーターを使うと少し画質が悪めだったので却下しました。
Canvaのモックアップアプリは使いやすく割とアリだったのですが、無料プランだと背景を透過できなかったため却下。
Figmaだと背景を透過できるのでおすすめです。透過が必要なければCanvaがわかりやすいし画質もいいのでおすすめ！
Contactセクション
これはGoogle Formを埋め込みました。
見た目がなんでもいいのであれば埋め込みは簡単なのですが、見た目をCSSで調整しようと思うと少し面倒な作業がありました。
他の人のポートフォリオサイトだと、メールアドレスが表示されていたり、SNSリンクが貼ってあるものが多かったです。
あとはWordPressやWIXなどでポートフォリオサイトを作っていれば、フォームの作成は簡単かなと。
【困ったこと】スナップスクロールとスムーススクロール
今回各セクションを100vhごとにして、スナップスクロールを採用しています。
スナップスクロールとは、ちょろっとホイールを回す・スワイプするだけで次のセクションに移るようなスクロールアニメーションのこと。
これとスムーススクロールは同じスクロールアニメーションということで競合してしまうようで、どっちも採用するっていうのが難しかったです。
グローバルメニューをクリックしたときにスムーススクロールが働いてほしいのに、スナップスクロールが悪さしてパッパッと画面が切り替わる形になってしまう。
グローバルメニューをクリックしたときは、いったんスナップスクロールのCSSを止めてスムーススクロールし、再度スナップスクロールを有効にする……というJavaScriptを採用してなんとかしました。
////////// スムーススクロール
// ページ内リンクのスムーススクロール
$('a[href^="#"]').on('click', function (event) {
event.preventDefault();
const targetId = $(this).attr('href');
const targetElement = $(targetId);
if (targetElement.length) {
const offset = targetElement.offset().top;
// スナップスクロールを無効化
$('html, body').css('scroll-snap-type', 'none');
$('html, body').animate({ scrollTop: offset }, 600, function () {
// スクロール終了後にスナップスクロールを再度有効化
setTimeout(() => {
$('html, body').css('scroll-snap-type', 'y mandatory');
}, 100); // 少し遅延を入れて安定させる
});
}
});しかし、ページ遷移時のスムーススクロールがどうもうまくできなくて……。残念ながら課題が残ってしまいました。
JavaScriptの勉強をもう少し深めたいところ。
② 制作物詳細ページを作成する
多分ここがターゲットにとって一番大切なページ。
しっかり作っていきましょう！
制作物の説明文を書く
内容は載せたい情報のリストアップをした通り、「概要」「ターゲット」「目的」「情報設計」「制作期間」「使用ツール」、あと初めに「作品名」、「URL」、最後に「使用言語」も載せました。Skillで使用言語について載せているので、「実際にこんなことができるぞ」と示すことができます。
架空サイトでも説明文を丁寧に書き込むことで、「丁寧に考えてデザインされているんだな」と思ってもらえると思います！
読まない人は読まないけど、読む人は読む。
読む人にとってここが適当だと、すごく残念な印象を持たれてしまいます。
ぜひ丁寧に書いてみてください！
ページ全体のスクリーンショットを撮る
最後に「完成デザイン」を載せます。
ページ全体のスクリーンショットは、chromeであればデベロッパーツールから行うか、拡張機能を使う方法があります。
ただし、ヘッダーを固定していたり、スクロールしてから表示されるなどのイベントがあったり、トップへ戻るボタンがあったり……だとうまくいかないこともありました。
そんなときはFigma等の画像編集ツールで切り貼りしてお直ししましょう。
修正する 約5日間
あらかた完成したらコーチに添削してもらい、デザインを修正しました。
また、その後繋がりのあるIT会社の社長さんにポートフォリオサイトを見ていただく機会がありました。
年末の忙しい時期にも関わらず、見てアドバイスをいただけてありがたいです。
コーチからのアドバイス
概ね良いけど、もっとよくできる！とのこと。
① ページに圧迫感がある
コンテンツが入っている白い角丸に圧迫感がある。
下の余白が少なく詰まって見える。丸っこい印象が強い。
とのこと。
これを改善するには、
- 下に余裕を持たせる→白い角丸を下に大きくする
- paddingやmarginで余白を増やす
- border-radiusでカーブを小さくする
と、いうことで修正したのがこちら。
確かにこっちの方が良い！
② ページトップに戻るボタンをつける
縦に長いページになるので、ページトップに戻るボタンはあったほうがいいよ、と。
よくある上矢印ボタンでもいいのですが、せっかくだから世界観を合わせよう。とまた古代のペンタブを引っ張り出しました。
にゃんっ。
これを、
- ページスクロールでにょきっと手が出てくる（メインビジュアルでは表示されない）
- カーソルを合わすと手がぴょこっと伸びる
というアニメーションにしてみました。
<a href="#" class="back-to-top">
<img src="img/topbutton.png" alt="トップに戻る">
</a>/* トップへ戻るボタン */
.back-to-top {
position: fixed;
bottom: -400px; /* ページトップでは画面外へ隠しておく */
right: 2rem;
width: 80px;
height: 200px;
z-index: 100;
transition: bottom 0.5s ease, transform 0.3s ease;
}
.back-to-top img {
width: 100%;
}
.show-back-to-top {
bottom: -80px; /* 300pxスクロールしたら高さ120px分表示する */
}
.back-to-top:hover {
transform: translateY(-20px); /* カーソルを合わせたら20px分上に出る */
opacity: 1; /* 全体に適応していた a:hover {opacity: 0.8;} を打ち消す */
}////////// TOPへ戻るボタン
// スクロールイベント監視
window.addEventListener("scroll", () => {
const backToTop = document.querySelector(".back-to-top");
if (window.scrollY > 300) { // 300px以上スクロールしたら表示
backToTop.classList.add("show-back-to-top");
} else {
backToTop.classList.remove("show-back-to-top");
}
});
// クリックでトップに戻る
document.querySelector(".back-to-top").addEventListener("click", () => {
window.scrollTo({ top: 0, behavior: "smooth" });
});③ このブログも紹介しよう！
せっかく作ったし、アウトプットブログがあるというのは私の強み・他の人との差別化になる。とのことで、このブログを紹介した方が良い！とのこと。
最初はWorksの制作物紹介の1つとして考えましたが、ポートフォリオサイトの公開にあたり、「このブログのu2-35.comっていうドメインをポートフォリオサイトに使いたいなあ……」と思いました。
そのためこのブログをhttps://u2-35.com/blogとサブディレクトリに移し、ポートフォリオサイトをhttps://u2-35.comと設定しました。
そのため、このブログはポートフォリオサイトの一部となったので、Blogセクションを追加することに。
BlogセクションではPHPを使って、最新記事を3つ呼び出すようにしています。
ちなみにGitHubではPHPを組み込んだコードをアップロードできないので、やっぱりどこかのレンタルサーバーを使用しないとダメみたいですね。
IT会社の社長さんからのアドバイス
知人の勤めている会社の社長さんに紆余曲折を経てポートフォリオサイトを見ていただく機会がありまして……。
そこでアドバイスしてくださったのがこちら。
① スキルの点数はいらない
スキルの点数をアニメーションで付けたよ～と書いたばかりですが、「これはいらないのでは？」とのこと。
確かにまだ初心者駆け出しの今、「あれもこれもそこまでスキルありません！あんまり自信ありません！」って言っているようなものだよなあ。
何か「このスキルは突出して得意だぜ！！」っていうのがあれば良いのだけど……。
（またアニメーションをつけるのが面倒なので）これはまだ消さずに保留しています。
年明けコーチに相談してみようかな。
② コーディングだけじゃなくデザインもできるのは凄い
この社長さんはプログラミングスクールの事業等をされている方で、ご自身もホームページ制作ができる方です。
しかしCanva等のデザインツールは専門外のようで、「ここまで守備範囲なのは凄い」と仰っていたそう。
ありがてえ～～！どっちもできるよっ( ･´ｰ･｀)って人になりたいなと強く思うなどしました。
おわりに
ポートフォリオサイトができて、次はクラウドソーシングサイトで仕事を取ってみよう！というフェーズに移行しました。
今はクラウドワークスをメインにしているので、またその話もできたらいいなと思ってます。
でも年末年始は遠方の友だちを読んでダラダラする予定なので、ちょっとお休みかなー！
バナー道場とかデザイン系の勉強ができたらいいな。ダラ欲に勝てるか心配です。
では皆さま、良いお年をー！
コメント
初めまして！私もWEBCOACHで学習しています。制作物紹介タイムラインから来ました～。とっても素敵で素晴らしいです！私は、バナー中心で勉強しているので、コーディングはまだまだです・・・。
ポートフォリオサイトを拝見しようと思ったのですが、リンクが違うのか会社さんのHPに飛んでしまします。修正中とかでしょうか…。もし意図しないものであったらと思いコメントいたしました。ブログの更新も楽しみにしています～
ゆりさん、初めまして！U235と申します！同志の方にコメントしていただけてとても嬉しいです…！
どうぞよろしくお願いいたします（*^^*）♡♡
そして！サイトのミスのことをご指摘いただき本当にありがとうございます……！サブディレクトリにアップしたものを、間違えてメインディレクトリにもアップしてしまっていたようでした……。
まさに意図しないものでして、ゆりさんにご指摘いただけて気付くことができました（；；）本当に助かりましたー！ありがとうございました！！
ポートフォリオサイトは修正しておりますので、良かったらぜひご覧ください！