2014年に Web担としての業務内容取りまとめ ｜会社員 Advent Calendar 2014 10日目 という記事を書いたのですが、現在そこから働き方が変わってフリーランスのWebデザイナーとして働いています。
元々制作会社で働くWebデザイナーというわけでもなく、フリーランスになりたい！といった志でなったわけでもないので、フリーランスになった時の得意先というのは特にないまま独立したという経緯な為、どうやってフリーランスになれば良いのだろう？と考えてる人には参考にならないかもしれません。
僕は会社員の頃からこのブログを運営していて、おかげさまでこのブログを知っている方からお仕事を頂いたりして生計を立てています。
独立して3年目になるのですが、現状営業という営業をせずにここまで来ているのですが、これから先も営業せずにやっていけるかはわかりませんし、この先ずっとフリーランスでいないといけないというのもあまり考えていません。
ただ、今の働き方は自分に合っていると感じているので、できれば続けていきたいですが、仕事は行きていく上で必要なことで、フリーランスという在り方が成り立たないと感じればおそらく転職とかは普通に選択すると思います。
フリーランスとしてのワークスタイル
さて、フリーランスとしてのワークスタイルですが、僕は現在自分個人の仕事を半分、残り半分を半常駐という形で TAM さんにてお世話になっています。
仕事としては、個人の場合で書いていくと
- ディレクション
- デザイン
- フロントエンドの開発
- バックエンドの開発
- サーバーの選択
という形で、ひとつのサイトを作るのに必要なことをほぼひとりでやっています。案件によっては先方がディレクションをやってくれたり、人手が足りないときは先方の了承を取って、別の方にコーディングを依頼したりしています。
基本的に自分で全部やりたいのですが、納期の都合でひとりでやるには時間が足りないものもあるので、そういった場合にお願いしているという感じです。
ワークフロー
会社員の時と比べてワークフローは劇的に変化しました。
ディレクション
遠方の方からお仕事を頂くことも少なくなく、その場合はだいたいオンラインミーティングを行い、ワイヤーやタスク管理ツールなどを利用してタスクを進めていきます。
ワイヤーを書く場合、最近はほぼ Adobe XD プロトタイプを作る場合は Justinmind や Prott を利用し、先方とのコミュニケーションを円滑に進めやすいものを選択するようにしています。
AdobeXDはとにかくわかりやすいというのが一番の理由で、さくっとワイヤーを作れるのが気に入っていて、ワイヤーで確認してもらって修正が必要になった時もすぐに調整できるのが良い点です。
プロトタイプを使うのは、ページの遷移やUI、オブジェクトの動きを伝える際にやりやすく、オンラインでのミーティングであっても相手に伝えやすいのが助かります。
タスク管理ツールは Backlog をつかってやり取りするようにしています。
覚えてもらうコストは発生するのですが、課題の通知はメールでも届きますし、何より何を今やっているかを理解してもらうのに一番早いので、ずっとこれを使っています。
オンラインミーティングだけで難しいと判断する場合は先方へ訪問するのですが、これはだいたいリアルで店舗運営をしていて、そこと連動して物事を考えないといけない場合に行います。
現場を見ないと、
- どういう人がそのリアルのお店に訪問しているかが分からない。
- どういう物を欲しているかが分からない
- どういう導線で人がお店を利用しているかがわからない
- お店に来る人がネットを使う必要せいがどこにあるかが分からない
- ネットでどういう仕掛けをすればリアルのお店と連動するのかが分からない
ということがあるので、知りたいことが出てくれば訪問させてもらうようにしています。
また、リニューアル案件等であれば現在のシステムや管理画面も見せてもらったりして、現状のボトルネックがどこなのか？なども洗い出し、解決する必要があったり出来ることがあればそれも提案します。
リアルの店舗だと、コーナーによって売れている箇所とそうでない箇所があったりするので、そういったヒアリングもしながら、ネットで活用できる点や、カバーできる点がないかなども話し合って、サイトの設計をしていきます。
近年はSNSの活用も話題に上がってくるので、自分がブログを通して利用しているSNSの活用方法などを伝えながら、どういうことが必要かを話し、それに沿ってサイトとSNSをどう連動するか？といった事も取り決めします。
このあたりはサイトの設計や運用後にまつわるところなので、どうしても話し合いの時間がかかってしまいます。
デザイン
デザインは基本的に Photoshop を使うことが多く、パーツによっては Illustrator を利用することもあります、ロゴを作成する場合100% Illustrator です。
Photoshop を使っている理由としては、デザインツールをあまり多岐に渡りたくなく、UIとグラフィック作成、写真の加工など作業を一貫してひとつのツールで完結したいという考えから Photoshop を利用しています。
しかし Sketch の便利さも理解しているので、この考え方は簡単に破綻はする気がします。新しいツールを触ったりが好きなので、半年後とかは全然違うツールを使ってるかもしれません。
ディレクションの項目で作成したワイヤーフレームはあくまで要素の確認と、おおよその配置として入れているので、デザインする上でもっと良い方法があればワイヤーの状態から変更を加えます。
フロントエンドの開発
デザインの了承が取れれば、フロントの実装を行います。
マークアップはデザインを考える時に大体考慮しながら行なっていますが、細かい部分はコーディングしながら調整しています。コーディングについては最近スタイルガイドを使うことも増えてきました。特に複数人でコーディングを行う場合ですね。あと、システムの人と組む場合にも採用します。ただ、ひとりで行う場合はあまり使いません。
htmlやcssの設計方法、ディレクトリマップといった設計の部分は Backlog の wiki に記述しておき、後で確認できるようにしています。
というのも、自分一人で開発するのですが、仕様書となるコーディングルールはあとで修正を依頼された時の為にも役に立ちますし、違う人が保守をする場合でも品質を担保しやすい為です。仕様書がないと破綻しやすくなるので、それはなるべく避けたいですね。
実際のコーディングですが、静的サイトのコーディングは最近だと gulp を使って pug 形式で構築していきます。WordPress 案件の場合はコーディングと WordPress の実装フェーズが一緒になるので、Emmet を利用してコーディングしていきます。
コーディングデータは Git で管理し、ソースを Github のプライベートリポジトリへ置くようにしています。
こうしておけば、万が一自分の端末が突然壊れてしまってもソースファイルを落としてこれますし、運用のフェーズになっても、ソースファイルの場所を伝えればGitが使えなくてもダウンロードができるので、自分の端末のみにソースファイルがある状態は避けるようにしています。
アクセシビリティやユーザビリティは昔から作りながら考える癖があって、コードを書きながら実装することが多いです。特にフォームのバリデーションエラーを吐き出す時などはインブラウザデザインを行うことが多いです。ただ、それでも基本的な色や利用するシーンのことなどはディレクションのフェーズやデザインのフェーズでも考えています。
ただ、コードを書いている時に気づくことなどもあるので、どこのフェーズで考えるきるという断定した考えはあまりしていません。
というのも、デザインフェーズで全ての取り決めというのも限界があると思っていて、そこは一長一短と感じています。
ですので、クライアントにはフォームの見た目の部分を確認してもらい、細かな部分はテスト環境などでプロトタイプを実装しながら確認を取ってもらったり、出来上がってから確認してもらいつつ、自分は別の箇所のコーディングを進めたりと、比較的柔軟な方法で進めています。
同様にアニメーションの実装などもこの形で進めることが多いです。
大切なのは進め方ではなく、エンドユーザーにとって使いやすいかという点と、クライアントに承認を取れているか？だと思うので、おそらくこの進め方はよっぽどのことが無い限り変えない気がしています。
バックエンドの開発
バックエンドの開発はほとんど WordPress の実装とプラグイン・テーマの開発になっています。要望を伺っているとやりたい事の多くが WordPress で実装するほうが早いからというのが一番の理由です。
必要機能の実装は実現できるプラグインを探して有効化し、テーマ側で必要な記述をするといったやりかたで、プラグイン本体をそのままカスタマイズしたりはしません。それをしてしまうと、プラグインのアップデート時にカスタマイズした部分が消えてしまうからです。
もしどうしてもカスタマイズが必要になる場合は、プラグインを元に別のプラグインを作るなりしないといけないので、クライアントと実装の要件がどこまで再現でき、必要な機能条件を満たしているかどうかの判断のもとに、クライアントに
- プラグインの出来る範囲での実現で良いのか
- 独自のプラグインを作って実装するのか
の確認を取って判断しています。
大事なのは機能の実装と、エンドユーザーの利便性、セキュリティリスクの回避、運用コストの部分で、それに対してコストをどこまでかけられるのかという部分になってきます。
バックエンドに限ったことではありませんが、完全な再現が必ずしも重要かというと、そうでないケースは非常に多く、そこを決めるのはクライント側にあるので、それぞれのメリットやデメリットを伝えるようにして、どうするかの判断をしてもらっています。
サーバーの選択
基本的にサーバーはレンタルサーバーを選択しています。どこを利用するかは最初のヒアリングの際、どういうユーザーが来る想定で、どういったマーケティングを考えているかで考慮するのですが、WordPress の実装が決まっている場合が多いので、WordPress が利用しやすいサーバーを選ぶようにしています。
個人的には
- さくらインターネット
- エックスサーバー
この2社を選択することが多く、この2社だとSSHが使えるので、wp-cli とGit をインストールしてデプロイし易いように設定して利用しています。
テスト環境はさくらVPSを契約していて、案件ごとにサブディレクトリを切って管理しています。こちらにも wp-cli と Git をインストールし、デプロイが簡単に出来るようにしています。
ですので、ftp を使ったデプロイは案件でサーバーが決まっている時だけになるので、あまり使わなくなりました。
ライフスタイル
朝8時ぐらいに起きて、朝ごはんを済ませた後1時間ぐらい勉強してから仕事するようにしています。常駐先へ行くときは9:30ぐらいに家を出ている感じです。
勉強はその時によって違うのですが、前は数学、今は英語をやっていますが、英語難しくて取得までものすごく時間がかかりそうです。
その後仕事を8時間ぐらいするのですが、案件ボリュームなどによってそこはばらつきがあります。
その後の時間は、また勉強したり、ご飯を食べたり、何か作ったり、ゲームしたりと割と普通に過ごしているのですが、曜日に関しては、土日働いたら平日休むみたいな感じで臨機応変に生活にしています。
フリーランスなので、いつでもどこでも仕事が出来るのですが、仕事をしすぎてもその逆も良くないと考えているので、柔軟に生きることを目標にして日々の生活を送っています。
ただ、ブログに関しては突然書きたい！と思って書き続けることがあるので、そうなった時はその分あとで仕事に集中します。
時間の使い方を自由に出来るのがフリーランスの良いところだと感じるのがこの部分ですね。
あと人に会って話すことも重要視しています。特に来年はイベントをやったり、前で喋ったりして自分アウトプットの場も増やしたいと考えているので、スピーカーの募集があれば積極的に参加していきたいと考えています。
とにかくフリーランスになって思うのは、やりたい事を実現しやすい環境だと感じているので、それを少しずつでも形にしていこうというのが自分のマインドで、何よりも色々なものを作って生きていきたいというのが自分のライフスタイルです。
ただ、これはお金とのバランスが大事なので、仕事も両立してうまく生きたいですね。
「フリーランス Advent Calendar 2017」について
アドベントカレンダーとは、クリスマスまであと何日？かを数えるためのカレンダー。「Adventer」ではクリスマスまでに１人１記事ブログをアップしていく仕組みです。
お役に立てたらお願いします🙇
Comments