最終更新:

紙とペンとスマホがあれば大丈夫!手描きイラストを簡単にウェブで公開する方法

How to draw with

こんにちは。しえすたろう編集部の嵯峨山です。

しえすたろう、とうとうリリースされました。めでたい!
しかしまだまだ出来立てのメディアですし、会社としても初のオウンドメディアです。
よちよち歩きの編集部がとりあえずやってみよう!という気合だけでやっているので、こうなりゃもう逆に全部出しで、読者のみなさまにはメディアが成長していく過程までがっつり見守っていただこう、という所存でございます。
よろしくお願いします!

さて、サイトデザインのなかじまさんの尽力によりある程度体裁の整っているしえすたろうですが、まだまだツメが甘い部分も多いです……

例えば、『しえすたろうって何?』というページ。
知名度もまだないメディアだけに、サイトの概要を知りたい読者の方も多いと思うのですが、リリース前日の状態はこんな感じでした。

『しえすたろうって何?』スクリーンショット(ビフォー)

いや~、シンプルで見やすいですね!!!

……なんて言ってみても、流石にこれだと殺風景でとっつきにくい。
書いてある意識高めのコンセプトや、トップページのにぎやかな印象とギャップがありますよね。
もっと読者の目をひくような、楽しい雰囲気を出したい……

そんな時は画像を載せましょう!!
写真もいいけど、手描きのイラストだとオシャレで親しみやすい雰囲気を演出できます。

今回は、このページに線画の手描きイラストを載せるまでの大まかなフローについて振り返ってみたいと思います。
特に今回は特別な機材を使っていないので、ちょっとしたイラストをWebで載せたい人にはオススメの方法です。
ウェブマガジンで公開する、なんてことはなくても、SNSのアイコンにしてみたり、スマホの待受にしてみたり……ちょっと楽しくなりますよ!

載せたいものを考える

画像を載せようと言っても、ページの内容と合ってないとダメですよね。
親しみやすい感じにしたい時と、上品で落ち着いた雰囲気を作りたい時では、必要な画像も変わってきます。

本当にイラストがいいのか? やっぱり写真の方がいいかも、ということもあるでしょう。
イラストならどんなイラストがいいのか。ページの内容を象徴したり、要約するものなのか。
どういう役割のイラストを、どういう大きさでどう配置するのかまでイメージ出来ているといいですね。

そもそもまず画像を載せた方がいいのかどうか? というお話も。
文章や、文字や構成、デザインの工夫でぐっとよくなる部分もあるでしょうし、見直せる部分は見直した方がいいですね。

今回は、しえすたろうの名前の由来をぱっと説明できる、ちょっとオシャレで親しみやすいイラストが欲しかったので、「SIESTA」「太郎」、2つのイラストと文字を足し算のように見せていくことにしました!

リサーチしてスケッチ!

必要な画像がわかってきたら、実際に描いていきます。
ただ、イメージが「なんとなくこういう感じかな~」程度の漠然とした感じだったり、もっとアイデアを広げたり、整理したいな、と思うことも。
また、描きたいものについての知識がなく、筆が止まってしまうこともあります。

そんな時はリサーチをして、手元に資料を用意しましょう。
具体的に描きたいものや場所がある場合は、もちろんそこに取材に出かけるのがベスト!
ですが、実際は取材記事でもない限り、時間もお金もかけられないという場合がほとんど……

そこで強い味方になってくれるのが、Google画像検索です。
描きたいものの名前を入れて、検索すると、イメージの大海原が眼前に広がります。

例えば「SIESTA」と入力して検索すると……

『SIESTA』 google画像検索

資料の宝石箱や~!!
すごいよ!!グーグルさん

さらに、関連するワードや、連想したワードをさらに検索や画像検索をしていくと、アイデアとイメージがまとまっていいですよ!

一通り確認したら、その記憶をもとにスケッチに。
今回は、異国感のある雰囲気で寝そべって昼寝している人の姿を書くことにしました。
特定の画像の模写やトレースは、公開すると著作権違反となってしまいますので、あくまで練習の段階にとどめておきましょう。

ちなみに「太郎」の方は、「桃太郎」や「浦島太郎」などで画像検索してヒントにしました!
こうして得たヒントをもとに、さらにスケッチを重ねていきます。とにかく描いて描いて、アイデアをまとめながら下書きに。

清書は濃いペンで

スケッチをもとに下書きをしたら、それをさらに清書します。

