実績なしのWeb屋が実績を準備する
個別でポートフォリオを準備していなかったという方に向けての記事となります。
今まで散々コーディングをして、色々なページを会社で作ってきたけど、いざプライベートで「実績」（ポートフォリオ）を見せてくれ！！
….と言われると中々業務が忙しい方などは、準備ができないかと思います。
しっかり準備されている方は、さすがです！！
まずは、ポートフォリオに乗せるためのサイト（サンプル）でもいいので作成します。
スポンサーリンク
目次
どんなサイトを作るか決める
最初は1つでもいいと思うので、まずは自分の興味があるものや「こんなのあったらな」というサイトを作ってみましょう！
日本で個人の経営が多いのが「喫茶店」だったと思います。
※日本の経営数等で検索すると数値が見えると思います。
世間に出回っている気になるサイトを参考に
あっという間に作れちゃうよって方は問題ないかと思います。
「ガンガン」オリジナルで作成しましょう！！
「早く１つサイト作りたい！」という方は、世間に出回っている素敵なサイトがたくさんあると思います。
その中から自分の作りたいものと類似するものを探して、このビジュアルはこうやってコーディングすればいいだと勉強も兼ねて作成していくのもいいかと思います。
いきなり「０」スタートで、始めるのはとても時間がかかることだと思います。
僕が参考にしたサイトは、下記でした。
参考photoshopvip
もし、自分にマッチするものがあれば、ご参考までに。
CSSフレームワーク活用してみよう
作りたいもの・サンプルになるhtmlが見つかったら、さっそく作っていきましょう！
この時にCSSをフレームワークを使ってつくると「0」からボタンやレイアウト等を考えていくよりも随分楽になると思います。
一番有名なのが「Bootstrap」です。
Webサイト作った方は、ほぼ触るCSSではないでしょうか？
ぐらいめちゃくちゃ有名です。
その他「Foundation」・「Pure」・「Matrerialize」等、自分のサイトデザインでマッチするものを使ってみると作成も楽で、レスポンシブなサイトも作りやすいとおもいます。
全体の構造をつかむ
「作りたいもの」・「マッチするcss」が決まったら、今度は具体的にページで使うべき情報をコンポーネント（部品）単位で、大枠を作ってみましょう！！
個人的にはこの時は、あまり細かいところはやらないで、大カテゴリ（必要なブロック）単位で、後で切り分けれるように全体を把握しました。
最初からレイアウトがっちりで、詳細部までつめちゃうと後からここはこうしたほうがよかった等で手戻りが多いかと思います。
サイト作っていこう
やっと大枠もできたので、さっそくサイトを作成していきます。
ナビゲーションから各コンテンツ・フッターを作成。
Cssによってサンプルになるhtml構造（アウトライン）があると思いますので、その辺りを参考にしつつ自分のオリジナルサイトにしてみるといいと思います。
ブラシュアップ
ページ全体ができあがったところで、ざっと作ったものを綺麗に整えたり、アニメーションを入れたり、時間を決めて自分の好きなようにカスタマイズしてみましょう！！
好きなことができるので、一番楽しいフェーズかもしれません。
この時に学習も兼ねて、今までやってなかった技術やデザインを取り入れるもの良いと思います。
僕の場合は、サイトにアニメーションを入れたかったので、下記を参考に取り入れました。
「wow.js」・「animate.css」で、簡単にアニメーションが実装できました。
参考[JS]デモがめちゃ楽しい！jQuery不要でスクロールにあわせて要素をアニメーションで表示するスクリプト -WOW.js
行き詰まってきたら、国内の先輩方のサイトを見てみましょう！
色々勉強になるとおもいます。
参考Responsive Web Design JP
サーバアップしてみよう
ひとしきりサイトが作れたら、レンタルサーバー等を借りて、本番環境に公開してみましょう！！
ローカル環境だけでいいやっていう方は、ここまでで大丈夫です。
実際に他の人に見せる必要がある人は、アップは必須かと思います。
オススメサーバー
・ロリポップサーバー（お値打ち）
参考過去記事
・サクラレンタルサーバー（安定）
そこまでの負荷が来るわけでもないと思いますので、低スペックのサイトで最初はいいかと思います。
動作チェック！！
やっとここまで到達…最後の本番動作チェックです。
もし、レスポンシブでサイトを作成した場合、複数のサイズでチェックが必要になると思います。
※レイアウト崩れていないか等
参考・Responsive Web Design Testing Tool
参考・Demonstrating Responsive Design
特に問題なければ、やっとサイト作成完了です。！！
「お疲れ様でした」
やっと実績となるものができましたね！！
まとめ
今回は、駆け出しで実績を見せれない人や仕事やってたけど、いざプレイベートで見せれるものがないやという人にざっくり1サイトを作りあげるまでの概要を説明しました。
もし、さらにお時間がある方は、WordPressのテーマ活用してみたり、自分の作ったサイトをまとめてみれるようなポートフォリオサイトを作ってしまえば、実績を見せるときにとても楽チンで効果的だと思います。