こんにちは。カトー（@hisayosky）です。
ポートフォリオサイト作り始めるとき、ぼくはそんなふうに考えていました。
作り方よくわからないし、自分のサイトだからいきあたりばったりでいいかと思ったんですね。
実際に作った経験からいいますと、いきあたりばったりはまったくおすすめしません。
- 目的のないサイトができてしまうおそれがある
- 工程がかえって複雑になる
のが主な理由です。
ポートフォリオサイトを作るなら「考える工程」と「作る工程」は分けた方がいいです。でもどう分けたらいいかわかりませんよね？
そこで今回はポートフォリオサイトをゼロから作る手順を解説します。
ぼく自身はプログラミングをはじめて３ヶ月半で自分のポートフォリオサイトを作りました。
ゼロからはじめてサーバーにアップロードするところまで９日間、試行錯誤しながら作っていきました（作業は遅いです）。
そんな自分のサイト制作経験をもとに手順を解説しますね。
ではいってみましょう。
目次
ポートフォリオサイト制作の流れ
制作の流れをざっと見ておきましょう。
- 参考サイトをいっぱい見る
- 自分にヒアリングする
- サイトの概要をスケッチする
- ラフデザインを作成する
- コーディングする
- ファイルをサーバーにアップロードする
では順番に説明していきます。
手順１「参考サイトをいっぱい見る」
いきなり自分のアイデアだけでサイトをデザインするより、いいと思ったサイトを真似するほうがよいものが作れます。
ポイントは「いっぱい見ること」です。
正直言いまして、ぼくは見た量が少なかったので、サイトもアイデア不足が否めない出来となってしまいました。
どうせ見るならいいサイトをいっぱい見たいですよね。
自分で探せればいいですが、参考になるサイトを挙げておきますのでこちらをとっかかりにしてみてください。
🔶ポートフォリオサイトのまとめ
>>イケてるWebデザインで作られたポートフォリオサイト21選まとめ
🔶とにかくスタイリッシュなサイトのまとめ
>>縦長のWebデザインギャラリー
手順２「自分にヒアリングする」
なんとなく作りたいサイトのイメージが固まったら自分にヒアリングをします。
どんなサイトが作りたいのかを言語化していくわけです。
やることは「自分で質問を設定して答える」だけです。これをなんども繰り返します。
自分の好きな方法でやればいいですがオススメは紙に書くことです。
とはいえ、ぼくはわりと「めんどくさいな・・・」と思ってしまうほうなので「マインドマップ」を使いました。
質問した項目は以下のとおりです。
- サイトを作る目的は？
- どんな印象のサイトにしたいか？
- ターゲットはだれか？
- 依頼をくれる人はどんなことが知りたいか？
- サイトに入れる内容は？
- サイトの構成は？
- どんな結果を期待するか？
質問項目は人によって多少違ってくるでしょう。思いつくままに書いていけばいいです。
マインドマップはアプリを使えばＰＣでも作ることができますが、個人的には手書きをおすすめします。
- 自由度が高くてイラストがさっと入れられる
- なにより書いててたのしい
からです。
用途に応じて手書きとアプリを使い分ければいいですね。
🔶マインドマップに使っているペンのレビュー
仕事に使えるカラーペン。おすすめはステッドラーの「ファインライナー」一択です
手順３「ポートフォリオサイトの概要をスケッチする」
作りたいサイトが言語化できたら実際のサイトのビジュアルをなんとなく形にしていきます。
はじめに見た参考サイトを少しずつパクっては構成していきます。
この段階でテキストの内容もざっくりと決めておきましょう。
ぼくは手書きでやりましたが、ＰＣでやってもいいと思います。
参考までにぼくのスケッチをお見せします。
だいぶ雑ですね（笑）。これでもやらないよりずいぶんましです。
結局ぜんぶ書いてから「なんかちがう」となりまして、こちらの案をあらたに書きました。
さらに雑ですね（笑）。でもこれが採用になったのでバカにできません。雑でもいいから書いておくことをおすすめします。
あとこれはちょっとしたテクニックなんですが、はじめに作った物は思い切っていったん捨てるといいものができやすいです。
手順４「ポートフォリオサイトのラフデザインを作成する」
スケッチでサイトの概要ができたら、ラフデザインとしてサイトをより具体的にしていきます。
ツールですが、ぼくはFigmaを使いました。
Figmaはオンラインで使えるデザインツールです。無料なのにIllustratorとかなり同じことができます。
少なくともラフデザインを作るのには十分すぎる機能と操作性を備えていますのでおすすめです。
ここではすべてのページのビジュアルを具体的に作っていきます。
この段階で使った画像はそのままコーディングで使えますので、本番で使う画像を集めていきましょう。
テキストも本番で使えるものにしておけば、コーディングでは貼り付けるだけで済みます。
このような感じですべてのページのラフデザインを作りました。
ちなみにホバー時やクリック時の動きに関しては決めておらず、コーディングしながら付け加えていきました。
Figmaの使い方については詳しい本がありません。
しかしオンライン教材のUdemyで動画を見ながら勉強できます。Webデザインに必要なスキルがきちんと身につく内容です。
手順５「コーディングする」
ラフデザインができたらあとはコーディングをします。ひたすらデザインをコードに変換していくだけです。
注意点としては、ブラウザによって制作物の見え方が変わるということです。
ぼくは制作物のチェックにはChromeを使っていますが、念のためSafariでも確認していました。
ChromeだとなんともないのにSafriだとおかしくなるなんてことはよくありますので、複数のブラウザで確認してみることをおすすめします。
手順６「ファイルをサーバーにアップロードする」
アップロードについては別記事にまとめましたので、こちらをご覧ください。
🔶関連記事
>>サイトをサーバーにアップロードする方法。初心者でも一発でできるように解説するよ
サーバーの契約から書いてあります。サーバーがある方はドメインのところから読んでいただければいいでしょう。
まとめ：ポートフォリオサイトの作り方はいいサイトをいっぱい見ることが基本。PCと手書きをうまく使い分けて「考える工程」と「作る工程」を切り離そう
手順だけおさらいしておきます。
- 参考サイトをいっぱい見る
- 自分にヒアリングする
- サイトの概要をスケッチする
- ラフデザインを作成する
- コーディングする
- ファイルをサーバーにアップロードする
▼最後まで読んでくれたあなたにおすすめの記事
プログラミングを2ヶ月で仕事にするために必要な５つの条件
当サイトは「STORK」を使用しています
ポートフォリオサイト作りたいけれど、どうやって作ればいいの？
とりあえず考えながらコード書いちゃおっかなぁ