学習は、時間をかければ必ず終わる。

営業は、数をこなせば必ず受注できる。

でも・・・

「感謝の声」や「リピート」は、

時間をかけ、数をこなすだけで増えていくことはありません。

デザインを納品するのはデザイナーとして当たり前。

その先のディレクター・コーダーさんのことを配慮できていますか？

自己紹介

このページを見てくださり本当にありがとうございます！

フリーランスデザイナーの”おもか”と申します。

初めましての方も多いかと思いますので、

はじめに自己紹介をさせていただきます！

2022年1月、育休中にデザインの学習を開始。

2022年3月に知り合いからデザインのお仕事をいただき、4月に初報酬。

その後、会社員として復職し、

本業の傍ら、複数の知り合いからデザインのお仕事をいただくものの

収入はかなり不安定だったことから、2022年7月に営業を開始。

9月には会社員を辞め、11月には月50万を達成しました。

デザイン学習中から現在も

平日はワンオペ、土日祝日の日中は稼働していませんが、

昨年2023年は、継続やご紹介、SNSやポートフォリオからのお声がけで

営業はせずとも、デザインの制作で月平均60万

今年に入ってからは、デザイン制作の稼働時間を抑え

平日週4日程度、1日5〜6時間稼働で、制作の収益は月平均45万ほどです。

これまで何度も挫折を経験

こうして今では、

仕事のスケジュールを自分でコントロールすることが

できるようになってきましたが、

元々はごくごく普通の会社員でした。

毎日片道1時間以上の通勤がつらい...

満員電車がつらい...

残業が当たり前の社風で疲弊...

仕事しない同僚に仕事を押し付けられる...

そんな毎日から抜け出したくて

仕方ありませんでした。

ゆくゆくは子どもも欲しいし、

こんな働き方では続けられない...！と

実は、2017年の秋頃から

個人で稼ぐための道を探しはじめました。

整理収納アドバイザーの資格を取ったり、

ミシンを買ってハンドメイドを初めてみたり、

SNSを始めたり、

プログラミングスクールに通ってみたり

と本当にいろんなことにチャレンジしましたが、

どれも続きませんでした。

何をしても続かない、

何をしても失敗していた私ですが、

デザインに出会い、

フリーランス3年目を迎えた

今となっては割と自由度があがり、

楽しく活動できるようになってきました。

平日はフリーランス仲間とランチに行って情報交換をしたり

バドミントンで一緒に汗を流したり、

そして、沖縄や北海道などの遠方の仲間にも

気軽に会いに行けるようになりました。

未経験からフリーランスデザイナーになるのは簡単なことではない

ただ、ここまでの経験を踏まえて

痛感していることは

「未経験からフリーランスのデザイナーとして活動を始めるのは

全然簡単なことではなかった・・・」

ということです。

正直、私もデザインスクールで学んだ後は、

どう案件をいただけるようになるのか全くわからず

スクール卒業後

1ヶ月目は 10,500円

2ヶ月目は 11,000円

3ヶ月目は 998円

と収益も全然伸びなくて悩んだ過去があります。

また現在は、サイトの案件が10割を占めていますが、

副業でデザインをしていた期間や

独立して1年3ヶ月間の合計1年半ほどは、

画像の制作などの案件自体が比較的小さめなお仕事がメインでした。

画像制作は、サイトと比べると単価は低く、

規模が小さいので、

ご依頼から納品までの期間が短い案件が

大量に手元にある状態が続いていました。

規模が大きくても小さくても

定期的に打ち合わせが入ったり、

お取引先との連絡のやり取りがあったりと

コミュニケーションコストはそれほど変わりません。

たとえ小さい金額でも

毎月請求書の発行が発生するので、

請求周りにかかる時間はむしろ増えます。

こんな感じで、

「なんか忙しい」

という日々に追われていました。

そう、

大学卒業後、会社員としてキャリアしか経験してこなかった私には

フリーランスという働き方は想像の何倍も大変で

「自由」とは程遠いものだったんです。

これまでに経験がない新しいことを始めるのだから、

当たり前ですが、それなりに時間はかかります。

未経験からフリーランスになるなら「量」をこなすための「工夫」が必要

お客様からの信頼をつかんでいくためにも

