Tortoise Shell

Webサービスの会社で働くデザイナーが、デザインやライフハックについてゆるく書き連ねるブログです。

Illustratorが使えるならオブジェクト指向も理解できる?その意外な関係とは…

最近、仕事でSketchを使ってUIデザインをしています。 

その関係で、ちょっと前にエンジニアの上司にIllustratorとSketchの「とある違い」について説明していました。 

すると上司から意外な一言が飛んできました。

「それ、まさしくオブジェクト指向のクラスベースとプロトタイプベースの話と一緒だね」

ん?クラスベース?プロトタイプベース?

…なんじゃそれ!?

どうしてイラレとSketchの話がオブジェクト指向言語の話につながるのでしょうか。

はじめはまったく意味がわかりませんでした。 

しかし、上司の説明を聞くと「面白いなー!」と思わざるを得ませんでした。

今日はちょっとそのことについて書こうと思います。

デザイナーの方なら結構面白く感じるかもしれません。

デザインツールから見るオブジェクト指向

さて、わたしが上司に説明していたIllustratorとSketchの「とある違い」というのは、ずばり「シンボル」機能のことです。

一応簡単に説明しておくと、シンボルという機能はこんな感じです。

イラレでデザインしているときに「よく使うオブジェクト」をシンボルとして登録しておきます。

例えば、「購入はこちら」という文字を入れたボタンを作ってシンボル化したとします。

シンボルに登録したオブジェクトはコピーして使うことができますが、どれだけ大量のコピーを作っても「親元」であるシンボルを編集して形や色を変えると、それがすべてのコピーしたオブジェクトたちにも適用されるのです。

なので、「購入はこちら」というボタンを作ってあちこちに配置している途中で、あ…やっぱり「お買い上げはこちら」にしたいな…と思ったとします。

そのときは、親元のシンボルを編集して文言を「お買い上げはこちら」変えるだけで、それがすべてのボタンに反映されるのですごく楽なんですね!

クラスベースとプロトタイプベース

ここで話を元に戻すと、このシンボル機能がIllustratorとSketchで少し違っていて、それがデザイナーにとってオブジェクト指向の「クラスベース」「プロトタイプベース」を理解するのにすごく分かりやすいんです。

というのも、Sketchにおけるシンボルはイラレのように「親を編集すると、親から作った子どもに編集した点が反映される」という概念とは少し違っています。

Sketchの場合、「親と子」というよりも「親が分身している」といった表現が当てはまります。 

例えば、イラレでは概念的に、シンボルを別ファイルで編集して、それがシンボルから生成したオブジェクトに反映されていく…という使い方をします。

一方、Sketchでは概念的に、親となるシンボルを別途編集するという概念はなく、シンボルから配置していった任意の分身をその場その場で編集していって、それが同時に全体にも反映されていく…という形になっています。

この概念の違いこそが、それぞれオブジェクト指向言語における「クラスベース」、「インスタンスベース」の考え方と大変よく似ているのだそうです。

まとめると、

Illustratorのシンボル → クラスベース

Sketchのシンボル → インスタンスベース

ということです。

取っ掛かりって大切!

ちなみに、デザイナーがオブジェクト指向について真っ向から理解しようとすると…

ググってみたら、Wikipediaでは以下のように書かれていました。

オブジェクト指向(オブジェクトしこう)とは、オブジェクト同士の相互作用として、システムの振る舞いをとらえる考え方である。英語の object-oriented (直訳は、「対象物志向の」「目的重視の」という意味の形容詞) の日本語訳である。

\(^o^)/

というわけです笑 

しかし、先ほどのIllustratorとSketchのシンボルの例を知るといくぶん分かりやすく理解できるように思えませんか?

そういえば、オブジェクト指向についてデザイナーにも馴染みのある「JavaScript」を例に挙げますが、JavaScriptは基本的に「インスタンスベース」の言語だそうです。

それ故に、「JSは(インスタンスベースなところが)クソ」と言われたりすることもあるそうです。

わたしの知識では具体的な事例を挙げることはできませんが、ざっくり言うと「親の設定を継承したのをベースに他の設定を書き加えたいのに、全部に反映されてしまうから融通が効かない」ということがあるそうです。

(それでも、CoffeeScriptではクラスが使えるそうなので、やはりJSは進化が早いんですね…) 

以上、Illustratorで学ぶオブジェクト指向の考え方でした! 

概念そのものは既に頭の中にある

今回お話したのはおそらくオブジェクト指向の概念の一部分に過ぎないとは思うのですが、それでもわたしは取っ掛かりとして役に立って良かったなと実感しています。

この話をしてくれたエンジニアの上司も言っていたのですが、「デザイナーでも概念自体は既に知っている。ただ、それを言語化して理解しようとしたときに専門的な用語ばかりで分かりにくいのだと思う。」ということだと思います。

これってすごく良い気付きだと思うのですが、いかがでしょうか…。

プログラミングに挫折したことのあるデザイナーさんでも、概念自体はすでに知っているのだとしたら…

着眼点を変えて取り組めば、ひょっとすると今度はうまく理解できるのかもしれませんね。