note

iPadPro&ApplePencilとデザイナー

●ついにお仕事ツールとして完成した

iPadProとApplePencilはデザインや編集の仕事にかなり使える!

iOS9から搭載された画面分割機能は普通のiPadでも結構便利だった。
画面を左右にササッと分割すると、まあタイヘン!左右別々のアプリを立ち上げて作業ができるのだ。

満面の笑みをたたえてWebサイトを閲覧しながら、シアワセなメールや心を砕く修正指示メールをかいたり、画像など資料をみながらデザインラフを作成したり、夜一人寂しさで涙があふれたらHuluで映画を見ながら、Twitterで少ないフォロワーにせつなさを訴えたりと、かなり嬉しい機能だった。

 

その機能がiPadProのでかさのおかげでさらに便利に使えるようになった。画面分割機能はiPadProの広大無辺な大きさで使ってこそだと思った。
インパクトとしては、いままでのiPad Airをふたつ並べたような広さに感じる。

いや、クフ王のプラミッドをふたつ並べた感じと言えばわかりやすいだろうか。
実際はiPad miniを並べたくらいらしい。

資料や原稿を見ながら、ラフを描くことが本当に快適になった!


 

iPad


いま日々、この画像のようなスタイルで作業してるんだけど、感覚的にも物理的にもかなり効率よく作業が進んでる。

いままであちこち視線や手の動きが飛んでいたのが無くなり、ぐっと集中できるようになった。素晴らしいー。

「モニターを見上げて、手元のiPadに戻して…」ってのは実は結構集中力を阻害していたことがわかった。
資料閲覧必須な仕事の場合は、頭の上下運動だけで意識が遠のくかもしれないと心配すらしていたのだ。
それがもう頭は固定。動かざること山のごとし、仕事が進むこと風のごとし。赤字が戻ること火のごとく。

 

●Apple Pencilの描き味はかなり良い!

ApplePencilもかなり良い。
というかiPad ProはApple Pencilありきだろう。最初はちょっと硬めの描き味かなと思ったら、アプリによってはグッと滑らかに描ける。ワコムの液タブと比べちゃうと、さすがにあっちの方が感度が良いけど、Apple Pencilも想像以上に使える。

いままでAdobeの妙に高価なiPad用のスタイラスペンや他のBluetooth接続のスタイラスペンをつかってきたけど、比較にならないほどApple Pencilはブッチギリで感度が良く描きやすい。細かい字もスイスイ描ける。
思わず、Cintiq 13HDを手放してしまった。

PDFに注釈入れたり、赤字入れたりもストレスなくできる。もう存分にゲラを真っ赤にできる。真っ赤っかにしよう。

 

●使う気になるiPad Pro

iPadだと「描く気になる」のだ。
WindowsOSやMacOSで使う液タブだと、どうしても描くまでの手続きと保存&管理の手続きがiOSよりわずかに多い。
iOS、、つまりiPadならサッと立ち上げてアイコンをクリックすれば、画面はただの画用紙になる。なんの手続きもなく描き始められる感じが素晴らしい。
 

WindowsだってMacだって、アイコンクリックすれば…ってのは同じなんだけど、ウィンドウサイズを整えたりなんだりと、ほんの僅かだけどパソコン特有の手続きを感じてしまう。この僅かな手続きの差が日常となると本当に大きいのだ。

iPad ProはただのデカイiPadだとあなどってはいけない。この面積の差がiOSの便利さをベラボウに加速する!

あえて強めに言いたい。

iPadProとApplePencilはデザイナー、編集者必須アイテムだ!

 

 

お絵描き系の使い勝手はYouTubeにアップしてみたのでよろしければご覧ください!

 

出張教室!

懇意にさせていただいてるプロダクションさんで10人ほどの勉強会をやらせていただきました。

Webにデザイナーがどう関わっていくか(いきたいか)を、2時間ほどお話させていただいた。
いま公開中の漫画の連動的な内容。

