はじめてのポートフォリオサイトの作り方。手順をゼロから解説します

アイキャッチ
SPONSORED LINK

 

こんにちは。カトー(@hisayosky)です。

 

リトルカトー

ポートフォリオサイト作りたいけれど、どうやって作ればいいの?

とりあえず考えながらコード書いちゃおっかなぁ

 

ポートフォリオサイト作り始めるとき、ぼくはそんなふうに考えていました。

作り方よくわからないし、自分のサイトだからいきあたりばったりでいいかと思ったんですね。

 

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

  • 目的のないサイトができてしまうおそれがある
  • 工程がかえって複雑になる

 

のが主な理由です。

 

ポートフォリオサイトを作るなら「考える工程」と「作る工程」は分けた方がいいです。でもどう分けたらいいかわかりませんよね?

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

 

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

ゼロからはじめてサーバーにアップロードするところまで9日間、試行錯誤しながら作っていきました(作業は遅いです)。

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

ではいってみましょう。

 

SPONSORED LINK

ポートフォリオサイト制作の流れ

流れている滝

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

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

 

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

 

手順1「参考サイトをいっぱい見る」

パソコンを使う人

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

ポイントは「いっぱい見ること」です。

正直言いまして、ぼくは見た量が少なかったので、サイトもアイデア不足が否めない出来となってしまいました。

 

どうせ見るならいいサイトをいっぱい見たいですよね。

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

🔶ポートフォリオサイトのまとめ
>>イケてるWebデザインで作られたポートフォリオサイト21選まとめ

🔶とにかくスタイリッシュなサイトのまとめ
>>縦長のWebデザインギャラリー

 

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

クエスチョン

なんとなく作りたいサイトのイメージが固まったら自分にヒアリングをします。

どんなサイトが作りたいのかを言語化していくわけです。

 

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

 

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

とはいえ、ぼくはわりと「めんどくさいな・・・」と思ってしまうほうなので「マインドマップ」を使いました。

マインドマップ

 

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

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

 

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

 

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

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

 

からです。

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

🔶マインドマップに使っているペンのレビュー
仕事に使えるカラーペン。おすすめはステッドラーの「ファインライナー」一択です

 

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

スケッチする人

作りたいサイトが言語化できたら実際のサイトのビジュアルをなんとなく形にしていきます。

はじめに見た参考サイトを少しずつパクっては構成していきます。

この段階でテキストの内容もざっくりと決めておきましょう。

 

ぼくは手書きでやりましたが、PCでやってもいいと思います。

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

サイトのスケッチ サイトのスケッチ サイトのスケッチ

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

 

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

サイトのスケッチ

さらに雑ですね(笑)。でもこれが採用になったのでバカにできません。雑でもいいから書いておくことをおすすめします。

 

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

 

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

デスク上のPC

スケッチでサイトの概要ができたら、ラフデザインとしてサイトをより具体的にしていきます。

 

ツールですが、ぼくはFigmaを使いました。

Figmaはオンラインで使えるデザインツールです。無料なのにIllustratorとかなり同じことができます。

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

 

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

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

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

 

Figmaページ

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

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

 

Figmaの使い方については詳しい本がありません。

しかしオンライン教材のUdemyで動画を見ながら勉強できます。Webデザインに必要なスキルがきちんと身につく内容です。

世界最大級のオンライン学習サイトUdemy

手順5「コーディングする」

コーディングしている人

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

 

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

ぼくは制作物のチェックにはChromeを使っていますが、念のためSafariでも確認していました。

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

 

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

アップロード

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

🔶関連記事
>>サイトをサーバーにアップロードする方法。初心者でも一発でできるように解説するよ

 

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

 

まとめ:ポートフォリオサイトの作り方はいいサイトをいっぱい見ることが基本。PCと手書きをうまく使い分けて「考える工程」と「作る工程」を切り離そう

手順だけおさらいしておきます。

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

 

▼最後まで読んでくれたあなたにおすすめの記事
プログラミングを2ヶ月で仕事にするために必要な5つの条件




当サイトは「STORK」を使用しています

関連記事



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です