こんにちは！きぬです。 今回は「Webサイト制作でフリーランスになりたい」という方向けに、私が実践した案件受注方法をまとめてみました。 今回の記事は、こんな方向けに書きました！<ul><li>Webサイト制作の学習はしたけど、どうやって仕事を取っていいかわからない</li><li>自由な生活をするために、フリーランスとして仕事を受注したい</li></ul> 書いてる人はどんな人？ <img src="https://images.microcms-assets.io/assets/4cdd246a0eb54fe9b1f10b253ed0bdd5/ccc3167936a04cfc9603b2cd9e62e799/TS2_3491a%E3%81%AE%E3%82%B3%E3%83%92%E3%82%9A%E3%83%BC.jpg" alt=""> 小川きぬ / Webディレクター、デザイナー、コーダー 未経験からWebサイト制作を勉強し始め、フリーランスになりました。 夫婦でWebサイト制作事業を行い、フリーランス2年目で年商2,000万円を達成。 2022年に法人化し、株式会社AWA Bizの取締役として活動しています。 経歴<ul><li>2019年5月：独学でWeb制作の勉強を始める</li><li>2019年8月：母が営む飲食店のWebサイトを作成する</li><li>2019年11月：知人の紹介でWordPress案件を受注</li><li>2020年4月：エンドクライアントからWordPress案件を受注</li><li>2020年5月：Wantedlyから応募したWeb制作会社に採用してもらい、フリーランスとしてWeb制作会社で勤務</li><li>2020年11月：Web制作チームAWA Bizを夫婦で立ち上げ、5人のフリーランスチームへ成長</li><li>2021年12月：Web制作チームとして年商2,000万円を達成</li><li>2022年1月：株式会社AWA Bizを設立</li></ul> <h2 id="h814338b7db">【前提】まずは直請けではなく下請けがオススメ</h2>具体的な方法に進む前に、前提知識として知っておきたいのが"エンドクライアントからの直請け"と"制作会社からの下請け"の違いです。 よく質問される「フリーランスで案件を受注すると、デザインからコーディングまで全てやる必要があり大変じゃないですか？」という疑問があるんですが、 これはおそらくエンドクライアントから直で請ける方法しかないという考え方から来ているものかと思います。 実際のところ、案件には2パターンの受注方法があります。<ul><li>①エンドクライアントから直接依頼される「直請け」</li><li>②制作会社からの外注で請ける「下請け」</li></ul> ①エンドクライアントから直接依頼される「直請け」の場合、 「ホームページを作ってほしい」と制作に関わる全てを依頼されることが多いです。 そうなるとデザイン・コーディングだけでなく、クライアントからの要望を聞いて仕様を決めたり、ホームページの構成を考えたりと業務範囲がかなり広くなります。 ②制作会社からの外注で請ける「下請け」の場合は、 「デザインだけ」「コーディングだけ」など一部分だけの制作を担当することが可能です。 自分の得意な業務に集中することができます。 なので、初学者の方は②の下請けから始めるのが圧倒的にオススメです。 まずは制作会社からの下請けで、デザイン・コーディングなど専門の分野を磨いていきましょう。 下請けの注意点 最初は②下請けからがオススメなんですが、制作会社からの外注だと単価が低くなってしまうパターンが多くあります。 なのでまずは②下請けで修行を積んで、経験値が溜まったら①直請けで単価を上げていく、というのが良い方法がオススメです。<h2 id="h0a64380729">【方法①】知り合いに連絡する</h2> いきなり意外な方法が出て驚いたかもしれません。 今まで多くの方に出会ってきましたが、未経験から仕事受注するための方法として一番多かったのは知り合いからの受注です。<ul><li>親戚がやっている飲食店のWebサイトを作って欲しいと言われた</li><li>父が経営している建築会社のWebサイトのリニューアルをしたいと言われた</li><li>友達の会社がコーダーを募集していて、よかったら手伝って欲しいと言われた</li></ul>上記のような話を本当によく聞きます。 なので、仕事を受注する上でまずやっていただきたいのが、 「ホームページ制作できるようになった」ということを周りに連絡・発信することです！ SNSに投稿してみたり、親に話してみたり、友達にLINEで報告してみたり、「ホームページが作れる」と認知されると思わぬところから依頼が来たりします。 私も最初に受注したお仕事は、友人の紹介で一度だけお会いしたIT企業の一人社長さんでした。当時は全く仲良くなく、まさか一緒に仕事をやることになるなんて思ってもみなかったです。 でも今となっては一番信頼を置いている方になり、とてもお世話になっています。 簡単だけど意外とやってない人が多い方法なので、ぜひ試してみてくださいね。 知り合いから受注する場合の注意点 知り合いから受注の場合、エンドクライアントからの直請けになることが多いのでデザインも行う必要があります。 その場合はWordPressのテーマを使用したり、既存のテーマデザインを使うことがオススメです。<h2 id="h8f857f9b1b">【方法②】新しく人脈を作る</h2> フリーランスとして大事になってくるのが、やはりこの人脈。 でも「どうやって新しく人と繋がっていけばいいかわからない…」と悩んでいる方が多いのではないでしょうか。 私が新しく人脈を作るためにやった方法が下記です。<ul><li>①講座・スクールに参加する</li><li>②SNSを始める</li><li>③勉強会、もくもく会などのオフラインイベントに参加する</li><li>④コワーキングスペースに行く</li><li>⑤オンラインサロンに参加する</li></ul>個人的に一番効果が高かったのが①講座・スクールに参加するで、講師や受講生と仲良くなり、お仕事の受注に至った経験が何度もあります。 私が運営する女性向けWeb制作スクール&amp;コミュニティMs. Web Creatorでも、スクール内で案件の依頼・受注がよく行われています。<iframe frameborder="0" allowfullscreen="true" src="https://note.com/embed/notes/n3a762c557d9f"></iframe> また、Twitter経由で知り合った方から仕事を受注したり、参加しているオンラインサロンを通して仕事も受注した経験があります。 周りからは「コワーキングスペースで仲良くなった人から受注した」「勉強会で知り合った人から仕事の依頼が来た」という話もしょっちゅう聞きます。 ただデメリットとしては、即効性がないということです。 すぐに案件が受注できる可能性は正直とても低いです。ただ、数ヶ月後にじわじわと効果が出てきます。 そして知人経由で話が来る案件は、大体がネット上には出回らない案件なので、条件の良い案件であることが多いです。 方法①も含め、なぜこんなにも私が知人経由をオススメするかというと、未経験という“見せられるスキルがない”時の一番の武器は“一緒に働きたいと思われるかどうか”だと思っているからです。 好意的に思ってもらえれば、その後も案件をもらえたり知人を紹介してもらえたりします。 仕事を頼むのであれば、知らない人よりも好意的に思っている人がいいと思うのが人間ですよね。 現在学習中の方は、今のうちから積極的にご縁を紡いでいくのがオススメです！<h2 id="h82c547b6f2">【方法③】クラウドソーシングを使う</h2> 未経験から仕事を受注するために定番なのがクラウドソーシングの利用。 私が運営しているスクールでも、未経験からクラウドソーシングで最初の仕事を受注したという方が多いです。 クラウドソーシングとは？ ネット上で案件の発注者と受注者を繋げるサービスです。 クラウドソーシングの代表的な例<ul><li>ランサーズ</li><li>クラウドワークス</li><li>ココナラなど</li></ul> 未経験者でも手軽に応募ができ、マッチすれば受注できます。 ただ誰でも簡単にできるが故に、クラウドソーシングにはデメリットも多いです。 クラウドソーシングのデメリット<ul><li>競合（経験者含む）がかなり多く、労力の割に受注できない</li><li>受注できたとしても単価が低い案件が多い</li><li>基本的にネット上でのコミュニケーションのため、トラブルが起こりやすい</li></ul> ただクラウドソーシングを利用することでメリットもあります。 クラウドソーシングのメリット<ul><li>提案力（営業力）がつく</li><li>実績が作れる</li><li>うまくいけば同じクライアントから継続的に依頼してもらえる</li></ul>大事なことは、クラウドソーシングで長期的に稼ぐという期待はせず、経験作りで臨むということです。 最初のうちは例え安価だったとしても「実績を作る」ことが重要になってきます。一つ実績があるだけで、その後の案件受注が一気にカンタンになります。 まず最初の一歩としてクラウドソーシングを利用するのはオススメです！<h2 id="hc8278d2a38">【方法④】Twitterの募集案件に応募する</h2> 実はTwitterで制作者を募集している方がたくさんいらっしゃいます。そんな募集を見つけたら、すぐDMを送ってみるのがオススメです。 私の知人でもこの方法で仕事を受注している方が何人かいらっしゃいます。 「でも、たくさん応募が来ているはずだから、選ばれないのでは？」と思っている方もいるかもしれません。 この方法で仕事をバンバン受注している知人によると「TwitterのDMから連絡する人は、提案力がなかったり適当に送っている人が多いので、きちんと文章を作ってDMすると選ばれますよ」とのことでした。 実際に募集をかけた知人からも「あまり良い人から連絡が来なくて困った」という話をよく聞きます。 勇気を出して、きちんとプロフィールやポートフォリオサイトを整えて提案DMを送ってみてください。 Twitterで募集案件を効率的に探すためにオススメのツール <a href="https://tweetdeck.twitter.com/" target="_blank" rel="noopener noreferrer">TweetDeck</a> <img src="https://images.microcms-assets.io/assets/4cdd246a0eb54fe9b1f10b253ed0bdd5/676776924ea44957950dfcebb6787f6a/picture_pc_70c80b0a8b9149de43e7343450870ef8.webp" alt=""> TweetDeckを使うと、こんな感じで検索キーワードを出した状態でタイムラインを作成してくれます。 ここで募集案件を探し、出ていたらすぐ提案DMを送るとお仕事受注ができるかもしれません。 Twitterから応募する時の注意点 Twitterのプロフィール文や日々の呟きがすごく大事になってきます。 特に下記の項目は気を付けておきましょう。<ul><li>プロフィールに「未経験」「駆け出し」といったワードを書かない</li><li>ポートフォリオサイトをわかりやすい場所に掲載しておく</li><li>Web制作のことを呟くようにする</li><li>ネガティブな呟きはしない</li></ul><h2 id="ha69ec4e1fd">【方法⑤】制作会社へ営業メールを送る</h2> 次の方法が、制作会社へ営業する方法です。 デザイナーやコーダーが不足している制作会社は本当に多く、うまくマッチすれば案件が受注できます。 私も家の近くにある制作会社を50社探してきて、ホームページのメールフォームなどから連絡していきました。結果4社から返信をいただき、そのうちの1社とは1年以上お取引が続いています。 制作会社へ営業メールを送る方法やコツは、弊社の営業をお願いしているとよさんがまとめた記事がとてもわかりやすいです。<iframe frameborder="0" allowfullscreen="true" src="https://note.com/embed/notes/n63d8f68b71e9"></iframe> ビジネスマッチングアプリ「yenta」を使った営業方法も紹介してらっしゃるので、そちらもぜひ参考にしてみてくださいね。<h2 id="he0825f7fd9">【方法⑥】求人サイトへ応募する</h2> 最後にご紹介するのが、求人サイトへ応募する方法。 転職で使っている方は多いのですが、フリーランスとしてこの方法を使用されている方は少ないので穴場だったりします。 オススメの求人サイトは下記です。<ul><li>Wantedly</li><li>Indeed</li><li>Workship</li></ul>私自身も、Wantedlyで応募した企業とは4社ほどお取り引きしたことがあり、「まさに今手が足りなくてコーダーを求めている企業」と繋がりやすいです。 ただ注意点としてそこそこスキルがないと面談まで至りにくいということがあります。全くの未経験では少し難しい方法です。 クラウドソーシングなどである程度実績を作り、ポートフォリオサイトもしっかり作った上で臨むことをオススメします。<h2 id="h4d504fff07">【最後に】大事なことは、まずやってみること</h2>以上がフリーランスとして仕事を受注する方法になります。 もちろん、これが全てではありません。方法は他にもたくさんあるので、一つのやり方に縛られず色んな手段を試してみることが重要です。 何より仕事を受注するために一番大事なことは まずやってみる という即行動力です。 「できるかなー」とか「やってみたらこうなるかもなー…」とか「まだ実務にいけるレベルじゃないし…」とか、 頭で考えだすとやらない理由ばかりが出てきます。 結局、ここで やらない人＝学習に疲れて辞めてしまう やる人＝失敗しながらもフリーランスになる だなぁと、色んな方を見ていて思っています。 実際に、今回のような私のシェアを聞いて学習開始2週間の駆け出しの方がコーポレートサイトの仕事を受注した例もあります。 その方曰く、「とにかく素直に即行動した」とのことでした。 とはいえ「一人だとなかなか行動できない…」と悩んでいる方もいらっしゃると思います。 女性限定にはなってしまいますが、そんなフリーランスを目指す方向けにWeb制作スクール&amp;コミュニティも運営しています。<iframe frameborder="0" allowfullscreen="true" src="https://note.com/embed/notes/n3a762c557d9f"></iframe> Ms. Web Creatorの特徴<ul><li>無期限で閲覧できるオンライン動画教材</li><li>12名までの少人数制</li><li>3ヶ月間は専属メンターに質問し放題</li><li>個別でキャリア相談できる</li><li>無期限で入れるコミュニティ付き</li></ul>学習はしたけど仕事受注のための一歩が踏み出せない…という方向けに作ったサービスですので、興味がある方はぜひ覗いてみてください。 また、これからフリーランスになりたい方に向けて有益なWeb制作情報を公式LINEアカウントで随時発信しています。<ul><li>Web制作に関するスキル・案件受注ノウハウ</li><li>現役フリーランスのオススメ本、ガジェット情報</li><li>株式会社AWA Bizが主催するセミナー・イベント情報</li></ul>現在、LINE登録＆アンケート回答してくださった方に限定で、実務で使用しているヒアリングシートをプレゼントしています！ ぜひこれを機会にご登録ください。 ↓プレゼントがもらえるLINE公式アカウントの登録はこちらから↓ <a href="https://line.me/ti/p/%40694xqpbn" target="_blank" rel="noopener noreferrer">https://line.me/ti/p/%40694xqpbn</a>