スライド&構成を、若干あわてて作ったので、伝わるようにわかりやすくうまく話せるか、少し不安もあったけど、参加された方々が本当に真心をこめて聞いてくださったので、なんとか無事完走。


今回は

【出張教室】セットを持ち込んだ。

kyoushitu-01

今回持参したプロジェクターはEPSONのEB-W420というモデル。
高価なモデルではないんだけど、室内で照明を消さずにしっかり見れる。

解像度は1280×800。モニターとしてみれば低いけど、スライドを見せる分にはまったく問題ない。

kyoushitu-02

Macとプロジェクターとスクリーンで5kg程度。
余裕で持ち運びできる重さだ。

kyoushitu-03

スクリーンもなかなか良い!40インチのモニター持参できるのはとても便利。
10人くらいなら40インチでジュウブン。

 

kyoushitu-04

参加していただけた方たちが本当にいい人ばかりで、荒ぶる福井の話を丁寧に聞いていただけました。感謝。感涙。

終了後のディスカッションもとても楽しく、色々と勉強になった。

 

いままで出張講師を何回かやってきたけどれど、プロジェクター&スクリーンを持参したのは初めて。

今回用意したこのセットがあれば相手方の環境をきにすることなく出張教室ができるなあと思った。

出張教室のご希望があればご相談ください。

デザイン関係の勉強会や、グラフィック系のソフトの入門講座などを、年に数回ほど行っています。
グラフィック系のソフトになじみのない人にも、なるべくわかりやすくやります。
少人数であれば今回のセットを持参します。

どの程度の入門具合なのか、どんな風に伝えているかはYouTubeで公開中の入門講座をご覧ください。

illustrator入門

YouTubeで公開中の入門講座。

デザインの瞬間

この解説は、何年も前に知人に「デザイナーの仕事」を説明したときに用いた例です。
あくまでも私が考えるデザインの一面です。

 

●情報の伝え方

 

「箱がずらりと並んでいる」ということを表現をしてみた。

 

nekoko-01

 

整然と並んでる状態。これも意図的であれば「設計されている」と言えなくもないが、この時点はただの「データ」「素材」でしかない。

ただ整頓しても人はなかなか気にしてくれない。
気にしてくれず、素通りされてしまってはとても寂しくてせつないのだ。
そこでちょっと「事件」を起こしてみる。

 

nekoko-02

 

整然と並んだ状態の一か所を崩す。ある意味、隙ができて気になってみてしまう。気にしてもらって見てもらえたらこっちのもの。1つ箱を犠牲にして「箱がずらと並んでいる」という情報伝わったのだ。
伝えたい情報をより多くの人に伝えるためにデザイン[設計]したわけ。
これではまだ「弱い」かもしれない。しかも一か所ずらしただけでは、点線の一部がずれただけにも見えるかもしれない。
そんな心配があるので、こんなことをしてみる。

 

nekoko-03

 

ずらした一か所を傾け、色を付ける。そうすれば「強く」なるし、「点線ではなく四角だ」という情報が明確になる。情報を明確にし、よりしっかり伝わりやすくデザイン[設計]したのだ。機能をはたすだけではなく、傾けた角度、色の意味合い等をしっかり配慮して、美観的にもよりよいものになれば、よりよいデザイン「設計」になっていくと思う。
こんなシンプルのたとえ話でも考えることはタクサンあるのだ。
そして、どういう印象を持たせたいかも重要だ。発信者の個性も考えないといけない。スッキリ伝えたいのか、スマートに見せたいのか、ドッシリとパワフルに伝えたいのか。豪華にみせたいのか。
そしてこんな仕上がりにしてみる。

 

nekoko-04

 

これは当初の目的次第では「やりすぎ」であるかもしれない。
誰のものを誰にどんな風に、いつ伝えたいか。それをしっかり考えてデザインしないといけないと思う。


 

●文でやってみる。

 

同じようなことを文章でやってみる。

 

nekoko-05

 

この情報をどう伝えたいのか、どこを一番伝えたいかで、デザインは変わってくる。あくまで先の「箱」の例になぞってやってみる。
「猫の口」ということを印象づけることを狙って設計してみる。

 

nekoko-06

 

はい。箱のときと同じことをやってみた。こうするとみる人に「猫」と「口」がまず目に入っていくはず。「猫の口の話かな?」とまんまと誘導できるかもしれない。
さて、ポイントを変えつつ、ぐっとデコレーションを施してみる。

 

nekoko-07

 

「好」と「猫」にポイントを移したので、見る人はこんどは「猫が好きなんだな」、あるいは「好きな猫の話かな」という印象を持ったうえで読むことになる。
さらにイラスト的な処理を施すことで「楽し話題だな」と思ってくれる。まさか猫との別れの話だと誤解することはないだろう。

デザインという仕事は単に美観的にかっこいい仕上がりを目指してるわけではなく、「誰にどんな風に、どんな印象で伝えたいか等」をしっかり考え、作戦をたててデザイン[設計]していくのです。

 

デザインでもイラストでもラフは描く

ラフを描いた方が早い

 

書籍の本文レイアウト・装丁、パンフ、Webなどのデザイン業務はパソコンとソフトを立ち上げれば、パタパタと組み上げていくことが出来る。

でも大抵の場合それは「のようなもの」でしかないことが多い。

発想が漠然としている状態でパソコン上でグイグイとマウスを動かしてみても、デザイン[設計]などできたもんじゃない。

 

よっぽど頭の中で完璧に出来上がってて、アウトプットするだけにまで頭の中でイメージが完成していれば別。なかには常にそうだという人もいるかもしれないけど、多くの場合はしっかり紙の上で手を動かすことでデザイン[設計]を始めたほうが良いと思う。

 

いろいろ理由はあるけれど、ひとつにはパソコンソフトでの作業では「機能・ツールを使う」という目的が強くなる。なので、発想が無い状態でソフトを動かしてしまうと、機能・ツールを使う事が先行してしまい、そこから後付けでデザインらしきものに仕立て上げようとすると、時間がかかるし、良い発想ができない。

そもそも発想ありきじゃないから。

 

もう一つは手を動かすことで脳が伸びやかになることもある。
少なくとも自分はそうだ。
やはり紙を前に手を動かすことから始めたい。
いつもは、

●1:頭でどうしようか思い描きなら歩く
●2:ふわっとわいたら紙に向かう。
●3:そしてパソコン。

という流れで作業に入っている。

しかし世の中にはそんな必要が無い人もいるってことは否定しない。
モーツァルトの譜面は何か消した後も、書き加えた後も(ほとんど)なく完璧に美しかった(事が多い)らしい。
手塚治虫はラフも下書きも無しでペン入れを始めることができたらしい。

 

常にそんな人たちと同じように発想・作業はできないので、私はラフを描きます!
3DCGもソフトを立ち上げて少し手を動かせば、それなりに出来ていってしまう。でも成り行きで「良い感じ」のものが出来る確率はやっぱり低い。それに時間がかかる! 結局ラフを描いた方が数十倍早い。

スクリーンショット 2015-08-17 20.12.30

Webフォント入れてみた

Webフォントを入れてみました。
すでにこのブログに反映されています。

どうだろう?

Webで表示される日本語書体は見る人の環境(ブラウザやOS)に依存する部分が多く、はっきりと意図できる違いはゴシックか明朝程度の違いだ。

英文フォントはアルファベットが26文字×2(小文字)と形の数が少なく、比較的ネットを重くすることなくいろんな書体を導入できるので、Web対応の書体が無数にある。

日本語は漢字の文字種が多すぎて、Webでいろんな書体を表現することはまだ難しい。アルファベット数十種にたいして、数万だから!

ネットの重さを犠牲にしてまで、数万種の文字をwebサイト上にうめこむのは憚られる…ということ。

 

