ライブデザイニング

私たちはプログラミングの技術を持っていて、大好きです。しかし、コードを書くだけでは、App Storeで注目を集めるには足りません。他の分野の助けを借りる必要があります。この講演では、App Storeにアプリを提出するときのためアイコンと、スクリーンショットを作成するライブデモンストレーションをSketchを用いて行います。コード書いてからストアに提出するまでの、アプリを配布する方法を学びましょう。


ライブデザイニング (0:00)

私はArtsyでiOS開発者をしています。本日はデザインについてお話します。私はいつもデザインについて興味を持っており、時間のある時にデザインをするのが好きです。そして、たくさんのライブコーディングを見てきました。なので今日はそれに触発されて、ライブデザイニングのセッションをしようと思います。

私たちは、しばしば画像素材を作る必要に迫られます。今日はアプリアイコンの作り方と、あなたがApp Storeにそのまま申請してしまいたくなるようなScreenshotの作り方についてお話しします。

今日のセッションでは、Sketchと呼ばれるツールを使います。 このツールについて耳にしたことがあるかもしれません。これは、開発者コミュニティでは非常に人気のあるツールで、Adobeのライセンスと比較してとてもお手頃に利用できます。なので、あなたが毎日デザインをするような人でない場合でも、良い選択肢になるでしょう。

Sketchはベクターベースのツールなので、どちらかというとPhotoshopよりIllustratorに近いかもしれません。ただ、アプリやWebデザインを対象としており、仕事で使う人にとっても非常に良い選択肢となります。どう使うかは後でお見せします。

まずは、アプリのアイコンを作ります。ここに見えている、iOS 9のApple公式のニュースアプリのアイコンを作りますが、これはとても良い例になると思います。というのも、このアイコンは単純な図形の組み合わせで作られていて、とても作るのが簡単だからです。 輪郭線などが複雑に見えるかもしれませんが、これらは単なる円や四角形の組み合わせです。これをゼロから順を追って作っていきます。

それが終わったら、あなたが時々App Storeで目にするようなスクリーンショットである、アプリの機能を説明する文章があり、その下に端末の画像とそれにはめこまれたアプリの画面、から構成されるスクリーンショットをiOSシミュレータからどうやって作るか、というところをお見せします。これも非常に簡単なので、あなたも同じようなものを作れるでしょう。それでは始めましょう。

Appleのニュースアイコンを作る (2:31)

まずは、空のSketchファイルを開きます。アプリ用アイコンのテンプレートファイルを開く、という選択肢もありますが、私は書き出しの時くらいにしか使いません。それについても後でお見せします。 まずは背景から始めましょう。大きな正方形ですね。Rキーを押すと、四角形が作れるようになります。また、照準と小さな正方形も表示されます。なので、これを見れば今どのツールを使っているかわかるようになっています。

ショートカットキーを使わずに四角形を作りたければ、メニューの Insert > Shape > Rectangleから作成できます。各メニューの隣には、ショートカットキーが表示されるようになっています。 今はどんな形の四角形も作れるようになっていますが、Shiftキーを押しながらだと四角形が常に正方形になります。これは非常に便利な機能ですので、覚えておいてください。 今回は、通常iOS App Storeで必要となる最も大きなサイズの1024 x 1024でアイコンを作ります。

右側のビューで、図形の様々なプロパティが確認できるようになっています。幅や高さだけでなく、塗りつぶしの色や枠線の色などです。背景については、枠線はいらないので枠線を非表示にします。そして背景色については明るい珊瑚色にします。使いたければ、スポイトツールを使うこともできます。

それでは、新聞部分の前面を作っていきます。 再びRキーを押して四角形を作ります。こんな感じで1つの四角形を作ります。今回も枠線はいらないので非表示にします。そして白で塗りつぶします。 新聞部分については、下から上に向かって作っていきます。まず、新聞の記事を模した線を引き、次に画像、最後に見出しと地球儀のアイコンを作ります。

ここまで四角形を作ってきましたが、線も引くこともできます。Lキーを押すと、照準が表示されるようになります。どんな角度の線も引くことができますが、Shiftキーを押しながらだと常に水平な線を引くことができるようになります。1本線を引きましたが、とても細い線ですね。

