ぼくも未経験からWeb制作フリーランスとして独立したときは、知識がなかったので少しずつ案件をとおして必要な設備やツールを揃えていきました。
ただその度に情報を集める時間もけっこうかかっていたので、一括で分かるような情報がまとめてあるととても助かったと思います。
今回はその時のぼくと同じように悩んでいる方へ向けて、Web制作フリーランスが実際に作業で使っているツールを紹介します。
作業環境編
①マルチディスプレイ
コードエディタを開きながらローカル環境の画面を見ることも多いWeb製作者にとって、２画面で作業できるマルチディスプレイ環境は個人的に必須だと思います。
コードエディタは一画面の中で左右に切り分けることも多いので、画面サイズは大きい方が見やすいです。
以前はMac＋iPadの小さい画面で作業していましたが、大きいディスプレイに変更したことで格段に作業効率が上がりました。
普段はこのように、MacbookProをくらむシェルモードで使用しています。
②プラウザアプリ
公開時にそれぞれのプラウザで表示に差異がないか確認しなければいけないので、それぞれのアプリはインストールしておきましょう
伴って要件定義の段階で、対応するプラウザはちゃんと決めておくことが必要。
特にIEに対応するかどうかで工数は変わってきますので、しっかりクライアントと確認しましょう
③スマートフォン実機
今やほぼ全ての案件で必須となったレスポンシブ対応ですが、確認時にはやはりスマホの実機が必要です。
Chromeの開発者モードなどでもスマホ表示を確認できますが、実機と比較すると表示に違いがあることも多々あります。
なお実機で確認する際は、キャッシュの影響を受けないようプライベートモードで確認する（Chrome時）ようにしましょう。
④撮影機材
Web制作のためには、コンテンツに関連した写真や動画などの素材が必要になります。
写真や動画素材の完成度は、サイト自体の完成度も大きく影響します。
写真などのビジュアル的な要素から受け取る印象って強いですよね？
プロに外注するのが最も堅実ではあるのですが、カメラマンの外注ってけっこう高いのでクライアントの予算によってはできないことも多々あります。
そんな時にある程度自分でも撮影できる環境を整えておくと、とても制作しやすくなる場面も多いです。
コーディング
①Atom
コーディングするときに必要なのが、コードエディタ。
自分の使いやすいもので良いと思いますが、ぼくは長年無料のAtomを使っています。
Atomのメリットはまず容量が軽いこと。
機能を拡張すればエディタ上でGit連携することも可能です。
②Github
コードを書いていると『あの時の修正時点に戻りたい…』というのはよくある話…
普通なら編集を戻して少しずつ確認していかなければなりませんが、Github上で管理していればコマンドを叩くだけで、指定した状態のコードにいつでも戻すことが可能です。
またローカル環境で開発している人にありがちなのが、バックアップをとっていないこと。
自分のPC内にしかデータがないため、PCが壊れてしまったりすると０からになってしまうリスクが。
Githubで管理しておけばコードはネットに保存されているので、どのPCからでもコード情報を引き継ぐことができます。
またGitを使うことで複数人での開発も可能になるため、ページ数や機能追加が多い大型案件の場合はぜひ導入したい
③Tiny PNG
SEOにも有利なサイトを高速化させるときには画像の縮小が鉄則ですが、この は画像のサイズを小さくしてくれる
①Photoshopなどで必要なサイズにリサイズ
②圧縮
この工程を踏むだけでサイトスピードがかなり上がります
④スーパーリロード
CSSを更新したときはキャッシュを削除してリロードしなければ、最新のコードが反映されません。
以前はキャッシュを削除してからリロードボタンを押していましたが、この拡張機能のおかげで１クリックで済むようになりました。
ちょっとしたことですが積み重なると大きな作業時間の短縮になりますので、まだ使っていない方はぜひマストで導入しましょう。
WordPress
①WordPress
WordPressという言葉は聞いたことがあるのではないでしょうか？
WordPressとはCMSの一種のことで、導入することで誰でもWebサイト上の情報を更新したり、プラグインを利用すれば機能追加することも可能です。
世界中の約40％のWebサイトはWordPressで作られていると言われています。
②ローカル環境
ローカル環境とは、個人のPC内に構築された開発環境のことです。
案件でいきなりクライアントの本番環境を編集してしまうと、エラーが起こったり最悪サイト自体が見られなくなったりなどトラブルになってしまう可能性があります。
そのためまずはローカル環境で作業を行なってから、本番環境へ移行するのが鉄則です。
ローカル環境を構築する方法については、下記記事をご参照ください。
サーバー環境
①レンタルサーバー
テスト公開用にひとつレンタルサーバーを持っておくことがおすすめです。
サーバー会社によってはドメインも契約できるところもあります。
Web制作用だけでなく、このようにブログを始めてみることもできますよ。
②FTPソフト
サーバー上のファイルをアップロードしたりダウンロードしたい時には『FTPソフト』を使います。
いろいろとソフトがありますが、ぼくが使っているのは『Filezilla』です。
デザイン
①XD
XDはAdobeのデザインに特化したソフトです。
コメント機能などもあるので、修正作業等も簡単に行うことができます。
②Photoshop
Photoshopは画像編集に特化したソフトです。
画像の切り抜きやリサイズ、明度・彩度の調整や不用物の削除など、画像に関わる編集はだいたい可能です。
機能が多すぎるゆえ慣れるまでは少し大変ですが、使えるようになるとWeb制作の幅とスピードが変わります。
Web制作を行う上で画像編集は避けては通れない工程なので、興味がある方はぜひ検討してみてください。
③Illustrator
Illustratorはai形式のデータを扱えるソフトのことです。
拡大してもキレイに表示できるベクター画像は、ロゴ画像などに使われることが多いです。
XDやPhotoshopなどに比べると仕様頻度は高くありませんが、クライアントから共有されるデータの中にはai形式のものがあることがあります。
④CC
上記で紹介したAdobeのサービスをひとつひとつのサービスをそれぞれ個々に契約することも可能ですが、XDとPhotoshopなど２つ以上契約するのであれば、Adobeのソフトを全て利用できる『』を契約した方がお得です。
CCを契約すれば上記ソフトはもちろん、DreamWeaverや動画編集などもできます。
定価で買うと 円ですが、下記サイトから購入すると 半額の値段で購入できるのでオススメです。
その他
①gyazo
『gyazo』とはスクリーンショットの共有に特化したアプリです。
クライアントに画面の一部分を共有したいときスクショを撮るかと思いますが、いちいちスクショをとってファイルを選択して送って…と手間がかかりますよね？
gyazoを使えば、画面を範囲指定すると発行されるURLを送るだけで簡単に共有できます。
Chromeの拡張機能があるので、スクショ共有したい時にかなりの時間短縮になるのでオススメです。
②Chatwork
Chatworkはクライアントとコミュニケーションをとるときに使うツールですね。
過去の情報を探しやすく、送信したメッセージの内容を編集できたりと便利です。
関連した人を招待できるグループチャット機能もあるので、便利です。
ちなみにLINEでクライアントと連絡を取ることはオススメしません。
LINEは仕事だけではなくプライベート利用している人も多いと思うので、誤送信のリスクが高まります。
また内容によっては『一旦確認して後で回答したい』ということもありますが、既読のシステムがあるLINEでは『なぜ読んだのにすぐに返してこないのか』とクライアントが不信感を抱き、結果的に満足度が下がってしまうことにつながります。
③Googleドライブ・スプレッドシート
クライアントとデータを共有するときは、無料で使えるGoogleドライブが便利です。
以前はギガファイル便などを使っていたのですが、共有するたびにURLを送信しなければいけませんでした。
Googleドライブの場合は、最初に共有しておけば後で改めて共有する必要はなく手間が省けます。
またスプレッドシートで情報を共有することで、新旧のファイルが入り混じってしまったり、以前のバージョンに戻す作業が簡単になりました。
④Backlog
一人で作業しているような方は必要ないかもしれませんが、複数人で作業するときはタスク管理が重要です。
Backlogはタスク管理ツールで、様々なプロジェクトをチケットという単位で細分化し担当に割り振ることができます。
タスクを切り分けて言語化していくだけで、工数管理ができるようになるのでおすすめです。