小川きぬ

Webサイト制作でフリーランスになるためのお仕事受注の方法6選

こんにちは、株式会社AWA Biz取締役の小川きぬです。 今回は私自身が約2年半ほどWebフリーランスを経験する中で、"やってはいけない10の行動“をまとめました。 私自身の経験や周りのWebフリーランスの話を聞く中で「ここは共通してある失敗だな」と思うことや、「このポイントで失敗するパターンもあるんだな」と感じている部分についてまとめています。 これからフリーランスになりたい方や、現在フリーランスとして頑張っている方にとって参考になれば幸いです。<h2 id="hba15549dc0">クライアントの言いなりになる</h2>クライアントの要望をしっかりヒアリングし、成果に落とし込むことはフリーランスにとって必須のスキルです。ただ、要望をしっかり汲み取ることと言いなりになることは全く別です。 言いなりとは、例えば当初聞いていなかった仕様の追加や急な変更も、追加料金なしで引き受けてしまうことです。こうした要望を簡単に引き受けると、予定していた作業量を大幅オーバーし赤字というような事態になりかねません。 自分の作業時間＝見積もりになっているWebフリーランスにとって、対応にどれぐらい時間がかかっているかはとても重要です。「まぁ、休みも使って対応すればいいし」と簡単に考えてしまいがちですが、それだとずっと苦しい生活から抜け出せません。 さらに、今後は外注を考えているなら「自分が対応すればいい」だけでは収まらなくなってしまいます。外注先から「これ以上は対応できません」と言われてしまうと、結局自分が対応するか、他に対応できる人を探すため奔走することになります。 言いなりになるのではなく、「ここまでは費用内で対応できますが、ここからはできません」としっかりお伝えし、「代わりにこういう形ではいかがでしょう？」と代案を提案をしていくことが重要です。<h2 id="hd864d9544c">すぐに値下げする</h2>受注できるか不安な時やクライアントから値下げ交渉をされたときに、すぐに値下げしてしまう人がいるのではないでしょうか？私もフリーランスを始めたばかりの頃は、値下げをすることでなんとか受注した経験もたくさんあります。 もちろん経験値が未熟なうちは有効な手の一つですが、ずっと続けている人はいずれフリーランスとして生活が成り立たなくなってしまいます。 また、値下げを交渉するということは、あなたの価値を安く見積もっているということです。そういった人は前提として「安くできて当たり前」という思いがあります。仮に値下げして受注できたとしても、その後さらに無理な要求をしてきたりする人が多いと感じています。 もし値下げを要求されたら「その代わり○○については対応できなくなります」などその分サービス範囲を狭めるなどして、元値を下げないようにしましょう。<h2 id="h8a56e11afc">修正回数を決めていない</h2>Webフリーランスに疲れて辞めてしまう多くの原因が、この"修正回数を決めていないことによる無限修正地獄“ではないかと思っています。 事前にクライアントと修正回数の合意をとっておかないと、後々になって修正が何度も何度も来て痛い目を見た、というフリーランスの方も多いのではないかと思います。 弊社では事前にクライアントへ修正回数をお伝えするようにしています。また、大きな修正だった場合は追加料金になる旨も伝えています。 さらに修正回数のみではなく、<ul><li>当初の要件から変わった場合、追加料金となる</li><li>対応できるブラウザを明記する（Web制作の場合）</li></ul>など、事前に認識を合わせておきたいものに関しては、契約書とは別紙を用意し確認してもらっています。 トラブルの原因の多くは事前の認識が合っていなかったことにあります。案件がスタートする前に、トラブルになりやすい事項についてはあらかじめ認識を合わせておくことが重要です。<h2 id="ha17a2e4d24">新規顧客を開拓しない</h2>フリーランスを続けていくと、継続して依頼してくれるクライアントが出てきます。そうすると収入が安定していくので、徐々に営業活動をしなくていい状態になっていきます。 もちろんそういった"継続受注“を増やしていくことが大事なんですが、それに安心して新しいクライアントを開拓しなくなると要注意です。 今は継続して依頼があるかもしれませんが、いつなくなってしまうかわかりません。契約を切られる可能性もありますし、その会社が倒産してしまうことも考えられます。取引先が一社しかないのはかなり大きなリスクです。たとえ今は十分に仕事があるとしても、新規クライアントを開拓する手は止めないことが大事です。 また、単価を上げたくなった時も既存顧客への価格交渉のみでは難しいことが多いです。単価を上げたいなら、新しいクライアントに単価を上げた状態で提案する方が手っ取り早いです。 「これから単価アップしていきたい」「働きやすいクライアントを探したい」と思っている人ならなおさら、常に新規顧客は開拓し続けることが大事になります。<h2 id="h86d5c2c89b">経験の浅い人に外注する</h2>仕事が増えてくると自分だけでは手が回らなくなってしまうことがあります。その時に誰もが考えるのが"作業を外注する“ことではないでしょうか。 今後スケールアップしていくためにとても重要な工程であり、また自身が病気やケガで動けなかった時のためにも依頼先を探しておくことは大事です。 ただこの時に「自分もまだまだ経験が浅いのに、さらに経験が浅い人に外注して失敗する」という地獄の構図を何度も見てきました。私自身もフリーランスなりたての時にこの失敗をして痛い目を見たことがあります。 経験が浅いうちは、安易に外注しないことが得策です。外注するとしても自分でリカバリーできる範囲で依頼すべきです。 私は苦い経験を通して、外注するときはとても小規模から依頼するようにしています。その人が仮に途中で作業できなくなっても、自分でリカバリーできるぐらいの規模です。 フリーランスは何があっても全てが自己責任。「外注先と音信不通になったので案件が完了できませんでした」なんていう言い訳は通用しません。 経験が浅い人には外注しない、あるいは外注するなら自分でリカバリーできる範囲で外注する、というルールを決めておくと失敗が避けられると思っています。<h2 id="hcf4e325d5e">仕事を詰めすぎる</h2>何件もの案件を掛け持ちし、常に余裕のない状態でスケジュールを組んでしまうのもフリーランス失敗あるあるです。 心身ともに健康な状態であれば問題ないですが、急に体調を崩したり、身内に不幸があって数日動けなくなったり、そんな時に対応は可能でしょうか？ 私の周りにも、仕事を詰めすぎて睡眠不足・ストレス過多で体調を崩してしまったフリーランスを何人も見ています。そんな時に無理をすると、その後さらに体調が悪化したり燃え尽きてしまったりして、フリーランスを辞めてしまう事態になりかねません。 仕事は常に余裕を持たせて受けるべきです。「仕事を断ったらもう依頼が来ないかもしれない…」と心配になるかもしれませんが、逆に仕事を詰めすぎてクオリティが下がると、もっと仕事はこなくなってしまいます。 スケジュールは詰めすぎず、何があっても対応ができるようにしておくことが大事です。<h2 id="h1466907592">テキストコミュニケーションが雑</h2>Webフリーランスにおいてチャットやメールといったテキストでのコミュニケーションは必須です。そんな時に、テキストが雑な人は継続依頼になりにくい場合が多いです。 テキストコミュニケーションが雑とは？と思われる方もいるかもしれません。私の中で「雑だなぁ」と感じたことのある例を挙げてみました。<ul><li>誤字・脱字が多い</li><li>テキストが簡潔すぎて知りたい内容がすべて記載されていない</li><li>「○○してください」などドライな指摘や依頼が多い</li><li>語尾がすべて「！」になっていて圧が強い</li></ul>テキストのみで仕事を進めるのにやたらと時間がかかったり、文章の節々から礼節のなさが伝わる人が「テキストコミュニケーションが雑な人」です。 また、テキストは表情やトーンがわからない分、直接話す時の10倍は冷たく感じてしまいます。なので親しい人には絵文字や「！」「？」などを使い、テキストでも感情が伝わるようにしています。 また、「誤字・脱字がないか」「意図と違う形で相手に伝わらないか」という観点で、２〜３回は文章を読み返した上で送信するようにしています。 直接会った時と同じように、丁寧で相手を気遣った文章を作成することが必須だと思っています。<h2 id="hfc3e52a801">周りに自慢する</h2>フリーランスになると周りからチヤホヤされる機会が増える方もいるかと思います。そんな時に「どうだ、すごいだろ」と言わんばかりに自分の実績を周りに自慢しまくる方がいます。 自分をアピールすることは大事なのですが、過度に行きすぎると周りのフリーランスから嫌悪され、孤立することも少なくありません。繋がりが命といっても過言ではないフリーランスの世界において、悪いウワサが流れるとすぐに居場所を失ってしまいがちです。 「今月は○万円も稼げた！」「案件がいっぱい来て自分では手に負えない状態になった！」と自分の成功を周りに自慢したくなることもあるかと思いますが、そこはグッと堪えて謙虚に行きましょう。 私も過去に自分の成功に浮かれて高飛車になってしまい、周りから人が離れてしまった経験をしています。常に謙虚に、相手に尊敬を持って関わる態度こそがフリーランスとして生き抜くコツではないでしょうか。<h2 id="he5397f7989">交流の場で営業する</h2>こちらも気づかないうちにやってしまいがちなのですが、交流の場で営業活動するのはNGです。営業が前提になっている場であればいいのですが、あくまで交流をメインとした場では名刺交換ぐらいにしておいてコミュニケーションを楽しみましょう。 私も以前、交流の場でゴリゴリに営業され嫌な思いをしたことがあります。とある交流の場で、Web制作でフリーランスになりたての方から「よかったら仕事を振ってください」と言われました。その時は「また機会があればぜひ」と好意的に返していたのですが、その後も会うたびに「よかったら仕事を振ってください」と言われ、とても嫌な気持ちになりました。 交流の場は「友人を作る」が前提となっているので、ビジネス感を出しすぎると嫌悪される場合があります。その提案がWin-Winであれば問題ないのですが、相手が嫌がっていることを察知せずにゴリゴリいくと縁が切れてしまうことにもなりかねません。 「ビジネスのための人脈作りとして交流会に行く！」と思っている方も多いと思います（私もそういう気持ちで参加したことはあります）。そう思うことは問題ないのですが、まずは友人になって信頼関係を築いてから、Win-Winな仕事の提案をしてみてはいかがでしょうか。<h2 id="hcb297c4fd1">新しい知識を取り入れない</h2>Web業界は流行り廃りのスピードが激しく、技術やツールなどはすぐに古くなってしまいます。そんな時に今までのやり方に固執していると業界に置いていかれてしまうことになります。 例えばWeb制作の業界だと、Webデザインツールの切り替わりがとても激しくなっています。10年ほど前はAdobe Photoshop、Illustratorを使うのが当たり前でしたが、昨今ではAdobe XD、FigmaなどWebデザインに特化したツールが現れ、そちらが主流になってきました。 しかし未だにAdobe Photoshop、Illustratorを使っている会社は非常に多いです。理由は「使い慣れているから」というもの。ただコーダーとしてはXDやFigmaの方が断然コーディングがしやすく、効率も上がります。XDやFigmaを使っていない場合は値上げするとしている人もいるぐらいです。 こういったツールの問題だけではなく、あらゆるものが日々新しくなる中で「今までやってきたから」という理由で頑固にやり方を変えないフリーランスは、どんどん仕事がなくなってしまうのではないでしょうか。 Twitterやブログ、書籍などを通じて常に「業界の最新とは何か」「今求められているものは何か」を考えアップデートしていく必要があるかと思います。<h2 id="h1afe451c43">さいごに</h2>"やってはいけない行動“としてまとめましたが、どれも私が経験してきたものばかりです。今思えば顔を覆いたくなるような恥ずかしい失敗をたくさんやらかす中で、少しずつ改善してきました。 失敗すること自体はすごく良いことだと思っていて、経験からしか学べないこともたくさんあると思っています。大事なのはどれだけその失敗から学び、改善していくかではないかと思っています。 これからフリーランスとして活躍したいと考えている人にとって何か役に立つ情報があれば幸いです。

