MENU

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

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

 

リトルカトのアイコン画像リトルカト

ポートフォリオサイト、どうやって作ろう? とりあえずコード書きながら考えればいいかな?

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

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

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

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

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

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

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

目次

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

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

  1. 参考サイトを集める
  2. 自分にヒアリングする
  3. サイトの概要をスケッチする
  4. ラフデザインを作成する
  5. コーディングする
  6. ファイルをサーバーにアップロードする 

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

手順1:参考サイトを集める

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

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

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

手順2:自分にヒアリングする

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

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

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

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

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

  • サイトを作る目的は?
  • どんな印象のサイトにしたいか?
  • ターゲットはだれか?
  • 依頼をくれる人はどんなことが知りたいか?
  • サイトに入れる内容は?
  • サイトの構成は?
  • どんな結果を期待するか?

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

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

  • 自由度が高くてイラストがさっと入れられる
  • なにより書いててたのしい

からです。

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

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

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

スケッチする人

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

Figmaページ

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

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

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

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

手順5:コーディングする

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

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

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

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

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

アップロード

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

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

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

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

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

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

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

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

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

  • ただ人に見せたい
  • 自分の案件獲得につなげたい
  • 就職活動に使いたい
  • 企業との契約を取る時に使いたい

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

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

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

プログラミングで就職・転職したい人へ

目標が就職・転職に決まっている人はスクールも検討してみるといいです。お金はかかりますが、最短距離で目標が達成できるサポートが得られます。

とはいえ30代以上になると受け入れてくれるスクールはなかなか見つかりません。そんな方はテックキャンプの無料相談で相談してみてください。30代以上でも幅広く受け入れてくれるスクールです。

年収訴求

目次
閉じる