「リモートワークを使ったweb制作の流れ」と「リモートワークのコツ」を知りたい人向け。
「リモートワークって、どんな働き方をするの？」
「リモートワークでwebデザインを受注したら、どんな風に案件を進めるの？」
「リモートワークって難しい...リモートワークのコツが知りたい！」
こんな疑問を解消していきます。
※この記事は、3分くらいで読み終わります。
読み終える頃には、「リモートワークを使ったweb制作の流れ」と「リモートワークのコツ」が理解できるはず(｀･ω･´)ゞ
本記事の内容
１：リモートワークを使った、web制作の流れを紹介。
２：リモートワークのコツは、「咀嚼力」と「前倒し」が重要な話。
こんにちは！takaです。
グラフィックデザイナー・クリエイティブディレクター歴１２年。
毎月３０万〜５０万の収入を、コツコツ稼ぎつつ生きています。
また、今のLINE＠のお友だち登録数は、４０２人で、
毎月のブログ訪問者は１万人くらいです。
今回は、リモートワークを使った「webデザイン制作の流れ」と「リモートワークのコツ」について。
最近はコロナの影響で「リモートワーク」が主流になりつつあります。
この記事を読んでいる方は、「リモートワークってどんな働き方をするの？」「リモートワークをやってみたけど、なんか難しい！」と思っている方が多いと思います。
ちなみに僕は、３年くらい前からリモートワークをしており、受注から納品まで、一度もクライアントと直接合わずに仕事を完了させています。
その中で感じたことは、「リモートワークってなんかムズくない？」ということ。
リモートワーク経験者なら分かると思いますが、リモートワークは直接会って仕事するよりも「遥かに高いビジネススキル」が必要です。
今回は、これからリモートワークでwebデザインを受注した方のために、「リモートワークを使ったweb制作の流れ」と「リモートワークのコツ」を紹介します。
１：リモートワークを使った、web制作の流れを紹介。
リモートワークを使ったweb制作の流れは、下記の８ステップです。
１：クライアントにヒアリングする。
２：ヒアリング項目を元に「サイトマップ」と「ワイヤーフレーム」を作る。
３：ワイヤーフレームを素に、デザインに起こす。
４：webディレクターにデザインを提案する。
５：webディレクターがクライアントに提案する。
６：コーディングをする。
７：動作チェックと修正をする
８：納品
こんなかんじ。
全８ステップです。
ちなみに今回紹介する流れは、下記の設定で解説することとします。
【登場人物】
◼︎クライアント
→webサイトを作りたい人
◼︎webディレクター
→クライアントからwebサイトを受注して、あなたにwebデザインを発注してくれる人。
◼︎プログラマー
→プログラミングする人
◼︎webデザイナー
→あなた
この４人です。
あなたは「webデザイナー」で、webディレクターからwebデザインを発注されたとします。
あなたとプログラマーは、webディレクターの指示のもとに、webサイトの依頼主であるクライアントにデザインを納品しなければなりません。
そして、webディレクターがクライアントの主な窓口となり、あなたに指示を出すイメージです。
この設定を前提に、解説していきます。
リモートワークを使ったweb制作の流れ１：クライアントにヒアリングする。
はじめに、クライアントにヒアリングをします。
このときのヒアリングは、「webディレクター」だけでなく、「プログラマー」と「webデザイナー」の両方も参加するケースがあります。
「ヒアリング手段」と「ヒアリング項目」は、下記の通りです。
【ヒアリング手段】
・zoom（ズーム）を使う
【ヒアリング項目】
・サイトの公開希望日
・webサイトの制作ページ数
・希望予算
・サイトを作る目的
・サイトの希望イメージ
・サイトで１番伝いたいこと
・会社ロゴの有無
・原稿の有無
・写真撮影の可否
・サイト完成後の保守管理の取り決め
こんなかんじ。
４人同時でzoomを使用し、テレビ電話方式でヒアリングを進めていきます。
zoomの使い方について。
zoomとは、複数人で同時使用できるテレビ電話のことです。
使い方をざっくり説明すると、下記のかんじです。
手順１：一人がzoomで、「新規ミーティング」のボタンをポチる。
手順２：新規ミーティングを押したら、「URL」が発行される。
手順３：そのURLを、ミーティングに参加させたい人に送り、URLにアクセスしたら会議開始。
こんなかんじ。かなりかんたんです。
URLを送るときはラインでもOKですし、ミーティングに参加出来なければ「録画」して後からでも見れます。
詳しい始め方は、「Sakai公式Channelさん」のyoutubeで見れるので、ぜひご参考ください。
リモートワークを使ったweb制作の流れ２：ヒアリング項目を元に「サイトマップ」と「ワイヤーフレーム」を作る。
ヒアリングが終わったら、「サイトマップ」と「ワイヤーフレーム」を作ります。
サイトマップとワイヤーフレームの意味は、下記の通り。
・サイトマップ：サイトの「ページ数」と「ページ成」を示した図。
・ワイヤーフレーム：サイトデザインのラフ画。
こんなかんじ。
どういう物か詳しく見たい方は、「サイトマップ」「ワイヤーフレーム」でググるとたくさん出てきます(｀･ω･´)ゞ
【注意】この段階では、プログラマーとwebデザイナーの出番はないかも。
サイトマップとワイヤーフレームは、webディレクターが作る場合が多いです。
webデザイナーが作る場合もありますが、この段階ではプログラマーとwebデザイナーのやることはあまりないかな。と思います。
【重要】４人のやり取りは「ChatWork（チャットワーク）」を使おう。
サイト制作を手掛けるときは、「クライアント」「webディレクター」「webデザイナー」「プログラマー」とで、共通の場でメッセージのやり取りができる必要があります。
その場合は「ChatWork（チャットワーク）」というメッセージアプリを使うとOKです。
ChatWorkを使うメリットは、下記のかんじ。
・無料で使える。
・LINEのグループみたいに、複数人でメッセージのやり取りができる。
・既読の機能がない。
こんなかんじ。
１番のメリットは、LINEのように既読がつかないので、「自分主導」でメッセージのやり取りができる点。
例えば、LINEで既読をつけると「既読つけちゃった。はやく返さないと怒られる...」というストレスがあります。
ChatWorkだと、「すぐに返信できなかったのは打ち合わせ中でメッセージを見れなかった」という言い訳ができます。
結果、自分主導でメッセージのやり取りがしやすいです。
メッセージのやり取りはLINEでもOKですが、仕事で使うなら「ChatWork」がおすすめです。
ChatWorkの詳しい始め方は、「ferretさん」のサイトで見れるので、ぜひご参考ください。
リモートワークを使ったweb制作の流れ３：ワイヤーフレームをもとに、デザインに起こす。
ワイヤーフレームが出来たら、さっそくデザインしていきます。
この段階では、webデザイナーのあなたが主役で動くことになります。
リモートワークを使ったweb制作の流れ４：webディレクターにデザインを提案する。
デザインが完成したら、まずはクライアントに提案せず、webディレクターに確認をとります。
このとき使用するツールは、「Googleドライブ」を使うと便利です。
Googleドライブとは、「資料の共有」に便利なクラウドサービスです。
知ってる方が多いと思いますが、Googleドライブは「資料の共有」に便利なクラウドサービスです。
例えば、「pdf資料を３人で共有したいな」と思ったら、１人が自分のGoogleドライブに資料を保存し、他の２人に「見る権限」を許可すると、３人がいつでも資料を見れるようになる。というかんじです。
Googleドライブの使い方は、「YouTube専門家さん」のYou tubeで見れます。
ご存知でない方は、ぜひご覧ください。
リモートワークを使ったweb制作の流れ５：webディレクターがクライアントに提案する。
webディレクターからデザインのOKが出たら、webディレクターがクライアントに提案します。
ただし、ここで注意が必要です。
【注意】クライアントへの提案は必ず「zoom」を使用し、「提案が通りやすい時間帯」を狙おう。
ここで注意なのが、クライアントへの提案は「zoom」を使用し、「提案が通りやすい時間帯」を狙うことです。
理由もシンプル。
・デザインの完成資料を送っただけでは、クライアントに制作意図が伝わりづらい。
・クライアントの「デザインに目を通す環境」が悪いと、悪評を受けやすい。
・結果、提案が通りにくくなる。
こんなかんじ。
当たり前すぎる話ですが、デザインの完成資料を送っただけでは、制作意図は伝わらないですよね。
結果、提案も通りにくいです。
【科学的根拠】提案が通りやすい時間帯は「昼食後と夕方」です。
プレゼン提案が通りやすい時間帯は、「昼食後と夕方」です。
通りやすい理由も、シンプル。
こんなかんじ。
つまり、思考力が低下しているときに提案しよう。ということです。
詳しくは下記の記事で紹介しています。
プレゼンが苦手な方は、読んでおくと提案採用率がアップします。
３分くらいで読めるので、休憩時間などでご一読ください(｀･ω･´)ゞ
リモートワークを使ったweb制作の流れ７：コーディングをする。
提案にOKがでたら、プログラマーにコーディングを依頼します。
webデザイナーの役割は、ここで一旦落ち着きます。
リモートワークを使ったweb制作の流れ８：動作チェックと修正をする
コーディングが終了したら、クライアントに完成したサイトをチェックしてもらいます。
このとき、webディレクターは「動作チェック表」を作成し、動作などに不備がないかチェックします。
また、webデザイナーは、「きちんとデザイン通りにコーディングできているか」もチェックし、不備があれば修正してもらいます。
【注意】メッセージのやり取りは、「必要最低限」がマナーです。
リモートワークでのメッセージのやり取りは「必要最低限」がマナーです。
例えば、自分でも調べれば分かるレベルのものを、疑問があるごとにメッセージを送ってしまうと、プロジェクトメンバーは「返信」しなければならないので、他人の時間を奪うことになります。
結果、案件の回転スピードが遅くなりますし、プロジェクトメンバーからも少しウザがられます。
リモートワークでのメッセージのやり取りは「必要最低限」と覚えておきましょう。
【余談】ChatWorkで「了解しました」のメッセージを送るなら、「絵文字」で対応するのが吉。
余談ですが、ChatWorkでメンバー全員に、「この資料に目を通してください」みたいなメッセージを送るとします。
このとき、他のメンバーは「了解しました」の返信を送ることになりますが、プロジェクトメンバーが１０人くらいだと、「了解しました」の通知がきまくって、かなりうざくなります。
その場合は、ChatWork機能の、「絵文字」で対応すればOKです。
例えば、メッセージ下の「顔文字」や「手文字」をポチると、「了解しました」のメッセージを送ることなく、メッセージに対してリアクションを伝えることができます。
プロジェクトメンバー全員が気持ちよく作業するためにも、覚えておいて損はない「コツ」かな。と思います(｀･ω･´)ゞ
リモートワークを使ったweb制作の流れ９：納品
動作チェックと修正が完了したら、納品完了です。
このとき、下記をやっておくのがおすすめです。
こんなかんじ。
プロジェクトチーム全員で、クライアントにお礼のあいさつをしたほうが良いです。
理由もシンプル。
こんなかんじ。
web制作を経験した人なら分かると思いますが、納品後に「ちょっとここを修正して！」みたいな指示を受ける場合が多々あります。
これがかなり面倒で、一回くらいなら良いですが、３ヶ月毎とか、忘れた頃に修正指示を求めてくるケースが多々あります。
これを防ぐには、「納品後の修正は別料金」の契約を交わしつつ、「これで納品は完了しましたよ」という明確な意思表示をすることで解決できます。
納品が完了したら、ひとつの区切りとして「zoomでお礼の挨拶をする」のをおすすめします。
以上が、リモートワークを使った、web制作の大まかな流れです。
最後に、ポイントをまとめます。
【リモートワークのポイント】
１：リモートワークをやるには「zoom・ChatWork・Gooleドライブ」の３つが必要。
２：zoomを使うタイミングは、「ヒアリング・プレゼン・納品後の挨拶」の計３回。
３：基本的なやり取りは「ChatWork」で行う。
４：資料の共有は「Googleドライブ」でOK。
５：納品後は、zoomでお礼の挨拶をする。
こんなかんじ。
次の項では、リモートワークで案件を進める「コツ」を紹介します。
２：リモートワークのコツは、「咀嚼力」と「前倒し」が重要な話。
前項では、「リモートワークを使ったweb制作の流れ」を紹介しました。
この項では、web制作の流れの中で、実践すベき「リモートワークのコツ」を解説します。
リモートワークのコツは、下記の２つです。
１：咀嚼力（そしゃくりょく）を身につける。
２：次に発生する作業を、少しだけ前倒ししてやる。
こんなかんじ。
詳しく解説していきます。
リモートワークのコツ１：相手の意図を汲み取る、「咀嚼力（しょしゃくりょく）」を身に着けよう。
リモートワークでは、相手の意図を汲み取ることが重要です。
重要な理由もシンプル。
こんなかんじ。
例えば僕らは、何かを伝えるときに「ジェスチャー・感情の喜怒哀楽・表情・話し方の強弱・間のとり方」など、いろんな「五感」を刺激して、相手に情報を伝えようとします。
そして、この情報をもとに「相手は何を伝えようとしているか」を、感覚的に理解しようとします。
ところがリモートワークだと、自分の意図を「文章だけ」で相手に伝えなければならず、「言いたいことが、なんか上手く伝えれないな…」と悩む場合がでてきます。
このとき、自分の意図を汲み取ってくれる人がいれば、「こいつには最低限の文章で伝わる！こいつとリモートワークするのってラクかも！」みたいに思ってくれます。
つまり、リモートワークで「優秀な人材」になりたければ、相手が100を言わずとも意図を汲み取れる「咀嚼力（しょしゃくりょく）」が重要だということです。
【悲報】咀嚼力はすぐに身につきません。
悲しい事実ですが、咀嚼力はすぐに身につきません。
理由もシンプルで、相手の意図を汲み取るには「その人の心」を理解する必要があるからです。
当たり前すぎる話ですが、人の心を理解するのって、普通に難しいですよね。
なので、普段から自分中心で仕事を進めている人は、急にリモートワークに切り替わるとかなりしんどくなってきます。
【救済】咀嚼力は、毎日のトレーニングで身につきます。僕が過去にやったトレーニングは、「Yahoo知恵袋」です。
咀嚼力は、きちんと毎日トレーニングすれば身につきます。
僕が咀嚼力を身に着けた方法は、Yahoo知恵袋を使って「ベストアンサーの内容を当てる」というトレーニグ方法です。
実践方法は、下記のとおり。
１：Yahoo知恵袋から、自分に答えられる範囲の質問を探す。
↓
２：質問を確認したら、答えを考えてみる。
↓
３：答えがまとまったら、ベストアンサーと比べてみる。
↓
４：ベストアンサーと一緒だったらOK。違ったらもう一回考える。
↓
５：ベストアンサー以外の、「ベストにならなかった回答」も必ず見る。
↓
６：毎日繰り返しやる。
こんなかんじ。
この方法が有効なのは、「限られた文章で相手の意図と気持ちを汲み取らなければならない」点。
終電の電車の中で、毎日30分くらい繰り返しトレーニグしていたら、わりと気持ちが分かるようになりました(｀･ω･´)ゞ
咀嚼力で困っている方は、ぜひお試しを。
リモートワークのコツ２：次に発生する作業を、少しだけ前倒ししてやる。
コツ２つ目は、「次に発生する作業を少しだけ前倒し」してやることです。
前倒しする理由もシンプル。
・リモートワークだと、「作業の区切り」があいまいになりやすい。
・あいまいになると、次の作業に取り掛かるタイミングが遅くなり、案件の回転スピードが遅くなる。
・結果、仕事が終わらない。
こんなかんじ。
リモートワークだと、「この作業はこれで完了！次はこの作業！」みたいな会話がやりにくいので、次の作業への取り掛かりが微妙に遅くなります。
このとき、次に発生する作業を少しだけ前倒ししてやれば、わりとスムーズに次の作業の移行ができます。
具体的には、chatworkのやりとりで送るメッセージの最後に、「補足ですが、今すでに、次の工程の〇〇の作業にも着手中です。」くらいのメッセージを付け足せばOKです。
例えると、リレーでバトンをパスをもらう時に、少し助走しながらバトンを受け取るイメージです。
少しだけ前に進む「原動力」があれば、次の行動に移りやすくなります。
リモートワーク初心者の方は、「作業を少しだけ前倒しする」ことを覚えておくと良いかもです(｀･ω･´)ゞ
以上が、リモートワークをするときのコツです。
はじめのうちは、リモートワーク特有の「コミュニケーション」に戸惑うかもですが、一度慣れれば、わりと快適に仕事ができます。
今後も、リモートワーク化の流れに乗り遅れずに、日々スキルアップしていきましょう！
３：まとめ
というわけで、今回は以上です。
最後に告知ですが、僕のインスタでも今回みたいな情報を随時発信しています。
皆さんの暮らしに、少しでもお役に立てればうれしいです(｀･ω･´)ゞ
※下記みたいなことを紹介しています↓
他にも色んな記事を載せてるので、ぜひご活用ください(｀･ω･´)ゞ
Design is easy!
最新記事 by Owner｜taka (全て見る)
- 【欲しいものは自分で手に入れる】独学スキルを身につけたら、人生が楽しくなった話。【体験談】 - 2020年9月20日
- 【自分の身を守ろう】デザイン契約書に載せるべき留意点を紹介。【winwinにしよう】 - 2020年9月18日
- 独学でデザイナーになるには、まずは現場に飛び込めば解決する話。【体験済み】 - 2020年9月16日