ここから線の太さや、それ以外の設定も変更できます。今回は線の先端を丸くしておきましょう。そうすることで元のアイコンにかなり似せることができます。

線の色をもう少し明るいグレーにします。2本目の線を引きます。もう1度同じ作業を繰り返す代わりに、Altキーを押しながらオブジェクトをドラッグします。こうすることでで既に作ったオブジェクトを簡単にコピーすることができます。

次にカバー画像の部分を作っていきます。 新しい四角形を作り、枠線を非表示にします。次に背景色を変えます。今回は空の色を表現するために、背景色を塗りつぶさずに、わずかにグラデーションさせます。四角形の上端にグラデーションの1色目をセットし、四角形の下端に2色目をセットします。これらの色は互いに独立しており、好きなように変更することができます。それでは、上端の色は非常に明るくて少し薄めの青に、下端の色は少しだけ暗めの青にしてみましょう。

次に、ここに見えているような建物の輪郭線を作っていきます。 Rキーを押して、四角形をいくつか作ります。ここではまだ枠線の色については心配しなくても大丈夫です。まずは、四角形を作っていきます。Rキーを押しながら色々な四角形を作ります。

左側のビューでここまでに作ったレイヤーを全て確認できますが、建物のレイヤーが非常に多くなっています。私はデザインする際にいつもやっているのですが、これらをグループ化してしまいしょう。そうしないとレイヤー構造がどんどん複雑になっていきますので。 Command + G を押して全ての建物をグループ化しました。このグループを “skyline”と名付けます。skylineの中の四角形を全て選択します。こうすることで、全ての四角形のプロパティを一度に変更できます。

枠線を非表示にし、背景色を暗いグレーにします。

次に雲を作ります。雲は実は単なる楕円の集まりです。Oキーを押すと、円を作ることができます。また、メニューのInsertからも作ることができます。 ここでは、いくつかの円を作ります。Shiftキーを押しながらだと正円を作ることができ、そうしなければ楕円を作ることができます。いくつかの雲を作るために、楕円形の集まりを作ります。どんどん楕円を書き出します。3つの大きな雲を作っています。

ベクターは、基本的に数式から計算される点の集合ですので、いくつかの論理演算子を適用することができます。そのため、より複雑な図形を作るために、いくつかの図形を結合したりマスキングを行ったりすることができます。

Shiftを押しながらこれら3つの円をクリックして、1つの雲の形にするためにUnionを押します。 これをそれぞれの雲に対して行い、面白い形の雲ができました。今作った3つの雲を選んで、枠線を非表示にして、背景色をわずかにグラデーションさせます。

雲の上端は白に、下端はわずかにグレーがかった白にします。 そして、空が雲の裏に見えるようにしたいのですが、そうするには雲が明るすぎるので少し透明度を上げます。そして、建物の輪郭線のレイヤーを雲よりも前に移動させます。オリジナルのニュースアイコンにはもう少し雲があるので、Altキーを押して少し雲を足します。これで、建物の輪郭線と雲は完成です。

最後にタイトルです。まず、このあたりに線を引きます。大体こんな感じですね。それから線の太さを変えます。線の先端を丸くするのも忘れないようにしましょう。 それからAltキーを押しながら線をドラッグして2本目の線を作ります。線の色はかなり暗い色にします。建物の輪郭線よりも更に暗くします。こんな感じですね。それからこれらをグループ化して、グループ全体をAltキーを押しながらコピーします。中央は地球儀のために少しスペースを空けておきます。

ここでOキーを再び押して円を作ります。今回は枠線を非表示にする代わりに、塗りつぶしを非表示にします。枠線の太さを6にします。

今日、最後に使うのはPenツールです。Vキーを押すか、ここからクリックすることで使えます。このツールは曲がりくねった線を引くのによく使うもので、その線を閉じたり色々なことができます。ただ、今日はこのPenツールのとてもシンプルな使い方をお見せします。

まずは直線を引きます。それから地球儀の太さに合わせて、線の太さを6にします。線をわずかに地球儀の中央に寄せます。そうしたら、今作った線をコピーして回転させます。これで地球儀の中に水平な線を作ることができました。

