リトルカトポートフォリオサイト、どうやって作ろう？ とりあえずコード書きながら考えればいいかな？
ポートフォリオサイト作り始めるとき、こんなふうに考えていませんか？
実際に作った経験からいいますと、いきあたりばったりはまったくおすすめしません。
ポートフォリオサイトを作るなら「考える工程」と「作る工程」は分けましょう。
でも具体的にどうすればいいかわかりませんよね？
そこで今回はポートフォリオサイトをゼロから作る手順を解説します。
そんな自分のサイト制作経験をもとに手順を解説しますね。
ポートフォリオサイトを自作する手順
制作の流れをざっと見ておきましょう。
- 参考サイトを集める
- 自分にヒアリングする
- サイトの概要をスケッチする
- ラフデザインを作成する
- コーディングする
- ファイルをサーバーにアップロードする
では順番に説明していきます。
手順１：参考サイトを集める
いきなり自分のアイデアだけでサイトをデザインするより、いいと思ったサイトを真似するほうがよいものが作れます。
ポイントは「いいサイトをいっぱい見ること」。
参考になるサイトを挙げておきますのでこちらをとっかかりにしてみてください。
手順２：自分にヒアリングする
作りたいサイトのイメージが固まったら自分にヒアリング、つまりどんなサイトが作りたいのかを言語化していきます。
やることは「自分で質問を設定して答える」。これをなんども繰り返すだけ。
好きな方法でやればいいですがオススメは紙に書くことです。
とはいえ、ぼくはわりとめんどくさがりなのでマインドマップを使いました。
質問した項目は以下のとおりです。
- サイトを作る目的は？
- どんな印象のサイトにしたいか？
- ターゲットはだれか？
- 依頼をくれる人はどんなことが知りたいか？
- サイトに入れる内容は？
- サイトの構成は？
- どんな結果を期待するか？
質問項目は人によって多少違ってくるでしょう。思いつくままに書いていけばいいです。
マインドマップはアプリを使えばＰＣでも作ることができますが、個人的には手書きをおすすめします。
- 自由度が高くてイラストがさっと入れられる
- なにより書いててたのしい
からです。
用途に応じて手書きとアプリを使い分ければいいですね。
手順３：ポートフォリオサイトの概要をスケッチする
作りたいサイトが言語化できたら実際のサイトのビジュアルをなんとなく形にしていきます。はじめに見た参考サイトを少しずつ真似して取り入れていけばOKです。
この段階でテキストの内容もざっくりと決めておきましょう。ぼくは手書きでやりましたが、ＰＣでやってもいいと思います。
参考までにぼくのスケッチをお見せします。
だいぶ雑ですね（笑）。これでもやらないよりずいぶんましです。
結局ぜんぶ書いてから「なんかちがう」となりまして、こちらの案をあらたに書きました。
さらに雑ですね（笑）。雑でもいいから書いておくことをおすすめします。
あとこれはちょっとしたテクニックなんですが、はじめに作った物は思い切っていったん捨てるといいものができやすいです。
手順４：ポートフォリオサイトのラフデザインを作成する
スケッチでサイトの概要ができたら、ラフデザインとしてサイトのイメージを具体化します。
ツールはFigmaを使いました。
Figmaはオンラインで使えるデザインツールです。無料なのにAdobe XDと似たようなことができます。
ラフデザインを作るのには十分すぎる機能と操作性を備えていますのでおすすめです。
ここではすべてのページのビジュアルを具体的に作っていきます。
この段階で使った画像はそのままコーディングで使えますので、本番で使う画像を集めていきましょう。
テキストも本番で使えるものにしておけば、コーディングでは貼り付けるだけで済みます。
このような感じですべてのページのラフデザインを作りました。
ちなみにホバー時やクリック時の動きに関しては決めておらず、コーディングしながら付け加えていきました。
Figmaの使い方については、動画を見て同じようにやれば誰にでもできます。参考動画は以下のとおりです。
手順５：コーディングする
ラフデザインができたらあとはコーディング。ひたすらデザインをコードに変換していくだけです。
注意点としては、ブラウザによって制作物の見え方が変わるということです。
ぼくは制作物のチェックにはChromeを使っていますが、念のためSafariでも確認していました。心配ならMicrosoft Edgeもチェックしておいてください。
ChromeだとなんともないのにSafriだとおかしくなるなんてことはよくありますので、複数のブラウザで確認してみることをおすすめします。
手順６：ファイルをサーバーにアップロードする
アップロードについては別記事にまとめましたので、こちらをご覧ください。
サーバーを契約から書いてあります。サーバーがある方はドメインのところから読んでいただければいいでしょう。
なお、サーバーはエックスサーバーを断然おすすめします。ワードプレスの設定が楽で、使用中も安定感抜群だからです。
当サイトもエックスサーバーを使っています。
月額900円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』
作業は以上です。おつかれさまでした！
ポートフォリオサイト は目的を意識して作ろう
ポートフォリオサイトは目的によって中身が変わってきます。「何に使うのか」を意識して作りましょう。
- ただ人に見せたい
- 自分の案件獲得につなげたい
- 就職活動に使いたい
- 企業との契約を取る時に使いたい
余談ですが、ぼくがフリーランスをやっていた2018年ごろはポートフォリオサイト が制作会社への営業で威力を発揮していました。
それでフリーになりたての人がこぞってポートフォリオサイト を作っていたのですが、2020年現在はそんな話もあまり聞きません。
もし就職・転職を目的にしているならポートフォリオサイトより、しっかり力をつけて人に見せられる制作物を作ることに注力した方がよいでしょう。
目標が就職・転職に決まっている人はスクールも検討してみるといいです。お金はかかりますが、最短距離で目標が達成できるサポートが得られます。
とはいえ30代以上になると受け入れてくれるスクールはなかなか見つかりません。そんな方はテックキャンプ
の無料相談で相談してみてください。30代以上でも幅広く受け入れてくれるスクールです。
