ディレクター・エンジニアに勧める、デザインツールSketchを使う3つの理由(わけ)
みなさんこんにちは、Webデザイナーのnoaです。
冬が近づいてきたなと日に日に感じる今日この頃、いかがお過ごしでしょうか。
さて、今回は普段Photoshop&Illustratorを愛用するAdobe製品大好き人間の私が ある経緯からSketchに触れ「是が非でもこのツールの良さをみなさんに伝えたい！！」と思い、 実際にツールを利用する利点を記事にまとめてみました！
1.Sketchを導入しようと考えた経緯
まずは今回私がなぜSketchを社内で導入しようと考えたのか、その経緯をお話ししたいと思います。
エンジニアとの意思疎通がうまくできなかった
弊社ではデザインを私が担当し、その後のコーディング作業は全てエンジニアの方が作業をします。 レスポンシブデザインが当たり前になった今デザインカンプはモバイル版・PC版の二種類で作成をします。 通常1020px〜970px、960px〜760pxという風にサイトを作成していきますが、そこで問題になったのが
デザインカンプに載っていないサイズの時、どう段落ちするの？？
という事です。 デザインカンプができあがるとコーディングまでをデザイナーが担当するWeb制作会社が多いと思います。 でも弊社は例外でした。 この壁にぶち当たった時、エンジニアの方が「おそらくこうだろう」という感覚でしか判断ができず その結果手戻りが発生する事態となりました。
その後何件かWebサイト制作の依頼を受けましたが、 この時にはPhotoshopを使用していたため解決方法が見つからずに修正を繰り返しました。
そうしてしばらく月日が経ち、エンジニアの方ととあるイベントに参加しました。
それがこちら
どのセッションもよかったですが、
Session 5『既に来ている機械化の波とデザイナーができること』の最中こんな映像が流れました。
！！
私たちは衝撃を受けました。 これはSketchのバージョン39から導入された『Smart Symbol Resizing』という機能です。
Sketch 39 Brings Symbol Resizing and Cloud Beta – Sketch
この機能さえ使いこなせば、
デザインカンプに載っていないサイズの時、どう段落ちするの？？
という問題があっという間に解決します。 今までAdobe製品に頼りっぱなしだった私たちは、この映像に衝撃を受け Sketchを導入を検討し始めました。
2.インストールとワイヤー作成
翌日早速SketchのFree trial版をインストールしました。
Sketch - The digital design toolkit
今回、インストール方法は割愛しますので、 わからない方は各自ググってみてください。
まずは初期設定！
インストールが完了したら、まずは初期設定を行いましょう。 デザインツールを触ったことがない方は多少の使いにくさを感じると思いますが、ツールバーを自分好みにカスタマイズすることでこの問題をある程度緩和することが可能です。
まずは画面上部にあるツールバーを右クリックします。
すると↑このようなメニューが出てくると思いますので、メニューの一番下にある”Customize Toolbar”をクリックします。
Customize Toolbarをクリックするとこのようにツールの一覧が出てきますので、 好きなツールをドラッグ&ドロップで追加してみましょう。 ツールバーのカスタマイズが完了すると必要最低限の準備は整いますので、できたら早速ツールを使用してみましょう。
とりあえずワイヤーフレームを作ってみる
初期設定が終わったら、とにかくまずはツールを使用してみることが大事です！！ 非デザイナーの皆さんはデザインツールに触れたことがない方がほとんどだと思うので、
techacademy.jp こちらのTECHACADEMYさんの記事を参考にツールを使用してみましょう。
私は今回ブログサイトのワイヤーフレームを作成してみました。
作成したのがこちら
私のデザインの良し悪しは置いておいて、Sketchめちゃくちゃ使いやすかったです。
illustratorやPhotoshopとは違い、もともとUIデザインツールなので非デザイナーでもツールの使い方さえ覚えてしまえばこのレベルのワイヤーフレームを短時間で簡単に作成することが可能です。
レイヤー分けの概念もあり、『Smart Symbol Resizing』も使えるとなればもうSketchを使う以外の選択肢は見つかりませんでした(笑)
3.Sketchを勧める3つの理由(わけ)
さぁいよいよここから私がなぜこんなにもSketchを勧めるのかをお話ししていきます。
Sketchを勧める3つの理由(わけ)
- 非デザイナーでも感覚でツールを使用することができる
- プラグインの種類が豊富で、足りない機能を補うことができる
- レスポンシブデザインを意識、他者とのコミュニケーションが円滑になる
1.非デザイナーでも感覚でツールを使用することができる
上記でも述べましたが、Sketchというツールとにかく感覚でツールを使用することができます。
illustratorやPhotoshopなどのAdobe製品はがっつり勉強をしていないと感覚では補えない部分がたくさんありますので、非デザイナーの方でも比較的使いやすいかなという印象を受けました。
また、デザイナーの方にもうれしいのが、
Adobe製品とショートカットキーが類似している
という点です。 作業の効率化に欠かせないショートカットキーですが、これがほぼillustratorやPhotoshopと変わらないんです。 なのでわざわざ一からショートカットキーを覚えなくても大体当たります。(笑)
新しいツールを使い始めるにあたって、勉強をし直さなくていいのは本当に嬉しいですね。
2.プラグインの種類が豊富で、足りない機能を補うことができる
Adobe製品にもプラグインを導入する機能はありますが、そのほとんどが有料となっています。 プラグインを個々に購入し、一括管理するのは大変な作業ですよね。
sketchtoolbox.com Sketxh Toolbox
しかし、Sketchはこの『Sketxh Toolbox』というツールを利用して
無料で数多くのプラグインを導入・一括管理することが可能です！
3. レスポンシブデザインを意識、他者とのコミュニケーションが円滑になる
そして極めつけはこれ。 なぜ私がここまで『Smart Symbol Resizing』という機能をもったSketchに惹かれるかというと、 ワイヤーフレームやカンプの段階で、実装後とほぼ変わらない状態にまで完成度を高めることができ、 クライアントまたはエンジニアとの意思疎通が安易にできるという点です。
コミュニケーションが円滑にできることで、企業のもつブランドを損なうことなくクライアントの想いに寄り添ったデザインをすることができます。 また、制作側は手戻りをすることなく作業ができるので時間短縮が可能となる点も大きな利点と言えるでしょう。
4.まとめ
今回、皆さんにはSketchをおすすめしましたがもちろん使用するデメリットや、適さない場面も多々あると思います。 状況・条件にあったツールを使用していけるよう、日々勉強を続けていきましょう。(戒め)
※Sketchは英語版のみとなっているのでツールを日本語で使用したい方は、Sketchのプラグイン等を利用してみてください！
ここまで読んでいただきありがとうございました。
それでは良いSketchライフを！
