Web制作全般もうかれこれ、webデザイナーとして6年位は働いています。私自身ツールなどの効率化は結構好きで、コロコロ変えています。この記事では最近私が落ち着いているで制作環境やアプリをご紹介します。私がどんな仕事をしているかWebデザイナーと一言で行ってもやる領域が異なっていれば、求めてるものも違いますので簡単に私がどんなことをしているかを紹介します。働き方として、会社員&フリーランス(複業)な生活を送っています。会社員ですが、フルリモートで働いていますので結構自由に時間を調整しています。働きかたについては以前記事にまとめましたのでご興味あれば御覧ください。週5日も働きたくない!会社員だけど週3で働くようになってみて会社員の作業内容とあるプロダクトで専属のUIデザイナーをしています。制作の工程としてはプロダクトマネージャーから課題(こういう問題を解決したい)という相談をもらいそれについて自分なりに解決方法を調査して、フロー図なり、ワイヤー、プロトタイピングなど説明に適した内容で共有をしてフィードバックをもらい続けます。フィードバックをもらい進める中で、デザインの方も固めて行くので、GOが出たらコーディングをしていきます。コーディングは主にCSSでUI設計をしてレイアウトに反映させます。JSはUIで担保する(クリックしたらどうなるとか)ものに関しては自分で実装をしてバックエンド(PHPでの条件分岐)などは、エンジニアにお願いするみたいな流れで行っています。基本的にリモートワークで働いているので、打ち合わせはオンラインで行うことが多いです。複業では大きく受託と自主制作の2つがあります。受託は制作業務がメインになり、Webサイトの制作が主です。スマホアプリのデザインもします。基本的には自分一人で制作することが多いですがシステム案件が絡む場合は担当エンジニアの方と一緒に制作します。作業分担は会社員の作業内容で紹介したものとほぼ変わらないです。複業の場合はUIデザインよりもいわゆるWebデザインの領域を求められることが多いので、SEOやセールスライティングなど「成果を出すための設計」を作ることが多いです。マーケティング知識も必要とされるのでディレクターなどはなくとも、自分でクライアントに直接ヒアリングをして進めています。自主制作の方ではアフィリエイトサイトやアプリなどを開発して広告収入を得ています。技術やメンタルモデルはこの自主制作で行っているほうから流用している感じです。自分で使うアプリや制作環境とかもこの辺の作業で試しています。自主制作は誰かの制限などはなく自分で選べる(自己責任ですが)ので色々なことを試せています。前置きが長くなりましたが私の制作環境は以下のようになっています。物理的環境Macスペック的にはこの辺をつかっています。純正は自宅用で使っていて、こっちは旅行用type-C以外にもUSBの口もあるので、コワーキングや旅行時コレ一つでOKです。コンセントまでのケーブルも長いので勉強会のときにコンセントの取り合いでケンカにならないのも良いです。デジタル環境デザイン環境Sketch今のメインデザインツール。一人でデザインする時は強い味方invitionデザインのコミュニケーションの中心。PhotoShop写真加工やトリミング中心。Illustratorアイコンやロゴを作るときに使用。Lightroom大量の写真を綺麗にするときに使用。Fontフォント管理に使用。普段使わないフォントをデザインツールに読み込ませないとかできるので立ち上げとかが軽くなる。あと地味にgoogleFontとかの種別で検索できるのが便利zeroheightコーディング環境PHPSTORMいろんなエディタを歩き渡ったけどコレに落ち着いた。IDEのサポートが神すぎて、コーディング苦手な人ほど恩恵を受けられる。githubgitでコーディングデータを管理。最近プライベートリポジトリ(人に見せないデータの設定)も無料でできるようになったので最高gitlab個人用のgitデータを管理。isuueがgithubより使いやすいので、仕事以外でチームで開発するときもgitlabを使うことが多いnetlify無料で使えるサーバー。github,gitlabと連携してデプロイしてくれるので運用がすごく楽。静的ページであれば今は全部ここで管理してます。先方確認のサーバーにも使えます。scssCSSコーディングがめちゃくちゃ便利になるpughtmlコーディングがめちゃくちゃ便利になるgulp色んなことを自動化してくれる。コレ無しじゃ今はWEb制作できない...fractalスタイルガイド管理に使用。最終的にコメントアウトで生成するスタイルガイドには運用に限界があると思い思想をかえてこのツールに落ち着きました。MixHosttransmitFTPなどのファイル転送アプリ。有料で高いと思われるかもしれませんがコレ一つで全部済むしずっと使えるので結果的にコスパ良いですCMS/フレームワークWordPress世界的にも日本国内でも人気のCMS。ブログを作には最適なCMSconcrete5コーポレートサイトなどのサイトを作るのに便利なCMS。ITスキルがない人でも複雑なレイアウトで作れる。管理権限が柔軟なので、複雑な承認システムなどがあるときは頼りになる。strightkinly無料から始められるLP作成ツール。1ページ必要なときに使いますnuxt.jsVue.jsのフレームワーク。便利過ぎて最近はこれでサイト制作はコレばっかりです。buefyCSSフレームワークのbulmaをベースにnuxt/Vueで使えるようにしたもの。Webサイトを作るときはnuxt+buefyで作ることが多いです。vuetifyマテリアルデザインベースのNuxt用のCSSフレームワーク。システム画面を作る時に重宝してます。ionicAngularベースのフレームワーク。Web,iOS,Androidとハイブリッドアプリを作れるのが魅力。uikitBootstarapに似たUIフレームワーク。class名にui-*とつくので既存のclass名にバッティングしないのが特徴。他のフレームワークに比べデザインがおしゃれ。jQueryを使うbulmaJSのないCSSフレームワーク。buefyのベースになっている。メモ・情報共有・タスク管理HackMDオンラインで管理できるメモ帳。同時編集も共有もできるのでとても重宝してる。QuiverMacのアプリ。軽量で検索もしやすいのでメモに使ってます。マークダウンも書けます。Mwebブログを書く専用に使っています。いうとMwebで書いた記事をWordPressなどに直接アップできるので、管理画面にも入らず記事がかけるからです。マークダウンも書けます。gyazoキャプチャツール。無料でも断然使えますけど有料会員になると動画のキャプチャも制限なく取れるので、チャットなどのテキストコミュニケーションが捗ります。keepスマホでの見た記事などをPCに送るのに使ってます。リマインダーの設定もできるのであとで読む的な使い方も出できます。GoogleDriveメインのデータ管理。基本的にはMacが壊れてもGoogleDriveに集中管理してるのであまり怖くないみたいにしています。人に共有するときも権限がファイル単位・ディレクトリ単位とかなり自由が聞くのでリモートワーカーとしては必須のツールです。Up個人的に最強のタスク管理ツール。多機能すぎて初心者にはあまりオススメできないですが、慣れてきたらめちゃくちゃ便利。無料で使え過ぎて課金するタイミングを失っています。コミュニケーションツールzoomオンラインミーティング用。無料でも使えます(対1人なら時間制限無し、多人数なら45分)(私は課金してます)安定していて、音声が途切れにくいのがポイント。slackチャットツール。グループが10名以上いるときは大体slackを使いますchatworkチャットツール。個人的には1対1のときに使うことが多いです。メールでのやり取りは無駄が多いと考えているので、対個人の場合に使用してます。Trackertypeformアンケートを作るときに便利。制作素材ui8themeforestfreepikorioniconlibraryお仕事・外部パートナー探しレバテックフリーランスmidworksWorkshipクラウドワークスその他MFクラウドMisocakeepassツイートこの記事を書いた人conti大阪で東京の事業会社でフルリモートワークで働いているWebデザイナーです。副業とか好きで週末フリーランスしてます。コードを書くのが得意なのでプログラマーに愛されるデザイナーってよく言われます。勉強会の懇親会で人と話してみると、「独学でWEB勉強中です!」「WEBデザイナーなりたてです」と答えてくれる人がいるのだけど、そういう人ほど自分のブログやWEBサイトを持ってなくて残念だなーと思ったりしてます。自分のサイトを持つとメリットは色々あると思っているので私なりにやっていてブログやっててよかったなと思ってるので、ブログやったほうが良いのかなと思ってる人の背中の後押しになればーいいなぁと思って書きます。Calendar第1弾12/1の記事です。今年はLT芸人と言われる1年でした。[...]conti2016年12月1日Web制作全般2014年秋アニメサイトを同業者(Webデザイナ)目線で見て気になったとこもう10月です。気がついたら一年終わってしまいしそうですね。秋アニメ全然チェックしていなかったので、アニメだけじゃなくまたサイトの制作部分も一緒にチェックしてみました。気になる演出やデザインなど刺激されたサイトをまとめてみました。私はWeb制作会社で勤めたり、個人でwebサイト制作を引き受けているのですが、時々「予算無いけどとにかく凄いサイト作りたい」ってお客さんがいたりします。運用ノウハウ開発cntlog。