Sketchのシンボル管理を使ってLP制作！

はじめに

新しい技術にチャレンジし続けるeishisのアドベントカレンダーDay10です！

昨日は「【CSS】3D transformsでコロッとなるエフェクトを作る」という記事でした。

【CSS】3D transformsでコロッとなるエフェクトを作る

本日は自社サービスのリブランディングに向けた第一弾「Sketchのシンボル管理を使ってLP制作！」という記事を書いてみたいと思います。

自社サービス「ゆるっぷる」について

bageleeの運営会社であるエイシスではbageleeの他に自社サービスとして「ゆるっぷる」というパートナーと一緒に痩せられるダイエットアプリを制作しています。

リブランディングを行う前に

ゆるっぷるのLPのリデザインを行いました

まずはゆるっぷるのリブランディングに向けて、一枚絵の画像として公開していたLPを検索のしやすさやスマホでも見やすいようにレスポンシブデザインにしよう！ということで、まずは前回のデザインを踏襲した形でLPのリデザインを行いました。

今回はこのリデザインしたLP制作のお話をしながら、Sketchのシンボル管理など制作にあたって気をつけたことを書いていきたいと思います。

シンボル管理をうまく使ってデザイン制作を楽にする

今回のLP制作は私がデザインならびにコーディング作業を一貫して制作したため、レイヤー構造など把握していますが、これが今後別の人が担当になった場合に構造がめちゃくちゃだったとき修正や保守が難しくなってしまいますね。
なので今回はシンボル管理を念入りに、LPのデザイン制作をしてみました。

なんでもかんでも事細かにシンボルにしてしまうとOverrides内の構造が長くなりすぎて変更しにくくなってしまったり、管理が難しくなってしまったりと本末転倒感が出てしまうので、できるところだけシンボルに、というシンプルなテーマで作成しました。

Overrides内だけで変更が完結する

項目ごとにシンボル化を行ったので、見出しや本文が変更になったときやスクリーンショットの差し替えなども簡単にできました。カラーシンボルも作っているので、色の変更も容易にできます。

デザインが同じものが複数存在する場合はシンボル化すると良い

今回メインでシンボルにしたのは、アプリ機能の紹介項目とステップ項目。特に効果を発揮したのはステップ項目。ステップ項目の要素は全て同じ形でできているので、内容と色の変更をするだけでデザインが完成しました。

レスポンシブデザインにはResize機能を使う

今回のスマホデザインはwidth: 375pxで作成していました。iPhone 6~, X系は375pxでぴったり合うのですが、Plus系やXR, XS Maxではwidth: 414pxとなります。そうした場合に役立つのがResize機能。
Sketchの右サイドバー上部にあるAdjust content on resizeを使うことによって、レスポンシブなデザインを作ることができます。

Adjust content on resizeにチェックを入れずにサイズ変更を行った場合、Mobileデザインの右側に足された分の余白ができてしまいますが…

チェックを入れることによって、横幅のサイズ変更を行った後もぴったりと枠におさめることができました！

まとめ

今回はシンプルなデザインと要素に絞って、粒度を細かくさせすぎないシンボル管理を心がけました。

シンボル管理はもともとSketchの得意としている目玉機能でもありますが、便利すぎるがゆえに管理が難しくなってしまったというケースも少なくないと思います。（実際にわたしも経験があります…）

なので、まずは作りやすいコンポーネント（ラベルやボタンなど）からシンボル化していき、少しずつ要素を大きくしていく（今回でいうとアプリ機能やステップ項目など）Atomic Designの考え方を元に管理していくことをおすすめします。