こんにちは、現在Ameba OwndでネイティヴアプリのUIを担当しているデザイナーの白鳥です。今回はサイバーエージェントで2日間にかけて開催されたデザイナー向けテクニカルクリエイター研修についてレポートしたいと思います!

「デザイナーだけどもっと技術面を学んでみたい」
「だけど実際どうしていいかわからない…」


そんな技術の壁にぶつかっているデザイナーのみなさんの足がかりとなれば幸いです。

テクニカルクリエイター研修とは?

弊社で今回初めて開催されたテクニカルクリエイター研修。エンジニア向けとデザイナー向けがあり、今回わたしが参加したのはデザイナー向けのもの。今回は2日間でxcodeを使ったSwiftの基礎を徹底的に教えてもらいました。

今回初めてのデザイナー向けプログラミング研修となりましたが、研修を受けるメンバーのバックグラウンドは様々でした。マークアップをひと通りこなしてきた人、flasherだったひと、プライベートですでにアプリ開発に触れている人、デザイン特化型の人などなど…。

今回は研修をより深く理解するため、事前にメンバー全員がSwiftの参考書を1冊こなしてから研修に臨みました。

ちなみにわたしの場合は元々マークアップが好きでWeb業界に興味をもった人間でしたが、今年の年明け頃からプライベートでSwiftの勉強を地味に始めていました。が、予想通りといってはなんですが四苦八苦なことばかり(笑)やっと最近になってプロジェクトでも簡単なデザイン修正などをxcode上で行うようになりましたが、やはりデザイン脳の独学では不安な部分や本をこなすだけでは納得できない部分がたくさんありました。
さらに日頃、分からないなりに覗き見しているプロジェクトのコードを見ていて「これはなんだ?」「これはどうやって出来ているのだろう?」といったモヤモヤを抱えており、これを今回の研修でどれだけ潰せるか?というのが個人的なひとつの目標でもありました。

さてさて前提はこの辺にして、実際の研修内容についてレポートしていきましょう!

1.GUIからはじめる、Swift入門

いよいよSwift入門!と言いたいところですが今回はまずxcodeの使い方からスタートしました。
例えるならWebデザインを勉強するよりも前に、photoshopなどツールの使い方を覚えないとそもそも不便だし上達が遅いのと一緒。ということで最初にxcode上の機能や役割を一通り触りながら覚えていきました。

プロジェクトの作り方や種類
playgroundという簡単なプログラムを書いてテストできる機能や、プロジェクトだけでもSingle view ApplicationやMaster-Detail applicationなどなどいろいろな形式のデフォルトが用意されていました。真っ白な画面を差し出されると戸惑ってしまいますが、自分の用途に合わせていくつか選択肢が用意されているのは嬉しいですね。

GUIの構成と各エリアの使い方

Storyboardを中心に、文字を表示できるLabelを追加したり、様々なviewを直感的に追加したり紐付けたりすることができます。xcodeが便利なのは全てプログラムで値を指定するだけではなく、photoshopで値を調整するようにまたユーティリティーエリアを使用してラベルや大きさを変更できることです。

これにより自分が日頃作っているデザインがどのようにプログラムの中で構成されているのかを体感しつつ、Auto Layoutの使い方や仕組み、要素の配置やサイズ変更などはデザイナーが業務で関わる際に直結する部分に触れられたのは刺激的でした。

ビルド方法やシュミレーターの使い方
自分が書いたプログラムを実機で実行するのは少々手間ですが、xcodeならシュミレーターが付いているのでiPhoneを始めiPadなど多数のアップル製品でのシュミレートが出来るのは魅力的。なにより自分のかいたプログラムが書き出される間は新鮮でワクワクする瞬間でもあります(ただしエラーが出たときの表情はご想像の通りです、笑)

GUIの演習を通して、今回の研修で選ばれたひとつの理由として充実したGUIとstoryboardの存在がデザイナーにとって非常にとっつきやすく、初めて触れるものとしての相性が良いからだと感じました。また既存のUIパーツが豊富にあるのも、もともと見た目を作ることに対して高いモチベーションがあるデザイナーに効果的で良い動機付けになるとも感じました。