未経験からフリーランスとして生き残っていくためにも

それなりの「量」をこなす必要はあるなと

強く感じています。

そして、

その「量」をこなすために

必要なことが「工夫」です。

気持ちや体力だけでどうこうする時期も

一時的には必要かもしれませんが、

それだとフリーランスとして長生きはできません。

デザインは、

サイトの目的やターゲット像に合わせて作成をしていきますが

だからこそ

・お客様の要望を理解すること

・コンセプトとずれていないか・情報をどう整理してどう見せるのがベストか等を考えること

こういったことに時間がかかります。

もし

お客様との認識がずれてしまうと

終わらない修正対応に疲弊することになり、

お客様からの信頼も得ることができないので、

継続的なお取引もなくなってしまいます。

本来、デザイナーがこうした時間をかけなければいけないことに

しっかりと時間を使っていくためにも、

それ以外の作業は

仕組み化をするなど「工夫」をすることで

圧縮していくことが必ず必要になってくる

と私自身も痛感しています。

前回リリースしたまとめ集は「初稿提出」の攻略法。今回は「納品」の攻略法。

繰り返しになりますが、

本来、デザイナーが時間をかけなければいけないこと

それは

・お客様の要望を理解すること

・コンセプトとずれていないか・情報をどう整理してどう見せるのがベストか等を考えること

それ以外の作業は

仕組み化をするなど「工夫」をすることで

圧縮する必要がある

そういった理由で

・Figmaデザインパーツまとめ集

・複数案件に対応するためのテクニック10選

を昨年、2023年にリリースしました。

https://brain-market.com/u/omoka/a/b3kTM5gTMgoTZsNWa0JXY

それ以外にも

私は、小さいところで「工夫」を繰り返し

「量」をこなすための努力を続けてきました。

「工夫」をし「量」をこなせば、

制作物の「質」は少しずつ上がってくるうえ、

案件の対応スピードが上がり、

結果的に案件の単価が上がります。

そこでようやく

未経験フリーランスでも

自由な時間が増えていく

だから

フリーランスとして生き残っていくためのには

「工夫」のための意識や行動が必要不可欠です。

前回の「Figmaデザインパーツまとめ集」では

クオリティを高めること、

「デザイン着手時・初稿提出までの作業」を圧縮することに着目しましたが、

今回着目したのは、「デザイン納品時」です。

納品する際の”仕上げ方”を少し変えるだけで

お客様からの評価って変わると思っています。

皆さんは、デザインを納品した時、

ディレクターやコーダーさんと

「ここの動きはどういったものをイメージしていますか？」

「ここの動きの参考サイトをください」

といったコミュニケーションが発生してしまう

ことがありませんでしたか？

私はこれまで、30社以上とお取引をしてきて

継続案件が来なかったのは4社のみで

ディレクター・コーダーさんのお仕事に

ご迷惑をかけないようにするための”デザインの仕上げ方”に

リピートでお仕事をいただけるポイントがあるのではと思っています。

そこで今回は、

これまで私が制作をする中で

こつこつ続けていた「工夫」の一つである

デザインの”仕上げ方”マニュアル

〜ボタンホバーアニメーション編〜

として、皆さんにもご活用いただけるように

時間をかけてブラッシュアップを行いました。

デザインを”仕上げる”とはどういうこと？

ずばり、デザインの "仕上げ方"とは

お客様へデザインを提案する際に、デザインの意図とともに

アニメーションのイメージをお伝えしたり、

コーダーさんへアニメーションについての説明をするための

「指示書」を作成すること、

そして、

ディレクターさんやコーダさんが

無駄に考えて悩んでしまう時間を

削減する配慮のことを指しています...！

デザインの”仕上げ”をマスターできると・・・

デザインの仕上げを丁寧に行うことで、

「細部まで丁寧にありがとうございます！」

「コーディングしやすくて助かります！！」

とディレクターさんからもコーダーさんからも喜ばれ、

信頼を得ることができ、

リピート率87%という結果につながっているなと感じています...！

学習は、時間をかければ必ず終わる。

営業は、数をこなせば必ず受注できる。

でも、

「リピート」は、

時間をかけて数をこなすだけで増えていくことはありません。

制作会社様・ディレクターさん、コーダーさんから

