まえちゃんろぐ

日々の生活の中での気付き、学んだこと、体験したことをアウトプットするブログ(雑記多めです)| プログラミング 本 ワークアウト 茶道

Sketchのキャッチアップにお勧め「UIデザイナーのための Sketch入門&実践ガイド」

time 2017/10/17

Sketchのキャッチアップにお勧め「UIデザイナーのための Sketch入門&実践ガイド」

仕事の話になるのですが、開発中のWebアプリケーションのUIUXを担当することになりました。デザインツールはSketchを採用することになり、急遽Sketchのキャッチアップが必要になりました。

ネットで調べながらのキャッチアップも考えたのですが、情報が断片的で、その情報が古いことが頻繁にありました。最近のSketchのアップデート頻度は高いですから。Sketchも最近話題になってきたばかりでネットにある情報量は多くはない状況です。

比較的新しい、まとまった情報があるとキャッチアップもし易いと考えて購入したこちらの書籍ですが、かなりの良書だったのでご紹介します。

sponsored link

お勧めのページ

基本的な操作やソフトのUIの説明、オブジェクトの使い方はもちろん役立つ情報ですが、これから紹介する情報は個人的にお勧めしたいページです。

シンボル

IMG_1679_Fotor

レイヤーをアートボード単位で管理して、1つの新しい同期性のある子オブジェクトを生成できる機能です。この機能はSketchを代表する主要機能の一つです。次に紹介する「Overrides」を合わせることによって大幅な作業時間の短縮が図れます。

Overrides

IMG_1681_Fotor

シンボルの中の要素を別の要素に差し替えることができる機能です。まさに「オーバーライド」ですね。各シンボル毎に適用できるため、例えば形は同じで背景色だけ違うシンボルを作ることが可能です。

Atomic Design

IMG_1680_Fotor

Atomic Designとは、Atoms(原子)、Molecules(分子)、Organisms(有機体)、Templates(テンプレート)、Pages(ページ)の各コンポーネント同士を組み合わせて作成するデザイン手法のことです。

最近はこのデザイン手法を取り入れている企業さんも増えてきているようですね。今時のPCDAを早く回しながらサービスを運用していく体制に向いている、修正に強いデザイン手法です。

これをSketchでも活用することによって、修正に強いオブジェクト管理を実現できます。Atomic Designも学べる一石二鳥なページです。

レッスン:アプリのUIを作ってみよう!

IMG_1678_Fotor

実際に手を動かして覚えてSketchの使い方を学べるページです。「フリマアプリ」を想定してホーム画面、商品詳細画面、商品出品画面を作っていきます。オブジェクトの細かい操作方法もここでキャッチアップできるので非常に勉強になりました。

おわり

本書ではSketchの操作方法や今回紹介したページの他に、Sketchをより一層使いやすくするためのプラグインやWebサービスの紹介もあり、そちらも非常に役に立つ内容でした。

デザインソフトをがっつりと触る機会はこれまで恵まれてこなかったので、こういったまとまった情報が載っている書籍は非常に嬉しいです。

兎にも角にも、デザインソフトはショートカットキーが命。

こちらからは以上です。

販売中チケット

プログラミング、Webサービスの作り方教えます

自分のスキルを販売しております。お困りの方はご遠慮なくご連絡頂ければと思います。

down

コメントする




スポンサードリンク

書いてる人

maechan

maechan

ベンチャー企業、フリーランス、スタートアップを経験。開発業務、人事業務に従事していました。現在は農業系スタートアップ企業でエンジニアとして働いています。リモートワークをしているノマドサラリーマンです。詳しいプロフィールはこちら。 [詳細]

販売中チケット

プログラミング、Webサービスの作り方教えます 一人で悩まず!お気軽にご相談ください!

その他のチケットはこちら

Instagram