2017.1.8 / UI
新年明けましておめでとうございます。
2017年も、未来の豊かさにつながる仕組みをデザインする組織として、STANDARDメンバー一同、常に学び、考え、邁進して参ります。本年もどうぞ、よろしくお願いいたします。
私事ですが、年末にWPJさんでSketchの連載記事を執筆させて頂きました。
吉竹 遼のSketch入門 for UIデザイナー – WPJ
対象はこれからSketchを触ろうと思っている方や、使っているけどもっと色々使い方を知りたい、という方です。今回はこの連載の中から、周りの反応が上々だったテクニックについて、編集さんに許可を頂き増補バージョンとしてお送りします。
Sketchはバージョン41以降シンボルのオーバーライドが可能になり、ますます効率化が進み使いやすくなりましたが、一方でシンボルを作成する機会も多くなり、管理の手間が増えてきました。
そこで、Atomic Designの考えた方を参考にした、修正と管理に強いシンボルの作り方をご紹介します。
Atomic Designは主にWebデザインに対する新しい手法として2015年に発表されました。
Atomic Design | Brad Frost
サイトの構成に使用するコンポーネントを最小単位まで分解し、それらを組み合わせることでより大きなコンポーネントやページを作成する、というのが大まかな考え方です。
Atomic designとは、パーツを合体させて、繰り返し可能なエレメントやテンプレートが作成できるシステムを構築することをいいます。
珍しいワークフロー:Atomic Designの原則とSketchでデザインからプログラミングまで | デザイン | POSTD
Atomic Designでは小さい順に
と各要素が分類されており、Atomsから作り始めることを推奨しています。
この概念を参考に、Sketchのシンボルの管理方法を探っていきます。
とは言え、実務においていきなりAtomic Designを導入するのはハードル高いのではないか?というのが個人的な感想です。エンジニア側との認識合わせとか運用フローを考えないといけないですからね。
UIデザインだけに注目すれば、まずは全体の情報設計を行い、後半にフォントサイズや色といった細部を手がける、という方も多いと思います(というか私がそうです)。
というわけで、Atomic Designの美味しいところだけ拝借した応用テクニックを考えてみました。
手順は単純で、考え方としては「Atomic Designの逆バージョン」です。
どういうことかと言うと、Sketchで作成したコンポーネントを積極的にシンボル化し、さらに分解できるようであれば追加でシンボル化を行うことで、結果的にAtomic DesignのAtomosやMoleculesに相当するコンポーネントが出来上がる、という作り方です。これなら最初からAtomic Designに則ったフローを導入しなくとも、その恩恵を受けられるようになります。
また、この作り方ではシンボルの命名規則にレベル制を導入します。
※レベルの考え方は下記を参考とさせて頂きました。
Atomic Design を分かったつもりになる
シンボル名に半角スラッシュを入れることで階層化できるSketchの特徴を活かし、命名ルールを
レベル/コンポーネントの種類/コンポーネント名
または、
レベル/コンポーネントの種類/コンポーネントの適用画面_固有名称状態
という構造にします。レベルとコンポーネントはそれぞれ以下のように使い分けます。
レベルの種類
コンポーネントの種類(一部)
具体的には、以下のようなシンボル名となります。
Lv1/icon/tab_home_active
Lv3/block/detail_comment
この制作プロセスで得られる主なメリットは2つ。
1つ目は、作成したコンポーネントをどんどんシンボル化していくことで、早期から統一感や一貫性を保てること。Atomic Designで得られるメリットと同等ですね。シンボル化を後工程に持ってきてしまうと一貫性があるかどうか確認に手間がかかるため「何か作ったらとりあえずシンボル化」を手に覚えさせるとよいでしょう。私はキーボードショートカットで「⌃C」に「Create Symbol」を割り当てています。
加えて、アートボードのレイヤーリストにほぼシンボルだけが並ぶ状態となるので、自分以外のメンバーが見ても画面の構造が理解しやすくなります。シンボルを細かく分解することで1コンポーネントあたりのレイヤー数も減るので、厳密にレイヤー名を整理しなくてもある程度耐えられるようにもなりますね(オーバーライドを考慮する必要はありますが)。
2つ目は、レベル制によりコンポーネントの管理の効率化と可視化が得られること。
大量に並んだシンボルを整理整頓するには「Symbol Organizer」というプラグインが必携となりますが、レベルがシンボル名に入ってないとabc順に整理され、どういった並びになっているかが把握しづらくなります。レベルを入れることでコンポーネントのボリュームに応じた整理整頓が可能となり、ひと目で情報を把握できるようになります。
(左:レベルのない状態で整理 / 右:レベルがある状態で整理。コンポーネントが少ないのでそこまで大きな違いは見られませんが……)
ざっくりまとめると
シンボル化 x レベル制 = 効率化!
というわけです。
今回はシンボルの管理方法についてのみ書きましたが、連載ではSketchの基本から実務で使える考え方やテクニックまで学べる構成となっていますので、Sketchについてもっと知りたい!学びたい!という方はぜひご登録のうえ、ご一読頂ければ幸いです。
吉竹 遼のSketch入門 for UIデザイナー – WPJ
STANDARDは「未来の豊かさにつながる仕組みをデザインする」というミッションを元に、人の役に立つ事業やビジネス、サービスの創出や改善をデザインの力で支援し続けています。
そのために、お互いの価値観を尊重し、学習と実践と内省をしながら成長できる場所であり続けることを目指しています。
あらゆる物事の仕組みを設計するデザイナーとして、ご一緒に考えながら試行錯誤していきたいという方からのご連絡をお待ちしています。
2017.5.23 / UI
本日、BNN新社さまより「UIデザイナーのためのSketch入門&実践ガイド(吉竹遼 著)」が刊行されました。 Amazonでのご購入はこちら (Kindle版もご用意しています) せっかくですので、執筆を務めさせて頂いた私の視点から、本書についての見どころを紹介させて頂きます。 どんな本か アプリやWebサービスなどのデジタルデザインにおいて、昨今普及が進んでいるSketchについての使い方を網 […]
by Ryo Yoshitake
2017.3.9 / UX
以前の記事にて、なぜ新規事業にユーザーリサーチが必要なのかを主に述べました。しかし、いざ行おうと思ってもどのように行えばいいのか悩まれる方は多いのではないでしょうか。 そこで、今回はUXデザインのリサーチ手法にはどのようなものがあるのかを分類した上で、その中でも利用頻度の高いユーザーインタビューの方法、特に質問設計にフォーカスしてお話したいと思います。 今回の記事では主に下記のポイントについて見て […]
by Masafumi Kawachi
2017.3.1 / Business
新規事業の立ち上げやサービスの改善の際、社内の声だけでなく外部の専門的な意見を求めるために相談できるデザイン会社を探そうとしたことはありますか? STANDARDでは、「新規事業のアイデアはあるけど具体性が見えない」「リリースしたサービスの数字が伸びない」のような悩みをお持ちの企業に対し、UXデザインやUIデザインのサービスをご提供しており、様々な業界の企業様からお話をいただくことが多いのですが、 […]
by Kenichi Suzuki
STANDARDはUXデザインを軸に、新規事業の立ち上げや既存サービスの改善を支援するデザイン会社です。