イラストは、テキストだけでは伝わりにくいものを、視覚的にわかりやすくてくれる、とても効果的な手法です。ただどうしても、イラストを描くことはハードルが高く感じてしまいがちです。でも大丈夫！世の中のものはだいたい○と△と□でできているのです。本セッションでは、テクニカルライター向けに簡単にイラストを描けるテクニックをご紹介します。
世の中は○と△と□でできている〜 テ ク ニ カ ル ラ イ タ ー の た め の イ ラ ス ト テ ク ニ ッ ク 〜近 藤 有 紀2 0 2 2 . 4 . 1 4サ イ ボ ウ ズ 株 式 会 社
View Slide
は じ め にテキストだけではなく、図解を取り入れることはとても重要文字だけで無理矢理表現しようとすると混乱の元になることがあるイラスト入れることでテキスト以上の情報を伝えることができる
→根拠もなくフリーダムで描こうとしていませんか？は じ め にだけどイラストを描きたくても、イラストって難しそうと思ってしまう
だけどイラストを描きたくても、イラストって難しそうと思ってしまうは じ め に→ちょっとした観察とコツでだれでもイラストを描けるようになる！
ほんの少しでもいいから「描いてみようかな」という気持ちになれることを目指すそのための、かんたんなテクニックをご紹介します！こ の セ ッ シ ョ ン の ゴ ー ル
テクニカルライターで、図解を入れたいんだけど、イラストに苦手意識を持っている人→次の人には、わたし向けじゃないかな…と思うかもしれない• 自分でイラストを描いてる• イラストはデザイナーに任せている、だから大丈夫！想 定 す る タ ー ゲ ッ ト
テクニカルライターで、図解を入れたいんだけど、イラストに苦手意識を持っている人→次の人には、わたし向けじゃないかな…と思うかもしれない• 自分でイラストを描いてる• イラストはデザイナーに任せている、だから大丈夫！想 定 す る タ ー ゲ ッ ト→ちょっとまったぁ！
イラストはデザイナーだけの仕事じゃないデザイナーに依頼する場合でも、文章や言葉だけで相手にイメージを伝えるのは難しい→簡単でいいから、自分で作ったラフなどがあるとデザインを受ける側は、とてもやりやすい
本 日 学 ぶ イ ラ ス トイラストはたくさんの種類があるドキュメントで使われる代表的なイラストは二つ
本 日 学 ぶ イ ラ ス ト人・モノなど
本 日 学 ぶ イ ラ ス ト概念図
本 日 学 ぶ イ ラ ス ト人・モノなど 概念図
自己紹介
テクニカルイラストレーター / テクニカルライターゲーム大好き、刀大好き、食べるの大好きサイボウズには2011年入社職歴は、情シス、社内ヘルプデスク、Webデザイナー、イラストレーターなどサ イ ボ ウ ズ 株 式 会 社テ ク ニ カ ル コ ミ ュ ニ ケ ー シ ョ ン チ ー ム近 藤 有 紀
中小企業グループウェア 業務アプリ作成プラットフォーム大企業向けグループウェア メール共有システム73,000社以上 24,000社以上6,400社以上 12,000社以上グループウェアの開発・販売、チームワーク研修などサ イ ボ ウ ズ
大企業向けグループウェア業務アプリ作成プラットフォーム24,000社以上6,400社以上中小企業グループウェア73,000社以上メール共有システム12,000社以上グループウェアの開発・販売、チームワーク研修などサ イ ボ ウ ズ
Garoon ヘルプhttps://jp.cybozu.help/g/ja/
ヘルプのドキュメント管理についてなど、「Cybozu Inside Out」というブログで発信していますhttps://blog.cybozu.io/archive/category/テクニカルライティング
イラストの実績
本題
世の中に存在するものはだいたい○、△、□で描ける
ど う い う こ と ？
ほ と ん ど 〇楕円楕円 楕円楕円楕円楕円円弧
観察してみよう
ノ ー ト パ ソ コ ン ポ イ ン ト ：自分が描きたいもののどこに、〇、△、□があるのかをしっかり見る
□ で 描 け そ うノ ー ト パ ソ コ ン
ノ ー ト パ ソ コ ン 完 成
不 思 議 な 形 をし て い るE n t e r キ ー
三つの図形で描ききるのが難しいなら、＋αで何か足したり、逆に引いたりするE n t e r キ ー ポ イ ン ト ：
E n t e r キ ー□ と □ で 描 け そ う
EnterE n t e r キ ー 完 成
描きたい図形を、とりえず〇と△と□ だけ できないか、観察するそれだけでは難しいと思ったら、さらに複数の図形を足したり、逆に引いたりすればよい→とにかくこの三つの図形以外は排除するポ イ ン ト ま と め
さらに観察してみよう
曲線があったりするので、ちょっと難しそう〇を駆使して考えるマ グ カ ッ プ ポ イ ン ト ：
マ グ カ ッ プ フ チ ：〇 で 描 け そ う
マ グ カ ッ プ フ チ ：
ある一定の場所までは同一の横幅だが底に向かって幅がどんどん狭くなっているあと、底が丸いマ グ カ ッ プ 本 体 ：
マ グ カ ッ プ□ と 〇 で 描 け そ う本 体 ：
図形を重ねるマ グ カ ッ プ 本 体 ：
マ グ カ ッ プ 本 体 ：不要な線を消す
マ グ カ ッ プ 本 体 ：
ハンドルの外側と内側に2つの曲線があることがわかるマ グ カ ッ プ ハ ン ド ル ：
マ グ カ ッ プ ハ ン ド ル ：〇 で 描 け そ う
マ グ カ ッ プ ハ ン ド ル ：図形を重ねる
マ グ カ ッ プ ハ ン ド ル ：半分消す
マ グ カ ッ プ ハ ン ド ル ：
マ グ カ ッ プ3つのパーツを組み合わせる
マ グ カ ッ プ 完 成
3つの図形の特徴
四 角横幅、または高さが一定に決まっている図形を描くのに適している角度を変えるとひし形になったり、形を変えると台形、平行四辺形にできる無機質で硬いものを描くのに重宝
丸曲線、丸みのあるものを描くのに適している人や動物など、柔らかい暖かい印象のものなどを描くのによく使う
三 角とがった、鋭い先端があるものを書くのに適している注意、危険などをイメージしやすい四角形の角度を変えても鋭利な形になるので、この三つの図形の中では一番出番が少ない
→3つの図形をうまく使って描こう
なぜ、この方法で描くのか？
描 き や す い図形を描く機能は、標準で搭載されているアプリケーションなど、比較的何にでも提供されているので、練習がしやすい手書きの場合でも、○、△、□は描きやすい→描く人の環境を選ばない
単 純 化 し や す いイラストを細部まで描くと、余計なノイズが生まれ、誤解される描いても意味のないものは省く→細部を省いて、イラストを単純化するのであれば、あらかじめ○△□で描くと、細かい部分を省く作業などがないので理にかなっている
複 雑 な も の は複 雑 な ま ま表 現 し な く て い い
ユ ー ザ ー
服のシワや髪の毛など、必要ではない情報を認識してしまうユ ー ザ ー
どちらもユーザーであることは認識できるので、単純化したユーザーを描いたので十分伝わるユ ー ザ ー
→イラストによっては性別や年代などを、明確に表現する必要があるが、そうでない場合は、細かい描写は排除しよう複雑なものは複雑なまま表現しなくていい
○、△、□だけで複雑なものを描いてみた
ブ ル ド ー ザ ー
分 解
プ リ ン タ ー
→複雑な形状ものでも単純化したイラストで十分伝わる
そ の う ち こ れ が 描 け ま す
世の中って本当に○と△と□でできている！
本日のまとめ
○ 、 △ 、 □ を 見 つ け よ う 一 度 で 描 け な い 場 合 は 、 複数 の 図 形 を 組 み 合 わ せ よ う 単 純 化 し よ う 三 つ の 図 形 だ け で 描 こ う
い か が で し た か ？ほんの少しでもいいから「描いてみようかな」という気持ちになりましたか？明日から原稿の横にそっとあなたのイラストを添えてくると嬉しいです
https://blog.cybozu.io/archive/category/テクニカルライティングCybozu Inside Out
https://jp.cybozu.help/g/ja/video.htmlGaroon ヘルプ「動画で学ぶ」
おしまい
yuki_kondo
minorun365
you
lmi
shibuiwilliam
tacck
mraible
cimadai
tomoaki25
k1low
kenchan
sugawani
toshi0383
jnunemaker
lara
dotmariusz
chrisshort
notwaldorf
danielanewman
eitanlees
tammyeverts
smashingmag
tammielis
maltzj
aarron