くまだどうも、くまだです。
Web制作案件の内容はさまざまあります。
1ページ制作で納期が長めのもの、ページ数が多くて短納期なもの。どんな案件・内容が来ても効率的にコーディングできるように準備だけはしておきたい。今回はその施策を簡単に紹介します。
全ては、自分を楽するために。
〇自分的制作効率化
- コーディングテンプレファイルを準備する
- Emmetやスニペット活用
- Nothionやメモ帳にコードを貯めておく
- 作業ディスプレイを増やす
なお、PugやZeplinなど使ってコーディングするのも便利です。
自分だけのコーディングテンプレファイルを準備しておく
私はWeb制作案件でよく使うオリジナルのテンプレートファイルがあって、それを複製して案件ごとに使い回しています。
案件数やコーディング数をこなしていくと、ある程度同じようなパターンのパーツを制作していることに気づくと思います。そういうものはテンプレートとして使い回せます。
「自分だけの」と付けたのは、自分が一番使いやすいからです。自分で作ったファイルなのでどこに何が書いてあるかも分かるし、カスタマイズも容易です。
個人的にテンプレファイルに載せているのは、以下のような感じです。
- よく使うJavaScriptコード（スムーススクロールなど）
- Sassファイルをページごとに分割管理
- ヘッダー、ハンバーガーメニュー、フッター、コンタクトフォーム、会社概要、トップに戻るボタンなどの構成
- ブレイクポイント、メディアクエリの記述
- 色やフォント、コンテンツ幅など
他にもありますが、基本的にWebサイトをつくるもので必ず出てくるといっていいパーツ類はテンプレファイルに載せています。案件で使わないコードは削除すればいいだけなので楽です。
テンプレファイルを1つ作れば、案件ごとに複製して使い回して、あとはその案件に合わせて中身を変更すればいいだけです。この準備をあらかじめしておくと、作業時間を少しだけ時短できます。
ゼロからファイル作るよりは楽です笑
Emmetやスニペットを活用する
EmmetはHTMLやCSSを省略して入力することができるものです。
例えば、VSCodeでHTMLに、
.testと入力すると、以下のように出力されます。
<div class="test"></div>もちろんタグ名でも使えます。
section.test上のコードをHTMLに入力すると、以下のコードが出力されます。
<section class="test"></section>Emmetの書き方は多種多様なので使いこなせると爆速でコーディングできるようになります。ちなみに自分は使いこなせていません笑
スニペット登録もしておくと便利です。スニペット登録をしておくと、キーワードを入力するだけでコードが出力されるという仕組みです。
例えば、自分はメディアクエリの記述が長くて書くのが面倒なのでSassファイルで以下のようにしています。
これだけだとなんのことだか、という人もいると思いますが、’md’は私が設定しているタブレットサイズのブレイクポイントを出力するものです。メディアクエリの記述をmixinで設定して@includeで使う感じ。
「it」というキーワードを入力すると上記のコードが出力され、それをコンパイルすると以下のコードがCSSに出力されます。
@media screen and (min-width: ○○px) {
}この他にもいくつか登録してありますが、長いコードもキーワードを入力するだけでコードが出力されるので時短できます。しかしこれに頼りすぎるとゼロから書けなくなるという弊害があります笑
Nothionやメモ帳などにコードを貯めておく
よく使うコードや過去に勉強したコード、制作したパーツのコードなどをメモしてまとめておくのも便利です。私はNothionを使用しています。
例えばWordPressで使えそうなものや過去に制作に使ったコードなどは、以下みたいにまとめています。
案件や制作をこなしてネタを貯めておくと、未来の自分が助かります。実装に悩んだとき、「そういえば○○の案件で似たようなことやったな…」と思い出してNothionからメモを引っ張り出して使うこともできます。
まあ、それでもどうにもならないときはGoogle先生に頼りますが笑
苦労して実装したやつは絶対にメモしておきます。なぜなら次回も絶対に苦労するから。
作業ディスプレイを増やす
コーディングやツール的な話ではなく、コーディング環境の話です。
自分が作業するディスプレイ（画面）が多いと作業が捗ります。
Web制作学習初期のころはノートパソコン1台で、つまり画面1台でやっていました。2022年2月現在は、ディスプレイ3台でやっています。
- メイン作業画面（2のノートPCとつないでいるモニター）：コーディングする画面
- ノートPC画面（1のメイン作業モニターとつないでいるノートPC）：検証ツールで確認したり開発中のものをリアルタイムで確認する画面
- ノートPC画面2（1,2とはつながっていない）：デザインカンプ確認用
1台だけだとデザインカンプ、コーディング、検証画面と切り替えなければなりませんが、3画面だと目と首を動かすだけでいけます。ノートPC1とノートPC2でデータを共有する場合もクラウドを使えば対応可能です。
ノートPC1台あればどこでも作業できるのはフリーランスのいいところなのかもしれませんが、私は上記の環境に慣れてしまったので1台で作業はもうムリです…
なるべく楽して作業したいからこうなった
結局のところ「自分が楽したくて行き着いた」だけなのでたいしたことはやっていないです。（まあ自然とそうなるよねっていう…）
それでもファイルの準備には時間かかりますが、ゼロから作るよりはだいぶましです。
案件によっては短納期で10ページ以上制作することも考えられるので、少しでも時短するために準備をしておくといいです。
ここまで読んでくださりありがとうございました。