{"componentChunkName":"component---src-templates-blog-post-tsx","path":"/2019/12/06/how-to-create-logo-for-private-project/","result":{"data":{"markdownRemark":{"id":"2650f039-0645-5193-8a8b-c262213276c0","html":"

こちらは個人開発 Advent Calendar 2019の16日目の投稿になります。

\n

個人開発とのことで技術的なところを書く方がほとんどかと思うので私の方では、\n個人サービスを作る時のアイコンの作り方について書いて行きます。

\n

はじめに

\n

自己紹介

\n

私自身デザイナーの経験があったりするわけではなく、最初はRailsから始まり、徐々にReactも触るようになり、\n結果的にフルスタックっぽい形でサーバからフロント、React Nativeなどを触りながらフリーランスとしてお仕事させて頂いています。

\n

またその傍ら

\n

PaPyrus

\n

という個人アプリを開発しています。

\n\n \"papyrus\"\n\n

こちらのアプリを作るまでにもいくつか自分でサービスを作って公開してみたことがあるのですが、\nやっぱり機能の実装に手が回らないのと、そもそもデザインの基礎的なところがかけていたりして、\nどうもいい感じのイケてるアイコンを作ることができませんでした。

\n

ただ、今回のサービスは個人的に知り合いのデザイナーさんのアドバイスを元に「いい感じのアイコンができた！」という手応えがあったので、\nアイコンを作るまでのプロセスについてまとめていこうと思います。この手順さえ守れば誰でも思い通りのアイコンが作れる！というものではないですが、\n他で個人開発をされる方の参考になればという形です。

\n

PaPyrusについて

\n

現在開発中のPaPyrusはElectronで開発されたMac上で動作する(今のところMacでしか動作確認できていません）マークダウンメモアプリです。

\n

メモアプリというと「ノートを整理」する機能がついているものが普通かと思うのですが、\nズボラな私は

\n

「ノートを書くのは良いもののノートが整理できない」

\n

という問題に頭を抱えていました。

\n

ブログの下書きのようなものはEvernoteやInkdrop, Boostnoteなどなど世にある優秀なメモアプリで十分対応できるのですが、

\n\n

などなど、寿命の短いメモをこれらのメモアプリに残すとたちまちゴミノートが溜まっていってしまうので、\nこれらのメモアプリとは別に自分には、

\n

「落書きをしたりアイデアをまとめる裏紙」

\n

みたいなアプリが必要でした。

\n

これに一番近いアプリがMacのstickiesで、しばらくこれをつかっていたのですがstickiesはマークダウンが使えないので、

\n

「ちょっと機能を足したアプリが欲しい・・・」

\n

ということでstickiesにマークダウンを足した付箋型メモアプリを作りました。

\n

ベータ版を公開中で会員登録をして頂ければアプリをダウンロードして使って頂けます。\nまだまだ改善の余地の多いアプリですが、興味あれば触っていただけると嬉しいです。

\n
\n

PaPyrusのアイコン

\n

前をきはこれぐらいにして、早速アイコンの話に移ります。\nPaPyrusはデザインも実装も自分でやっているのですが、もちろんアイコンも自分がデザインしました。\nそんなPaPyrusのアイコンはこちらです。

\n\"papyrus\n

どうですかね？

\n

これまでに数件個人サービスのようなものを作ってみたことがあるのですが、アイコンがどうしてもみていられないほど\nダサくなってしまっていました。そんな中で、今回のPaPyrusのアイコンは個人的にベストな出来だったのと、「アイコンってこうやって作るのね」みたいな\n部分がぼんやり見えたので、ここで言語化しておくことにしました。

\n

個人サービスのアイコンの作り方

\n

今回はPaPyrusのアイコンを作るにあたり、アプリのデザインに見合ったカッコいいロゴを作りたいということで、\n知り合いのデザイナーさんにアイコンの作り方を相談しました。\nそのアドバイス+一部ググった内容+をまとめると下記のような手順になります。

\n
    \n
  1. アイコンの元になる対象物を決める
    2. \n
  2. 対象物をスケッチ
    3. \n
  3. スケッチを抽象化
    4. \n
  4. 抽象化したスケッチをもとに清書
    5. \n
\n

アイコンの元になる対象物を決める

\n

これはほぼ、ググった内容と試行錯誤の結果から考えついたものですが、まずはじめにサービスの元となるイメージから対象となる物を決めます。

\n

今回のPaPyrusは、名前の通り「ペーパー（紙）」のイメージがあったのでアイコンにする対象物は、

\n

「紙」

\n

にしました。

\n

Evernoteのロゴはゾウさんのイメージがありますが、左上の部分に紙をめくったようなパーツがあるので「象+紙」をロゴにしていますし、\nAppleは実直に「りんご」を書いていますし、Sketchはなんでかわからないですが、「ダイアモンドっぽいもの」を書いていますね。\nSlackのロゴは何をイメージして書かれているのかわからないですが今のアイコンは花っぽいですし、初期の頃は「シャープ」を抽象化しているようにみえます。

\n

このようにして最初の工程はどういった物体を元にアイコンを作るのかと決めるというものです。\nEvertnoteのように、「象+紙」みたいにモチーフを複数決めて組み合わせるのも面白そうですが、慣れないうちは一つにきめてやるのがよいでしょう。\nいずれにせよ、モチーフを二つ以上にする場合は、後の工程でひとつずつ物体をスケッチするとそれぞれを組み合わせる時にアイディアのイメージがつきやすいように思います。

\n

対象物をスケッチ

\n

ここが前述のデザイナーさんに聞いて一番驚い部分なのですが、\nデザイナーさん曰く

\n

「アイコンを作るときはイラレとかを先に開くのではなく、まずスケッチからですね」

\n

そういえば確かに、これまではアイコンを作るためにいきなりイラレで書いて細部が書ききれずイマイチなものになっていた。。

\n

スケッチなんて、高校の時の美術の時間にやった時以来くらいなので何から初めてよいのかわからなかったのですが、\nものは試しようなのでとりあえず、スケッチってどんなものだっけという感じで定番の手のスケッチを書いてみました。

\n\"手のスケッチ\"\n

スケッチのやり方なんてわからないので文明の利器に頼って、Youtubeでスケッチのやり方をみたりしながらスケッチしてみました。

\n

しかし、この手のスケッチを終えてみたところで疑問がわきます。

\n

「これで良いアイコンができるのか？」

\n

そんな不安を抱えながら、また別の機会にデザイナーさんにスケッチのやり方や意識する点を聞いてみたのですが、

\n

スケッチを行う目的は観察力を磨くためらしいです。

\n

なるほど手をスケッチしている時も、手がどういう形なのか光の当たり方がどういう感じなのかということのを感じとれないと\nどうもうまく書くことができません。(物体を紙に写している時のイメージが間違っていたら、そりゃうまくかけないですよね。)

\n

このことがわかってから、そもそもイケてるアイコンがどうやって書かれているかを理解するため、\nアイコンをトレースしてみたり、スケッチしてみたりしました。

\n

ある程度経験値が溜まったところでいよいよ前工程で選んだ「紙」を書いてみようといことで書いてみました。

\n\"アイコンのスケッチ\"\n

どうでしょう？紙感を出すためにちょっと巻いてみました。\n今見ると紙にしては、ちょっと固そうですが、今回はうまくスケッチすることが目的ではないのでまぁいいでしょう。\n自分なりに合格点だったのでこれをもとに次工程で抽象化させてアイコンを作っていきます。

\n

ちなみに、最初に紙を書いた時に自分の下手さに辟易して途中でやめてしまったものがこちらです。

\n\"アイコンの失敗スケッチ\"\n

なんですかねこれ笑。紙感より春巻き感の方が強く出てしまっています。\nまぁこんな感じで失敗もしつつ、工程を楽しんでやれると良いかと思います。笑

\n

スケッチを抽象化

\n

次の工程では先ほどのスケッチを抽象化して、アイコンに近づけていきます。\nこれまでのスケッチはiPadアプリのProcreateを使って書いていたので、引き続きProcreateで作業していきます。

\n

最初の案がこちらです。

\n\"アイコンのドラフト\"\n

これは色ついてしまっているのですが、最初は線だけ書く感じで抽象化されたものを書いてその後に必要な色を足していきました。\n抽象化する時には巻いている感じを強くデフォルメして書いていきました。

\n

これでアイコンのイメージはだいぶかたまってきたのですが、色の感じがアーティスティックすぎたので、\nPapyrusのイメージカラーを使ってまとめていきました。

\n\"アイコンのドラフト\"\n

ここまでで大分イメージついてきたのですが、線がずれていたりするので微修正はイラレでやっていくことにしました。

\n

清書

\n

前段階できっちりアイコンとして使えるものができてしまえばそのままで良いのですが、僕の場合はイラレで清書しました。

\n\"アイコンの清書\"\n

これが最終的に清書したものです。

\n

色々な色で試してみたかったので、何パターンか用意して最終的に一番しっくりする左上のものをアイコンに採用するよう決めました。

\n

黒も個人的には渋くて好きなのですが、ちょっとアプリのイメージとかけ離れているこちらの採用は見送りました。

\n

完成

\n

清書がおわったら気に入ったアイコンを書き出して完了です。\n最後にスケッチしたものと最終版を並べて載せておきます。

\n\"アイコンの比較\"\n

スケッチしたものと最終的なアイコンのところで大分イメージが変わっていますが、元のスケッチをやっておくと\n抽象化やデフォルメをする時のアイデアの土台や出発地点が明確になるので一度試してみていただけると良いと思います。

\n

逆に日頃落書きしたりしてある程度日常のものをささっとかけてしまう人は事前にスケッチしたりする必要もないのかもしれません。

\n

さいごに

\n

というわけで、プログラミング的要素ゼロの内容になりましたが、この記事が個人開発の手助けになれれば嬉しいです。

\n

PaPyrus自体、React、TypeScript、Electron、Go、GraphQLを使っていて技術的なトピックでも記事がかけそうな技術を使っているので、\nそちらについてもおいおい記事がかければなと思います。

\n

では。

","excerpt":"こちらは個人開発 Advent Calendar 2019の16日目の投稿になります。 個人開発とのことで技術的なところを書く方がほとんどかと思うので私の方では、\n個人サービスを作る時のアイコンの作り方について書いて行きます。 はじめに 自己紹介 私自身デザイナーの経験があったりするわけではなく、最初はRailsから始まり、徐々にReactも触るようになり、\n結果的にフルスタックっぽい形でサーバからフロント、React Nativeなどを触りながらフリーランスとしてお仕事させて頂いています。 またその傍ら PaPyrus という個人アプリを開発しています。 こちらのアプリを作るまでにもいくつ…","headings":[{"depth":2,"id":"はじめに","value":"はじめに"},{"depth":3,"id":"自己紹介","value":"自己紹介"},{"depth":3,"id":"PaPyrusについて","value":"PaPyrusについて"},{"depth":3,"id":"PaPyrusのアイコン","value":"PaPyrusのアイコン"},{"depth":2,"id":"個人サービスのアイコンの作り方","value":"個人サービスのアイコンの作り方"},{"depth":3,"id":"アイコンの元になる対象物を決める","value":"アイコンの元になる対象物を決める"},{"depth":3,"id":"対象物をスケッチ","value":"対象物をスケッチ"},{"depth":3,"id":"スケッチを抽象化","value":"スケッチを抽象化"},{"depth":3,"id":"清書","value":"清書"},{"depth":3,"id":"完成","value":"完成"},{"depth":2,"id":"さいごに","value":"さいごに"}],"frontmatter":{"title":"デザイン実務経験ゼロのエンジニアが個人開発でのアイコンの作り方を考える","language":"ja","slug":"/2019/12/06/how-to-create-logo-for-private-project","templateKey":"blog-post","tags":["design"],"categories":["design"],"createdAt":"Dec 06, 2019","updatedAt":"Feb 04, 2020"}},"pickup":{"totalCount":5,"nodes":[{"id":"541e5973-dbc9-5eb2-b406-58a3873f3062","frontmatter":{"title":"Gin+Gorm+GraphQL(gqlgen)でCRUDできるAPIをつくってみた","language":"ja","slug":"/2019/05/13/gin-gorm-gqlgen-crud","templateKey":"blog-post","tags":["go","learning","gin","gorm","gqlgen"],"categories":["engineering"],"createdAt":"May 13, 2019","updatedAt":"Jun 14, 2019"},"excerpt":"元号ももう令和に代わり粛々とGoの勉強を続けているのですが、今回はGOとGraphQLを使って\nCRUDできるAPIを作ってみました。 gin-gorm-gqlgen-sample\nそもそもGOに慣れていなかったり各種ライブラリの情報が少なかったりで結構時間かかりましたが、\nなんとかそれらしきものができたのでリポジトリを共有しておきます。 前回の記事でも、最初にながれを説明して詰まったところを最…"},{"id":"49186374-8bb7-58b2-be95-210872b6bbec","frontmatter":{"title":"基本から応用までCircle CIのConfig 2.1の書き方まとめ","language":"ja","slug":"/2019/09/24/get-start-circle-ci-confg-2-1","templateKey":"blog-post","tags":["test","ci","circleci"],"categories":["engineering"],"createdAt":"Sep 24, 2019","updatedAt":"Sep 24, 2019"},"excerpt":"最近Cicle CIを触る機会があり、これまであまりガッツリconfig書き込んだりする機会がなかったのですが、 仕事でちょと触れる機会がありましたので、そこで学んだことをまとめて共有していこうかと思います。 Github Actionsなんかも最近は使えるようになっているそうで、\nそこらへんともちゃんと比較して自分のプロジェクトにどっちがあっているのかというのを比較検討した方が\n良いかとは思っ…"},{"id":"5bdaee37-3609-5628-89e7-73117f659f75","frontmatter":{"title":"Techpit さんから React Hooks に関する教材を執筆・リリースしました","language":"ja","slug":"/2020/11/14/publish-snake-game-material","templateKey":"blog-post","tags":["react","javascript","frontend"],"categories":["react","column","engineering"],"createdAt":"Nov 14, 2020","updatedAt":"Nov 14, 2020"},"excerpt":"突然ですがReact Hooks APIをゲームを作りながら学べる教材をTechpitさんより   「スネークゲーム🐍を作って学ぶ React Hooks API での状態管理」   をリリースさせて頂きました。   スネークゲーム 🐍 を作って学ぶ React Hooks API での状態管理   Techpitさんはサービスを作りながら学べるプログラミング学習教材をオンラインで販売している会…"},{"id":"5b4b4718-13b6-5527-965a-dd073d98168a","frontmatter":{"title":"トロントの会社でフルタイムのFull Stack Developerとして働き始めました。","language":"ja","slug":"/2021/04/15/started-to-work-in-tronto","templateKey":"blog-post","tags":["essay","work","career","freelance"],"categories":["column","engineering"],"createdAt":"Apr 15, 2021","updatedAt":"Apr 15, 2021"},"excerpt":"タイトルの通りそのままなのですが、 昨年10月頃から進めていたカナダでの就活が実を結び晴れて3月中旬よりトロントの会社で働きはじめました。 簡単に自己紹介すると、元々事業会社でエンジニアとして働いたり、フリーランスやったりをしていたのですが一昨年の10月にバンクーバーに移住してきたものです。 今年2月末頃にFull Stack Developerのポジションでオファーを頂き、無事3月からチームに…"},{"id":"f4023f84-630f-5ecc-82eb-a0f15e7ccb3e","frontmatter":{"title":"プログラミング学習のスケジューリングについて","language":"ja","slug":"/2021/12/21/scheduling-for-programming","templateKey":"blog-post","tags":["career","work"],"categories":["column"],"createdAt":"Dec 21, 2021","updatedAt":"Dec 21, 2021"},"excerpt":"こんにちは、初めましてJiroです。 こちらはMENTAのアドベントカレンダーの記事です。 カナダでJS/Ruby/Goあたりのスタックを使いながらフルスタックエンジニアをしています。\nMENTAは 2020年3月のちょうどコロナが流行り初めてきた頃にはじめて、これまで100人以上のメンティーさんに相談を頂いています。 みっちり学習プランというHTML/CSSからJSの基礎、Reactを学習して…"}]},"related":{"totalCount":6,"nodes":[{"id":"447f5e65-c077-526c-ae20-3c4db2e3b0cd","frontmatter":{"title":"SMACSSでデモサイトのコード書いてみた","language":"ja","slug":"/2017/12/16/write-with-smacss","templateKey":"blog-post","tags":["css","design","smaccs","frontend"],"categories":["engineering","design"],"createdAt":"Dec 16, 2017","updatedAt":"May 20, 2018"},"excerpt":"前回の記事では、SMACSSの電子書籍をまとめてみました。\nCSSスタイルガイドのSMACSSを勉強してみたまとめ 今回は、書籍を読むだけでは理解が深まらないので実際にSMACSSを意識しながらコーディングしてみました。     今回は、題材としてランディングページのコーディングをしてみました。 ランディングページとは、LPと呼ばれたりもするので、広告や検索から訪れるユーザが最初にみるページのこ…"},{"id":"37414189-0b85-5833-90e8-43f0ad7a221b","frontmatter":{"title":"CSSスタイルガイドのSMACSSを勉強してみたまとめ","language":"ja","slug":"/2017/12/10/learn-smacss","templateKey":"blog-post","tags":["css","smaccs","frontend"],"categories":["engineering","design"],"createdAt":"Dec 10, 2017","updatedAt":"Aug 26, 2018"},"excerpt":"SMACSSって知ってますか？ css初心者レベルからぬけだしたいのであれは知っておいていた方がいいcss設計に関する知識です。 私もこないだまでは名前しか知らない程度だったの他人のことを言える立場ではないのですが、これを勉強すればcssをさらに深くしれるなと思い勉強してみました。 参考にしたサイト 今回は公式サイトのドキュメントをダウンロードして読み込みました。 130ページ程度の電子書籍で(…"},{"id":"9ba20aae-5276-5636-8702-1232cca8dba0","frontmatter":{"title":"CSSでマウスオーバーした時にうにょーんって下線が伸びるようにする","language":"ja","slug":"/2017/11/20/css-mouseover-underline","templateKey":"blog-post","tags":["css","design","frontend"],"categories":["engineering","design"],"createdAt":"Nov 20, 2017","updatedAt":"Aug 26, 2018"},"excerpt":"cssでマウスオーバした時に下線\nをうにょーんってさせるアニメーションです。 それぞれ、Spring,Summer,Autumn,Winterの文字の\n上にマウスを当てるとアンダーラインが引かれるようになっています。 demoにはcodepenを利用しています。\n興味ある方はこちらもどうぞ\nCodePen – webサービスのデザインを考えるときにおすすめの海外サイト\n    cssについて、\n…"},{"id":"c075cf63-cc79-5e54-bed2-4ae531b14275","frontmatter":{"title":"webpackでnormalize.cssを読み込む方法","language":"ja","slug":"/2017/10/24/webpack-normalize-css","templateKey":"blog-post","tags":["css","webpack","design"],"categories":["engineering","design"],"createdAt":"Oct 24, 2017","updatedAt":"Jan 30, 2018"},"excerpt":"今回は、\nwebpackでnormalize.cssを読み込む方法を紹介します。 webpackとはなんぞやや\nnormalize.cssとはなんぞやということは他のサイト\nの説明に譲るとして、\nこの記事ではとりあえず、\nnormalize.cssを\n読み込むというところを第一目標にして書いていきます。 サンプル用のプロジェクトを作成\n+\nwebpackとstyle-loader、css-loa…"},{"id":"64267eef-7310-5666-852d-7fca7e1a2cc3","frontmatter":{"title":"日本地図を地方にアクションを分ける~クリッカブルマップ~","language":"ja","slug":"/2017/10/01/japanese-action","templateKey":"blog-post","tags":["css","design"],"categories":["engineering","design"],"createdAt":"Oct 01, 2017","updatedAt":"Aug 26, 2018"},"excerpt":"どうも、運転が苦手な@version1です。 今回は仕事で地図の中でクリックされた座標を元にアクションを分けるという機能を実装する必要が\nあったので、それの方法を調べてみました。 どうやらクリッカブルマップというのを使うと地図の中でアクションを分けることが実現できるようです。 が、、、「え、難しそう」これが第一印象でした。\nでも、意外とそうでもないみたいです。 文章でいうと で2で指定した座標の…"},{"id":"4cbc2b06-9f16-5c8b-86c6-a78406baff35","frontmatter":{"title":"CodePen - webサービスのデザインを考えるときにおすすめの海外サイト","language":"ja","slug":"/2017/09/02/codepen","templateKey":"blog-post","tags":["codepen","gadget","design"],"categories":["engineering","design"],"createdAt":"Sep 02, 2017","updatedAt":"Jan 30, 2018"},"excerpt":"どうも@version1です。 私はwebサイトの\nデザインとかレイアウトを\n考えるときは、ググって「いいね！」って\n思うのを探すことが多いんですが、 それをするのにおすすめのサイトが\nあったので紹介します。 それは、\nCodePenというサイトで\nここには、数々の\nイケてるデザインレイアウトやコンポーネントなどがアップされています。 https://codepen.io/ 例えばですが、\n自分…"}]}},"pageContext":{"id":"2650f039-0645-5193-8a8b-c262213276c0","pickupDisabled":true,"pickup":["/2021/12/21/scheduling-for-programming","/2021/04/15/started-to-work-in-tronto","/2020/11/14/publish-snake-game-material","/2019/09/24/get-start-circle-ci-confg-2-1","/2019/05/13/gin-gorm-gqlgen-crud"],"language":"ja","limit":9,"layout":{"archiveByMonth":{"2024/07":["11d5e803-f87e-5afe-b170-143fdaa45734"],"2024/10":["90859e81-7aba-553a-9e21-332b4ca29c7a"],"2017/01":["17731355-e3c1-5a1f-931e-543875e1ec72","3569631f-a4f6-52a3-9bc8-033d81488817","43f395be-5bfa-5887-8bfc-5ad96f7457d7","4b6bcce9-c883-538a-95d8-7a48e93dab86","8e53a1e7-8fa5-5634-8ff3-2c63ddad68ae","8dff4d8d-d7b4-5bc2-aaa7-cf7c52ccb0fd","cbf7ad0c-e930-559b-8ac6-0453c2c4ec01","cdb46039-6825-59f0-9b87-e27d6ea6f280"],"2017/02":["855e3683-e7d5-528f-b481-1ea91ed6cb30","063f5aaa-57e9-505f-93b5-a5691f08dad8","7ee84dee-25c8-5f6c-b579-030d3ef6fb2c","dac50d07-a43f-5f14-8fb4-e7266aaf17de","531597a2-5008-5555-b6ca-cc05d2924de4","d8fd0672-ffae-5dbe-a11c-63d5865b72af","fe214981-3ae6-5f80-8b1d-d03742c6d42c"],"2017/03":["ca7bf26e-c55f-5621-a6ef-f79ce01cc89a","8ef28e88-108e-5d64-ab45-e02b0db1b871","2dea311b-b9fc-57e8-b1f1-57436d4dd022"],"2017/04":["03e3178e-2665-5aff-82dc-0bc346d796f2","6b633684-adc2-580d-892d-0d46b54c38f9","0eba48d2-1656-53f3-b5b3-fa0b4edfff77","2afcf293-72e2-5e8c-aa0d-9226209f1c97","92d41b40-968c-5d44-a47b-442f26ad7e93"],"2017/05":["12e4fce1-3bee-5d2d-b1da-6d4cf5467384","2c205d60-6407-595e-ab48-5cfa83354bf1","39af275e-c684-539c-ab3f-040722ae7f66","6ca6b48b-5e2c-5ac7-83ca-676407ff6576"],"2017/06":["0ef1e165-860b-5a4a-9045-1defca75297c","b091db91-99b7-5a45-8a90-7b9ab15127bd","24fbaff0-2d57-5996-967f-d52dcaa7e1c8"],"2017/07":["99d26ed0-a954-59c2-9bdc-c644822295c1","05493122-8075-5eff-ac56-88fd1076b449","2283ec7d-f32d-57d6-91c8-238df8c5d997","32bb756c-a20a-5839-88b6-7f1cfcf9993f","c7109b1a-04ff-5240-be6e-fb5b6e06b35b"],"2017/08":["976eecd3-f1c8-5b1f-b5b5-9a8622c34720","62e31a94-7054-5af3-875b-2c394a0b92f4"],"2017/09":["4cbc2b06-9f16-5c8b-86c6-a78406baff35","93bda1d4-03df-5896-946d-c51aabc32612","fafba76c-cc0f-5498-a4bf-0f14a21c2920","8783f7c5-e522-5614-a2ae-f370b8cbcfe4"],"2017/10":["6f985f6a-8eda-547e-8f59-0878432ad2aa","64267eef-7310-5666-852d-7fca7e1a2cc3","69268648-a079-599a-8fe7-be1a722f965e","94d5d3f8-ca81-50f2-9028-3a1dcb342595","9aefec36-3cc1-53c9-a2c9-d64f8b9d8bc2","d4376782-67e5-54ad-b3f2-742273192639","c075cf63-cc79-5e54-bed2-4ae531b14275","a6f33c5e-31e5-554c-96ef-0cb0cfa7bcf1","bf8fed33-313d-5df5-924c-e1e8ffd63266","ce176203-814f-5c9a-88e4-6b73e80195c3","4825e572-25a0-54ad-b9bb-c4c6300591cb","bafa260c-7da5-556f-9ce5-33c02c4e39bf"],"2017/11":["d94f2012-6803-565b-a568-ca101d67e3c6","70509716-5201-5fb7-93d1-d8699b62d96b","d72deb35-13e2-5b12-bf51-9a1896475f32","dd515ffe-25ba-5dfd-a4cf-6b93ff903b1e","6ffd6a66-e5d5-5253-a6f3-22db07bfd179","be86c893-d9e7-5fa2-b197-b80b9b4cba38","2ebcc64e-9fcd-56f2-b0f4-fa04daf83ccd","b4abd281-72ca-506d-b586-1bc3025fab79","e45d901e-092d-51b2-8a67-5a3ace1b9cd4","9ba20aae-5276-5636-8702-1232cca8dba0","f0f96f3e-8b18-5e17-a310-0f316aacc66d","842b0477-f2fd-5c36-951c-0c458ce3ed85","47520f54-21ce-5640-bb39-4a3821332e6f","52ab86ad-2058-5d0f-b626-06d01422e6f9","68e07c47-f959-523e-8b83-c13b58629ef5","2dd67b7f-26d9-591c-9883-b00d7ff42033","c99f14b3-7936-51e5-b18d-5f5f3b58cacd"],"2017/12":["37414189-0b85-5833-90e8-43f0ad7a221b","0aa6534f-4718-574a-849a-1bc4076e0cb2","447f5e65-c077-526c-ae20-3c4db2e3b0cd"],"2018/01":["ffdf47ff-e1d8-5351-a081-90dab3951440","e63fb487-343e-5bd0-8815-5597140cf652","e7ae437a-0fe0-5435-80b2-8c21d49655d0","d01cbd8d-444e-5cdf-9937-753007863f12","8bf8a040-3620-5fcf-ab68-155b41705e29"],"2018/03":["3e340bae-31b8-5c0f-9abd-9dc43de3cb24","5c1d7cea-84b7-5b2e-a99b-04c8fb25f5da","dad9f28e-fd13-5910-a5bd-e8a0ba92ec4b"],"2018/02":["2c35c608-1bf3-5396-86eb-d13f21ec0867","ac4d1231-8f7e-5f88-9448-d19982fa4203"],"2018/04":["f708aeb8-cbb3-5d9b-a9ed-e97696b2a01f"],"2018/06":["0bb4452d-80c4-58c1-a5fd-e5d8399b893f","5597a193-4ca7-5d32-bee8-103cbe8811ac","ec498ff6-2361-567d-a5e8-7397c69a7a00"],"2018/07":["c973bb84-41ad-5ced-9a29-435f60ccff71","415b8bb9-c50f-5d3d-bb01-fe259650dcb6"],"2018/08":["b86e541f-aa49-5f9e-94f0-2038c92bd037","e009fb97-9ce5-55e5-8b7d-ddf9378250aa","924a73d9-3e37-5d4a-a672-f77bfc34f38f"],"2018/09":["4e52b3d4-9b1d-563d-b93f-58bfa4bb0d68","7fc728c2-3bbc-521e-a4fa-609e381ac067"],"2018/11":["972be351-00c6-5ba1-870e-38de3ba2f760"],"2018/10":["8533fb19-006b-5d27-b26a-e930fe915a7f"],"2019/01":["83c073a6-d469-5696-bcf0-89dc29f87f3b","64cab55a-0c72-5b60-a868-9ef3ee8d7998","e9635771-8de4-5282-91e3-c16100b94267","b1456a03-c0fe-57b8-a779-8b431751e74b","b48bc6e9-d0ea-5ef2-ac3c-8fe48b4e4417","2dc50bad-13fa-54ba-9a29-a01e7dcfbc9b","262cb2cc-0ac6-5ba4-9d83-973e0c8a6d49","1dccdf2d-a9e6-5955-bea2-fac68950e07f"],"2018/12":["7fa64abb-df64-5b4b-9997-fffd3a496495"],"2019/02":["01f00099-9370-5dc2-b1c9-899901e65745","b9e969b4-3ecb-52ed-afce-d9ff8f054dde","83e9f3a7-7902-5f3f-816c-c223d05e17c5","d819844c-7828-5987-8454-1e1346b92a6b","74573c5e-ad7a-5ce0-a4ab-f4d50bf63b0d","75db9447-a85c-550d-b323-31fc2d77ec8f","f9ffd981-7920-5e37-be05-8cd1845ec053"],"2019/03":["86bf3a8d-ccc6-5c30-bdbb-c6d9b16149a0","11a4f8cd-4bb5-50d9-af3b-f97ca40221e7","55bb00c1-71c1-5a81-931e-b489d65639ff","87510094-e6fc-51fd-b7ab-f5f8365d42ea","3d357a84-b1af-5146-8267-fec2f15d1e95","9f30dff2-c52d-5d8f-94bf-9432c996f181"],"2019/04":["c73c8774-a086-5cf9-883a-bcea8eb96757","47cca1e3-4431-5b1c-aba9-93116daf6dcb","fc3dc0a4-2369-5fd4-9a87-e7a10cc9af9a","07bbe1c4-5cd1-5f8b-9472-1482ea832334","00b116a4-d0c0-534d-a37a-e0b475136262","5f1efeae-07a1-52cb-b159-f13b80fade36"],"2019/05":["4a5c8097-34c6-5c75-8b72-e7631d350575","541e5973-dbc9-5eb2-b406-58a3873f3062"],"2019/07":["c0f0663f-d9a1-50ef-8c28-b8a299997f67"],"2019/09":["5db2c5dc-4149-5d38-a3f9-ad54f66565d6","fe9ba077-dc82-5246-86d6-1f0a9f312362","49186374-8bb7-58b2-be95-210872b6bbec"],"2019/06":["6b127610-7242-5277-989b-8f5e9cf952e8"],"2019/08":["06b15376-9bea-51bd-823d-b949f3523895","8f9f2d2d-d1d1-55a9-8aa4-93cef0bc0849"],"2019/10":["fa197147-c9e9-5466-aaac-5e0135fa70c4","50e23237-25c9-5f93-b9fb-21100a05fae4"],"2020/01":["19889420-714f-5b6a-87f8-2c7864e0373c"],"2019/12":["2650f039-0645-5193-8a8b-c262213276c0"],"2020/11":["5bdaee37-3609-5628-89e7-73117f659f75"],"2021/02":["1705ff40-c04d-5695-9287-59582413a4f2"],"2020/02":["a3ef27bf-e340-506f-8a76-7c43767a0c23"],"2021/03":["0400a8c9-3225-5cc4-b84c-9cce5fc32627"],"2021/04":["ac21228d-8d93-5ffa-a351-a0cf4f64ccdf","5b4b4718-13b6-5527-965a-dd073d98168a","832122b6-fde5-5c28-a76e-49937ad94147","32653955-537a-5df1-9529-c620c3af4a48"],"2021/12":["f4023f84-630f-5ecc-82eb-a0f15e7ccb3e"],"2022/12":["e8a2e5a6-9167-5be0-8fc4-8705adc06d54"]},"breadcrumbs":[{"path":"/","label":"Top"},{"path":"/categories/design","label":"Design"}],"categories":["engineering","for-beginner","rails","column","travel","cryptocurrency-blockchain","design","freelance","react"],"tags":["javascript","ruby","vim","build-env","php","cakephp","kotlin","hello-world","mac","ansible","serverside","vagrant","rails","rspec","khttp","boostnote","gadget","lifehack","exposed","phpunit","springboot","activerecord","electron","nodejs","editor","travel","bitcoin","cryptocurrency","book","career","design","css","flyway","laravel","vue","blade","codepen","spa","frontend","slack","webpack","work","phantomjs","freelance","ga","marketing","commentary","web-structure","ethereum","blockchain","coolors","udemy","review","inkdrop","docker","nginx","postgress","mysql","smaccs","react","native","react-native","snakegame","product","lodash","opinion","react-navigation","design-pattern","oop","wordpress","gatsby","netlify","prismjs","go","learning","git","gin","gorm","gqlgen","typescript","english","essay","programming","vr","oculus","immersed","test","ci","circleci","canada","egg-cutter","tool","codesandbox"],"next":{"id":"1dccdf2d-a9e6-5955-bea2-fac68950e07f","frontmatter":{"title":"React Nativeでのルート管理ライブラリReact Navigationの使い方を整理。","language":"ja","slug":"/2019/01/19/summary-of-react-navigation","thumbnail":"/2019/01/20190119_summary-of-react-navigation/thumbnail.png","canonical":null,"templateKey":"blog-post","categories":["engineering","react"],"tags":["react-native","react-navigation","react","javascript","native"],"createdAt":"Jan 19, 2019","updatedAt":"Apr 23, 2020"}},"previous":{"id":"19889420-714f-5b6a-87f8-2c7864e0373c","frontmatter":{"title":"2019年。フリーランス二年目の振り返り","language":"ja","slug":"/2020/01/01/review-2019","thumbnail":"/2020/01/20200101_review-2019/thumbnail.png","canonical":null,"templateKey":"blog-post","categories":["freelance","engineering"],"tags":["work","lifehack","canada"],"createdAt":"Jan 01, 2020","updatedAt":"Jan 03, 2020"}},"baseUrl":"https://ver-1-0.net/2019/12/06/how-to-create-logo-for-private-project"},"related":["/2017/12/16/write-with-smacss","/2017/11/20/css-mouseover-underline","/2017/10/24/webpack-normalize-css","/2017/10/01/japanese-action","/2017/09/02/codepen","/2017/12/10/learn-smacss"],"meta":{"title":"デザイン実務経験ゼロのエンジニアが個人開発でのアイコンの作り方を考える","description":"こちらは個人開発 Advent Calendar 2019の16日目の投稿になります。 個人開発とのことで技術的なところを書く方がほとんどかと思うので私の方では、\n個人サービスを作る時のアイコンの作り方について書いて行きます。 はじめに 自己紹介 私自身デザイナーの経験があったりするわけではなく、最初はRailsから始まり、徐々にReactも触るようになり、\n結果的にフルスタックっぽい形でサーバからフロント、React Nativeなどを触りながらフリーランスとしてお仕事させて頂いています。 またその傍ら PaPyrus という個人アプリを開発しています。 こちらのアプリを作るまでにもいくつ…","url":"https://ver-1-0.net/2019/12/06/how-to-create-logo-for-private-project","canonical":null,"alternate":{"en":"/en/2019/12/06/how-to-create-logo-for-private-project"},"image":"https://statics.ver-1-0.xyz/uploads/2019/12/20191206_how-to-create-logo-for-private-project/thumbnail.png"}}},"staticQueryHashes":["1000917716"],"slicesMap":{}}