Webフリーランスがやってはいけない10の行動

こんにちは、Webディレクターの小川きぬです。 経歴としては1年ほどWebコーダーとして制作に従事し、その後Webデザイナーとしても経験を積みました。コーディング・デザインのどちらも制作者として取り組む中で、双方の連携がどれだけスムーズに取れるかで、かかるコストが圧倒的に変わると体感しています。 今回は、1年間Webコーダーとして色んな方のデザインを見てきた中で、「こういうデザインはとてもコーディングしやすかった」「こういうデザインはコーディングに苦戦した」というポイントをまとめています。 前提として、画像コーディングではなくSEOを意識したHTMLでのコーディングがしやすいかどうかの視点となっております。<h2 id="h103963bed7">コーディングを想定したデザインにしてある</h2>一番大事なポイントだと思っているのが「コーディングを想定したデザインにしてあるか？」です。 例えば下記のようなデザインは、「どういう風にコーディングすればいいんだろう？」と思わず悩んでしまいます。<ul><li>画像化が必要な文字の装飾が多数ある</li><li>画面サイズごとのデザインが想起しにくい（600〜1000pxあたりの画面サイズで崩れやすいデザインになっている）</li></ul>Webデザイナーと謳っている以上、コーディングに落とし込む前提でのデザイン作りはとても重要だと思っています。 そのため、デザイナーがコーディングについて完璧でないにしてもきちんと理解していて、その上でデザインを作成することが大事だと感じています。 コーダーから「ここってどういう風に実装すればいいでしょうか？」と聞かれた時に、HTML・CSSの言語で回答ができるようなデザインになっているとベストです。<h2 id="hc6e1830572">Webデザインに適したツール（XD、Figma）で作成してる</h2>実践している制作会社が意外と少なく、コーダー泣かせなのが"XD、Figma以外を使ったWebデザイン"です。 具体的には"Photoshop、Illustratorなどグラフィックデザインに特化したツールを使ったWebデザイン"になります。 XDやFigmaはここ数年で生まれたツールのため、昔からデザイン業務を行なっている方はPhotoshop、Illustratorを使っていることが多いのが現状です。ただ、このPhotoshopとIllustratorを使ったデザインがコーディング作業時間を1.5倍にしている、と言っても過言ではありません。 なぜかというと、<ul><li>機能が多数あるため初心者にはかなり使いにくい</li><li>余白サイズを図るのが難しい（四角ボックスを使って図るという原始的な方法になる）</li><li>画像が書き出しにくい</li><li>透明度（opacity）の数値がわかりにくい</li><li>影（box-shadow）の数値がわかりにくい</li><li>ファイルが重く動きが遅くなりやすい</li></ul>など、挙げ出すとキリがないぐらい出てくるのですが、とにかくコーディングする上では使いにくいことこの上ないのです。 ただ、BtoCのLPに代表されるような"装飾が多いデザイン"では圧倒的にPhotoshopやIllustratorが向いているため、必ずしもXD・Figmaが優れているというような話ではありません。画像コーディングでOKなデザインであれば、PhotoshopやIllustratorを使っていただく方がいいのかなと思っています。 ちなみに「Sketchはどうですか？」という話なのですが、ツールとしては使いやすくて良いものの、有料のためオススメできません。 過去に一度、Sketchを使用したデザインで作業したことがあるのですが、2ヶ月間の作業だけで1年分の費用（1万円ほど）がかかってしまいとても辛い思いをしました。（有料という点では、PhotoshopやIllusratorも同様ですが） XDやFigmaは無料で使えるという点でも、Webデザインに適したツールであると考えています。<h2 id="h8fe20777c3">全てのページが1つのファイルにまとまっている</h2>こちらもPhotoshopやIllustratorを使っている方に多い現象なのですが、"1ページずつ別ファイルで作成している"というものです。 同じデザイン部分を共通化したり、全体を見ながらコーディング設計をしていくコーダーにとって、この"別ファイルで作成されている"というのは無駄な作業が発生しやすい状態です。例えば、全てのデザインを一度に開くとPCが重くなり作業が遅くなったり、タブを何度も切り替えて確認する作業が生まれてしまいます。 私も以前は、Illustratorでもらったデザインファイルを画像ファイルにして、全てをXDに移し全体を見ながらコーディングするということもやっていました。（面倒ですが、これをやっておくと後々捗ります） ファイルが重くなるため別ファイルに切り分けてもらっているかと思うのですが、せめて"数ページずつ同じファイルにする"、”PC、SPの場合だけファイルを分ける”など、可能な限り同じファイルにまとめていただきたいです。<h2 id="h4c5c2808fd">文字サイズ・色・余白が揃っている</h2>"共通化が命"のコーダーにとって、文字サイズやカラーコード、余白のサイズがバラバラな状態は非常にコーディングがしにくくなります。<ul><li>タイトルの文字サイズが統一</li><li>カラーコードが揃っている</li><li>セクション間の余白が統一されている</li></ul>など、しっかり統一性を持たせた上でデザインしていただくとコーディング速度が上がります。 ただ、あえてサイズを変えたり色を変えたりしている部分もあるので、そういう場合は「あえてここは変えています」というような旨を記載しておくと良いかなと思います。（「ミスなのか？」「あえてそうしているのか？」がわからないため）<h2 id="h4cb873488f">Webでの商用利用が可能なフォントを使用している</h2>グラフィックデザインを主としていた方が陥りやすいのが"Webでの商用利用が不可なフォントを使ってしまう"というものです。 具体的には<ul><li>Adobe Fonts</li><li>モリサワフォント</li></ul>などの有料フォントは、コーディングする場合は使用ができません。 より詳しく言うと、"Webサイトを保持する企業あるいは個人（＝エンドクライアント）が有料フォントのライセンスを持っていないと利用ができない"という状態になっています。 グラフィックデザインではデザイナーが所持していれば使用OKなのですが、Web上で使うとなるとエンドクライアントが所持している必要があるのです。 ちなみに、Webデザインとして最も使い勝手が良いのが<a href="https://fonts.google.com/" target="_blank" rel="noopener noreferrer">Google Fonts</a>で、こちらはWeb上で使っても全く問題がありません。 Adobe Fontsやモリサワフォントの代替となるようなフォントも多数あるので、ぜひともGoogle Fontsを使っていただけたらと思います。<h2 id="h220892c510">コンテンツ幅が指定してある</h2>コンテンツ幅とは何かというと、"コンテンツに関わる文字あるいは画像などが収まっている幅"という意味になります。 要は、画面サイズを拡大していった時にコンテンツの最大幅をどのぐらいにするか？という指定です。 <img src="https://images.microcms-assets.io/assets/4cdd246a0eb54fe9b1f10b253ed0bdd5/508ce682128f46c09a880932f82e81e2/9point-img1.webp" alt=""> 端から２番目の青い線の中に、コンテンツ（文字・画像）が収まっていることがわかるかと思います。 なぜコンテンツ幅の指定が必要かというと、例えば横並びの要素があった時に、コンテンツ幅の指定がないと画面幅に合わせて要素が無限に大きくなってしまったり、左右に離れていって中央に余白ができたりといった実装になりかねません。 <img src="https://images.microcms-assets.io/assets/4cdd246a0eb54fe9b1f10b253ed0bdd5/604542107b0d4608a8b02940586179ae/9point-img2.webp" alt=""> <img src="https://images.microcms-assets.io/assets/4cdd246a0eb54fe9b1f10b253ed0bdd5/e3309bc5b0f247a2b18e8facb5bc10be/9point-img3.webp" alt=""> こういった現象を避けるために、最大幅を設定することでどの画面サイズで見ても綺麗にデザインが見えるように設計しておくことがオススメです。 大体800px〜1000pxぐらいでコンテンツ幅を設定しておくと、どの画面サイズでも崩れにくいデザインができるかと思います。 デザインツールのガイドラインを引いておくとコーダーも視覚的にわかりやすいため、ぜひ実践してみてください。<h2 id="h1f37ce31f8">左右の余白幅が設定されてる</h2>コンテンツ幅の指定と似たような話でもう一つ。今度は、画面サイズを縮めていった時に「左右にどれぐらい余白を設けておくか？」という設計です。 <img src="https://images.microcms-assets.io/assets/4cdd246a0eb54fe9b1f10b253ed0bdd5/624ff7f138b84b96987c4293397af919/9point-img4.webp?w=786&amp;h=1024" alt="両端の青い線が余白幅を指定しているガイドラインです"> 両端の青い線が余白幅を指定しているガイドラインです なぜ余白幅の指定が必要かというと、コーダーが一番悩みやすいポイントとして、PCデザインとSPデザインの間である600px〜1000pxぐらいの時にどういったデザインにするか？という部分があります。 この時、コンテンツ幅よりも画面サイズが狭くなった際は両側に必ずこれぐらいの余白を設けておいてね、という指示も作っておくと、スムーズにコーディングすることができます。 私の場合は、PC版のデザインの両端に40pxほどの余白を開けたガイドラインを引いており、コンテンツ幅よりも画面サイズが狭くなったら両端に40pxずつ余白をつけてね、という指示をしています。<h2 id="h7d3ebfe77a">アニメーションの参考サイトを用意している</h2>デザインで表現しきれないものの一つとして"アニメーション"があります。 ファーストビューはどんな動きをするのか、ボタンをホバーした時はどうなるか、などコンテンツごとの動きを決めておくのもデザイナーの仕事に含まれる場合が多いかと思います。 その時、頭の中で「こういう感じ」とイメージするだけではなく、参考サイトを探して提示してもらえるとコーダーとしては非常に助かります。スピード感や細かい動きのイメージをデザイナーとすり合わせる必要があるからです。 この時、参考サイトが既存のWebサイトではなくコードも併記してあるTipsサイトだとなお助かります。そのコードを転記するだけで済むからです。 たまに、予算が少ないにも関わらず大手企業が作ったリッチなアニメーションを提示される時がありますが、難しい実装を伴ったアニメーションは工数がかなりかかってしまうので注意です。 必ず「このアニメーションは実装可能でしょうか？」とコーダーに確認してから取り入れていただければと思います。<h2 id="h311e66b4c7">指示書がデザインに書き込んである</h2>これは賛否両論あるかもしれませんが、個人的に指示書がデザインに書き込んであると非常に助かります。 指示書というのは、例えばリンク先のURL、アニメーション、OGP情報などデザインでは汲み取れない部分の指示をテキストを通じて行うものです。 <img src="https://images.microcms-assets.io/assets/4cdd246a0eb54fe9b1f10b253ed0bdd5/ef195cac3cf64117997bda88b5032e4e/9point-img5.webp" alt=""> 弊社ではXDを使用していますが、デザインのすぐ隣にこのような指示書を作成しています。 指示書を別ファイルにてまとめる場合もあるかと思うのですが、情報が散乱していると見落としが発生しやすいためデザインに書き込んであるのがベストだと思っています。 日々いろんなデザイナーのデザインをコーディングしている身としては、情報が一つのファイルにまとまっているのはとても作業が進めやすいです。<h2 id="h1afe451c43">さいごに</h2>デザイナーとコーダーというのは、仕事の性質上対立しやすい関係かと思います。 思うような成果物が来なかった時はついつい「こちらの苦労をわかってくれていない」と考えてしまいますが、実は「ただ知らないだけ」なのだと思っています。 双方に「こうしてもらえるとすごく助かります」と伝えることで、もっとスムーズに、そして気持ちよく仕事が進められるのではないでしょうか。 この記事を読んで心に残ったものがありましたら、ぜひ実践していただければ幸いです。