次に、このあたりに線を引きます。真ん中あたりに来たら線を曲げるためにハンドルを表示させます。線を曲げたらEscキーを押して、編集を終えます。

忘れずに線の太さを6にします。今作った曲線と全く同じものを反対に作れるかどうか心配する代わりに今作った曲線をコピー&ペーストしてひっくり返します。これは基本的にあなたが作った図形と左右対称の図形を作ります。これで反対側にも同じものを作れました。同じものを上と下にもセットしましょう。

オリジナルのアイコンは直線になっていますが、曲線で作りたくなることもあるかもしれません。というわけで曲線で作ったものをお見せします。まずはコピー&ペーストし、回転させ、このあたりに配置します。再度コピー&ペーストし、ひっくり返し、このあたりに配置します。 最後に地球儀アイコン全てを選択し、線と同じ暗い色にします。

これで地球儀アイコンが完成し、新聞の前面部分が全て完成しました。全てを選択し、グループ化しておきます。

ここから、新聞の後ろ半分と影を作っていきます。このあたりに、これくらいのサイズで四角形を作っていきます。 見てわかるように、少し角丸になってますね。四角形はここを動かすと角丸にできますが、ダブルクリックすると、それぞれの頂点を独立して角丸にすることができます。他の点から独立してこれらの点を角丸にしてみましょう。左下の頂点をクリックして、半径56の角丸にします。このやり方によって右側の頂点は直角に保ちつつ、左側の頂点を角丸にすることができました。

背景色を白にしましょう。でもちょっと待って下さい。新聞の前面部分の影を落とす必要もありますね。なので、グラデーションをかける必要があります。上から下にグラデーションをかける代わりに左から右にかけてグラデーションをかけます。 白からグレーにグラデーションをかけます。今、左から右にかけて均等にグラデーションがかかっています。

でも、本当にほしいのは新聞の影を表現する、短くて小さいグラデーションです。 なので、グラデーションの点をこのあたりに1つ追加します。色は明るめのグレーにします。 これを一旦引いて見ると新聞に対する効果的な影が作れているのがわかると思います。これらをグループ化し、中央寄せにしましょう。これでアイコンが完成しました。

アイコンの書き出し (15:51)

それでは、この画像をSketchのツールを使いながら、Xcodeによって要求されるいくつものサイズに書き出していきます。まずは、”Icon”と名前を変えます。では、始めましょう。

New from Template -> iOS App iconを選択します。Spotlightや設定アプリ用のサイズからApp Store用のサイズにいたるまで既にいくつものサイズが用意されています。先程作ったアイコン全体をコピーして、ここに貼り付けます。

見てわかるように、少し大きすぎますね。という[email protected][email protected] [email protected][email protected][email protected][email protected][email protected][email protected][email protected][email protected]しましょう。

ここでは、Scaleツールを使います。512x512と入力すると、完璧に縮小してアイコンぴったりになりました。同じようにペーストして、ここにあるように180x180に縮小してみましょう。こちらもぴったりになりました。

これを書き出す際、個人的にはマスクを外すようにしています。この状態で書き出すと、既に角丸が適用された状態の画像が書き出されます。それがしばしばApp Storeの角丸と一致しないことがあり、また正方形の状態の画像を申請してもApp Storeで角丸を適用してくれるようになっています。

つまり、アイコンを前もって角丸にしておく必要はないのです。 マスクは、境界線を適用し、どのような見た目になるかを確認する場合にのみ便利なものです。 ここにMaskと呼ばれるレイヤーがありますが、これをオフにし、正方形の画像として書き出すことをおすすめします。 というのも、iOS 7以降ではAppleがアイコンを角丸にする方法を変更したため、角丸のアイコンを申請してしまうとアイコンの周りにしばしば黒い縁が表示されてしまうからです。 そのため、正方形のアイコンを申請するのが最善の方法なのです。

