独立デザイナーの生活

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

更新日:

カフェと女性

 

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

 

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

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

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

 

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

 

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

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

 

本記事の内容

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

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

 

こんにちは!takaです。

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

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

 

今のLINE@のお友だち登録数は、4ヶ月で170人くらいになり、

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

 

グラフ

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

 

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

 

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

 

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

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

 

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

 

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

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

 

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

子供

 

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

 

1:クライアントにヒアリングする。

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

3:ワイヤーフレームを素に、デザインに起こす。

4:webディレクターにデザインを提案する。

5:webディレクターがクライアントに提案する。

6:コーディングをする。

7:動作チェックと修正をする

8:納品

 

こんなかんじ。

全9ステップです。

 

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

 

【登場人物】

◼︎クライアント
→webサイトを作りたい人

◼︎webディレクター
→クライアントからwebサイトを受注して、あなたにwebデザインを発注してくれる人。

◼︎プログラマー
→プログラミングする人

◼︎webデザイナー
→あなた

 

この4人です。

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

 

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

 

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

 

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

 

流れ1:クライアントにヒアリングする。

 

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

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

 

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

 

【ヒアリングする方法】

・zoom(ズーム)を使う

【ヒアリング項目】

・サイトの公開希望日

・webサイトの制作ページ数

・希望予算

・サイトを作る目的

・サイトの希望イメージ

・サイトで1番伝いたいこと

・会社ロゴの有無

・原稿の有無

・写真撮影の可否

・サイト完成後の保守管理の取り決め

 

こんなかんじ。

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

 

✔zoomの使い方について。

 

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

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

 

手順1:一人がzoomで、「新規ミーティング」のボタンをポチる。

手順2:新規ミーティングを押したら、「URL」が発行される。

手順3:そのURLを、ミーティングに参加させたい人に送り、URLにアクセスしたら会議開始。

 

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

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

 

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

 

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

 

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

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

 

・サイトマップ:サイトの「ページ数」と「ページ成」を示した図。

・ワイヤーフレーム:サイトデザインのラフ画。

 

こんなかんじ。

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

 

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

 

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

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

 

✔4人のやり取りは「ChatWork(チャットワーク)」を使おう。

 

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

 

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

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

 

・無料で使える。

・LINEのグループみたいに、複数人でメッセージのやり取りができる。

・既読の機能がない。

 

こんなかんじ。

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

 

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

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

 

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

 

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

 

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

 

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

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

 

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

 

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

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

 

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

 

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

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

 

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

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

 

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

 

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

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

 

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

 

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

理由もシンプル。

 

・デザインの完成資料を送っただけでは、クライアントに制作意図が伝わりづらい。

・クライアントの「デザインに目を通す環境」が悪ければ、悪評を受けやすい。

・結果、提案が通りにくくなる。

 

こんなかんじ。

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

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

 

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

 

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

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

 

・「相手の意思決定力と判断力が低下している時間帯」だから。

 

こんなかんじ。

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

 

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

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

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

 

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

 

流れ7:コーディングをする。

 

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

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

 

流れ8:動作チェックと修正をする

 

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

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

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

 

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

 

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

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

 

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

 

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

 

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

 

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

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

 

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

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

 

webサイト

 

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

 

流れ9:納品

 

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

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

 

・zoomを使って、全員でクライアントにあいさつをする。

 

こんなかんじ。

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

理由もシンプル。

 

・案件完了の「意思表示」をすることで、納品後の「ムダな修正指示」が減らせるから。

 

こんなかんじ。

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

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

 

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

 

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

 

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

 

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

 

【リモートワークのポイント】

1:リモートワークをやるには「zoom・ChatWork・Gooleドライブ」の3つが必要。

2:zoomを使うタイミングは、「ヒアリング・プレゼン・納品後の挨拶」の計3回。

3:基本的なやり取りは「ChatWork」で行う。

4:資料の共有は「Googleドライブ」でOK。

5:納品後は、zoomでお礼の挨拶をする。

 

こんなかんじ。

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

 

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

親子

 

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

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

 

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

 

1:咀嚼力(そしゃくりょく)を身につける。

2:次に発生する作業を、少しだけ前倒ししてやる。

 

こんなかんじ。

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

 

コツ1:相手の意図を汲み取る、「咀嚼力(しょしゃくりょく)」を身に着けよう。

 

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

重要な理由もシンプル。

 

・情報発信の量に限りがあり、言いたいことが伝わりづらいから。

 

こんなかんじ。

 

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

 

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

 

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

 

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

 

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

 

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

 

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

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

 

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

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

 

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

 

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

 

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

 

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

 

1:Yahoo知恵袋から、自分に答えられる範囲の質問を探す。

2:質問を確認したら、答えを考えてみる。

3:答えがまとまったら、ベストアンサーと比べてみる。

4:ベストアンサーと一緒だったらOK。違ったらもう一回考える。

5:ベストアンサー以外の、「ベストにならなかった回答」も必ず見る。

6:毎日繰り返しやる。

 

こんなかんじ。

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

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

 

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

 

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

 

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

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

 

・リモートワークだと、「作業の区切り」があいまいになりやすい。

・あいまいになると、次の作業に取り掛かるタイミングが遅くなり、案件の回転スピードが遅くなる。

・結果、仕事が終わらない。

 

こんなかんじ。

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

 

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

 

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

 

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

 

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

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

 

 

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

 

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

 

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

 

3:まとめ

子供

 

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

 

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

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

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

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

 

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

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

 

ボタン

 

Design is easy!

The following two tabs change content below.
管理人|taka(たか)
【職 業:クリエイティブディレクター/グラフィックデザイナー】 デザイナー歴12年。上場企業のサラリーマンから、独学でデザイナーを学び、デザイン事務所に入社。 現在は「インハウスデザイナー」「企業専属契約 」「単発制作」で毎月25〜40万円を得て生活しています。 月間で1万人くらいの方が訪れるブログ「デザインのコツ。」を運営中です(`・ω・´)ゞ

Copyright© デザインのコツ。 , 2020 All Rights Reserved Powered by AFFINGER5.