カテゴリー: デザイン

SketchプラグインのCraftでプロトタイプを作成してクライアントと共有しよう!

Craftとは

Craftとは、InVisionが提供するSketchとPhotoshop用の無料プライグインです。

プロトタイプを作成する他にも、SketchでUIデザインするときに便利な機能がたくさんあります!

プロトタイプの共有方法

1.  InVisionに登録し、Craftをインストールします。
インストール方法はこちらをご覧ください。

2. Craftを起動し、InVisionにログインします。

3. Sketchでリンクしたい要素をクリックし、キーボードの「C」を押します。
青い矢印が出てくるので、リンク先のアートボードを選択します。

4. アートボードをつなげたら、syncボタンをクリックします。 

5. 初回の場合のみ「Create new」を選択し、デバイスなどを設定します。
設定が完了したら「Publish」をクリックします。

6. InVisionの管理画面にアクセスすると、先程作成したプロトタイプがあります。(その他デフォルトに並んでいるのはサンプルです。)

マウスーバーをすると「SHARE」ボタンが表示されるので、そちらをクリックします。

7. 招待ウィンドウが開きます。通常に招待すると招待された方もInVisionにログインする必要があるのですが、下部にある「public share link」をクリックしたときにコピーされるURLを共有すれば、どのデバイスからでもプロトタイプを確認することができます。

共有されたプロトタイプにはコメントを残すことができます。

簡単ですが、Craftのプロトタイプの共有について紹介をいたしました。
Sketchがメインの制作環境の場合、Craftを活用するとプロトタイプの制作と共有が簡単にできそうですね!


『Figma』それはデザインツールの進化系

こんにちは。デザイナーのMです。
今回は、前から触ろう触ろうと思いながらも触れていなかった『Figma』を使ってみたので、ブログに書こうと思います。

Figmaとは?

ひとことで言えば、『いつでもどこでも誰とでも使えるデザインツール』です。
オンライン上で複数人同時にデザインすることができるめちゃくちゃ便利なツールです。しかも無料で👌

なにはともあれ導入です

