FREELANCE

ポートフォリオサイトの作り方【初心者向け完全ロードマップ!】

ポートフォリオサイトの作り方【初心者向け完全ロードマップ!】
TOTO
TOTO
ポートフォリオサイトが完成したので、ロードマップをまとめてみました!
GIGLIO
GIGLIO
勉強になったな~。

クラウドソーシングや制作会社への営業用にポートフォリオサイトを作りました。

知らないことの連続だったのでコーディング以外の全ロードマップをまとめました。

この記事はこんな人にオススメ

  • ポートフォリオサイトを作りたい。
  • けど何をどうしていいか分からない。

既存のサイトを見よう!

アイデアを奮い起こすためにWEBサイトを見てみましょう。

  • どんなサイトが作りたいか
  • どんなことが書いてあるか
  • ユーザビリティ(UI)はどうか
  • レスポンシブ時にはどうなるか

私は以下を参考にしました。

デザインギャラリーサイトを見よう!

参考にさせて頂いたポートフォリオサイト

アイデアを紙に書こう!

アイデアを紙に書こう!

私は何のアイデアもないまま作り始めちゃったので書きませんでしたが、紙にレイアウトを書いてる方は結構居ましたね。

頭の中を整理する意味でも良いと思います。

ファイルを用意しよう!

フォルダ構成

画像のように1つのフォルダ(ここではportfolio)の中に

  • index.htmlファイル
  • cssフォルダ(cssファイルを入れる)
  • imgフォルダ(画像を入れる)
  • phpフォルダ(お問い合わせフォームを実装しないなら不要)

を用意します。

コーディングしよう!

肝心のコーディングです。

レスポンシブも意識してindex.htmlとstyle.cssにコードを書いていきましょう。

WEB制作の初学者が『つまづきがちなポイント』や『知らない知識』は以下の記事にまとめました。

あわせて読みたい
【#今さら聞けないWEB制作】超初心者向けまとめ50選
【#今さら聞けないWEB制作】超初心者向けまとめ50選フリーランスWEBエンジニアのへぼちゃんずです。 バンコクのノマドエンジニア育成講座『iSARA 7期』にてオンラインチューターを...

サイトに動きをつけたいなら以下の記事を参考にしてみてください。

【コピペで実装】ポートフォリオサイトに使えるアニメーション15選

Google Fontsを設定しよう!

誰のデバイスで見てもフォントを統一して表示させるためにGoogle Fontsを利用しましょう。

フォント大好き人間としてはフォントはホントに重要です。(ん?)

設定し過ぎると重くなるので注意しましょう。完全無料です。

metaタグを設定しよう!

metaタグは<head>と</head>の間に書くのでサイト上には反映されませんが、SEO的にも大変重要なので必ず記述しましょう。

レンタルサーバーを契約しよう!(ドメイン取得も同時に)

レンタルサーバーはXSERVER一択!

以下のリンクに詳しく書いてありますが、最初に A8.net に登録し、

その後、A8.netのセルフバックを利用して XSERVER に登録します。

すると(登録時にだけかかる)3240円中2858円が返ってきます。

(不定期で行われている)ドメイン1個無料キャンペーン中(.comの場合、年額1,274円が永久無料に!)の1日(月初)に登録することができれば1番お得です。

(サーバー料金は別途かかります)

以下はブログの始め方ですがXSERVERの登録の流れが動画で分かりやすく解説されています。

サーバーにアップロードしよう!

いよいよサーバーへのアップロードです。

FileZillaというソフトをインストールして使います。

最初に設定し、用意したファイルを「public_html」フォルダにドラッグ&ドロップすれば完了です。

ブラウザチェックをしよう!

どうしても自分のスマホやPCで見る世界がすべてになってしまいますが、当然ひとによって使っているデバイスもブラウザも異なります。

信じられないくらい違います!笑

恐る恐る確認し、対応しましょう。

抑えておきたい5大ブラウザ

便利ツールを駆使しよう!

Can I use…でCSSがそのブラウザに対応しているかを確認して、AutoprefixerにCSSを貼り付けるとベンダープレフィックスを自動で追加/削除してくれるというわけです。

Macユーザーの方はXcodeで各iPhoneの動作検証もできちゃいます。

Androidのエミュレータも便利ですね。

https(SSL)化しよう!

私、恥ずかしながら全く知りませんでした…。

とにかくhttpよりhttpsの方が安全だからやっとけ!

ということみたいですね、やっときましょう。

Googleアナリティクスを設定しよう!

生成されたトラッキングコードを<head>タグの直下に貼り付けることによってPV数などを解析できるようになります。

おわり

今回は以上です。

ポートフォリオサイト制作はコーディング以外にも実務同様に全体の流れを勉強できます。

みなさんもぜひオシャレなポートフォリオサイトを作ってみてください!

最後まで読んでいただき、ありがとうございました。