「助かります！」

「いつもご丁寧に作業いただき本当にありがとうございます！」

と感謝され、リピートをいただけるポイントは

デザインを作った”だけ”になっていないから

デザインの”仕上げ”まで行っているから

であると感じています。

逆に、

アニメーションの動きのイメージをお客様やコーダーさんに提示したことがない...！

提示方法もわからない...！

という状態だと

ディレクターやコーダーさんと

「ここの動きはどういったものをイメージしていますか？」

「ここの動きの参考サイトをください」

といったコミュニケーションが発生してしまいます。

でもこのデザインの”仕上げ”は時間もかかる

サイトのデザインをお客様へご提案する際や

コーダーさんへデザインを提示する際、

アニメーションの動きも下記のようにお伝えしています。

↑コーダーさんへお渡しをするコーディングの際に必要な情報をまとめた「指示書」の一部（例1）

↑コーダーさんへお渡しをするコーディングの際に必要な情報をまとめた「指示書」の一部（例2）

↑コーダーさんへお渡しをするコーディングの際に必要な情報をまとめた「指示書」の一部（例3）

私は、具体的にどんな動きになるのかが伝わるような、

参考URLも一緒にご提示していますが、

・自分でアニメーションのイメージを膨らませたあとに、具体的にどんな動きになるのか参考サイトをリサーチするための作業（もしくはアイディアを膨らませるためのリサーチ作業）

・お客様やコーダーさんへ動きを提示する際の資料の作成

こういったデザインを仕上げるための時間って

結構かかるかなと思います…！

「デザインの”仕上げ方”マニュアル〜ボタンホバーアニメーション編〜」で作業を圧縮

私はこれまでアニメーションのリサーチをするたびに、

このようにスプレッドシートに、

自分のイメージした動きが表現されているサイトのURLをまとめてきました。

（自分用なので、綺麗にまとまっているとは言えないものですが）

もちろん、制作するサイトによって

アニメーションでの表現方法も何通りもあるので、

ここにまとめてきた内容では網羅できていないこともたくさんあります。

そして、制作の度にリサーチは必要です。

ただ、

こうしてリサーチしたものをまとめることによって、

動きのパターンの引き出しが増え、

アイディア出しとリサーチ時間を短縮できるようになりました。

（アニメーションの動きパターンが網羅されているので、それを基本にボタンのデザインやアニメーションのアイディアを出すことができるようになります！）

そもそもアイディアの引き出しが少ないために

「毎回同じような動きのボタンデザインになってしまう...」

といった事態もなくなります。

また、

コーディングの際に必要な情報をまとめた「指示書」を作成する時間も

動きの説明や参考サイトURLを

まとめシートからコピーをして、貼り付ければ良くなるため、

作業時間が短くなりました。

今回は、私だけでなく皆さんにも使っていただけるように

特に使用頻度の高いリンク、ハンバーガーメニューを含む

ボタンのアニメーションを100パターンFigmaにまとめています！

▼ リンク・ボタン

↑写真は一部です。こちらに表示されているのが全部で30パターン分になります。

▼ ハンバーガーメニュー

↑写真は一部です。こちらに表示されているのが全部で10パターン分になります。

この「ボタンホバーアニメーションまとめ集」の活用方法を

実際にコーダーさんへお渡しする「指示書」を

作成する手順をお見せしながら

説明している「解説動画」をつけているので、

「指示書」を作成したことがない方にも

簡単に作成することができるようになっています。

そして、

「ボタンホバーアニメーションまとめ集」の解説動画のほか、

・100通りのボタンホバーアニメーションまとめ集のFigmaファイル

・コーディングの際に必要な情報をまとめた「指示書」のFigmaのファイル（テンプレート + 一例）

・お客様へご提示する際の資料（一例）

をお渡ししているので、

ご自身が制作されているサイトに合わせて、

資料やボタン・リンクを参考にしたり、

カスタマイズしてお使いいただいて構いません。

※ ボタンやリンクについては、矢印の種類も複数用意しているので、簡単に何パターンものボタンを作成することができるようにもしてあります。活用方法は解説動画をご覧ください。

特典について

🎁特典1

知っておかないと納品時に迷惑をかける

「デザインの仕上げ方マニュアル」

