WEB制作

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

2018年12月31日

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

スポンサーリンク

TOTO
TOTO
ポートフォリオサイトが完成したので、ロードマップをまとめてみました!
GIGLIO
GIGLIO
勉強になったな~。

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

それ以上に、実務同様に全体の流れを勉強できたことが収穫でした。

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

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

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

既存のサイトを見よう!

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

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

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

僕は上記サイトを参考にしました。

Pinterestには「WEBデザイン」と打ってみると良いです。

参考にしたポートフォリオサイト

ポートフォリオ制作当時、参考にしたサイトは軒並み無くなっていますね。。。

アイデアを紙に書こう!

アイデアを紙に書こう!

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

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

ファイルを用意しよう!

フォルダ構成

画像のように1つのフォルダ(ここではportfolio)の中に下記を用意します。

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

コーディングしよう!

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

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

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

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

Google Fontsを設定しよう!

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

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

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

metaタグを設定しよう!

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

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

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

ドメイン永久無料キャンペーンが行われている時の月初に登録するのが一番お得です。

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

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

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

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

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

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

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

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

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

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

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

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

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

https(SSL)化しよう!

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

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

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

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

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

おわり

今回は以上です。

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

これを読んでいるあなたも、ぜひオシャレなポートフォリオサイトを作ってみてください!

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

スポンサーリンク

-WEB制作
-,

© 2021 ブログの神様|THE GOD OF BLOG Powered by AFFINGER5