それでも少しは見栄えよく、読みやすく、親しみやすさを目指したいので、「ひらがな・カタカナ」のみの書体をWebフォントして組み込んでみました。
実際「ひらがな・カタカナ(あと数字と英字)」のみとして販売されているWebフォントです。


 

■ 元の状態

スクリーンショット 2015-08-03 20.25.55

■ Webフォント入れた状態

スクリーンショット 2015-08-03 20.26.47

どうですか?

少しは印象違うかな。
多分、変わったことに気づかない程度かも。
ほのかな印象としてでも、親しみやすく見やすくなったのであれば良いかなと。
こういう本文の読みやすさ部分のデザインって「そういえば」くらいでちょうど良いと思う。

 

あるいはこれは目新しいだけで、元のデフォルトのままの方がいいかもしれない。ともかく運用してみないことにはわからないので、入れてみました。

いずれにしても、環境によって意図してない形で発信してるよりは、「こういう風にみえてる」と確信できていたほうが気がラクだ。

 

このあたりのことはまだ議論の余地がある部分だと思う。さほど効果的じゃないってう考え方もあるだろうし。

 

イラストレーター入門講座をまとめてみた

趣味の範囲でちょこちょこと
illustratorの使い方を動画にしてYouTubeにアップしている。

このソフトはなかなかとっつきにくいと感じるひとも多いから、極力わかりやすく解説しているつもり。

某建築系会社のマークデザイン

知人が務める建築系の会社のマークデザインをさせていただいた。

現場でかぶるヘルメットにも印刷したいということで、
ヘルメットにあって誇らしくなるデザインにしようと思った。

シンプルが優先されることも多いけど、今回はなるべく表情的なものがでてくれば、線が多くても良いと思って設計した。

さて、さきに完成したマークをご紹介。

logo1
さてこれがどんなふうに設計されたかを白状します。

まず、
コンセプトをしっかり頭に置いて、それを考えつつ、あえて忘れつつ、たまに思い出しつつ
手が気持ち良く動くことを優先して手描きでラフを描く。

頭の中に置いたコンセプトは以下のもの。

●つまり人の腕から生み出される。
●街に自分たちの実績を作り上げていく。
●実績が広がっていく。
●建築物を支える(基礎)。街を支える(都市計画)
●職人の腕の強さ
 
描くということにおいて大事にしたのは以下のこと
●上のほうに気が立ち上っていく
●円の強さ

 


 

logo2

 


 

手描きのラフができたら
それを具体的に作り込んでいく。
手描きラフの段階で好き勝手に描いていた曲線を、安定感のある図形に落とし込んでいく。
正体はこんなふう。
logo3

少なくとも自分の場合は、マークデザインにしてもその他の仕事にしても、クライアントや案件にたいして強く感情移入して設計する。もちろん客観的な目線も保ちつつ。

最後に参考までに
ごっそりシンプル化したものも別案として作っておいた。

sin

 

 

GPUを使ってレンダリングするソフト「OctaneRender」

OctaneRenderについて、今の時点でわかったことをまとめておく。あくまで備忘録程度のもの。

※MODOのプラグイン、OctaneRender for MODOを使ってのお話。

目次

・必要な環境
・準備と設定
・レンダリングの種類:テストレンダリング結果
・ちょこっとアニメーションも

 


・必要な環境

GPU。つまりグラフィックボードを使ってレンダリングするので当然グラボは必須。
しかもNVIDIAのグラボが良いそう。
OctaneRenderはCUDAという技術を使うので、CUDAを開発したNVIDIAのグラボのほうが良いとのこと。

Quadro出なくてOK。むしろGeForceのほうがベンチマークのスコアが良いかも。

うちにある環境でテストしたみた。

● iMacのGTX680MXでは36

●Windows機その1 GTX780では80

●Windows機その2 GTX TITAN Xでは130

CODAコア数がそのまま結果に反映した。


・準備と設定

購入もアクティベーションも比較的簡単だった。ライセンスは1台につき1つ。WindowsでもMACでも使える。
アクティベーション解除はサイトからもできるので、うっかりWindowsを再インストールしても大丈夫みたいだ。
Macで使うこともできるけど、グラボ的な理由から基本的にWindowsで使うことになりそう。

アクティベーション時に入力するIDとパスワードは、サイトのログイン時に必要なものとは違う。
OctaneRender購入時に発行される物を入力する。これはサイトにログイン後、ライセンスのページで確認できる。
スタンドアローン版と、MODOプラグイン版の両方のアクティベーションが必要。
MODOプラグインのアクティベーションは MODOを立ち上げたあと上部メニュー「Octane」というメニューから行う。

MODOシーンをひらいて、「Octane」メニューから「OctaneRender ViewPort」を開けば、すぐにレンダリングが始まる。

[注意!]
シーンにDirectional Lightが無くて、ポイントライトやスポットライトしか無い場合、真っ暗なままで何も見えない! どうやらOctaneRenderではポイントライトやスポットライトは読み込まないらしい。(もしかしたら設定しだいかも)
テストレンダリングでスポットライトを使いたかったので、仕方なく球体を作り、筒に入れて、ルミナンスの設定をして自力でスポットライトを作った。

[注意!]
・アニメーションをレンダリングをするときは保存先をかならず指定すること。
・サンプル数(レンダリング品質)がデフォルトでは大きい数値になっていて、レンダリングに時間がかかるので、最初は100程度にさげてテストしてみよう。
保存先の設定やサンプル数の設定は「OctaneRender ViewPort」パネルにくっついてくるメニューからできる。


・レンダリングの種類

OctaneRenderは3つのレンダリングの種類がある。
本当は4つだけど、もう1つはプレビュー的なものなので省略。

●Direct Lighting

一番高速でレンダリングできるが、フォトリアルではない。高速なのでアニメーションを作るときなどは場合によっては良い。見ようによってはこれはこれで有り。

●PMC

けっこうフォトリアル。「Direct Lighting」ほどじゃないものの、かなり高速。GPUむけのレンダリング方法らしい。英訳が微妙で詳しくは不明。

●Path Tracing

一番フォトリアルにレンダリングできるが、レンダリングはかなり遅い。

一通り実験してみました。

●Direct Lighting

名称未設定 (1 - 4)

確かに速い。リアルではないもののこれでいい場合もありそう。まさにアニメむけ。

●PMC

名称未設定 (2 - 4)

これで充分だと感じた。かなりリアル。レンダリング時間は同じサンプル数で「Direct Lighting」の5倍から10倍かな。この倍数の考え方も微妙だ。品質がかなり違うから、一概に「何倍」と言いにくい。

●Path Tracing

名称未設定 (3 - 4)

これは遅い。他に用事もあったので途中でレンダリング止めてしまった。
確かにフォトリアル。光の回り込みもリアル。でもパッとみてPMCとさほど変わらないから、これを選ぶときはよっぽどだ。

というかこれ、MaxwellRenderより遅かった。

同じ時間かけたMaxwellRenderでのレンダリングはこれ。

名称未設定 (4 - 4)

MaxwellRenderのほうが粒子が細かくなってる。


・1分アニメを作ってみた。

有楽町の裏手にて

今日は年に3回発行の機関誌の納品確認に有楽町にいってきた。
この機関誌はデザイン、DTP、そして印刷手配までをうけおっている。

当然のことながらしっかり印刷会社から物がとどいたかを確認にいく。
とても緊張する一瞬。

無事を確認するとお気に入りの喫茶店で、ホッとしながら昼ごはんを食べることが至福のひととき。

すべてSONY RX100Ⅲで撮影。
このカメラやっぱ良いです!

DSC00320 DSC00340 DSC00358

 

ここまで小さいと周囲に威圧感もあたえない。そういう意味でも気楽に取り出して撮影できる。