「制作を加速させるため、早期導入しておくべきだったツールやテクニックの後悔談」

この記事は主に、Web制作を始めたばかりの方や、1年目のデザイナーやコーダー向けに書かれています。2〜3年目の方にとっては、ここで紹介する内容が当たり前のことかもしれませんが、それでもWeb制作をこれから始める方には有益な情報が含まれています。最後までお読みいただき、ぜひ役立ててください。

Web制作において、制作スピードを向上させることは、制作者の価値を高める要素となります。

Webデザイナーやコーダーの評価基準として、制作のスピードが重要視されます。もちろん、正確なコーディングや正確性も評価される要素ですが、一般のお客様から見て、裏のソースコードを評価してくれる方はほとんどいません。私がこの業界で10年経験してきた中で、ソースコードをいかに分かりやすく丁寧に書いても、SEO対策を駆使して作成しても、社内では評価されてもお客様からは評価されないのが現実です。お客様はほぼ100％デザインを優先します。それと同じくらい評価されるのが制作スピードです。

そのため、多少の粗さがあっても、制作スピードの向上を優先すべきだと私は考えます。制作スピードが上がれば、こなせる仕事量も増え、制作者としての価値が上がります。

そこで、私が実践してきた制作スピードを上げるための方法やツールをご紹介します。ここでは概要だけを取り上げ、詳細については後日アップします。

私自身、新しいものに対しては保守的で、取り入れるのに躊躇してしまうことがありました。そのため、ここで紹介するツールや方法も、早く取り入れていればよかったと、多くの時間を無駄にした経験があります。

パソコンは高性能で、スペックはCore i7以上、メモリーは16GB以上がお勧め

まず、使用するパソコンについてです。仕事を効率よく進めるためには、これは必須です。制作の仕事に就くなら、高スペックのPCを用意しましょう。私がこの仕事に就く前は営業職だったため、事務作業ができる程度のPCで考えていました。実際、営業からディレクション、デザイナーに転身した際も、お金がもったいなく、低スペックのPCを引き続き利用して制作をしていました。

営業の時点で既にそのPCは動作が重かったのですが、高スペックのPCを利用したことがなかったため、起動に2分や3分かかっても、あまり気にしていませんでした。しかし、とうとうそのPCが故障し、新しいものを購入することになりました。良い仕事をする人は、仕事道具にお金を投じると言われていますが、私もちょうどその時、予想より多くボーナスが入ったこともあり、普段より奮発して10万円超で高スペックのPCを購入しました。

「今まで自分はどれだけ時間を無駄にしていたのだろう」と感じました。とにかくPCがサクサク動くので、制作がスムーズに進みます。パソコンを変えただけで、恐らく業務速度は1.5倍に改善したのではないでしょうか？こんなことだったら、最初から良いパソコンを使えばよかったと感じています。

ちなみに、PCを選ぶコツとして、Web制作にはPhotoshopなどの画像ソフトが必要で、同時にエディターも開いたりするので、メモリーは16GB以上が望ましいです。また、CPUはCore i7以上、HDDはSSDをお勧めします。この条件でノートPCの場合、恐らく10万円は超えますが、このPCへの投資価値は充分にあります。

BootstrapなどのCSSフレームワークを使って、CSSのベストプラクティスを学べ

Web制作の学校を卒業してWebデザイナーやコーダーになった方々は、基本的に最初はCSSの基礎を用いてレイアウトを組むことが多いと思います。私も最初はそうでした。今から8年前、HTML5がちょうど勧告された時期に、私は制作の仕事に就きました。おそらく最初の2年間は、フロートやインラインブロックを用いてレイアウトを一から組み、制作していました。その結果、かなり我流のコーディングになってしまいました。

ある時、コーディングをより簡単かつ迅速にする方法を模索していたところ、知人からBootstrapが良いと勧められました。実は、学校で既にBootstrapに触れていたのですが、何となく面倒くさいと感じ、学習を進めていませんでした。

知人の勧めもあり、いざBootstrapで制作してみることにしました。最初はBootstrapの概念が理解できず、非常に苦労しましたが、3つ目のプロジェクトをBootstrapで制作した後、徐々にBootstrapの良さが分かるようになりました。今では、Bootstrapは手放せません。もちろん、全てのCSSデザインをBootstrapで行うわけではありませんが、主にレイアウトやマージン、パディングの部分で利用しています。原則として、Bootstrapを用いて全体のレイアウトを行います。

Bootstrapを使うことで得られる恩恵の一つは、CSSの主流であるflexboxの概念の理解が進むことです。現在、レスポンシブで幅広いホームページが主流であり、レイアウトにflexboxを利用するのが便利です。flexboxは独特の性質があり、初心者には理解しにくい部分もありますが、BootstrapのcolクラスのCSSがどのように構成されているかを理解することで、Bootstrapを利用しない場合でも、flexboxを効率的にコーディングできるようになりました。

制作スピードを上げるだけでなく、CSSの知識を深めるという側面でも、Bootstrapは非常に役立ちます。初心者のWebデザイナーの方々も、もしBootstrapの利用が許可されているのであれば、積極的に利用することをお勧めします。制作作業が確実にスムーズになります。

エディターはVSCode一択、ほとんど有料級のエディター

最初に私が使ったエディターは、学校で学んだ「さくらエディター」と「Eclipse」でした。その後、Adobeの「Dreamweaver」も利用していました。Dreamweaverは有料で、画像などを配置するのも非常に楽で機能的には問題なかったのですが、少し動作が重く感じることがありました。HTMLが理解できるようになった時、軽快に動く「Sublime Text」に移行しました。ただ、Sublime Textにはフォルダー単位での一括置換ができないという問題がありました。例えば、100ページあるサイトで共通箇所を修正する際、一括置換がないと非常に不便です。

そこで最終的にたどり着いたのが「VSCode」です。制作系やプログラマー系のYouTuberが皆、VSCodeを使っていたので、便利なのかなと思い、最初は軽い気持ちでSublime Textと併用していましたが、今ではほとんどVSCodeしか利用しません。VSCodeは、あらゆる点でSublime Textを上回っています。ほとんど有料級クラスのエディターと言っていいでしょう。

Sassのコンパイルから、よく使うHTMLのテンプレート、CSSやSassではカラーを視覚的に見ることが可能で、選択だけでカラーコードの記述ができるので、簡単にCSSが作成できます。まだ使っていない方がいれば、VSCodeは絶対に使ってください。

Sassはやはり便利、使わないと損

学校を卒業した直後、私は派遣で短期のコーディングバイトに就きました。その時いきなり、そのプロジェクトではSassでコーディングするのが条件でした。CSSもわからないのに、Sassなんて無理だろうと思っていましたが、派遣の担当者は「SassもCSSと書き方は変わらないから、普通のCSSを記述するだけでいい」と言い、私はその仕事を引き受けることにしました。

当時は早くからSassに触れていたものの、Sassは大規模サイトのプロジェクトに便利だが、小規模サイトの場合は必要ないと勘違いしていました。小規模サイトでは、CSSと大差なく、むしろコンパイルする手間が増えると勝手に思っていました。そのため、PHPやJavaScriptの学習はしていましたが、Sassの学習はしていませんでした。

しかし、VSCodeの導入により、Sassのコンパイルが簡単に行えることを知り、スキルアップのためにSassを学び始めました。結論から言うと、これも「なぜ今まで使っていなかったのだろう」と大いに後悔しました。以下が特に便利だと感じた点です。