2.基礎構文を叩き込む

とにかくデザイナーがプログラミングを習得する上で1番躓くモノのひとつが「文法」「構文」だと思います。
実際にプログラミングをしようと思っても実際は既存の数字をちょいちょい弄る程度でついつい逃げがちな部分ではありますが、今回は正面から向き合い改めて基礎からみっちり叩き込みました。

今回の研修ではxcodeが提供しているplaygroundを使用して基本構文を実践しながら学習していきました。
・変数
・定数
・配列
・関数
・クラス
・オプショナル型

…etc

変数に始まりとにかく基礎をしっかり押さえていきます。最初は代入という考え方すらなかなか馴染まない人も多かったのですが繰り返していくごとに手応えをつかんでいきます。また講師の方から与えられたヒントを手掛かりに、模範解答の内容以外にも各々がプログラムを書き換えたり、書き加えたりしながら理解を深めていくのも文法を覚えるコツとのアドバイスもありました。

また今回研修を受けて良かったと思ったひとつはプログラミング上に存在する特有の概念について紐解けたことです。例えば今回わたしがすっきりしたことのひとつはnilでした。

nilは0じゃない?

エンジニアからすると基礎中の基礎とも言えるものですが、非エンジニアからするとは非常に曖昧な概念です。わたし自身もnilのことは本で事前に知っていましたが、なんとなーく漠然とした認識でした。なので「0とnilは全く違うものだ」と改めて聞いたときはとても驚きました。教えていただいた例がすごくわかりやすかったのですが、nilは"そもそも元から存在しない、完全な無"であり、0は"既に存在しているものがなくなった値"ということでした。
そもそも値としての型も違うしよく考えればわかるのことなのですが、こういうささやかな解釈がズレていずれ大きなドツボにはまることが多いのが非エンジニア。こういう細やかな疑問を最初に潰しておくと今後の学習の妨げを防止できていいですね。

さて、一応これで一通りの基本を押さえたことになります(この時点で頭はヘトヘト)
しかしまだこのときは学んだこと同士が繋がらないことも多いので、いよいよ次の演習でその具体的な活用を通じてviewとプログラムの関係と使い方を実践で学んでいきます!

3.演習問題で実践

GUIと基礎構文を経て、いよいよ実践です!

基本的なxcodeの操作やviewの繋ぎこみ、Swiftの基本構文を総動員してプログラムを実際に0から考えます。今回のお題は身長と体重からBIMを算出するプログラム、猫の年齢を人間の年齢に換算して表示するなどいくつかのプログラムを自分だけで組む演習を行いました。
ぱっと見それほど難しくなさそう…と思いきや見本なしで0から作るとなるとみんな大苦戦!演習中はみんなしかめっ面が続きます。サポートのエンジニアからアドバイスを受けつつ、書いては実行、エラーを探して潰してまた実行…

2時間ほどかけて各々がようやくプログラムを書き終えました。
// 
//  ViewController.swift 
//  BMI 
// 
//  Created by Ameba2016 on 2016/05/14. 
//  Copyright © 2016年 Ameba2016. All rights reserved. 
// 
 
import UIKit 
 
class ViewController: UIViewController { 
    
    
    @IBOutlet weak var bmiValue: UILabel! 
    @IBOutlet weak var wightSlider: UISlider! 
    @IBOutlet weak var weightValue: UILabel! 
    @IBOutlet weak var heighValue: UILabel! 
    @IBOutlet weak var heightSlider: UISlider! 
    @IBOutlet weak var resetButton: UIButton! 
    
    
    //動かしたときに走る 
    @IBAction func getheightValue(sender: AnyObject) { 
        
        heighValue.text = "身長:" + "\(heightSlider.value)" + "m" 
        changeToBMI() //ここで呼んで初めて関数が働く 
 
    } 
    
