こんにちは!ちづみ(@098ra0209)です。twitterではよくイラストを使って発信しているものです
私がイラスト発信を始めた理由
私はとにかくものごとをわかりやすく伝えるのが好きで、将来の夢は小学校のころから変わらず学校の先生でした。子どもが好きだからとかは特になく、物事の要約とわかりやすい見せ方を考えるのがとにかく好きでした。
そんな背景があって、図解とかを書いたりするのは好きです。イラストを描くのは好きというわけではないですが、イラストを入れることによってわかりやすくなるので描いてる感じです。
私がweb制作の勉強を始めた2018年の1月、前職はwordと少しのエクセルしか触らなかったので、web周りの理解は結構難しかったです、、
特に一番印象深いのが、htmlファイルに「Hello World」と書いて初めてブラウザで開いた時に、「全世界にこれが公開されて今続々と人々が見に来ているのではないか」と勘違いし、表示を一瞬で確認してはすぐにブラウザを閉じるという方法でコーディングをしていて、非常に効率の悪いやり方をしていました笑(自分のpcの画面だけだし、公開したとしても続々見に来るわけないのにね( ̄  ̄))

そんな中で「こんな難しいものをもっと簡単に説明したい。。」という欲が湧いてきました。
アプリマーケティング研究所さんという図解の方がいまして、その方の書く図解がとにかく好きで、影響を受けながら、学んだことを図解でアウトプットしようと思い始めました。

