カテゴリー: デザイン

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を活用するとプロトタイプの制作と共有が簡単にできそうですね！

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

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

こんにちは。デザイナーの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まとめでした。
今回少ししかご紹介できなかったので、またこのシリーズはやろうと思います🔥