ハタフルの制作環境について

※この記事は、ハタフルアカデミー Advent Calendar 2022 の6日目の記事です

どうも、yshimizuです。
ちょっと前に以下のようなツイートを見かけました。

noteで色んなデザイナーさんや企業のデザイン組織が、ファイルの管理方法とかプロジェクトの進め方とかデザインレビューの仕方とかを発信しているけど、今後転職を考えてる人達はそういうところも見て選考を受けるか決めるようになっていくのかな🤔

— かおリん🍮 | Webデザイナー (@PANbooooo) November 17, 2022

たしかに仕事をする上で、その会社がどんなプロジェクトの進め方をするのか、どんな作法に則って制作しているのか、そもそもどんなものを作っているのか……気になりますよね。
個人的には、使っているソフトや環境なんかも事前に知れたら嬉しいよな～と思いました。

そんなわけで今回は、2022年12月時点でのハタフルの制作環境について、ざっくりとですが紹介しようと思います。

なんでこんな記事を書いているのかって？
絶賛講師兼Webデザイナーを募集中だからですよ！

制作しているものについて

弊社の制作実績を見ていただくとお分かりかと思いますが、近年はWebサイトの制作が多いです。

技術的な話

9割方WordPressで、今のところスクラッチでのクラシックテーマ開発が主です。
このスクラッチでのクラシックテーマ開発については個人的に課題だと思っていて、そろそろハイブリッドテーマでの開発の波に乗りたいなと思っています。具体的な作り方の勉強や開発メリットの整理をしなくちゃですね。

エディタは私が推進・布教した甲斐あってブロックエディタを前提とすることが多くなってきました。
それでもまだまだクラシックエディタを使ったり、カスタムフィールド職人をしていることが多いです。

残りの1割ですが、ごくまれに完全静的HTMLやShopifyでの制作依頼があります。
体感的に年に1プロジェクトあるかないかぐらいですね。

制作ツールについて

OS・デバイス

Windows、または Mac での制作・開発を行っています。
講師陣だと私だけWindowsで、ほかはみんな Mac を使っています。

PCは各々欲しいものが（よほど予算が高くならない限りは）支給されていて、キーボードやマウスも指定可能です。

ディスプレイも必要なぶんだけ支給されています。
私は大きいのが2枚ないとダメな体なので地味に助かっています。

使用ソフト（デザイン）

基本的にはAdobeソフトを使っています。

バナーでもサイトでも、XDでデザインを行うことが多いです。
ときどき写真の補正等でPhotoshopが、ロゴやアイコンを扱うときにはIllustratorが使われています。

また、プロジェクトによっては動画やちょっとしたアニメーションを組み込むことがあるので、そういうときはPremiereやAfter Effectを使います。

使用ソフト（コーディング）

使用するエディタは自由です。
たしか國分先生だけCodaを使っていて、それ以外はみんなVSCodeを使っています。
私も基本的にはVSCodeを使っていますが、完全静的HTMLでサイトを構築するときはテンプレート機能を使いたいがためにDreamweaverを使っています。

その他、WordPressテーマ開発のために、Localを使っています。
私が入社したてのころはXAMPPを使っていましたが、環境構築の手間やメールの送受信テストなどの観点から使わなくなりました。

技術的な話

使用言語としては、HTML・CSS（SCSS）・JS（jQuery）・PHPが主です。
まあ、制作しているものからお分かりかと思いますが……。

その他、SCSSのコンパイルや画像の圧縮等のためにgulpを使っています。
これもちょっと使い古しているので、個人的にはバージョンを上げるとかDart Sassに移行したいとか色々刷新したいところではあります。時間があれば……。

JSについてはそろそろjQueryを卒業したいなと（個人的に）思いつつ、まだ完全にはできていません。
結構jQueryで担っていたアニメーションをGSAPで賄えることが分かってきたので、何とかリプレースしていきたい所存です。

あとは……GitHubというか……Gitの習熟度をなんとかしたいですね……。
一応リポジトリはあって、各々コミット・プッシュはしているのですが、チームでの開発や平行開発といった実務レベルまでには達していません。
最近大きめの案件や複数の修正が同時に走るということが増えてきたので、なんとか整備したいところです。

制作チームについて

講師陣＋αでハタフルの制作チームは成り立っています。

見ての通りデザイナーとフロントエンドエンジニアを兼務している人がほとんどなので、自分がデザインしたサイトは基本的に自分が組む、ということになっています。ただ、規模や実装難度・スケジュールやタスク量によっては私がコーディングを担当します。
また、サイトやドメインの移管などは場数を踏んでいるyshimizuが窓口となって手続きを行うことが多いです。

デザインで迷っていることや、技術的に分からないことは、みんなで相談したり、助け合って解決しています。あと良いと思ったらどんどん褒めあって（ヨイショして）います。
嬉しいことは共有して増やす、悲しいことは分け合って小さくする、そんな感じのチームです。

まとめ

とりあえずパッと思いついたハタフル（ハタフルアカデミー）での制作環境はこんな感じです。

「他にもこういうことが知りたい！」というのがあればyshimizuのTwitterにご連絡ください。書けそうであれば追記していきます。

また、もしこの記事を読んで「ハタフルで働きたい！」という方がいらっしゃったら、ぜひ弊社の採用サイトも確認いただき、応募してもらえると嬉しです！
「人手が足りない」というのももちろんありますが、私としては一緒に楽しく制作に取り組む仲間・地方におけるWeb制作に携わる人を増やしたい同志がもっと増えたら嬉しいな～という思いが強いです。どうぞよろしくお願いします！