WEB制作

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

TOTO

ポートフォリオサイトが完成したので、
ロードマップをまとめてみました!

GIGLIO

勉強になったな~

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

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

この記事は以下のような方にオススメです。

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

既存のサイトを見よう!

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

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

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

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

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

アイデアを紙に書こう!

紙に書く

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

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

ファイルを用意しよう!

ファイル

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

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

を用意します。

コーディングしよう!

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

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

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

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化しよう!

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

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

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

おわり

プロフィール

今回は以上です。

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

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

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