2018年12月10日

デザイン

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

目次

  1. はじめに
  2. 自社サービス「ゆるっぷる」について
  3. リブランディングを行う前に
  4.  シンボル管理をうまく使ってデザイン制作を楽にする
  5.  Overrides内だけで変更が完結する
  6.  デザインが同じものが複数存在する場合はシンボル化すると良い
  7.  レスポンシブデザインにはResize機能を使う
  8. まとめ

はじめに

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

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

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

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

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

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

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

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

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

Artboard.jpg (2.2 MB)

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

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

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

スクリーンショット 2018-12-06 11.16.00.png (819.6 kB)

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

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

Group 13.jpg (278.8 kB)

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

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

スクリーンショット 2018-12-06 11.35.09.png (901.6 kB)

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

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

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

14.jpg (253.7 kB)

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

12.jpg (266.6 kB)

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

まとめ

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

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

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

3

1

AUTHOR

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP