【初心者向け】リモートワークを使った、web制作の流れを紹介【コツも紹介】

 

「リモートワークを使ったweb制作の流れ」と「リモートワークのコツ」を知りたい人向け。

 

「リモートワークって、どんな働き方をするの？」

「リモートワークでwebデザインを受注したら、どんな風に案件を進めるの？」

「リモートワークって難しい...リモートワークのコツが知りたい！」

 

こんな疑問を解消していきます。

 

※この記事は、3分くらいで読み終わります。

読み終える頃には、「リモートワークを使ったweb制作の流れ」と「リモートワークのコツ」が理解できるはず(｀･ω･´)ゞ

 

 

こんにちは！takaです。

グラフィックデザイナー・クリエイティブディレクター歴12年。

毎月、コツコツ稼ぎつつ、フリーランスとして生きてます。

 

今のLINE＠のお友だち登録数は、４ヶ月で１７０人くらいになり、

これまでのブログ訪問者数は、１0万人を超えました。

 

今回は、リモートワークを使った「webデザイン制作の流れ」と「リモートワークのコツ」について。

 

最近ではコロナの影響で、「リモートワーク」が主流になりつつあります。

 

この記事を読んでいる方は、「リモートワークってどんな働き方をするの？」「リモートワークをやってみたけど、なんか難しい！」と思っている方が多いと思います。

 

ちなみに僕は、３年くらい前からリモートワークをしており、受注から納品まで、一度もクライアントと直接合わずに仕事をしています。

そんな中で感じたのは、「リモートワークって、なんか難しくない？」ということ。

 

すでにリモートワークを取り入れている方なら分かると思いますが、リモートワークで仕事をこなすには、直接会って仕事するよりも「遥かに高いビジネススキル」が必要です。

 

今回は、これからリモートワークでwebデザインを受注した方向けに、

「リモートワークを使ったweb制作の流れ」と「リモートワークのコツ」を紹介します。

 

１：リモートワークを使った、web制作の流れを紹介。

 

リモートワークを使ったweb制作の流れは、下記の８ステップです。

 

 

こんなかんじ。

全９ステップです。

 

ちなみに今回紹介する流れは、下記の設定で解説することとします。

 

 

この４人です。

あなたは「webデザイナー」で、webディレクターからwebデザインを発注されたとします。

 

あなたとプログラマーは、webディレクターの指示のもとに、webサイトの依頼主であるクライアントにデザインを納品しなければなりません。

 

そして、webディレクターがクライアントの主な窓口となり、あなたに指示を出すイメージです。

 

この設定を前提に、解説していきます。

 

流れ１：クライアントにヒアリングする。

 

はじめに、クライアントにヒアリングをします。

このときのヒアリングは、「webディレクター」だけでなく、「プログラマー」と「webデザイナー」の両方も参加するケースがあります。

 

「ヒアリングする方法」と「ヒアリング項目」は、下記の通りです。

 

 

こんなかんじ。

４人同時でzoomを使用し、テレビ電話方式でヒアリングを進めていきます。

 

✔zoomの使い方について。

 

zoomとは、複数人で同時使用できる、無料のテレビ電話です。

使い方をざっくり説明すると、下記のかんじです。

 

 

こんなかんじ。かなりかんたんです。

URLを送るときはラインでもOKですし、ミーティングに参加出来なければ「録画」して後からでも見れます。

 

詳しい始め方は、「Sakai公式Channelさん」のyoutubeで見れるので、ぜひご参考ください。

 

流れ２：ヒアリング項目を元に「サイトマップ」と「ワイヤーフレーム」を作る。

 

ヒアリングが終わったら、「サイトマップ」と「ワイヤーフレーム」を作ります。

サイトマップとワイヤーフレームとは、下記を意味します。

 

 

こんなかんじ。

どんなものか詳しく見たい方は、「サイトマップ」「ワイヤーフレーム」でググるとたくさん見れます(｀･ω･´)ゞ

 

✔この段階では、プログラマーとwebデザイナーの出番はないかも。

 

サイトマップとワイヤーフレームは、webディレクターが作る場合が多いです。

webデザイナーが作る場合もありますが、この段階ではプログラマーとwebデザイナーのやることはあまりないかな。と思います。

 

✔４人のやり取りは「ChatWork（チャットワーク）」を使おう。

 

サイト制作を手掛けるとき、「クライアント」「webディレクター」「webデザイナー」「プログラマー」との間で、「４人共通の場でメッセージのやり取り」をする必要があります。

 

その場合は「ChatWork（チャットワーク）」というメッセージアプリがおすすめです。

ChatWorkを使うメリットは、下記のかんじ。

 

 

こんなかんじ。

１番のメリットは、LINEのように既読がつかないので、「自分主導」でメッセージのやり取りがしやすい点。

 

例えば、LINEで既読をつけると「既読つけちゃった。はやく返さないと既読スルーで怒られる...」というストレスがあります。

ChatWorkだと、「打ち合わせ中でメッセージを見れなかった」という言い訳ができるので、自分主導でメッセージのやり取りがしやすいです。

 