コーダー目線から見るデザイナーにやってほしい９つのこと

こんにちは！AWA Biz代表の小川です。 Webサイトが表示されるの速さが遅いと以下のデメリットがあると言われています。<ul><li>Webサイト閲覧者の直帰率が上がる</li><li>ECサイトの場合売り上げが下がる</li><li>CVRが下がる</li><li>SEOの順位が下がる</li></ul>お客様から「Webサイトの表示速度を向上させたい」と明示的に要望されることはあまりありませんが、効果的なWebサイトを作るためにも0.1秒でも速く表示されるWebサイト制作にこだわりたいですよね。 今回の記事では、普段実施しているWebサイト高速化の方法を書いていきます。<h2 id="h80e76f8c9e">画像の圧縮</h2>一番簡単かつ効果が期待できるのが、画像を圧縮して軽量化することです。Webサイトが開いた後に画像がカクカクと表示された経験はありませんか？ 特にWebサイトを開いて最初に見える画像(ファーストビュー)は画像自体が大きく読み込みが遅くなる原因なので気をつけましょう。 画像を圧縮するためには以下の方法があります。<ul><li>gulpのimageminを使用する</li><li>画像圧縮ツールを使用する</li><li>プラグインを使用する(WordPressの場合)</li></ul>それぞれ細かく説明していきます。<h3 id="hc6f3737581">gulpのimageminを使用する</h3>gulpのimagemin関数を使って圧縮する方法です。設定次第でコーディングが完了したら一括で画像を圧縮してくれるので圧縮作業が楽です。しかしgulpの設定知識が必要なので導入コストは少し高めかもしれません。<h3 id="h5734027425">画像圧縮ツールを使用する</h3>画像圧縮のためのWebアプリケーションやデスクトップアプリケーションを使用する方法です。 個人的には↓の2つが使用しやすく普段から愛用しています。<h4 id="h60b6b25965"><a href="https://imageoptim.com/mac" target="_blank" rel="noopener noreferrer">ImageOptim</a></h4>Mac専用ですが、一括で画像を圧縮してくれる優れもののためかなりおすすめです。 ただし初期設定を変更しなしと本領発揮してくれないので、アプリインストール後に設定を変更することをおすすめします！ <a href="https://webrandum.net/imageoptim/" target="_blank" rel="noopener noreferrer">https://webrandum.net/imageoptim/</a><h4 id="h22b9e25d73"><a href="https://squoosh.app/" target="_blank" rel="noopener noreferrer">Squoosh</a></h4>こちらは画像を一枚ずつしか圧縮できないのですが、圧縮率が高いのがおすすめです。 png→jpgなどの変換もしてくれるのもいいですね。 個人的にはファーストビューなど重要な画像はSquooshで圧縮し、それ以外の画像はImageOptimかgulpで圧縮する運用をしています。<h3 id="h753838fca4">プラグインを使用する</h3>WordPressの場合のみですが、プラグインで圧縮する方法もあります。 https://ja.wordpress.org/plugins/ewww-image-optimizer/ WordPressの管理画面にアップロードした画像データを一括で最適化してくれます。ブログなどのサムネイル画像を圧縮する時に使用するのがおすすめです。<h2 id="hbdd5435eb4">画像の遅延読み込み</h2>画像の遅延読み込みとはページを開く時に全ての画像を読み込むのではなく、ページをスクロールするにつれて徐々に画像を読み込んでいく技術のことを言います。 ファーストビュー画像以外を遅延読み込み設定することにより、ファーストビュー表示を優先することができ、結果ページの読み込みが速くなります。 遅延読みこみの方法は以下の2つがあります。<ul><li>img要素に loading="lazy"属性を付与する</li><li>jsプラグインを使用する</li></ul><h3 id="h58aa235bd0">img要素に loading="lazy"属性を付与する</h3>簡単な方法は一つ目の方法です。コーディング時に↓のように記載することでブラウザが遅延読み込み処理を行ってくれます。<pre><code>&lt;img src="image.jpg" loading="lazy"&gt;</code></pre>ただこちらの方法は2021年7月現在Safariが対応されていないため、完全とは言えません。 <a href="https://caniuse.com/loading-lazy-attr" target="_blank" rel="noopener noreferrer">https://caniuse.com/loading-lazy-attr</a><h3 id="hec39b92563">jsプラグインを使用する</h3>こちらの方法は先程の属性を追加する方法に比べ全てのブラウザに対応できるのでおすすめの方法です。 遅延読み込みするプラグインはいくつか種類がありますが、弊社ではlazysizesというプラグインを使用しています。 jQueryに依存しないため軽量でメモリ消費も少ないです。 使い方はCDN経由でライブラリを読み込み、 <a href="https://cdnjs.com/libraries/lazysizes" target="_blank" rel="noopener noreferrer">https://cdnjs.com/libraries/lazysizes</a> 適用させたい画像に属性を指定するだけです。<pre><code>&lt;img data-src="image.jpg" class="lazyload"&gt;</code></pre>src属性をdata-src属性に変更する必要があるので、注意してください。<h2 id="h52f2055c7d">css,jsファイルを圧縮する</h2>表示速度改善の方法2つめはcss,jsファイルを圧縮するです。 通常cssファイルやjsファイルなどは↓のようになっているかと思いますが、 <img src="https://images.microcms-assets.io/assets/4cdd246a0eb54fe9b1f10b253ed0bdd5/2bc7a0ff32374b009fbd334ca1be189a/code-image1.webp" alt=""> これを圧縮すると↓のようになります。 <img src="https://images.microcms-assets.io/assets/4cdd246a0eb54fe9b1f10b253ed0bdd5/900c8beeb4454187a7f9399057613111/code-image2.webp" alt=""> コードが全て1行で書かれている状態になりファイルが軽量化されます。jsも同様です。 こちらもgulpやwebpackなどの知識が必要になりますので導入コストは少し高くなりますが、1度導入するとずっと使える&amp;画像圧縮以外のメリットありますので、余裕がある場合はぜひ導入しましょう。<h2 id="h346306edba">WordPressのプラグインをできるだけ使用しない</h2>こちらもWordPressでの話になりますが、プラグインを入れすぎてしまうとサイトが重くなってしまう原因にもなりますし、セキュリティホールが発生してしまう原因にもなります。無作為にプラグインを増やすのは注意しましょう。プラグインで実装する前に、「この機能はコードを書いて実装できないかな」と調べてみると意外とヒットしたりします。なるべくプラグインは10個以内に収めるようにしましょう。<h2 id="ha214098e44">まとめ</h2>以上がWebサイトの表示速度を向上させる方法4選でした。もちろんこれ以外の方法もたくさんあるのですが、今回は比較的導入コストが低いものを選定して書かせていただきました。 また、gulpやwebpack、lazysizesの設定など詳細を書けていないところもあるのですが、それは別の記事で書いていこうと思います。 AWA Bizではお客様の課題に寄り添い、効果の出るWebサイト制作を行っています。 案件のご相談・お見積はお問い合わせフォームからお気軽にご連絡ください。 <a href="/contact">お問い合わせはこちら</a>

小川匡教

Webサイトの表示を高速化するための方法4選

AWA Bizがご提供するWeb制作サービスの対象ブラウザ、保証環境は下記となります。 2021年7月のブラウザ・OSシェアを踏まえ決定しております。<h2 id="hc6ec87cc17">【PC】</h2>・Windows 10（Microsoft Edge、Google Chrome、Firefox最新版） ※IE対応が必要な場合は別途お見積もりさせていただきます。 ・Mac (OS10.15以降)（Safari、Google Chrome、Firefox最新版）<h2 id="hb8d3851a4f">【スマートフォン】</h2>・iOS 13以降（Safari最新版） ・Android 6以降（Google Chrome最新版） ・レスポンシブ対応の画面サイズは360px~とさせていただいております。旧iPhoneSEサイズ(横幅320px)への対応が必要な場合は別途お見積させていただきますので、ご連絡ください。

BLOG

CATEGORYPOSTS

Webサイト制作でフリーランスになるためのお仕事受注の方法6選

Webフリーランスがやってはいけない10の行動

コーダー目線から見るデザイナーにやってほしい９つのこと

Webサイトの表示を高速化するための方法4選

ホームページ制作時の対応環境（2021年8月）

CONTACT