ここにいくつかのアートボードがありますが、Shiftを押しながらこれらを選択することもできますし、更に選択してからExportを押すこともできます。他のサイズを追加するこ[email protected]きさのものも用意されています。 Exportを押すと、どこでも好きなところに書き出すことができます。そして、Assetsというフォルダが生成され、その中にアプリのアイコンが生成されています。これで、1つのアイコンを作ればまとめて書き出せることがおわかりいただけたかと思います。

素敵なApp Storeのスクリーンショット (19:52)

最後に、単にiOS Simulatorのスクリーンショットを撮っただけではない、素敵なスクリーンショットを手早く作る方法についてお見せします。

Xcodeが起動していますね。プロジェクトを実行します。これはArtsyのアプリです。Simulatorが起ちあがりましたね。ここで、Command + SでSimulatorのスクリーンショットを撮影します。これでデスクトップにスクリーンショットが追加されました。

一度スクリーンショットを撮影してしまえば、Sketch上で素敵に加工するための方法やツールはいくつもあります。 ここには沢山の素材があり、ここで探すと端末画像が含まれているSketchファイルを見つけることができます。 今回は、iPhone4が出る前から長い間ずっとこういった素材を作っているRobbie Pearceのテンプレートを使ってみます。 ここから彼のデザインテンプレートをダウンロードするだけで、すぐに使えます。 というわけでここからダウンロードしてみましょう。

スケッチに戻りましょう。 全ての端末の素材があるのが確認できますね。今回はiPhone 6の素材を使ってみます。素材ファイルを開くと、中にiPhone 6のベクター画像があるのが確認できるかと思います。そのうち1つをコピーして、新規ファイルを作成し、アートボードを作りましょう。

アートボードは、何かを書き出すために作られたエリアです。 ここに先程のiPhoneの画像をペーストします。このくらいの大きさにしましょう。このように、iPhoneを少し切り抜かれた状態にして、テキストを挿入するために���ートボードを少し高くします���理想的には、アートボードのサイズは実際に書き出すサイズになっているといいですが、今回はデモンストレーション用なので、このまま続けます。 背景を少し暗くして、ここにあなたのアプリのスクリーンショットを貼り付けます。

Tキーを押して、テキストを追加します。”The Art World in Your Pocket”にしましょう。 かなり小さいですね。ここから図形のプロパティを変更した時と同じようにプロパティを変えてみましょう。今回は文字色と文字サイズを変えます。これでスクリーンショットが完成しました。 ここに先に作っておいたものがあります。

この方法であれば、あなたのアプリケーションの各機能についてスクリーンショットを並べて説明することができ、また一度に全てを書き出すこともできます。 全てのアートボードを選択し、Exportを選択すると好きなところに書き出すことができますし、申請してしまうこともできます。

以上がSketchを利用したアプリアイコンとスクリーンショットの作成になります。ありがとうございました。

Q&A (24:57)

Q: 1からアイコンを作る場合、普段はどのように作りますか?手書きのスケッチを作り、それをPCに取り込みますか?

Maxim: プロジェクトが何を求めているかによります。普段はアイディアを得るために手書きでスケッチを作成しますが、アイコンをとてもシンプルに作りたい場合は、しばしば全てPC上で作成します。 また、あなたが何かのアイコンを作るのが難しいと感じているなら、Sketchはその解決にも使えます。まず、作ろうとしているものの画像を見つけ、その形をSketchのペンツールでトレースします。Sketchをトレーシングに使うことで何かを作るのが少し簡単になるかと思います。

Q: iOSは、異なったサイズの異なったデバイス上で動きますが、Sketchはそういった違いをうまく処理してくれるツールでしょうか?

Maxim: 私がSketchをとても気に入っている理由もまさしくその点なのです。 先に述べたように、Sketch上でAを押すとアートボードを作成することができます。このアートボードには各デバイスのサイズがあらかじめ定義されており、また自分で追加することもできます。あなたがiOS開発で目にしたことのある全てのサイズは既にアートボードに追加されています。 また先に述べたように、ベクターは数式から計算される点の集合ですので、あなたがベクターでデザインを作成していれば、どんなサイズにもデザインを書き出すことができます。


Maxim Cramer

Maxim Cramer

Coming from both a design and development background, Maxim loves observing people in their natural habitat, making technology that will serve them instead of the other way around.