もうかれこれ、webデザイナーとして6年位は働いています。
私自身ツールなどの効率化は結構好きで、コロコロ変えています。
この記事では最近私が落ち着いているで制作環境やアプリをご紹介します。
私がどんな仕事をしているか
Webデザイナーと一言で行ってもやる領域が異なっていれば、求めてるものも違いますので簡単に私がどんなことをしているかを紹介します。
働き方として、会社員＆フリーランス（複業）な生活を送っています。
会社員ですが、フルリモートで働いていますので結構自由に時間を調整しています。
働きかたについては以前記事にまとめましたのでご興味あれば御覧ください。
週5日も働きたくない！会社員だけど週3で働くようになってみて
会社員の作業内容
とあるプロダクトで専属のUIデザイナーをしています。
制作の工程としてはプロダクトマネージャーから課題（こういう問題を解決したい）という相談をもらいそれについて自分なりに解決方法を調査して、フロー図なり、ワイヤー、プロトタイピングなど説明に適した内容で共有をしてフィードバックをもらい続けます。
フィードバックをもらい進める中で、デザインの方も固めて行くので、GOが出たらコーディングをしていきます。
コーディングは主にCSSでUI設計をしてレイアウトに反映させます。
JSはUIで担保する（クリックしたらどうなるとか）ものに関しては自分で実装をしてバックエンド（PHPでの条件分岐）などは、エンジニアにお願いするみたいな流れで行っています。
基本的にリモートワークで働いているので、打ち合わせはオンラインで行うことが多いです。
複業での作業内容
複業では大きく受託と自主制作の２つがあります。
受託は制作業務がメインになり、Webサイトの制作が主です。たまにスマホアプリのデザインもします。
基本的には自分一人で制作することが多いですがシステム案件が絡む場合は担当エンジニアの方と一緒に制作します。
作業分担は会社員の作業内容で紹介したものとほぼ変わらないです。
複業の場合はUIデザインよりもいわゆるWebデザインの領域を求められることが多いので、SEOやセールスライティングなど「成果を出すための設計」を作ることが多いです。
ですので、マーケティング知識も必要とされるのでディレクターなどはなくとも、自分でクライアントに直接ヒアリングをして進めています。
自主制作の方ではアフィリエイトサイトやアプリなどを開発して広告収入を得ています。
技術やメンタルモデルはこの自主制作で行っているほうから流用している感じです。
もちろん、自分で使うアプリや制作環境とかもこの辺の作業で試しています。
自主制作は誰かの制限などはなく自分で選べる（自己責任ですが）ので色々なことを試せています。
私の制作環境
前置きが長くなりましたが私の制作環境は以下のようになっています。
物理的環境
- Mac
- スペック的にはこの辺をつかっています。
- モニター
- サブモニター（外出時用）
- 16,980 と安いわりに軽くて持ち運びに便利です
- 充電器
- 純正は自宅用で使っていて、こっちは旅行用
- type-C以外にもUSBの口もあるので、コワーキングや旅行時コレ一つでOKです。コンセントまでのケーブルも長いので勉強会のときにコンセントの取り合いでケンカにならないのも良いです。
デジタル環境
デザイン環境
- Sketch
- 今のメインデザインツール。一人でデザインする時は強い味方
- invition
- デザインのコミュニケーションの中心。コメントをもらったり、画面を集めて共有するのに便利
- コーディングの指示書にも使っています
- Adobe PhotoShop
- 写真加工やトリミング中心。凝ったメインビジュアルを作るときに使用
- Adobe Illustrator
- アイコンやロゴを作るときに使用。Sketchでもベクターは扱えますが、やっぱりイラレのほうが使いやすい
- Adobe Lightroom
- 大量の写真を綺麗にするときに使用。
- Right Font
- フォント管理に使用。普段使わないフォントをデザインツールに読み込ませないとかできるので立ち上げとかが軽くなる。あと地味にgoogleFontとかの種別で検索できるのが便利
- zeroheight
コーディング環境
- PHPSTORM
- いろんなエディタを歩き渡ったけどコレに落ち着いた。IDEのサポートが神すぎて、コーディング苦手な人ほど恩恵を受けられる。
- github
- gitでコーディングデータを管理。最近プライベートリポジトリ（人に見せないデータの設定）も無料でできるようになったので最高
- gitlab
- 個人用のgitデータを管理。isuueがgithubより使いやすいので、仕事以外でチームで開発するときもgitlabを使うことが多い
- netlify
- 無料で使えるサーバー。github,gitlabと連携してデプロイしてくれるので運用がすごく楽。
- 静的ページであれば今は全部ここで管理してます。
- 先方確認のサーバーにも使えます。
- scss
- CSSコーディングがめちゃくちゃ便利になる
- pug
- htmlコーディングがめちゃくちゃ便利になる
- gulp
- 色んなことを自動化してくれる。コレ無しじゃ今はWEb制作できない…
- fractal
- スタイルガイド管理に使用。最終的にコメントアウトで生成するスタイルガイドには運用に限界があると思い思想をかえてこのツールに落ち着きました。
- MixHost
- transmit
- FTPなどのファイル転送アプリ。有料で高いと思われるかもしれませんがコレ一つで全部済むしずっと使えるので結果的にコスパ良いです
CMS/フレームワーク
- WordPress
- 世界的にも日本国内でも人気のCMS。
- ブログを作には最適なCMS
- concrete5
- コーポレートサイトなどのサイトを作るのに便利なCMS。ITスキルがない人でも複雑なレイアウトで作れる。
- 管理権限が柔軟なので、複雑な承認システムなどがあるときは頼りになる。
- strightkinly
- 無料から始められるLP作成ツール。さくっと1ページ必要なときに使います
- nuxt.js
- ionic
- Angularベースのフレームワーク。Web,iOS,Androidとハイブリッドアプリを作れるのが魅力。
- uikit
- Bootstarapに似たUIフレームワーク。class名に
ui-*とつくので既存のclass名にバッティングしないのが特徴。他のフレームワークに比べデザインがおしゃれ。jQueryを使う
- Bootstarapに似たUIフレームワーク。class名に
- bulma
- JSのないCSSフレームワーク。buefyのベースになっている。
メモ・情報共有・タスク管理
- HackMD
- オンラインで管理できるメモ帳。同時編集も共有もできるのでとても重宝してる。
- Quiver
- Macのアプリ。軽量で検索もしやすいのでメモに使ってます。もちろんマークダウンも書けます。
- Mweb
- ブログを書く専用に使っています。なぜかというとMwebで書いた記事をWordPressなどに直接アップできるので、管理画面にも入らず記事がかけるからです。もちろんマークダウンも書けます。
- gyazo
- キャプチャツール。無料でも断然使えますけど有料会員になると動画のキャプチャも制限なく取れるので、チャットなどのテキストコミュニケーションが捗ります。
- Google keep
- スマホでの見た記事などをPCに送るのに使ってます。リマインダーの設定もできるのであとで読む的な使い方も出できます。
- GoogleDrive
- メインのデータ管理。基本的にはMacが壊れてもGoogleDriveに集中管理してるのであまり怖くないみたいにしています。人に共有するときも権限がファイル単位・ディレクトリ単位とかなり自由が聞くのでリモートワーカーとしては必須のツールです。
- click Up
- 個人的に最強のタスク管理ツール。多機能すぎて初心者にはあまりオススメできないですが、慣れてきたらめちゃくちゃ便利。無料で使え過ぎて課金するタイミングを失っています。
コミュニケーションツール
- zoom
- オンラインミーティング用。無料でも使えます（対1人なら時間制限無し、多人数なら45分）（私は課金してます）
- 安定していて、音声が途切れにくいのがポイント。
- slack
- チャットツール。グループが10名以上いるときは大体slackを使います
- chatwork
- チャットツール。個人的には1対1のときに使うことが多いです。メールでのやり取りは無駄が多いと考えているので、対個人の場合に使用してます。
マーケティングツール
- Google TagManager
- Google データポータル
- moutic
- mailchimp
- Rank Tracker
- typeform
- アンケートを作るときに便利。