〜39個のFigmaデザインデータチェック項目編〜

デザインは

ご依頼してくださった方、

そして、それを見たり使ってくださったりする

全てのお客様のために制作をするのはもちろん、

サイトであれば、デザインを再現してくださる

コーダーさんのためにも制作する必要があります...！

私は、普段からコーダーさんに

「ストレスなくコーディングできた」「時短になる」

と感謝いただけるデザインカンプを意識して制作をしています。

今回、お客様にもコーダーさんにも喜ばれるための

39個のFigmaデザインデータチェック項目をまとめました。

これをお客様へデザインを提出する前の

チェックシートとして活用することで

・確認のスピードをあげ

・修正の手間を省き

・お客様からも信頼をいただける

そして、これらを踏まえてデザインを制作できると

コーダーさんとのコミュニケーションコストも削減することができます。

特典としてお渡しするものは

①39個のFigmaデザインデータチェック項目の説明動画

②解説資料

③資料のFigma元データ

となります。

ぜひ制作前に、そして制作後に、目を通していただき、

デザインカンプの質を高めるきっかけとなったら嬉しく思います！

🎁特典2

デザイン前の面倒な作業を1/3にするレイアウトまとめ

皆さんは、下記のような2カラムや3カラムのレイアウトをFigma上で作成する際、

制作しているコンテンツ幅に対する要素のサイズや余白サイズを計算していますか？

私はこれまで、こういったレイアウトを作成する際、

（制作するコンテンツ幅ー要素と要素の間の余白サイズ） ÷ カラム数 = 1つあたりの要素サイズ

の計算を行っていました。

もしくは、「Split Object」という

https://www.figma.com/community/plugin/1213372340497135821/split-object

こちらのFigmaのプラグインを用いて要素の分割を行っていました。

（Split Objectは、水平方向と垂直方向のパーティション数、水平方向と垂直方向の隙間を指定することで、オブジェクトを簡単に分割できるプラグインです）

確かに、このプラグインを使えば、

電卓で計算をするよりは要素を素早く分割することができ、

作業効率は向上しますが、プラグインを起動して、

数値を設定するのも多少の手間はかかります。

そもそも計算したり、プラグインを用いて

実際にFigmaに要素を配置した後に

「もうちょっと要素を大きくしたい」

「余白サイズを調整したい」

という場合も出てくるかなと思います。

そこで、私は、

このように要素のサイズや余白のサイズ感を一覧で確認ができて、

必要なレイアウトをパッとコピーするだけで

そのまま活用できるレイアウトまとめを作成して、

制作をするようになり、Figma上の作業効率は上がりました。

（7種類のコンテンツ幅があり、1つのコンテンツ幅あたり15以上のレイアウトパターンを用意しています。）

↑ ファイル全体

（↑ファイル全体を拡大したときのスクリーンショット）

この特典では

デザインを制作する際のコンテンツ幅の決め方についてについて言及し、

その後、

上記のFigmaレイアウトまとめ集の活用方法について、

事例を用いて解説をしています。

特典としてお渡しするものは

①Figmaのデータ

②事例を用いた活用方法を説明している解説動画

になります。

ぜひ活用いただけたら嬉しいです！

本Brainの対象者

本Brainn

「デザインの仕上げ方マニュアル」

〜ボタンホバーアニメーション編〜

及び

特典1

「デザインの仕上げ方マニュアル」

〜39個のFigmaデザインデータチェック項目編〜

特典2

デザイン前の面倒な作業を1/3にするレイアウトまとめ

は、主にFigmaを用いてWebサイトの制作を行っている方を対象としています。

本Brainは更新型コンテンツです

本Brain

「デザインの仕上げ方マニュアル」

〜ボタンホバーアニメーション編〜

は、随時ブラッシュアップを行っていきます。

不定期の更新にはなりますが、

ボタンホバーアニメーションのパターンが増えた場合にも、

一度購入すれば、追加料金はかかりません。

購入する前の注意点

①

今回、ボタンやリンクのパーツをFigmaのデータとともにお渡しいたしますが

デザインパーツはそのまま使用しないでください。

デザインは、

目的やコンセプト、ターゲット像に合わせて制作するものです。

カラーや余白、フォント等、必ず制作しているデザインに合わせて変更してください。