    //動かしたときに走る 
    @IBAction func getWeightValue(sender: AnyObject) { 
        
        weightValue.text = "体重:" + "\(wightSlider.value)" + "kg" 
        changeToBMI() //ここで呼んで初めて関数が働く 
    } 
    
    @IBAction func pushReset(sender: AnyObject) { 
        bmiValue.text = "BMI:" + "0" 
        weightValue.text = "体重:" + "0" + "kg" 
        heighValue.text = "身長:" + "0" + "m" 
        wightSlider.value = 0 
        heightSlider.value = 0 
    } 
 
    
    func changeToBMI() { 
        let nowWigh = wightSlider.value 
        var nowheight = heightSlider.value 
        nowheight /= 100.0  // 単位をmに変換 
        
        let bmiGet = nowWigh / (nowheight * nowheight) //BMIを計算して格納 
        let result :String //肥満度を格納する 
        
        if bmiGet < 18.5 { 
            result = "瘦せ型" 
        } else if bmiGet < 25 { 
            result = "普通体重" 
        }else if bmiGet < 30 { 
            result = "肥満1" 
        }else if bmiGet < 35 { 
            result = "肥満2" 
        }else if bmiGet < 40 { 
            result = "肥満3" 
        }else if bmiGet < 50{ 
            result = "肥満4" 
        }else{ 
            result = "" 
        } 
        
        bmiValue.text = "BMI:" + "\(bmiGet)" + "\(result)" 
        
    } 
    
    
    override func viewDidLoad() { 
        super.viewDidLoad() 
        // Do any additional setup after loading the view, typically from a nib. 
        
        bmiValue.text = "BMI:" + "0" 
        weightValue.text = "体重:" + "0" + "kg" 
        heighValue.text = "身長:" + "0" + "m" 
        
    } 
    
    override func didReceiveMemoryWarning() { 
        super.didReceiveMemoryWarning() 
        // Dispose of any resources that can be recreated. 
    } 
    
    
} 
 
 (実際にわたしが書いたコード) 
頭で描いてことが、どんどん目の前でプログラムとして書いて実行される瞬間は感動の極みでした!
きっとエンジニアから見たらつぎはぎだらけで無駄な部分もたくさんあるかと思いますが…しっかり動きます(笑)

ここまでで学習した基本的な内容を必死に繰り返しながら組み立てる作業は本当に大変でしたが、それが組み合わさって形の見えるものとなり、且つそれから反応が返ってくることは本当に新鮮でした。また隣の人のプログラムを見せてもらうと、挙動は全く同じなのに中の処理の方法が違うことも多々ありました。正解がひとつでないこともデザインに通じるところがあって興味深いと思ったポイントでした。

研修を終えて

いかがだったでしょうか?

研修の2日間はあまりに短く、あっという間に過ぎてしまいましたが各々が確実な手応えを感じて終えることができたと思います。
もちろん、じゃあこれをすぐに現場で使えるかと言われればNOですが、これからSwiftを学んでいく上で勇気を持って踏み出すキッカケとなったことには間違いありません。プログラムに触れる最初の一歩が億劫になってしまいがちなデザイナーですが、思い切って飛び込んでしまえば面白いことばかりだなあと改めて感じました。

この研修では基本的なことをフラットに学びましたが、これを元に各々が自分に必要な領域へと技術の幅を広げていくことになると思います。さらに本格的にSwiftを学ぶ人、アニメーションに特化していく人、エンジニアとのコミュニケーションに使えるようにする人などその方向性は様々だとは思いますが、やはりデザイナーに求められるものは言語自体を極めることだけではなくプログラムに触れることにより自分の幅を広げ「最終的なプロダクトの品質を上げること」が重要なのないでしょうか。それは具体的なモックの作成かもしれないし、アプリ自体のバックグラウンドを知りながらデザインをすることかもしれない。はたまた細やかなレイアウトの修正や、アニメーションの調整かもしれません。

これから各々が目指すそれぞれの「テクニカル」を武器に、プロダクトやチームにしっかりと活かしていけるよう日々のインプットを続けていきたいと思います。