くまだどうも、くまだです。
Web制作の基礎学習を終えたら、いきなり案件をやらずに仮想案件をやるのがおすすめです。仮想案件はポートフォリオに載せてもいいし、自分の実力というか、スピード感の把握だったり、実戦形式でさまざまなことが学べるので良いと思っています。
仮想案件をやる超ざっくりの流れ
例えば以下のような流れを、実案件やる前にやっておくといいかなと。
- 素材選定、WF・デザインカンプ作成
- カンプからHTML,Sass,JS(jQuery)でコーディング
- コーディングした静的ファイルをWP化
- ファイルはGithubに上げる
- ドメインとサーバーを借りてベーシック認証つけて公開
もちろん、デザイナーやコーダーでやることは大きくかわると思います。上記の流れはコーダー向けです。
自分で締め切り・納期を設定してやるのがいいと思います。自分の制作スピード感がわかるので。たぶん、自分で思っているより時間かかると思います。
素材選定、WF・デザインカンプ作成
私はコーダーなので、デザイン部分は正直自分でデザインをすることがほとんどなく、デザインカンプをいただいてそれをもとにコーディングします。
余力があるなら、自分でワイヤーフレーム（WF）・デザインカンプをつくってコーディングしてみてもいいと思います。
デザイナーさんだったら、ここの部分はめちゃくちゃやることあると思いますが、コーダーの私はここの部分で正直書けることがない笑
もし自分でつくってみたいなら、FigmaやAdobeXd、もしくはPhotoShopなどデザインツールを使ってみるといいと思います。
自分はデザインできなくて、コーディングしかできない…という人でも、例えばWebデザイナーさんと組んでやってみるとか、お互いの得意分野を出し合っていけばいいかと思います。
デザインカンプからHTML,Sass,JS(jQuery)でコーディング
基本的に、コーダーはデザイナーさんからデザインカンプをいただいてコーディングをすすめます。デザインカンプの種類は、主要なものだと以下の4つがあります
- Figma
- AdobeXd
- PhotoShop
- illustrator
しかし、デザインカンプをいただく場合（自分でデザインするならともかく）4つどれがくるがわかりません。事前にわかるなら確認したほうがいいですし、できるなら全部のツールからコーディングできるようになるといいと思います。
いざデザインカンプきてコーディングしようと思ったら、デザインカンプがillustratorで、illustratorからコーディングできない、となると支障をきたすので…。
デザインカンプから読み取るのは例えば以下のようなものがあります。画像をもらえる場合もありますが、そうでない場合は自分で書き出します。
- 画像の書き出し（書き出した後、圧縮する）
- 要素間の余白
- 要素の縦幅・横幅の数値
- 文字の大きさ（フォントサイズ）や行間、文字間の余白、文字色、文字の太さ
- 文字の種類（フォントファミリー）
- 背景色や要素で使われている色
- コンテンツ幅
- SP、PC時のレイアウト（レスポンシブ）
上記のこと、細かく見れば他にもいろいろあると思いますが、それらを読み取ってコーディングしていくわけです。
HTML、CSSでコーディングします。Sassが使えるならSassを使いましょう。動きを付けたりするならJS(jQuery)で実装します。
もちろん、Sassがまだできないという場合であっても、CSSでやればだいじょうぶです。Sassができたほうがいろいろ楽になるので、まだ覚えていないという人は学習してみましょう。ちなみにSassのおすすめの勉強法としては、例えば自分が過去に勉強したもの（模写したサイトとか）のCSSの部分を、Sassに書き直してみるのがおすすめです。
そして、Webサイトによくあるパーツなど実装できるといいと思います。
- ハンバーガーメニュー
- プルダウンメニュー
- タブ
- モーダルウィンドウ
- アコーディオンメニュー
- お問い合わせフォーム
- トップに戻るボタン
- スライドショー（slickやswiperつかってもいい）
- サイドバー
などなど。
静的サイト止まりであれば、HTML、Sass、JS(jQuery)でコーディングしたあと、ローカルで表示確認していきます。
そのあとはサーバーにあげるわけですが、そのさいにベーシック認証をかけます。
コーディングした静的ファイルをWP化
もしWordPressサイト構築をするのなら、コーディングした静的なファイルをWP化していきます。
管理画面から記事を投稿したさいに、例えばお知らせセクションに反映されるようループ処理したり、実際にお問い合わせメールを届くようにしたり、コンテンツを動的に変更したり、、など。静的サイトと違ってWPサイトは動的に変更できるので、その部分の処理をします。
案件によって、最初からWP構築とわかっているなら、HTMLのところを最初からPHPで書きながらコーディングできると、ちょっとだけ作業時短できます。もちろん、静的ファイルでコーディングしたものをあとからPHPに書き直してもいいです。
静的サイトコーディングよりもWPサイト構築のほうが単価的には良いので、ここまでできるようになっておくといいかと思います。静的サイトのコーディングよりもやることが多いです。
ちなみにWordPress化ができなくとも、静的サイトのコーディングだけの仕事はあります。
ファイルはGithubに上げる
チームで制作する場合はGithubつかうのが便利です。個人で制作する場合はそこまで恩恵は感じられないですが、その場合でもデータのバックアップ代わりに上げるといいかと思います。
急にパソコンがクラッシュするかもしれませんし…そうなってもGithubにアクセスできればいつでもデータ復活できます。最初にコーディングしながら、同時並行的にこちらもやっておくといいかと思います。
必須ではないですが、できるようになっておくといいかなと思います。やるなら、デザインカンプから画像書き出しなど準備を終えて、コーディングし始めるのといっしょにやるのがおすすめです。
ドメインとサーバーを借りてベーシック認証つけて公開
つくったサイトはドメインとレンタルサーバーを借りて、そこにベーシック認証つけてアップします。アップしたあとは実機表示確認します。ベーシック認証は、ログイン情報を知っている人だけ見れるようにする、パスワードをかけるようなものです。
サーバーにあげてやることは、WindowsPCとMacPCで、
- Chrome
- Firefox
- Safari
- Microsoft Edge
の各種ブラウザでレスポンシブ確認したり動作チェックします。もちろん、携帯でもですね。その他、いろいろ確認します。
もちろん、サーバーに上げる前にローカルでもいろいろ確認はするのですが、実際サーバーに上げてみるとまた違うことがあるので、この作業は必須です。
ちなみにサーバーはどこでもいいんです。ちなみに自分はXserver使ってます（大手だし）
もしくはこちら、ロリポップ。
ここまでで自分で設定した納期前に終わればとりあえずだいじょうぶだと思います。あと、できれば作ったサイトは自分以外のだれかに見せて確認してもらうほうがいいかと思います。
まとめ
実案件での実績がない場合、仮想案件を設定して自分でコーディングしてそれを実績として出すほかない気がする…。
初案件やる前に失敗しないための施策であり、初案件をいただくための施策（実績作り）にもなるので、案件獲得のための、最初のとっかかりとしてはこれが良い気がします。
もちろん、必須ではないので、自信があるならいきなり実案件やるのはいいと思います。（自信あるなら笑）
ちなみに私はめちゃくちゃ不安で自信なかったのでチーム組んで仮想案件やってから実案件に挑みました。
ここまで読んでくださりありがとうございました。