②

Figma以外のデザインツールを用いて

お仕事をすることが多い方には

本Brainはあまりおすすめできません。

とはいえ、私としてはFigmaでの作業にも慣れておくと

とてもいいかなと思っています。

それは、

・ブラウザでも操作可能なので手軽である（お客様へのご連携もしやすい）

・チームでのリアルタイム共有や同時編集も可能である

ことから、デザイナーとして活動をするのであれば

今後活用する機会も出てくる可能性があるためです。

③

本Brainでお渡しする

Figmaのシートは、

あくまで私のこれまでの経験に基づいて、

皆さんでも実際に活用できるようにしたものです。

ただ、

Figmaの機能は更新されることもありますし、

人によっては、この方法がやりやすい、

この方法がやりにくいということもあるはずです。

こちらに関しては、ご自身のデザイン業務に落とし込んで

いいところだけ取り入れるようにしていただくのが

ベストであると感じております。

一作成方法であるということを

ご了承いただければと思います。

④

Figmaの機能についての解説や

Figmaの使い方に関する講義は本Brainではしておりません。

⑤

Figmaファイルは、いかなる媒体でも公開する事を禁じます。

発見した場合は、法的な措置を取らせていただきます。

最後にどうしてもお伝えたいこと「働きすぎデザイナーをゼロに」

ここまで読んでくださり本当にありがとうございます！

最後に、私が伝えたかったのは

「働きすぎてるママさんやデザイナーさんをゼロにしたい」

ということなんです。

「おもかさんは行動量がすごい」

「おもかさんに比べたら私なんてまだまだ」

「おもかさんは誰よりも働いている」

と私の普段のツイートや

プレゼント企画の内容などを見てくださっている方、

そして、オフ会で会った方からも言っていただけるのですが、

（確かに駆け出しの時はずっっっと仕事してました。笑）

そんな私を目指してストイックに行動しすぎた結果、

プライベートが一切ない・体調を壊す・気持ちにも時間にも余裕がない、

そんなデザイナーさんが増えたら悲しいのです。

私が目指しているのは

たくさん稼働して月100万稼ぐ！とか

まわりから「すごい頑張ってる！」

と言っていただくことではないんです。

もともと私がデザインを始めた

2年半前の目標は

「24時間デザインすること」ではなく

「子どもが小学校を入学するまでに

　平日5時間労働で月50万を稼げるようになる」でした。

今では、その目標の状態に近づき、

自分のペースで仕事したり休んだりできるようになったのは

これまで

営業やSNSで制作実績を発信し

デザインの制作単価を少しずつ上げ、

WF作成〜デザイン〜コーディングまでを

まるっとお任せいただくことによって受注額を伸ばし

（コーディングは外注です）

「Figmaデザインパーツまとめ集」でもお伝えしていますが、

効率化できるところは徹底的に効率化してきたからです。

そして、

以前、X上で土下座して謝罪したときにもお話ししましたが

私の今の目標である

「子供の延長保育をゼロにする」

「働きすぎデザイナーをゼロにする」

これらを実現するために

自分にできることは何かを考えた結果、

今回、この

「デザインの仕上げ方マニュアル」

〜ボタンホバーアニメーション編〜

を公開することを決めました。

これまでお伝えしてきたとおり、

未経験からフリーランスのデザイナーとして活動を始めるのは

全然簡単なことではない

これが私がデザインスクールを卒業して

突きつけられた現実です。

そして、

フリーランスを続けていくこともまた

決して楽なことではありません。

だから

お客様にも一緒に働くコーダーさんにも喜んでいただける

「配慮」や「工夫」が必要であり、

本来、デザイナーが時間をかけなければいけないことに

しっかりと時間を使っていくためにも、

それ以外の作業は圧縮するための「工夫」が必要であると

強く感じています。

たとえその「工夫」が小さくても

いろんな「工夫」を凝らすことで

・リピートをいただけるようになる

・案件の対応スピードが上がる

・案件単価が上がる

結果的に

「未経験フリーランスでも自由な時間が増えていく」

と思っています。

これを読んでくださっている皆さんにも

私と同じような状況になって欲しい、

一緒にデザイナーとして楽しく活動していきたい

と心から思っています。

おもか