なぜあなたのポートフォリオサイトは完成しないのか。原因はたったひとつ！制作着手前のステップも公開！
2022.12.20
2024.02.10
近年、Web制作を仕事にしようとSNSのプロフィール欄に自作のポートフォリオサイトのリンクを添付している方が多くみられます。
その中でも気になったのが、
- ナビゲーションのリンク切れ
- ページのコンテンツが途中
- リンク遷移先が他と同じページ
といった「完成していない」ポートフォリオサイトが散見されます。
そして数ヶ月後また同じサイトを見るとまだ見せられる段階にない…。
完成もされていないので、メンテナンスもできないといったところでしょうか？
この問題の原因について考えてみました。
サイトが完成しないのは “ゴール”が見えていないから
完成していないサイトを持つ多くの人は、設計やデザイン、スケジューリングをきちんと行わないまま実装を始めています。
おそらく、「パパッとすぐに作ってしまって転職活動や営業に使おう」という心情でしょうが、それでは完成はしない、もしくは思った通りにいかないでしょう。
多くの人たちは、「お客さんのサイトではないから、きちんとする必要はない」と考えがちなのです。
設計やデザインは制作活動の”ゴール”です。
ゴールを設定しないと制作活動中にもふわふわとした感覚で納得できないまま、結局完成しないのです。
実際の制作フローと同様の制作フローが最速。
いくら自分のポートフォリオサイトといっても、「WebサイトはWebサイト」なのです。
実際の制作フローと同様に制作することで完成を目指しましょう。
実装に着手する前には以下のようなフローを辿る必要があります。
- いつまでにサイトを公開したいか漠然とスケジュールを立てる
- 自分の強みやスキルを棚卸する
- ターゲット、コンバージョンを設定
- 必要なページやコンテンツ、機能を洗い出す
- 利用するCMSやプラグイン、実装の調査
- ページ構成表を作成
- 着手前にスケジュール見直し
- テキストや画像（動画）素材を作成、収集
- 各ページのワイヤーフレームを作成
- デザイン
これらについてひとつひとつ見ていきましょう！
1. いつまでにサイトを公開したいか漠然とスケジュールを立てる
まずはいつまでにサイトを公開したいかを考えましょう。
後でしっかりとスケジュールを見直して決定するので、「1ヶ月後や2ヶ月後に完成を目指して、2週間はデザインに充てて…」と漠然な形で構いません。
2. 自分の強みやスキルを棚卸する
Webサイトは「情報を伝える」という大きな役割を担っています。
そしてポートフォリオサイトは自分の強みやスキルを伝達する最大の機会なのです。
しっかりと自分と向き合い、考えてみましょう。
3. ターゲット、コンバージョンを設定
次はターゲットやサイトの目標（コンバージョン）を考えましょう。
ターゲットとは「どんな人に向けたサイトを作りたいか」ということ。
自分の強みやスキルから自然とターゲットが浮かび上がることもあります。
- シンプルなデザインが得意なら、シンプルなWebサイトが欲しい人に向けて。
- アニメーションの実装が得意なら動きがあるサイトやその技術を欲する人に向けて。
このような形で、それぞれの得意分野をターゲット選定に活かしましょう。
コンバージョンとは「どれくらいの数の人に見てもらい、どれくらいの人がお問い合わせをするのか」という数値目標。
最初はなんとなくでも、小さな数字でも構いません。
ここでコンバージョンについて考えることで、
- 転職活動や営業にそこまで利用しないのであれば、コンテンツや機能も最小限に抑えた1ページのサイトにしよう。
- SNSのフォロワーが多いので、多くのコンバージョンが得られそう。よってブログ機能を強化しよう。
といった判断が可能になります。
4. 必要なページやコンテンツ、機能を洗い出す
必要なページやコンテンツは、目標やターゲットによって変わってきます。
例えばWebコーダーとして転職活動や制作会社向けに制作する場合、
- 自分のスキルを見せたい
- 制作実績は公開できる範囲で公開したい
- あわよくばサイトからお問い合わせが来るようにしたい
- ちょっとした技術ブログを書きたい
といった自身の要望が出てくきます。
その要望を機能やコンテンツに分割していきます。例えば、
- 自分のスキルを見せたいのであれば、サイトを訪れたほとんどの人が目に入るトップページの上の方に表示。
- お問い合わせが来るようにしたいのであれば、お問い合わせフォームが必要
- 技術ブログを書きたいのであれば、ブログ投稿機能とそれを表示させるページが必要
といった形で必要なページやコンテンツ、機能が見えてきます。
5. 利用するCMSやプラグイン、実装の調査
ある程度必要事項がまとまってきたら機能面で実装できるかどうかを調査します。
ブログ機能を使いたいならWordPressなどのCMS機能は必要ですし、メールでのお問い合わせが欲しいならお問い合わせフォームの機能が必要です。
これらの機能が実際に使えるのか、もしプラグインで存在しないものならば実装できるのか、そもそも必要なのかを考えましょう。
使ってみないとわからないなら実際に触ってみることもお勧めします（少し時間はかかります）。
6. ページ構成表を作成
ページが数ページある場合はスプレッドシートやEXCELでページ構成表を作りましょう。
もし、1ページだけのサイトであれば「セクション構成表」でも良いでしょう。
Webサイトにはトップページと下層ページや投稿の詳細ページが必要であるので、ここで決定します。
- トップページ
- 制作実績ページ
- お問い合わせページ
- プライバシーポリシーページ
- 投稿一覧ページ
- 投稿詳細ページ
ここで「コンテンツの総量が少なそうだからページを減らしてトップページにまとめる」といった作業をすることも可能。柔軟にいきましょう。
ページ構成表の一例を公開！
7. 着手前にスケジュール見直し
ここまでくると大体のゴールが見えてきます。着手段階に入る前にまたスケジュールを見直して決定していきましょう。
ここではなるべく具体性のあるスケジュールを立てましょう。
何月何日にどのページを作成開始して、いつまでに終わらせるのか。
ひとつひとつのページや機能に対してのスケジュールを当てはめます。
ページ構成表に実装期間を書きこんでもいいかもしれませんね。
8. テキストや画像（動画）素材を作成、収集
魅力的なサイトには魅力的なコピーや画像が表示されています。
自分の魅力を最大に伝えるためのテキストや画像（動画）素材を用意しましょう。
ここで自分の使用したい「色」を決めておくと良いでしょう。
メインカラー、サブカラーなど、自分に合った色を選択しましょう。
9. ワイヤーフレームを作成し、レイアウトを決定
Webサイトを制作するにあたって、どこに、どの情報を表示させるかは非常に重要な課題です。
強みやスキルをうまく伝えられるようにレイアウトを作っていきます。
Adobe XDやFigmaを使っても、スプレッドシートやメモ帳でも構いません。
自分なりに作ってみましょう。
10. デザイン
ワイヤーフレームで大体のレイアウトが決定したらデザインカンプを作りましょう。
デザインカンプを作ることで見た目のゴールを設定できます。
実装する際の指針になります。
コーダーのスキルしかなく、デザインが難しければ自分なりのものでも構いません。
とにかく”ゴール”を設定するためのデザインです。ゴールさえあれば実装はあっという間です。
まとめ
今回は「なぜポートフォリオサイトが完成しないのか」という問いからポートフォリオサイトを実装する前の準備についてまとめました。
「少し面倒だな」と思ってしまう部分もあるかと思いますが、”実務の練習”と捉えて実践して欲しいものです。
「ゴールを見据える」。しっかりと意識してポートフォリオサイトを完成させましょう。
