Slide 1
Slide 1 text
世の中は
○と△と□で
できている
〜 テ ク ニ カ ル ラ イ タ ー の た め の イ ラ ス ト テ ク ニ ッ ク 〜
近 藤 有 紀
2 0 2 2 . 4 . 1 4
サ イ ボ ウ ズ 株 式 会 社
Slide 2
Slide 2 text
は じ め に
テキストだけではなく、図解を取り入れることはとても重要
文字だけで無理矢理表現しようとすると混乱の元になることがある
イラスト入れることでテキスト以上の情報を伝えることができる
Slide 3
Slide 3 text
→根拠もなくフリーダムで描こうとしていませんか？
は じ め に
だけどイラストを描きたくても、イラストって難しそうと思っ
てしまう
Slide 4
Slide 4 text
だけどイラストを描きたくても、イラストって難しそうと思っ
てしまう
は じ め に
→ちょっとした観察とコツでだれでもイラストを
描けるようになる！
Slide 5
Slide 5 text
ほんの少しでもいいから「描いてみようかな」という気持ち
になれることを目指す
そのための、かんたんなテクニックをご紹介します！
こ の セ ッ シ ョ ン の ゴ ー ル
Slide 6
Slide 6 text
テクニカルライターで、図解を入れたいんだけど、イラストに苦手
意識を持っている人
→次の人には、わたし向けじゃないかな…と思うかもしれない
• 自分でイラストを描いてる
• イラストはデザイナーに任せている、だから大丈夫！
想 定 す る タ ー ゲ ッ ト
Slide 7
Slide 7 text
テクニカルライターで、図解を入れたいんだけど、イラストに苦手
意識を持っている人
→次の人には、わたし向けじゃないかな…と思うかもしれない
• 自分でイラストを描いてる
• イラストはデザイナーに任せている、だから大丈夫！
想 定 す る タ ー ゲ ッ ト
→ちょっとまったぁ！
Slide 8
Slide 8 text
イラストはデザイナー
だけの仕事じゃない
デザイナーに依頼する場合でも、文章や言葉だけで相手にイメージを
伝えるのは難しい
→簡単でいいから、自分で作ったラフなどがあると
デザインを受ける側は、とてもやりやすい
Slide 9
Slide 9 text
本 日 学 ぶ イ ラ ス ト
イラストはたくさんの種類がある
ドキュメントで使われる代表的なイラストは二つ
Slide 10
Slide 10 text
本 日 学 ぶ イ ラ ス ト
人・モノなど
Slide 11
Slide 11 text
本 日 学 ぶ イ ラ ス ト
概念図
Slide 12
Slide 12 text
本 日 学 ぶ イ ラ ス ト
人・モノなど 概念図
Slide 13
Slide 13 text
自己紹介
Slide 14
Slide 14 text
テクニカルイラストレーター / テクニカルライター
ゲーム大好き、刀大好き、食べるの大好き
サイボウズには2011年入社
職歴は、情シス、社内ヘルプデスク、Webデザイナー、イラストレーターなど
サ イ ボ ウ ズ 株 式 会 社
テ ク ニ カ ル コ ミ ュ ニ ケ ー シ ョ ン チ ー ム
近 藤 有 紀
Slide 15
Slide 15 text
中小企業グループウェア 業務アプリ作成プラットフォーム
大企業向けグループウェア メール共有システム
73,000社以上 24,000社以上
6,400社以上 12,000社以上
グループウェアの開発・販売、チームワーク研修など
サ イ ボ ウ ズ
Slide 16
Slide 16 text
大企業向けグループウェア
業務アプリ作成プラットフォーム
24,000社以上
6,400社以上
中小企業グループウェア
73,000社以上
メール共有システム
12,000社以上
グループウェアの開発・販売、チームワーク研修など
サ イ ボ ウ ズ
Slide 17
Slide 17 text
Garoon ヘルプ
https://jp.cybozu.help/g/ja/
Slide 18
Slide 18 text
ヘルプのドキュメント管理についてなど、
「Cybozu Inside Out」というブログで発信しています
https://blog.cybozu.io/archive/category/テクニカルライティング
Slide 19
Slide 19 text
イラストの実績
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
本題
Slide 22
Slide 22 text
世の中に存在するものは
だいたい
○、△、□で描ける
Slide 23
Slide 23 text
ど う い う こ と ？
Slide 24
Slide 24 text
ほ と ん ど 〇
楕円
楕円 楕円
楕円
楕円
楕円
円弧
Slide 25
Slide 25 text
観察してみよう
Slide 26
Slide 26 text
ノ ー ト パ ソ コ ン ポ イ ン ト ：
自分が描きたいもののどこに、
〇、△、□があるのかをしっ
かり見る
Slide 27
Slide 27 text
□ で 描 け そ う
ノ ー ト パ ソ コ ン
Slide 28
Slide 28 text
ノ ー ト パ ソ コ ン 完 成
Slide 29
Slide 29 text
不 思 議 な 形 を
し て い る
E n t e r キ ー
Slide 30
Slide 30 text
三つの図形で描ききるのが
難しいなら、＋αで何か足
したり、逆に引いたりする
E n t e r キ ー ポ イ ン ト ：
Slide 31
Slide 31 text
E n t e r キ ー
□ と □ で 描 け そ う
Slide 32
Slide 32 text
Enter
E n t e r キ ー 完 成
Slide 33
Slide 33 text
描きたい図形を、とりえず〇と△と□ だけ できないか、観察する
それだけでは難しいと思ったら、さらに複数の図形を足したり、逆に引い
たりすればよい
→とにかくこの三つの図形以外は排除する
ポ イ ン ト ま と め
Slide 34
Slide 34 text
さらに
観察してみよう
Slide 35
Slide 35 text
曲線があったりするので、
ちょっと難しそう
〇を駆使して考える
マ グ カ ッ プ ポ イ ン ト ：
Slide 36
Slide 36 text
マ グ カ ッ プ フ チ ：
〇 で 描 け そ う
Slide 37
Slide 37 text
マ グ カ ッ プ フ チ ：
Slide 38
Slide 38 text
ある一定の場所までは同一の
横幅だが底に向かって幅が
どんどん狭くなっている
あと、底が丸い
マ グ カ ッ プ 本 体 ：
Slide 39
Slide 39 text
マ グ カ ッ プ
□ と 〇 で 描 け そ う
本 体 ：
Slide 40
Slide 40 text
図形を重ねる
マ グ カ ッ プ 本 体 ：
Slide 41
Slide 41 text
マ グ カ ッ プ 本 体 ：
不要な線を消す
Slide 42
Slide 42 text
マ グ カ ッ プ 本 体 ：
Slide 43
Slide 43 text
ハンドルの外側と内側に
2つの曲線があることがわかる
マ グ カ ッ プ ハ ン ド ル ：
Slide 44
Slide 44 text
マ グ カ ッ プ ハ ン ド ル ：
〇 で 描 け そ う
Slide 45
Slide 45 text
マ グ カ ッ プ ハ ン ド ル ：
図形を重ねる
Slide 46
Slide 46 text
マ グ カ ッ プ ハ ン ド ル ：
半分消す
Slide 47
Slide 47 text
マ グ カ ッ プ ハ ン ド ル ：
Slide 48
Slide 48 text
マ グ カ ッ プ
3つのパーツを組み合わせる
Slide 49
Slide 49 text
マ グ カ ッ プ 完 成
Slide 50
Slide 50 text
3つの図形の
特徴
Slide 51
Slide 51 text
四 角
横幅、または高さが一定に決まっている図形を描くのに適している
角度を変えるとひし形になったり、形を変えると台形、平行四辺形に
できる
無機質で硬いものを描くのに重宝
Slide 52
Slide 52 text
丸
曲線、丸みのあるものを描くのに適している
人や動物など、柔らかい暖かい印象のものなどを描くのによく使う
Slide 53
Slide 53 text
三 角
とがった、鋭い先端があるものを書くのに適している
注意、危険などをイメージしやすい
四角形の角度を変えても鋭利な形になるので、この三つの図形の中で
は一番出番が少ない
Slide 54
Slide 54 text
→3つの図形をうまく使って描こう
Slide 55
Slide 55 text
なぜ、この方法で
描くのか？
Slide 56
Slide 56 text
描 き や す い
図形を描く機能は、標準で搭載されているアプリケーションなど、
比較的何にでも提供されているので、練習がしやすい
手書きの場合でも、○、△、□は描きやすい
→描く人の環境を選ばない
Slide 57
Slide 57 text
単 純 化 し や す い
イラストを細部まで描くと、余計なノイズが生まれ、誤解される
描いても意味のないものは省く
→細部を省いて、イラストを単純化するのであれば、
あらかじめ○△□で描くと、細かい部分を省く作業
などがないので理にかなっている
Slide 58
Slide 58 text
複 雑 な も の は
複 雑 な ま ま
表 現 し な く て い い
Slide 59
Slide 59 text
ユ ー ザ ー
Slide 60
Slide 60 text
服のシワや髪の毛など、必要で
はない情報を認識してしまう
ユ ー ザ ー
Slide 61
Slide 61 text
どちらもユーザーであることは
認識できるので、単純化した
ユーザーを描いたので十分伝わる
ユ ー ザ ー
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
No content
Slide 64
Slide 64 text
No content
Slide 65
Slide 65 text
→イラストによっては性別や年代などを、明確に表
現する必要があるが、そうでない場合は、細かい描
写は排除しよう
複雑なものは
複雑なまま
表現しなくていい
Slide 66
Slide 66 text
○、△、□だけで
複雑なものを
描いてみた
Slide 67
Slide 67 text
ブ ル ド ー ザ ー
Slide 68
Slide 68 text
分 解
Slide 69
Slide 69 text
プ リ ン タ ー
Slide 70
Slide 70 text
分 解
Slide 71
Slide 71 text
→複雑な形状ものでも単純化したイラストで十分伝わる
Slide 72
Slide 72 text
そ の う ち こ れ が 描 け ま す
Slide 73
Slide 73 text
世の中って
本当に
○と△と□で
できている！
Slide 74
Slide 74 text
本日のまとめ
Slide 75
Slide 75 text
○ 、 △ 、 □ を 見 つ け よ う
一 度 で 描 け な い 場 合 は 、 複
数 の 図 形 を 組 み 合 わ せ よ う
単 純 化 し よ う
三 つ の 図 形 だ け で 描 こ う
Slide 76
Slide 76 text
い か が で し た か ？
ほんの少しでもいいから「描いてみようかな」という気持ちに
なりましたか？
明日から原稿の横にそっとあなたのイラストを添えてくると嬉しい
です
Slide 77
Slide 77 text
https://blog.cybozu.io/archive/category/テクニカルライティング
Cybozu Inside Out
Slide 78
Slide 78 text
https://jp.cybozu.help/g/ja/video.html
Garoon ヘルプ「動画で学ぶ」
Slide 79
Slide 79 text
おしまい