Be simple

”当たり前”が誰かのためになる

エンジニアもデザインを学ぼう!- Sketch導入とマテリアルデザインのプラグインの入れかた -

はじめに

お久し振りです。

連日猛暑の中、部屋の大掃除を行ってました、zukkeyです。

 

今日は、技術的な話というよりもツールとプラグインの導入の紹介です。

 

マテリアルデザインを学んでいるのですが、エンジニアであってもデザインの基礎やツールの使い方について学んだ方がいいと最近感じているので、同じような考えを持っている人に少しお役に立てたら嬉しいなと思って書きます。

 

この記事に書いてあること

・Sketchについて

・マテリアルプラグインの導入

 

Sketchについて

Sketchはデザインツールの一種です。

下記リンクからダウンロードできます。

www.sketchapp.com

 

ライセンスを入手するのに年99ドル(2018/7 現在)かかるようです。

トライ版でしたらお試しで30日間無料で利用することができます。

 

使い方に関しましては、下記のようなサイトをみるといいかもです。

僕は必要に応じて、単語を調べて学んでいくようにしてます。

 

techacademy.jp

 

【初心者向け】Sketch(スケッチ)の使い方を徹底解説

 

公式のリンクを開くと、下記のような画面が出てきます。

 

f:id:rozkey59:20180722220507p:plain

 

Try For Freeからダウンロードしてアプリケーションフォルダに移動しましょう!

 

マテリアルプラグインの導入

Androidのデザインに興味関心のある人なら下記の公式のマテリアルデザインのサイトを見ていると思います。

material.io

 

ここでいくつか紹介されているサンプルのデザインをSketchでみることが出来ます!

 

早速始めていきましょう!

まずは下記のサイトからMaterial Theme Editorを使用するためにPluginをダウンロードします。

material.io

 

Downloadしたら下記の画像のようにFinderでダブルクリックした後に、インストールする旨を聞かれるので、OKを選びましょう。

f:id:rozkey59:20180722221319p:plain

 

 

次にSketchを開いて下記の画面でNew Documentを選択しましょう!

 

f:id:rozkey59:20180722220931p:plain

 

その後に、次の画像のようにPlugins > Material > Open Theme Editorを選択してください。

f:id:rozkey59:20180722221448p:plain

 

そうすると、次のようなTheme Editorが出てきます。

f:id:rozkey59:20180722221523p:plain

 

ここから、公式のサンプルで紹介されている、サンプルのデザインを詳しくみることができるので、お好みで選択してStart ...を選んでください。

 

今回、僕はShrineを選択しました。

選択すると下記のようなDialogが出てくるので、OKを押した後に好きなところに保存をしてください。

f:id:rozkey59:20180722221754p:plain

 

これが終わると、次のような画面になります。

f:id:rozkey59:20180722221833p:plain

左の鍵マークをクリックすると中身の詳細を見ることが出来ます。

 

Shrineと書かれたテーマのフォルダの鍵マークを外すことで、各コンポーネントの中身やシンボルなども詳しく見ることが出来ます。

 

ThemeEditorでパレットの色を変えれば、色の変更を行うこともできます。

 

 

おわりに

エンジニアであっても、僕はデザインを学んだり基礎の理解は必要だと思っています。

 

なぜなら、デザイナーとのやりとりがスムーズになるし、忙しい時は自分もデザインタスクの簡単なものならこなせるようになりたいとも考えているからです。

 

また、AndroidiOSと同じデザインで!と言われた時に、Androidマテリアルデザインというガイドラインに乗っ取っている方が、UXが高まるしAndroidユーザーにとっては良いと言えるので、デザインの初歩をエンジニアが学ぶ姿勢は大事です。

 

Sketchの簡単な操作ができれば、画像のサイズを変える程度だったら誰でもできるので、自分で変えて書き出してそのままアプリに入れることもできて、コストを削減することだって可能です。

 

これを機に、マテリアルデザインとSketchについても学んでいきましょう!

僕もまだまだですが、少しずつ学んでアウトプットしていきます。