手描きのイラストをデータ化する際、筆記具は

  • 濃いインクのもの
  • 線がかすれたり滲んだりしないもの

を選ぶのがポイント。ある程度の太さの黒いペン油性マジックなんかがオススメです。

ただ、それぞれの筆記具に長所と短所があり、出したい雰囲気によっては短所が長所になったりもするので、描きたいイラストと雰囲気によって、考えながら色々試していくといいと思います。
好きな筆記具で描くと楽しくて捗りますよ!

今回は普通のコピー用紙にスケッチし、その上にコピー用紙を重ねて無印良品の万年筆で清書。
やりにくい場合はトレーシングペーパーというスケスケの紙を使うとグッド。

スマホアプリ「CamScanner」でスキャン

清書した紙をデータ化するって言っても、スキャナとか持ってないしな~ってお悩みがあるかもしれません。
全然大丈夫です。心配ご無用です。いやだって、大抵の方がお持ちだと思いますよ小型のスキャナ……

……スマホという名のスキャナをね!

そう、簡単なイラストのスキャンならスマートフォンがあれば全然なんとかなっちゃいます。
むしろ手軽にサクサク作業できる利点もあるので、実はかなりオススメの方法ですよ!

スマホには便利なスキャナアプリがたくさんあるので、それを使って撮影しましょう。
画像を自動で整えてくれて、文字や線がとっても見やすくなりますよ。
今回は評判のいいスキャナアプリ「CamScanner」を使って撮影しました。
iOS、Android、さらにWindowsストアアプリもあって無料です!

CamScanner Free

CamScanner Free
無料
posted with アプリーチ

撮る時のポイントは線と紙のコントラストがはっきり出るよう、明るい部屋で撮影すること
明るさが足りない場合は画面左上の「フラッシュ」をタップして、フラッシュをたいて撮ってみましょう。
また、ぼやけないようイラストの部分をタップしてピントを合わせておくのも大事。
なるべく真上から撮るといいですが、スマホや手の影が入ってしまうこともあるので、やりながらいいポイントを見つけてください。

CamScanner スクリーンショット 1

実際CamScannerでとるとこんな感じに。
いらない部分あるなー、斜めっちゃったなーと思っても大丈夫。
枠線のそれぞれの角の位置を動かせば、自動で読み込みたい部分だけ歪みなくデータ化できます。
画像の回転なんかも下部のメニューでできるので、ここで済ませておきましょう。
そして一度右下のチェックマークをタップ。

CamScanner スクリーンショット 2
すると自動で画像を調整してくれます。文字や線が見やすい!
そして左下のチェックマークを押すと、無事いい感じの画像に!

撮影したイラストをタップして下部のメールをタップすると、メールで送るファイル形式を選ぶ段階に。
ここでは画像ファイルを送りたいので、JPGファイルを選びます。
メールソフトが立ち上がるので、メールアドレスを入力して送信!

アドレスにファイルが添付されて届きました!

SIESTA メール スクリーンショット

本当に便利なこのアプリ、デフォルトのメールアドレスを設定しておけば毎回入力することなくファイルを送ったりもできますし、DropboxやGoogleドライブなどとの連携もできます。
しかも書類を読み込んで、文書として読み込むOCRという機能もついています。さらに画像にコメントをつけたり、複数人で共有したり……ビジネスにもがっつり使えそう。
無料でなんというポテンシャル……ぜひ活用してみてください!

まとめ

screencapture-www-webday-jp-test-siestaro-about-siestaro-1453440080640_2

実際に作った画像を『しえすたろうって何?』のページに貼ってみました。
まだちょっと寂しいですが、全くイラストがない時よりだいぶ楽しげな雰囲気になりました!
手描きの親しみやすさと、デジタルのパキっとした綺麗さを両立できている感じがしますよね。

このように、紙とペンとスマホだけでも、手軽でいい感じにウェブに公開できちゃいます。
文明、すごいですね……おそろしいですね。開発者の方には足を向けて眠れません。

さらにスキャナーを使って画像をとり込んだり、PhotoshopやIllustratorなどの画像ソフトを使ったりすると、より高いクオリティで仕上げることが可能になってきます。
そもそもイラストを描くときにペンタブやスマホ・タブレットを使ったりする手もありますね。道具も手法もたくさんあって、奥が深い世界です……

ただ、簡単な道具だけでここまで気軽にできるなら、ちょっとやってみようかなって思いませんか?
今は便利なアプリもここで紹介しきれないほどたくさんあるので、色々組み合わせて試して、イラストを描いてみてください!