導入と言っても、Figmaは “Webブラウザベースのデザインツール” なので以下のURLにアクセスしてアカウント登録をするだけで終わります🙄(驚愕

Figma: the collaborative interface design tool.
https://www.figma.com/


今までの、アプリをダウンロードしてインストールして…とかの地味に面倒くさいフローが無くなってることに衝撃を受けました。。
ちなみにアカウント登録して、デザイン作成画面を表示させるまでに要した時間は1分ほどでした。早い🥺

画面のざっくりとした説明など

デザイン作成画面はシンプルです。SketchやXDを普段使ってる人ならそこまで違和感なく操作できるかと思います。

1.各種ツール

「選択ツール」「フレーム(アートボード)作成」「オブジェクト作成」「ペンツール」「文字入力」「コメント」
の順で各種ツールが並んでいます。

2.レイヤー、アセット

レイヤー階層や共通アセットの管理などができます。

3.デザイン詳細パネル

色やフォント、サイズなどを制御できるパネルです。
SketchとかとUIが似てるので問題なく使えると思います。

4.共有機能

これが、Figmaの真髄✨とも言うべき機能だと思います。
瞬時に”今”作ったデザインを共有できます。
そしてそのデザインをリアルタイムで一緒に編集することができます(後述)。

実際の動作を見てみましょう

歯車風のオブジェクトをサクッと作ってみました。これぐらいなら秒でできます😎

そして他の人に共有してみる

先程書いた、共有機能を使ってみたいと思います。
感覚としては、Googleドキュメントやスプレッドシートなどの共同編集と同じですが、それがデザインツールでできるのは感動しました🥺

左右それぞれ別の人が別端末のブラウザから見ている、という想定です。
ほぼリアルタイムで編集した内容を反映しているのが分かると思います。

共同編集できるメリットとしては、
・修正、変更内容が全てビジュアルで可視化されるのでわかりやすい
・バージョン管理を利用するとデザインデータのコンフリクトを防げる
・複数のデザインデータを作成しなくて済む
・デザインデータの置き場所に悩まなくて済む
・コメントなどですぐに修正点を伝えることができる
・一緒にデザインするのはワクワクする🤩 ←これ

いいことばっかり✨
ただ、日本語入力対応などは少し遅れてるっぽいです😂(海外ツールあるある

まとめ

今回Figmaを少し使っただけでも、このデザインツールのスゴさを実感できました。
Figmaにはまだまだ紹介しきれない機能がたくさんあるので、実務などにも少しずつ導入していきながら理解を深めていきたいと思います💪


“概念”をイラスト化するときの手順

こんにちは、三年目デザイナーのはなです。

私は自社サービスのLPなどをよく作成させていただいているのですが、その際、機能説明や特徴紹介のところに簡単な説明文と共にイラストを入れることが多いです。





例えばですが、「悩んでいることはありませんか?」という説明文に添えるイラストであれば「悩んでいる人のイラスト」を、「親子のコミュニケーションを円滑にします」という説明文であれば、「仲が良さそうな親子のイラスト」を添えるなど、なんとなく文からイラストが想像できるものであればイラストの作成はあまり難航しません。

ただ、「シンプルです」「簡単です」のようなとても抽象的なワードに添えるイラストを作成するときはとても難航します。

また、「面倒を減らします」「登録は必要ありません」などの、何か(手間とか紙の書類とか)がマイナスになることでメリットを打ち出しているものもとても難しいです。

言葉の中に具体的なモチーフがないため、まず「何を描くか」を決めなければいけません。

連想できるワードでマインドマップ作成

描くモチーフを決めるために、その文から連想ゲームのようにいろいろな単語を引き出していきます。

リストにして列挙してもいいですし、マインドマップを作成するのもいいです。

今回は例として「手間を減らします」という説明文に添えるイラストのモチーフを考えます。

モチーフのアイデア出しは気の済むまでやります。

すごく早く終了するときもあれば、ずっとやっているときもあります。

世界観を合わせる

連想ワードを書き出したら、そこからどれをイラスト化していくか決めます。

ポップで楽しそうなデザインの中に入れるイラストであれば、動物やお花、植物などのモチーフを選んでもいいかもしれません。

スタイリッシュでかっこいい感じのデザインであればスマホなどのデバイスや、オフィスなどのモチーフを選んた方がいいと思います。

描き方も、手書き風にしてみたり、ベクターでかっちり作ってピクトグラム風にしてみたり、デザインに合わせて作ります。

今回はラフでかわいい感じのデザインにいれる事を考えて、マインドマップから以下のモチーフを選びました。

・経理の人がラクしてるところ

・ロボット

・ベルトコンベア

それをもとに作成したラフが以下になります。

ラフを作ったら絵柄をデザインに合わせることに意識を向けつつ、完成させます。

絵本風のかわいい絵ができあがりました。

このイラストに「経理担当者の手間を減らします」と添えてあったらなんとなくハッピーな感じが伝わるのではないでしょうか・・・?

まとめ

Webサイトの素材として作るイラストは割と抽象的なものを表さないといけないことが多く、どうしたらいいんだ…と悩んでしまうことも多々ありますが、マインドマップなどでモチーフを考えることで、「いつもおんなじようなモチーフ選びになってしまう」を避けることができます。

これからもデザイン全体を彩るような、いい感じのイラストを描ける機会がいっぱいあるといいなと思いました!がんばります!


【コピペOK!】ちょっと使うだけで、なんかいい感じになるデザインcssまとめ

こんにちは。デザイナーのMです。
最近久しぶりにコーディングをすることがあり(日々しろよ)、css3の進化に驚愕しました⚡

今回は “なんかいい感じ” にデザインが捗るcss3をいくつかご紹介したいと思います。
コピペですぐに使えるので、ぜひちょちょっと使ってみて下さい。

なんかいい感じの「シャドウ」

box-shadow: 0px 1px 5px rgba(0,0,0,0.05);

その名の通り、なんかいい感じのシャドウを付けるcssです。
普段から皆さん普通に使われているのだと思いますが、まずは基本としてご紹介します💁🏻‍♂️
ポイントは「うっすら」。シャドウの透過を濃くしたら安っぽくなるので、うっすらふわっとシャドウが見えるを目安に付けるといいと思います。

なんかいい感じの「マーカー」

display: inline;
background: linear-gradient(transparent 60%, rgba(255,255,102,0.5) 60%);

文中の文字を強調させるのに、太字や文字色を使ってたけどなんか面白みが無い、という人におすすめです。マーカーを使うと人肌感といいますか、少し温かみのある表現になる気がします。小学校の頃を思い出します。
カラーコードを変更してお好きな色のマーカーにしちゃいましょう🖍

なんかいい感じの「グラデーション文字」

color: #a6c0fe;
background: linear-gradient(135deg, #a6c0fe 0%, #f68084 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

グラデーションカラーやフォントとの組み合わせ次第で、とてもオシャレな装飾をすることができます。
非対応ブラウザのために “color” の設定はお忘れなく😎

なんかいい感じの「ぼかし文字」

filter: blur(8px);

ちょこっと隠したいときとか、、に使うのはどうでしょう?
あんまり使うことはないかもしれませんが、続きを読ませたいときやコンテンツを隠して気になるようなデザインにしたいときに使うと相性が良さそうです。ただ、使いすぎはやめましょう😂

なんかいい感じの「めくれ画像」

.mekure {
	display: inline-block;
	position: relative;
}
.mekure:after {
	position: absolute;
	content: "";
	box-shadow: 0 15px 10px rgba(0,0,0, .5);
	transform: rotate(3deg);
	right: 5px;
	left: auto;
	top: auto;
	bottom: 15px;
	z-index: -1;
	width: 50%;
	height: 20%;
}

画像にめくれ風処理をするcssです。
こちらもシャドウは控えめに付けるのがポイントです。アニメーションと併用しても相性が良さそうです。

以上、すぐに使えるデザインcssまとめでした。
今回少ししかご紹介できなかったので、またこのシリーズはやろうと思います🔥


デッサン教室で叩き込まれて未だに役に立ってること

こんにちは、3年目デザイナーのはなです。

私は芸術大学のデザイン科を卒業しているのですが、その前は芸大受験のため画塾に通っており、デッサンや色彩構成、立体構成の勉強をしていました。

特に入試の数ヶ月前からは先生の厳しさが3倍ぐらいになって、描いては怒られ描いては怒られ毎日とにかく怒られて、泣きながら人生を呪ったりしていました。

その後私はデザイン科に進学したため、受験期のように紙に向き合いずっと絵を書くということはなくなったのですが、大学時代やデザイナーになった今でも、画塾で教わったものづくりの基礎の基礎はかなりダイレクトに役に立っています。

今回は、私が教わったことの中で今も大切にしていることをご紹介したいと思います。

描いてる最中は自分を天才だと思って描き、離れて見るときは一番嫌いな奴の絵だと思って見る

これは画塾に通い始めてすぐ、デッサンの基礎を始めたときに言われたことです。

デッサンでは、描く→離れて見る というプロセスを繰り返します。

手元で描いているだけでは作品全体のバランスを見ることができないので、2mか3mほど離れて、自分の絵が全体的に見てどうかを確認する作業が必要なのです。

デッサンを描いてる途中に、自分は駄目だと思いながら描くと、思い切った線を引いたり大胆な構図にチャレンジすることができません。

また、離れて見るときに、「ここは頑張ったところだから…」「ここは時間をかけたから…」などというバイアスがあると、自分の作品に対して正当な評価をくだせません。

作品を見る人は基本自分以外の人なのですから、自分が頑張ったところなど知らないし関係ないのです。

また、嫌いな人に対しては貶せるポイントがないか、あら捜ししがちになってしまいます。

自分の中の「頑張ったからバイアス」を消去して、作ったものに修正すべきポイントがないかあら捜しする、という姿勢はデザインをするときにもとても役に立っています。

自分の作品について説明する

これは主に色彩構成や立体構成の合評で行っていたことです。

色彩構成や立体構成では、抽象的なテーマ(浮遊とか、飛翔とか、清涼感とかなんかそういうのです)と、材料や使用色数の制限が与えられ、テーマとなったものを表現することを行っていました。

その後の合評では、「テーマをどのように解釈したか」「その解釈をどのように表現しようと思ったか」「なぜこの配置や構成にしたか」というのをみんなの前で発表させられます。

どこかに齟齬が合ったり言いよどんでしまうと厳しいツッコミが飛んできます。

「このなぜこの配置にしたの?」と聞かれて、もしそれをなんとなく適当に置いていたらうまく説明できません。

つまり、「自分の作品について説明できる」というのは、「細部に至るまできちんと言葉で説明できるぐらい意思と意図を持ってすべてを配置する」ということなのです。

実際には作品を世に出して、言葉で説明させてもらえる機会なんて殆ど無く、作品展のお客様も、Webサービスの新規ユーザー様も、ほとんどキャプションや説明書を読んでくれません。

ですが、「きちんと自分の作品について説明できるようにものを作る」という訓練によって、細部まで意思を持ってデザインを行うことができるようになりました。

まとめ

他にも言われたことはめちゃくちゃたくさんあります。

それをいつも、デザインを作っていたり、趣味で絵を描いていたりするときにフッと思い出すのです。

その度、怒られたことを思い出して背筋が伸びます。(猫背になってると、いい作品はいい姿勢から!と言われてもいました…)

怒られすぎて人生呪ってたしストレスでめっちゃ太ったけど、なんだかんだ、あ〜画塾行っててよかったな〜と今でも思います。

もう一回受験時代やり直せって言われたら、絶っっっ対、嫌ですけどね!

ちなみに、この記事のトップの画像は、画塾の科目で私が一番好きだったアクリル画で、褒められたやつです。ちゃんと褒められるときは褒められていましたよ…