初心者の方にポートフォリオサイトの作り方をゼロから解説します

　

ポートフォリオサイト作り始めるとき、こんなふうに考えていませんか？

実際に作った経験からいいますと、いきあたりばったりはまったくおすすめしません。

ポートフォリオサイトを作るなら「考える工程」と「作る工程」は分けましょう。

でも具体的にどうすればいいかわかりませんよね？

そこで今回はポートフォリオサイトをゼロから作る手順を解説します。

ぼく自身はプログラミングをはじめて３ヶ月半で自分のポートフォリオサイトを作りました。ゼロからはじめて９日間かかっています。

そんな自分のサイト制作経験をもとに手順を解説しますね。

ポートフォリオサイトを自作する手順

制作の流れをざっと見ておきましょう。

では順番に説明していきます。

手順１：参考サイトを集める

いきなり自分のアイデアだけでサイトをデザインするより、いいと思ったサイトを真似するほうがよいものが作れます。

ポイントは「いいサイトをいっぱい見ること」。

参考になるサイトを挙げておきますのでこちらをとっかかりにしてみてください。

手順２：自分にヒアリングする

作りたいサイトのイメージが固まったら自分にヒアリング、つまりどんなサイトが作りたいのかを言語化していきます。

やることは「自分で質問を設定して答える」。これをなんども繰り返すだけ。

好きな方法でやればいいですがオススメは紙に書くことです。

とはいえ、ぼくはわりとめんどくさがりなのでマインドマップを使いました。

質問した項目は以下のとおりです。

質問項目は人によって多少違ってくるでしょう。思いつくままに書いていけばいいです。

マインドマップはアプリを使えばＰＣでも作ることができますが、個人的には手書きをおすすめします。

からです。

用途に応じて手書きとアプリを使い分ければいいですね。

おすすめマインドマップアプリ：Mind Node

手順３：ポートフォリオサイトの概要をスケッチする

作りたいサイトが言語化できたら実際のサイトのビジュアルをなんとなく形にしていきます。はじめに見た参考サイトを少しずつ真似して取り入れていけばOKです。

この段階でテキストの内容もざっくりと決めておきましょう。ぼくは手書きでやりましたが、ＰＣでやってもいいと思います。

参考までにぼくのスケッチをお見せします。

だいぶ雑ですね（笑）。これでもやらないよりずいぶんましです。

結局ぜんぶ書いてから「なんかちがう」となりまして、こちらの案をあらたに書きました。

さらに雑ですね（笑）。雑でもいいから書いておくことをおすすめします。

あとこれはちょっとしたテクニックなんですが、はじめに作った物は思い切っていったん捨てるといいものができやすいです。

手順４：ポートフォリオサイトのラフデザインを作成する

スケッチでサイトの概要ができたら、ラフデザインとしてサイトのイメージを具体化します。

ツールはFigmaを使いました。

Figmaはオンラインで使えるデザインツールです。無料なのにAdobe XDと似たようなことができます。

ラフデザインを作るのには十分すぎる機能と操作性を備えていますのでおすすめです。

　

ここではすべてのページのビジュアルを具体的に作っていきます。

この段階で使った画像はそのままコーディングで使えますので、本番で使う画像を集めていきましょう。

テキストも本番で使えるものにしておけば、コーディングでは貼り付けるだけで済みます。

このような感じですべてのページのラフデザインを作りました。

ちなみにホバー時やクリック時の動きに関しては決めておらず、コーディングしながら付け加えていきました。

Figmaの使い方については、動画を見て同じようにやれば誰にでもできます。参考動画は以下のとおりです。

FigmaでWebカンプを作ろう！①Figmaをインストール＆準備をしよう！

手順５：コーディングする

ラフデザインができたらあとはコーディング。ひたすらデザインをコードに変換していくだけです。

注意点としては、ブラウザによって制作物の見え方が変わるということです。

ぼくは制作物のチェックにはChromeを使っていますが、念のためSafariでも確認していました。心配ならMicrosoft Edgeもチェックしておいてください。

ChromeだとなんともないのにSafriだとおかしくなるなんてことはよくありますので、複数のブラウザで確認してみることをおすすめします。

手順６：ファイルをサーバーにアップロードする

アップロードについては別記事にまとめましたので、こちらをご覧ください。

サーバーを契約から書いてあります。サーバーがある方はドメインのところから読んでいただければいいでしょう。

あわせて読みたい

サイトをサーバーにアップロードする方法。初心者でも一発でできるように解説するよこんにちは。カトー（@hisayosky）です。という疑問に答えます。結論としては、やることが４つあります。 サーバーをレンタルする ドメインを取得する サーバーにド...

なお、サーバーはエックスサーバーを断然おすすめします。ワードプレスの設定が楽で、使用中も安定感抜群だからです。

当サイトもエックスサーバーを使っています。

月額900円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』

作業は以上です。おつかれさまでした！

ポートフォリオサイト は目的を意識して作ろう

ポートフォリオサイトは目的によって中身が変わってきます。「何に使うのか」を意識して作りましょう。

余談ですが、ぼくがフリーランスをやっていた2018年ごろはポートフォリオサイト が制作会社への営業で威力を発揮していました。

それでフリーになりたての人がこぞってポートフォリオサイト を作っていたのですが、2020年現在はそんな話もあまり聞きません。

もし就職・転職を目的にしているならポートフォリオサイトより、しっかり力をつけて人に見せられる制作物を作ることに注力した方がよいでしょう。