実際わかっているつもりでも、いざアウトプットを考えると、より深い理解が必要になるんですね、誰かに理解させられるようになるまで落とし込むので、学習にアウトプットはとても大事だなーと思います。
コーディング編
✅なくそう!positionわけわからん!の壁!
html,css初心者泣かせ(自分も泣いた)のpositionについて図解しました。#30DAYSトライアル pic.twitter.com/LG1pzOxU7N
— ちづみ (@098ra0209) January 22, 2019
✅なくそう!floatわけわからん!の壁!
html、css初心者泣かせ(自分も泣いた)のfloatについて図解しました。#100DaysOfCode #30DAYSトライアル pic.twitter.com/L2Tm4WMmBr— ちづみ (@098ra0209) January 16, 2019
⭐️backgroundとbackground-〇〇の違いって?
backgroundはオールマイティに対応できるキャプテン的存在background-〇〇は専門的な指定に使うのに対し
backgroundは背景に関する指定をまとめてできます
便利だけどつまずきや注意もあるので使い方をしっかり覚えましょう👍#イラスト屋のコード解説 pic.twitter.com/NpjOnuNQm5— ちづみ (@098ra0209) June 9, 2018
⭐️グリッドレイアウトって?
好きな場所に!配置ができちゃう超便利なcss個人的には超普及されていくと思うので使えて絶対損はないです👍
2次元でレイアウトできるのがアツイぞ!!書き方はまだたくさんあるのでぜひググって導入してみてね〜😊 #イラスト屋のコード解説#100DaysOfCode pic.twitter.com/8GbhToF3d8
— ちづみ (@098ra0209) August 21, 2018
⭐️フレックスボックスって?
cssで使える超便利な実装方法これProgateには出てこないけど
リストを作るならfloatより
display:flex
がオススメです!
柔軟なレイアウトができるので、使えるようになればキレイ&楽😊👍html👇
<ul>
<li>一郎</li>
<li>二郎</li>
<li>三郎</li>
</ul>css👇 pic.twitter.com/U573TopUvb
— ちづみ (@098ra0209) June 7, 2018
⭐️background-sizeいろいろ
背景画像でよく使われるのはcoverですが、
画像を全部見せたい場合は containや100%を指定するといいですね😊そして私だったら背景画像は模様とか、切れても問題ないデザインのやつを使いたいです😅ww#イラスト屋のコード解説 pic.twitter.com/EelRcFQy4w
— ちづみ (@098ra0209) June 19, 2018
✅なくそう!ファイルパス!の壁!
html,css初心者泣かせのファイルパス(自分も泣いた)について図解しました。 pic.twitter.com/QfNp83HUOO
— ちづみ (@098ra0209) March 11, 2019
✅初心者のためのflexbox
親要素にflexを指定すれば子要素は自動的にflexアイテムになってくれます
横並び、レスポンシブに柔軟に対応その他レイアウトも色々でき便利😊親要素(flexコンテナ)と子要素(flexアイテム)を意識してhtmlをみること、
flexでできることを一通り知る事から始めるとよき!👍 pic.twitter.com/eRBhePxyMm— ちづみ (@098ra0209) October 18, 2019
デザイン編
🎨カラーコードのしくみ
✅光の三原色のしくみの理解
✅数値の読み方
がわかって慣れてきたらカラーコードを見ただけでだいたいの色が予想できるようになるよ!😆
できたらちょっと自慢したくなっちゃいません…? pic.twitter.com/BJzDvReXHn— ちづみ (@098ra0209) August 24, 2018
ありがとうございます!しかし、サンプル記事が、、、笑
— マナブ@バンコク (@manabubannai) August 24, 2018
カラーを作る時はここでテキトーに作ってはなりませぬぞ……(1枚目)
colorhuntなどのサイトや拡張機能からコードを取得し、既存の色をベースに使うのです……
必ず……必ずですぞ……参考サイト👇
✅https://t.co/JlqwV7InNA
✅https://t.co/VfDaGxcR9R拡張機能👇
✅https://t.co/OXNhswW3vw pic.twitter.com/nF4EtOMGmA— ちづみ (@098ra0209) August 24, 2018
🏝️夏っぽいデザインの作り方
「なんか夏っぽーい😎」っていう配色は
青+黄色、赤、白
が多いので、それを使うといいですね!🍉ポイント
メインで涼しい印象の寒色(後退色)を使い、
目立たせたい文字等で暖色(進出色)を使うことで強調の差が生まれて、より引きつけるデザインにできます😀 pic.twitter.com/Jhc5ryOE3S— ちづみ (@098ra0209) August 2, 2018
おすすめベジェ曲線の練習サイト
🖋️ベジェゲームhttps://t.co/CWwaa78doP
なにかと難関なベジェ曲線ですが、ここではゲーム感覚で楽しく習得できるよ!
説明なしでも感覚的にベジェ曲線の引き方が理解できます!
ここで慣れればペンツールも怖くなくなるよ!😄デザインの幅を広げられます👍 pic.twitter.com/mMYdE1EufT— ちづみ (@098ra0209) August 2, 2019
WordPress編
wordpressでできることを理解したので、「これもっと親しみをつけたいな」と思って書いたのがこれです。
⭐️WordPressのweb制作って?
宇宙一わかりやすく書(描)きました!
学習の入り口のハードルをもっと壊して行こうぜ!!!ワクワクしながら学習しようぜ!!という想いを込めました
サクッとhtmlからWordPressまでの全体像を掴んで学習スピード爆上げさせちゃいましょう😊https://t.co/kztQscVKqp— ちづみ (@098ra0209) September 11, 2018
これのキャラクターを描いてくださった方もいらっしゃいまして、大変に嬉しかったです。
わー!😭かっちょよく描いてくださった!ありがとうございます😭✨
CSS @345_lps さん
JS @matayoshi_mari さん学習が楽しく、わかりやすく、わくわくできたらもっともっと続けやすくなって、そしたら夢や目標がもっと叶いやすくなるよね☺️
めちゃ大事なことなのでもっと極めて発信していきたい🔥 pic.twitter.com/7VRWsNUTFH— ちづみ (@098ra0209) January 27, 2019
Git、GitHub編
こちらにより、たくさんのご意見をいただきました。gitは自分自身かなり苦手意識があったところで、現実放棄のためイラストに描いたものを載せたことから発展しました。(学習のメモの取り方は参考にしちゃいけない部分なので、あしからず、、)
去年Gitまわりを触った時に用語多いし意味がわけワカメで、うへぇ🤢てなったけど、いやぁでもこういう類はアウトプットを見据えたインプットが定着が早いし手が動くよなぁと思って「これだけはおさえよう」みたいなのを誰でもわかるように意識して書いて覚えたやつが出てきた…なつい🍉 pic.twitter.com/XHxagBso8S
— ちづみ (@098ra0209) August 17, 2019
https://t.co/114qIAT7sq
あと記事にもあげてますので、画像を保存したい時にご活用くださいm(_ _)m!あと私がしばらくGitまわり使ってないので、間違ってたら言ってください😅
— ちづみ (@098ra0209) August 19, 2019
この記事が2回目のグーグル砲&はてブ、togetterに載り2日間で5万PV、ツイッターインプレッション180万以上になりました!😭✨ありがとうございます!
ワイこれからも「なんか難しそうくね?😐」みたいなのを図解で簡単にする活動をしたいのでそんなお話あればぜひお声かけください😃本の挿絵とか! pic.twitter.com/V1Ynnf60sZ
— ちづみ (@098ra0209) August 22, 2019
これにより、大変ありがたいことにSUZURIで出したコンフリクトちゃんのTシャツが50まいほど売れていきました。。
すみません、conflictがかわいいという変化球のお声をぽつぽついただいたので、Tシャツ作ってみました👕
あと、このテイストで描いて欲しいものがありましたら言ってください!Tシャツにします。(今日寝るまでくらいで)
他にもグッズ出してるのでよければみてってね😊https://t.co/bNBLRMWyGT pic.twitter.com/A0mBDmIzH9— ちづみ (@098ra0209) August 18, 2019
Tシャツは以前から作っていたのですが、こちらは哀れに思った心優しい身内が2まいほど買ってくれました(感謝のみ、、)意識高いことを言ってますが実際全然売れなかったです(理由はわかる)
わたしの作ったTシャツ、日本では「ダサい」と言われたとしても、遠い遠い、世界のどこかでめちゃヒットする国が1カ国くらいはあってもいいんじゃないかと信じている🔥
とてもロマンを感じる、探す旅に行きたい😌
自分の作ったTシャツデザインが世界に出せるアプリ的なのがあったら超面白いのにな〜 pic.twitter.com/xvRAOazS4v— ちづみ (@098ra0209) September 24, 2018
たにぐちさん編
ありがたいことにたにぐちまことさんがGitのイラストをきっかけにお声掛けくださり、TwitterとYoutubeにて私のイラストを使っていただけることになりました。
たにぐちさんはコーディングのあれこれからプログラミングまで幅広く優しくわかりやすく教えてくださってる方なのでプログラミング学習中の方はぜひ発信みて欲しいです!
たにぐちさんのYoutubeはこちら

