tag:crieit.net,2005:https://crieit.net/users/morningcoding/feed takafumi/Brand Identity Designerの投稿 - Crieit Crieitでユーザーtakafumi/Brand Identity Designerによる最近の投稿 2019-08-28T00:19:29+09:00 https://crieit.net/users/morningcoding/feed tag:crieit.net,2005:PublicArticle/15358 2019-08-28T00:11:53+09:00 2019-08-28T00:19:29+09:00 https://crieit.net/posts/DesignBox デザイナー向けのタスク管理アプリDesignBoxを作りました <p><img src="https://morningcoding.me/wp-content/uploads/2019/08/design-box-1.png" alt="image" /></p> <p>みなさん、こんにちは!タカフミです!</p> <p>実は今月でフリーランスを始めてからちょうど1年になりました!この1年の間で色々な方とお会いして、今まで経験したことないようなお仕事をたくさんさせていただきました。この場を借りて、皆々様に深く御礼申し上げます。</p> <p>普通でしたらこのあたりで「<strong>フリーランスを1年経験してわかったこと!</strong>」や「<strong>フリーランスを始める前にやっておいた方が良かったこと</strong>」などの記事を書きたくなるものですが、そういうものに関してはすでに諸先輩方の有用な記事がたくさんあるので、そちらにお任せすることにします。</p> <p>この1年のフリーランス期間を通して、いろいろなお仕事をしながらもコツコツ作っていたものがあります。何かというと<a target="_blank" rel="nofollow noopener" href="https://www.designbox.tech/ja">DesignBox</a>というフリーランス・デザイナーさん向けの超シンプルなタスク管理アプリです。</p> <p><img src="https://morningcoding.me/wp-content/uploads/2019/08/design-box-image.png" alt="image" /></p> <p>DesignBoxという名前はなんとなく語呂がよくて、僕がよく使っているDropBoxとも名前が似ていたの気に入ってつけました笑</p> <p>今日は僕がフリーランスのデザイナー生活を通して、ある問題に気が付き<a target="_blank" rel="nofollow noopener" href="https://www.designbox.tech/ja">DesignBox</a>を作るにあたった経緯についてお話したい思います!</p> <hr /> <h1 id="すべては1年前から始まりました"><a href="#%E3%81%99%E3%81%B9%E3%81%A6%E3%81%AF1%E5%B9%B4%E5%89%8D%E3%81%8B%E3%82%89%E5%A7%8B%E3%81%BE%E3%82%8A%E3%81%BE%E3%81%97%E3%81%9F">すべては1年前から始まりました</a></h1> <p>プロフィール文のところに小さく書かれていますが、フリーランスになる前には教育系ベンチャー企業で3年半ほどエンジニア兼デザイナーとして働いていました。アプリやウェブサイトのデザインから開発、CIデザインなども任せていただけて本当にたくさんの経験をさせていただくことができました。名刺やスタンプカードからロゴ、アプリ開発などに関わりなんでも屋さんとして働いていました。長いようであっという間の3年半の間で、一回りも二回りも大きく成長することができました。</p> <p>僕がデザインしたウェブサイトを見て「この会社で働いてみたいと思ったんです」と言ってもらえたり、何かデザインしたもので周りの人に喜んで貰えることが何よりも嬉しくて、働くことを通してデザインすることの喜びや楽しみを感じられるようになりました。人を笑顔にしたり、喜ばせることが出来る「<strong>デザインの力</strong>」に気がついた瞬間でもありました。</p> <p>そこで色々と経験した後、いつしか「<strong>他にも自分のデザインを必要としている人がいるのではないか</strong>」と考えるようになりました。他にも家庭の事情などもあり、「<strong>世界中の人をデザインで幸せにする</strong>」をミッションに掲げてフリーランスとして働くことに決めました!</p> <p><img src="https://morningcoding.me/wp-content/uploads/2019/08/thai.jpeg" alt="タイ旅行でドナルドと一緒に" /></p> <h1 id="デザインに集中したいのに。。。"><a href="#%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AB%E9%9B%86%E4%B8%AD%E3%81%97%E3%81%9F%E3%81%84%E3%81%AE%E3%81%AB%E3%80%82%E3%80%82%E3%80%82">デザインに集中したいのに。。。</a></h1> <p>フリーランスのデザイナーとしてスタートして、見積もりに請求書や税務など当初は分からないことばかりでした。でも、幸運なことに素敵なクライアントさんに恵まれたおかげで日々楽しく働くことができました。</p> <p>ただ一方でクライアントさんが増えてくるにつれて、依頼されたお仕事を管理することにストレスを感じるようにもなってきました。デザインすることは楽しいのに、案件を管理するのにうんざりしてしまったのです。</p> <p>それまではタスク管理ツールとしてWunderlistを使っていました。デザインもシンプルで簡単にタスクを追加、完了できるのでとっても気に入っていました。今でも、個人的なタスクを管理するために使っているほどです。ただ、自分の仕事の用途にはあまり向いていませんでした。</p> <p>ここで、ちょっと普段のデザイン業務の流れについて説明させていただきます。案件の大小によって若干の違いはありますが、概ね次のような流れになります。</p> <h2 id="(1)クライアントさんから依頼がくる"><a href="#%EF%BC%88%EF%BC%91%EF%BC%89%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3%E3%83%88%E3%81%95%E3%82%93%E3%81%8B%E3%82%89%E4%BE%9D%E9%A0%BC%E3%81%8C%E3%81%8F%E3%82%8B">(1)クライアントさんから依頼がくる</a></h2> <p>クライアントさんからSlackやメールなどを通じてご依頼を受けたら、Wunderllistに依頼内容が分かるようにタスクを追加します。詳細についてはメモ機能があるので、そこに保存をします。</p> <h2 id="(2)案件用のフォルダを作成"><a href="#%EF%BC%88%EF%BC%92%EF%BC%89%E6%A1%88%E4%BB%B6%E7%94%A8%E3%81%AE%E3%83%95%E3%82%A9%E3%83%AB%E3%83%80%E3%82%92%E4%BD%9C%E6%88%90">(2)案件用のフォルダを作成</a></h2> <p>成果物を保存するためのフォルダを自分のコンピュータ上に作成します。このフォルダにはクライアントさんから貰った、画像素材やテキスト情報などのデータも一緒に保管をしています。</p> <h2 id="(3)数日後になって、デザイン業務に取り掛かる"><a href="#%EF%BC%88%EF%BC%93%EF%BC%89%E6%95%B0%E6%97%A5%E5%BE%8C%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%A6%E3%80%81%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%A5%AD%E5%8B%99%E3%81%AB%E5%8F%96%E3%82%8A%E6%8E%9B%E3%81%8B%E3%82%8B">(3)数日後になって、デザイン業務に取り掛かる</a></h2> <p>いいアイデアを思いつくのに時間がかかったり、納期まで余裕があるので他の案件との兼ね合いも見ながら、数日後になっていいアイデアが思いついてからデザイン業務に取り掛かるようにしています。</p> <p>ただ、ここである問題に気が付きました。</p> <p>それは何かというと、数日前に作成した案件用のフォルダを見つけるのに時間がかかってしまうということです。クライアントさんの名前別にフォルダを作成して保存はしているのですが、正確なフォルダの位置をはっきりと覚えていないので、フォルダの奥深くまで潜ったり、あっちでもこっちでもないとフォルダを行ったり来たりすることがありました。</p> <p>最初のうちは辛抱強く探していたのですが、こんな事が1度や2度ではなく何度もあったためウンザリしていました。。あるクライアントさんに「<strong>去年作って貰った名刺の背景を変えたものを用意して欲しい</strong>」と言われたことがあったのですが、数日前の記憶すら忘れてしまう僕にとっては至難の技でした笑。1時間以上かけてフォルダを探してみたのですが、結局見つからずゼロからデータを作成するなんて事もあったのです。</p> <p>「<strong>デザイン業務に集中したいのに、どうしてフォルダを見つける事にこんな時間が掛かってしまうんだろう。。</strong>」もうこれ以上、こんな無駄で楽しくないことはしたくないと感じるようになりました。</p> <h1 id="解決方法はシンプルなのに、アプリがない。"><a href="#%E8%A7%A3%E6%B1%BA%E6%96%B9%E6%B3%95%E3%81%AF%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%81%AA%E3%81%AE%E3%81%AB%E3%80%81%E3%82%A2%E3%83%97%E3%83%AA%E3%81%8C%E3%81%AA%E3%81%84%E3%80%82">解決方法はシンプルなのに、アプリがない。</a></h1> <p>どうしてこんなことが起きるのだろうと小一時間考えたみたら、すぐに原因がわかりました!</p> <p>それは、タスクとそれに関連するフォルダとの紐付けが一切ないからでした。よくあるタスク管理アプリではファイルのアップロードやメンバーとのチャット、ボイスメッセージの機能はあるのに僕が必要としている機能はなかったのです。</p> <p>もしかしたら、僕が知らないだけで不満を解消してくれるものが他にあるかもしれないと思い、出来る限り調べてみたのですが1つも見つかりませんでした。考えてみたら、それもそのはずで一般的なタスク管理アプリは「牛乳を買う」「ゴミ出しをする」<strong>などの日常生活でおこる一般的なタスクを管理する人向け</strong>に作られていることがほとんどで、デザイナーさんのようにタスクがコンピュータ上のデータと関連するような場合については考えられていないからでした。</p> <p>「<strong>もうフォルダ探したくない問題</strong>」に対する解決策はとっても簡単で、あるタスクに対して特定のフォルダを関連づけるシンプルなアプリがあればいいだけでした。「<strong>他にアプリはないし、でもこれ以上フォルダを探したくない。。なら自分でつくるっきゃないよね!</strong>」ということから<strong>フリーランスのデザイナーさん向けのタスク管理アプリ</strong>を作ることに決めました!</p> <p>macOSアプリの開発経験は全く無く、なんとかなるだろう精神で完全に見切り発車したのですが、結果的には絶望的に情報量やノウハウが少なくて何度も挫けそうになりました笑</p> <p>紆余曲折あって出来上がったのが<a target="_blank" rel="nofollow noopener" href="https://www.designbox.tech/ja">DesignBox</a>です!</p> <p><img src="https://morningcoding.me/wp-content/uploads/2019/08/1_BVsISJ9k39cKvgBvsUqJBA.jpeg" alt="DesignBoxのラフスケッチ。ここから形にするまで長い道のりでした。。。" /></p> <hr /> <h1 id="普段の業務で僕はこんな風にDesignBoxを使っています"><a href="#%E6%99%AE%E6%AE%B5%E3%81%AE%E6%A5%AD%E5%8B%99%E3%81%A7%E5%83%95%E3%81%AF%E3%81%93%E3%82%93%E3%81%AA%E9%A2%A8%E3%81%ABDesignBox%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%84%E3%81%BE%E3%81%99">普段の業務で僕はこんな風にDesignBoxを使っています</a></h1> <p>リリースしたばかりで全くといってユーザーさんがいないので、僕以上にDesignBoxを使っている人は現在いないと思います笑 普段の業務でもガッツリ使っているので、ここではどんな風に使っているのかをお話したいと思います。</p> <h2 id="1. リストを作成する"><a href="#1.+%E3%83%AA%E3%82%B9%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B">1. リストを作成する</a></h2> <p>新しいクライアントさんからお仕事のご依頼を受けたら、クライアントさんの名前を入力してリストを追加します。リストに付ける名前はクライアントさんの名前だけに限らず、プロジェクトの名前でもいいですし、とにかく自分がわかりやすい名前で付けるのがオススメです。</p> <div class="iframe-wrapper"><iframe width="560" height="315" src="https://www.youtube.com/embed/6KVsLl_ArzE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div> <h2 id="2.タスクを作成する"><a href="#2.%E3%82%BF%E3%82%B9%E3%82%AF%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B">2.タスクを作成する</a></h2> <p>リストからタスクを追加したいクライアントさんなどを選択したら、依頼内容が分かるようにタスク名を入力して作成します。大きなメモ帳も用意しているので、そこに依頼内容の詳細情報を入力したり、進捗状況などをメモしたりします。</p> <div class="iframe-wrapper"><iframe width="560" height="315" src="https://www.youtube.com/embed/h_HRyhxjumw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div> <h2 id="3. 期限を設定する"><a href="#3.+%E6%9C%9F%E9%99%90%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B">3. 期限を設定する</a></h2> <p>納期をしっかりと守れるように期限を設定するようにしています。タスク右上にあるカレンダーアイコンから簡単に設定できます。ちなみに、リスト横にあるバッジの色が期限までの猶予を表しています。青>黄>赤の順に納期が迫っていることを教えてくれます。</p> <div class="iframe-wrapper"><iframe width="560" height="315" src="https://www.youtube.com/embed/H2KK4MkhCYQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div> <h2 id="4. フォルダを作成してワークスペースとして設定する"><a href="#4.+%E3%83%95%E3%82%A9%E3%83%AB%E3%83%80%E3%82%92%E4%BD%9C%E6%88%90%E3%81%97%E3%81%A6%E3%83%AF%E3%83%BC%E3%82%AF%E3%82%B9%E3%83%9A%E3%83%BC%E3%82%B9%E3%81%A8%E3%81%97%E3%81%A6%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B">4. フォルダを作成してワークスペースとして設定する</a></h2> <p>タスク用のフォルダを作成して、そのフォルダをワークスペースとして設定します。これを設定することで、タスクと特定のフォルダを関連付けることができます。あとは、そのフォルダにクライアントさんから貰った画像やテキストデータなどを移動させるようにしています。</p> <div class="iframe-wrapper"><iframe width="560" height="315" src="https://www.youtube.com/embed/zMVeN43xt9M" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div> <h2 id="5. やっと業務にとりかかる"><a href="#5.+%E3%82%84%E3%81%A3%E3%81%A8%E6%A5%AD%E5%8B%99%E3%81%AB%E3%81%A8%E3%82%8A%E3%81%8B%E3%81%8B%E3%82%8B">5. やっと業務にとりかかる</a></h2> <p>やっといいアイデアが思いついたらデザイン業務にとりかかります。リストやタスクの一覧から探してもいいのですが、僕の場合は右上の検索バーにキーワードを入力することが多いです。タスク名はもちろん、メモ帳の内容も検索対象に含まれるのですぐに目的のタスクを見つけることができます。あとは、そのタスクを選択するだけで関連する作業フォルダが自動的に表示されます!!以前の僕ならここですごく時間が掛かっていたので、たったこれだけでも本当に助かります(^^)</p> <div class="iframe-wrapper"><iframe width="560" height="315" src="https://www.youtube.com/embed/_T5P6192fsU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div> <h2 id="6. タスク完了!"><a href="#6.%E3%80%80%E3%82%BF%E3%82%B9%E3%82%AF%E5%AE%8C%E4%BA%86%EF%BC%81">6. タスク完了!</a></h2> <p>待ちにまった感動の瞬間です。。納品が完了したらチェックボタンをクリックして納品完了です!もっと爽快感のある音に出来ないか現在検討中です。</p> <div class="iframe-wrapper"><iframe width="560" height="315" src="https://www.youtube.com/embed/oqA5yic4ZmQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div> <hr /> <p>DesignBoxは現在も絶賛アップデート中です。あれもこれも出来たらいいからと機能を追加することはなく、あくまで「シンプルで簡単」をモットーにデザイン業務に集中できるタスク管理アプリを目指しています!</p> <p>一人でも多くの人に<a target="_blank" rel="nofollow noopener" href="https://www.designbox.tech/ja">DesignBox</a>を使ってもらって、幸せになってもらえたら嬉しいです。アプリのアップデート情報については、<a target="_blank" rel="nofollow noopener" href="https://www.designbox.tech/ja">DesignBox</a>もしくは僕の<a target="_blank" rel="nofollow noopener" href="https://twitter.com/morningcoding">ツイッター</a>をご覧ください。</p> <p>それではみなさん素敵なデザインライフをお楽しみください!</p> takafumi/Brand Identity Designer