メッセージのやり取りはLINEでもOKですが、仕事で使うのは「ChatWork」がおすすめかな。と思います。

 

ChatWorkの詳しい始め方は、「ferretさん」のサイトで見れるので、ぜひご参考ください。

 

流れ３：ワイヤーフレームを素に、デザインに起こす。

 

ワイヤーフレームが出来たら、さっそくデザインしていきます。

この段階では、webデザイナーのあなたが主役で動くことになります。

 

流れ４：webディレクターにデザインを提案する。

 

デザインが完成したら、まずはクライアントに提案せず、webディレクターに確認をとります。

このとき使用するツールは、「Googleドライブ」を使うと便利です。

 

✔Googleドライブとは、「資料の共有」に便利なクラウドサービスです。

 

知ってる方が多いと思いますが、Googleドライブは「資料の共有」に便利なクラウドサービスです。

例えば、「pdf資料を３人で共有したいな」と思ったら、１人が自分のGoogleドライブに資料を保存し、他の２人に「見る権限」を許可すると、３人がいつでも資料を見れるようになる。というかんじです。

 

Googleドライブの使い方は、「YouTube専門家さん」のYou tubeで見れます。

ご存知でない方は、ぜひご覧ください。

 

流れ５：webディレクターがクライアントに提案する。

 

webディレクターからデザインのOKが出たら、デザイナーではなくwebディレクターがクライアントに提案します。

ただし、ここで注意が必要です。

 

✔【注意】クライアントへの提案は、必ず「zoom」を使用し、「提案が通りやすい時間帯」を狙おう。

 

ここで注意なのが、クライアントへの提案は「zoom」を使用し、「提案が通りやすい時間帯」を狙うことです。

理由もシンプル。

 

 

こんなかんじ。

当たり前すぎる話ですが、デザインの完成資料を送っただけでは、制作意図は伝わらないですよね。

結果、提案も通りにくいです。

 

✔「提案が通りやすい時間帯」は、「昼食後」と「夕方」です。

 

プレゼン提案が通りやすい時間帯は、「昼食後」と「夕方」です。

通りやすい理由も、シンプル。

 

 

こんなかんじ。

つまり、思考力が低下しているときに提案しよう。ということです。

 

詳しくは下記の記事で紹介しています。

プレゼンが苦手な方は、読んでおくと採用率アップするかもです。

3分くらいで読めるので、休憩時間などでお読みください(｀･ω･´)ゞ

 

【作業スピードがすごく速くなる！】デザインの作業を効率化する方法。

 

流れ７：コーディングをする。

 

提案にOKがでたら、プログラマーにコーディングを依頼します。

webデザイナーの役割は、ここで一旦落ち着きます。

 

流れ８：動作チェックと修正をする

 

コーディングが終了したら、クライアントに完成したサイトをチェックしてもらいます。

このとき、webディレクターは「動作チェック表」を作成し、動作などに不備がないかチェックします。

また、webデザイナーは、「きちんとデザイン通りにコーディングできているか」もチェックし、不備があれば修正してもらいます。

 

✔︎【注意】メッセージのやり取りは、「必要最低限」がマナーです。

 

リモートワークでのメッセージのやり取りは「必要最低限」がマナーです。

例えば、自分でも調べれば分かるレベルのものを、疑問があるごとにメッセージを送ってしまうと、プロジェクトメンバーは「返信」しなければならないので、他人の時間を奪うことになります。

 

結果、案件の回転スピードが遅くなります。

 

リモートワークでのメッセージのやり取りは「必要最低限」と覚えておきましょう。

 

✔︎【余談】ChatWorkで「了解しました」のメッセージを送るなら、「絵文字」で対応するのが吉。

 

余談ですが、ChatWorkでメンバー全員に、「この資料に目を通してください」みたいなメッセージを送るとします。

このとき、他のメンバーは「了解しました」の返信を送ることになりますが、プロジェクトメンバーが１０人くらいだと、「了解しました」の通知がきまくって、かなりうざくなります。

 

その場合は、ChatWorkの機能の、「絵文字」で対応すればOKです。

例えば、メッセージ下の「顔文字」や「手文字」をポチると、「了解しました」のメッセージを送ることなく、メッセージに対してリアクションを伝えることができます。

 

 

プロジェクトメンバー全員が気持ちよく作業するためにも、覚えておいて損はない「コツ」かな。と思います(｀･ω･´)ゞ

 

流れ９：納品

 

動作チェックと修正が完了したら、納品完了です。

このとき、下記をやるのがおすすめです。

 

 

こんなかんじ。

プロジェクトチーム全員で、クライアントにお礼のあいさつをしたほうが良いです。

理由もシンプル。

 

 

こんなかんじ。

web制作を経験した人なら分かると思いますが、納品後に「ちょっとここを修正して！」みたいな指示を受ける場合が多々あります。

これがかなり面倒で、一回くらいなら良いのですが、３ヶ月毎とか、忘れた頃に修正指示を求めてくるケースが多々あります。

 