CSSの positionプロパティについてまとめました。で、ふと思い立って ちづみ(@098ra0209)さんにイラストをお願いしたら、なんと描いていただけました! かわいい!https://t.co/AZnko9YIrs pic.twitter.com/ZPUtxkKEHH
— たにぐち まこと/学ぶ。をちゃんと (@seltzer) August 31, 2019
イラスト解説更新しました! 今回のテーマは『制御構造』
今回もイラストはちづみ(@098ra0209)さんにお願いしました。https://t.co/eYtKMnK5tS pic.twitter.com/3g9byYMvfn
— たにぐち まこと/学ぶ。をちゃんと (@seltzer) September 22, 2019
アイコン編
web制作、プログラミングのお役立ち情報を発信しているアカウントさんのアイコンを描かせていただけました。
#新しいプロフィール画像 pic.twitter.com/ouoHLiveCn
— ユーヘー神🍳 (@katayamada_Y) May 21, 2018
コーディングで悩んでる最近勉強されてる方に伝えたいのは。
「とりあえずデザインと同じものが出来たらえーんやで!!」
最初はそれでいんや。最初はな。
中が全然だめでもいんや。
気にするのコーダーの人だけだから🙊数年後、自分が書いたコード見て、いやゴミやないかい!!とはなる
— ユーヘー神🍳 (@katayamada_Y) November 2, 2018
はにわまんのアイコンが変わりましたー!!!
めちゃくちゃ可愛い笑
変わりすぎて違和感あるかもしれませんが、これからもよろしくお願いいたします🙇♂️ちづみさん@098ra0209、本当にありがとうございました!😭😭😭 pic.twitter.com/DA7bXvVOYb
— はにわまん (@haniwa008) October 14, 2018
ちづみさん@098ra0209
にまにゃpyのアイコンを書いていただきましたー♪とてもかわいいアイコンでとても嬉しいです😄
まにゃPy生まれかわります♪😆 pic.twitter.com/nR3FvmkNmr
— まにゃpy@Python解説の猫bot (@uuyr112) September 27, 2019
あと、動くイラストというのもやっていまして、ブログの吹き出しなどに使っていただけるようになりました。動くとはいえ容量は軽いのでサイトスピードを気にせず導入できます!
(( 動くイラスト ))
サイト制作 × アドレスホッパー
ちづみさん(@098ra0209)に
6パターンの #動くイラスト を
作っていただきましたぁあぁあ!このクオリティーはヤバい…
気に入りすぎて乱用しまくりw吹き出しにいれてみたら革命的✨
まるで本当に話してるかのような描写フォルムがたまらん pic.twitter.com/hUkp02zcQ0
— 松山カンキ (@wemmick03) April 2, 2019
使っていただけてうれしいです!ありがとうございます😆内容めちゃめちゃわかりやすいですね!機械学習ってそういうことなのかと!面白そうです!また読み返します☺️✨ pic.twitter.com/2b0XMUf19p
— ちづみ (@098ra0209) September 29, 2019
動くイラストはご依頼承っておりますので、こちらからどうぞ!ブログのアクセントにオヌヌメです。
マインド編
web関連と言われたらどうなん??て感じですが、モチベ作りとか、人がどういう心理で動くのかとかも描いてました。
⭐️やる気はどこから?
他者から行動を規定される外発的動機づけは一時的にしか効力を発揮しないのに対し、
内発的動機づけは人間が本来持っている興味、やる気を刺激して行動を起こします😊内側から湧いてきたやる気はなによりも強いです!(`・ω・´)🔥 pic.twitter.com/fR8K7Hlvjm
— ちづみ (@098ra0209) May 31, 2018
⭐️接種理論⭐️
マイナス面をあえて伝えること欠点や短所はいいにくいものですが、あらかじめ相手に伝えておいたほうが成約率が上がったり、信頼につながることがあります😊
私の場合「早い納期に対応する能力はないですが、丁寧にやってます」ってのは言っちゃってますね pic.twitter.com/1KSghQC6cB
— ちづみ (@098ra0209) June 2, 2018
⭐️色彩心理⭐️
「人は見た目で9割決める」
と言われているように
色がもらたす効果は絶大で、ビジネス戦略でも必須です戦隊ヒーローの性格もだいたいこれですね🤣
「なりたい自分」につながるカラーを決めて、服の色やブログのカラーを考えてみるのもいいですね☺️
私は緑系を使ってます〜 pic.twitter.com/QexzIJeOmp— ちづみ (@098ra0209) May 14, 2018
⭐️AIDMA(アイドマ)の法則⭐️
消費者がモノを買うまでの心理モデル認知(商品を知る😯)
↓
感情(想像・悩む🤔)
↓
行動(決定!お金出す👛)マーケティングの基本ですが買い手側も知っといて損はないはず
みんな日常的に消費してるはずなので「あ、今この段階か〜」てわかるだけでも面白いですよね😊 pic.twitter.com/ReOJGV61n3— ちづみ (@098ra0209) April 24, 2018
あとよくわからんのですが、学校あるあるとかも描いてましたが、反応はないに等しかったです。
小学校お昼の放送あるある pic.twitter.com/NQVoYRHn48
— ちづみ (@098ra0209) May 11, 2018
めっちゃどうでもいいですが、私はイラストをかく時にショートカットキーを任天堂スイッチのジョイコンに当てはめて描いています。クソ早くかけるので便利だっちゃ!!
絵描くときに任天堂Switchのジョイコンを使ってるんだけど、ばり便利🤣生産性が爆上がりした🤣
✅コンパクトで握りやすい
✅ボタン多い
✅Bluetooth対応
✅Mac対応
✅左利きにも優しい
✅電池の持ちがいいで鬼優秀🙆🏻♀️任天堂さんやっぱすごいわ pic.twitter.com/VD4HM52Nkl
— ちづみ (@098ra0209) June 4, 2018
これがまとめたやつがこれです。左利き用のみの解説になっちゃってますが、オーガニックサーチでじわじわ読まれています。
以上になります。
何か技術本などのイラストのお話などありましたらお問い合わせいただけると嬉しいです〜!