仕事環境とスキルについて

01仕事道具について

ノマドワーカーなので持ち運び重視のラップトップ派

2019年9月現在はSurface Pro6を愛用中です。本当はデスクトップパソコンのほうが画面も大きくて楽なのですが、ノマド生活実現を視野に入れるとやっぱりメイン機もラップトップにするべきかなと思ってこのチョイス。最初の記事でも触れていますが、私は昔からWindows派。今のところ不便は感じていません。

効率重視のデュアルモニター

とはいえ、やっぱり効率アップを図るなら画面は大きくて数も多いほうが便利です。ということで、ラップトップでもデュアルモニターを採用するべく、ポータブルディスプレイを購入、利用しています。現在はAsusのMB168Bを採用。薄くて軽いので、Surfaceと合わせてもぎりぎり持ち運び許容範囲内に収まりました。ただし画面写りはいまいちなので、デザインの確認はあくまで本体のディスプレイで。私の場合は、Photoshopやイラストレーターのパネルなどを片方のディスプレイに置いたり、コーディング時にテキストエディタとブラウザの表示を分けたりできれば十分なのです。

大きくてきれいな画面でデザイン確認をしたいときは、コワーキングスペースに置いてあるモニタを利用させてもらうのもアリですね！

02デザイン業務について

WEBサイトの画面デザインや写真のレタッチ、加工にはPhotoshop、イラストやロゴ制作にはIllustrator、たまに簡単なワイヤー作成にXDを使用しています。場合によっては画面デザインにIllustratorを採用するのもアリかもしれませんね。また、セミナー等のセッション資料をPowerPointではなくIllustratorを使って作ることもあります。

基本的にデザインに関する業務はAdobe製品のみで賄っています。用があればこれ以外に動画編集ソフトのAfter EffectsやPremiereを使うことも…。

03開発環境について

タスクランナーとしてGulpを利用

近年複雑化するWEBサイト構築。私がWEB制作を始めた当初（2009年）は、HTMLとCSSの知識があればある程度のサイト制作は完結できたもので、それプラスちょっとしたjavascriptやjQueryの知識があれば十分でした。しかし今はコンテンツそのものがかなりリッチになってきた時代。CSS3の登場で一気に表現の幅が広がったり、マルチデバイス対応がもはや当たり前になったり、アニメーションの知識も必要になったりと、一つのサイトを構築するのにかかる時間と手間は当時とは比べ物になりません。

CSS一つ取ったって、従来通りちまちまとコードを書いていたのでは効率が悪く、SASSなどのメタ言語を導入しないと、本当に無駄な時間がかかってしまいますよね。

また、コンテンツがリッチになった分、画面の読み込み速度を向上させる施策も考えなければいけません。たとえば、画像を軽量化したり、CSSやJSを圧縮したり…。

ということで、私は数年前から開発業務にかかわるわずらわしさを解消するため、タスクランナーのGulpを導入しています。

Gulpを使って実現していること

現在のところ、上記の作業をGulpで自動化しています。Sassのコンパイルはバッチファイルなどを使えば簡単ですが、それ以外にも画像の軽量化やJavascriptの圧縮などを考えると、とても一個一個手作業でやっていたのではキリがありません。Gulpの登場で世の中本当に便利になったなーと思います。また、以前は共通パーツ（ヘッダーやフッターなど）を一括管理したいがためにphpインクルードを利用していたのですが、サーバ要件によっては採用できなかったりと、一筋縄ではいきませんでした。Gulpを使うことでスタティックなページでも共通パーツを切り分けることができるようになり、もちろん変数などを使ってタイトルやメタタグを出し分けることも可能で、重宝しています。

Dockerで簡単に仮想環境を用意

フリーランスでWEB開発をするにあたり、いちいちサーバにテスト環境を立ち上げていたのでは業務が回りません。（サーバ代もかかるし…。）やっぱり全部ローカルで済ませられたら一番良いですよね。しかしながら私の守備範囲はデザインからフロントエンドまでで、サーバ周りの知識はまだまだです。そこで私が採用したのはコンテナ型の仮想環境を作成できるDocker。私の場合、Kitematicを利用してほかの人が作ったコンテナを簡単にインストールして使っています。

GithubとSourcetreeで
バージョン管理

バージョン管理システムは、Githubを利用しています。私の場合、Sourcetreeで簡単に管理していますが、最近は不便さも感じており（フリーズとか…）、近いうちにコマンドでの管理に移行したいところ。なんにせよ、バージョン管理システムを導入したことで、以前よりチームでのプロジェクト開発に関わりやすくなったのは嬉しいことです。

また、このブログはサーバ不要の高速WebCMSサービス、MovableType.netを利用しているのですが、喜ばしいことにテーマテンプレートをGithub連携で管理できるのです。

開発バージョンを取りこぼしなく管理できて、その上アップロードの手間いらずとは、世の中便利になったなぁと思います。

04開発スキルについて

HTML5

HTMLとはWEBページの内容を書くための言語で、これが書けないとWEBサイトは作れません。最近はもっぱらHTML5で構築しています。HTMLは文書構造を表すものなので、SEO的にも、アクセスビリティ的にも、使用するタグにはなるべく配慮して構築するようにしています。ソースを見たときに意味が通らないコードを書かないこと、がモットーですが、永遠に試行錯誤は尽きません。

CSS3、Sass

文書構造を表すHTMLに対して、装飾を施すのがCSSで、これもWEB制作の必須言語です。リッチコンテンツを実現するためにもちろんCSS3を採用。レスポンシブやアニメーションなど複雑化する表現に対応するべく、Sassを使って開発しています。サイト表示高速化などの観点から、なるべく画像やjavascriptに頼らない、CSSを使った表現を心がけています。

javascript、jQuery

WEBページに動的な効果を取り入れたりするために利用しています。プラグインを利用して、オプションの記述をカスタマイズすることも多いですが、jQueryをベースにいちから自分で書くことも多いです。例えばハンバーガーメニューの実装やイメージギャラリーなど、デザイン上自分で書いてしまったほうが早い時などには自分でプログラムを書いてしまいます。

php

ヘッダーやフッターなど、phpインクルードを利用するサイトを構築したり、xmlやjson等から記事を動的に出力するときなどにphpを利用します。基本的な変数や配列を取り扱うことができ、WordPressのテーマ構築に必要なスキルを持っています。

MovableType

CMSのオーサリングも手掛けています。特にSixApart社のMovableTypeは、WEB制作を始めた当初から利用実績があり、得意な取り扱いサービスです。このサイトも派生サービスであるMovableType.netを利用して構築しています。

WordPress

最も有名なCMSである、WordPressのテーマ作成も取り扱っています。2020年にはテンプレート販売も予定しています。