これを防ぐには、「納品後の修正は別料金」の契約を交わしつつ、「これで納品は完了しましたよ」という明確な意思表示で解決できます。

 

納品が完了したら、ひとつの区切りとして「zoomでお礼の挨拶をする」のをおすすめします。

 

以上が、リモートワークを使った、web制作の大まかな流れです。

 

最後に、ポイントをまとめます。

 

 

こんなかんじ。

次の項では、リモートワークで案件を進める「コツ」を紹介します。

 

２：リモートワークのコツは、「咀嚼力」と「前倒し」が重要な話。

 

前項では、「リモートワークを使ったweb制作の流れ」を紹介しました。

この項では、web制作の流れの中で、実践すベき「リモートワークのコツ」を解説します。

 

リモートワークのコツは、下記の２つです。

 

 

こんなかんじ。

詳しく解説していきます。

 

コツ１：相手の意図を汲み取る、「咀嚼力（しょしゃくりょく）」を身に着けよう。

 

リモートワークでは、相手の意図を汲み取ることが重要です。

重要な理由もシンプル。

 

 

こんなかんじ。

 

例えば僕らは、何かを伝えるときに「ジェスチャー・感情の喜怒哀楽・表情・話し方の強弱・間のとり方」など、いろんな「五感」を刺激して、相手に情報を伝えようとします。

 

そして、この情報をもとに「相手は何を伝えようとしているか」を、感覚的に理解しようとします。

 

ところがリモートワークだと、自分の意図を「文章メイン」で相手に伝えなければならず、「言いたいことが、なんか上手く伝えれないな…」と悩む場合が多いです。

 

このとき、自分の意図を汲み取ってくれる人がいれば、「最低限の文章で伝わる！こいつとリモートワークするのってラク！」みたいに思ってくれます。

 

つまり、リモートワークで「優秀な人材」になりたければ、相手が100を言わずとも意図を汲み取れる「咀嚼力（しょしゃくりょく）」が重要だということです。

 

✔︎【悲報】残念ですが、咀嚼力はすぐに身につきません。

 

悲しい事実ですが、咀嚼力はすぐに身につきません。

理由もシンプルで、相手の意図を汲み取るには「その人の心」を理解する必要があるから。

 

当たり前すぎる話ですが、人の心を理解するのって、普通に難しいですよね。

なので、普段から自分中心で仕事を進めている人は、急にリモートワークに切り替わるとかなりしんどいかな。と思います。

 

✔︎【救済】咀嚼力は、毎日のトレーニングで身につきます。僕が過去にやったトレーニングは、「Yahoo知恵袋」です。

 

咀嚼力は、毎日きちんとトレーニングすれば身につきます。

 

僕が咀嚼力を身に着けた方法は、Yahoo知恵袋の「ベストアンサーを当てる」というトレーニグ方法でした。

 

実践方法は、下記のとおり。

 

 

こんなかんじ。

この方法が特に有効なのは、「限られた文章で相手の意図と気持ちを汲み取らなければならない」点。

終電の電車の中で、毎日30分くらい繰り返しトレーニグしていたら、わりと気持ちが分かるようになりました(｀･ω･´)ゞ

 

咀嚼力で困っている方は、ぜひお試しを。

 

コツ２：次に発生する作業を、少しだけ前倒ししてやる。

 

コツ２つ目は、「次に発生する作業を少しだけ前倒し」してやることです。

前倒しする理由もシンプル。

 

 

こんなかんじ。

リモートワークだと、「この作業はこれで完了！次はこの作業！」みたいな会話がやりにくいので、次の作業への取り掛かりが微妙に遅くなります。

 

このとき、次に発生する作業を、少しだけ前倒ししてやれば、わりとスムーズに作業の移り変わりができます。

 

具体的には、chatworkでのやりとり送るメッセージの最後に、「補足ですが、今すでに、次の工程の〇〇の作業にも着手中です。」くらいのメッセージを付け足せばOKです。

 

例えると、リレーでバトンをパスをもらう時に、少し助走しながらバトンを受け取るイメージです。

 

少しだけ前に進む「原動力」があれば、次の行動に移りやすくなります。

リモートワーク初心者の方は、「作業を少しだけ前倒しする」ことを覚えておくと良いかもです(｀･ω･´)ゞ

 

 

以上が、リモートワークをするときのコツです。

 

はじめのうちは、リモートワーク特有の「コミュニケーション」に戸惑うかもですが、一度慣れれば、わりと快適に仕事ができます。

 

今後も、リモートワーク化の流れに乗り遅れずに、日々スキルアップしていきましょう！

 

３：まとめ

 

というわけで、今回は以上です。

 

デザインのコツでは、こんな感じで

「デザインを教えてくれる先輩がいない人」

「デザインを独学で身につけたい人」

「デザイン初心者でスキルアップしたい人」のために、日々お役立ち情報を発信しています。

 

まわりに相談する人がいない方は、LINE＠から無料で個別相談のやりとりができます。

必要なときに、ぜひご自由にご活用ください(｀･ω･´)ゞ

 

 

Design is easy!