カテゴリー: デザイン

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

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

私は自社サービスの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サービスの新規ユーザー様も、ほとんどキャプションや説明書を読んでくれません。

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

まとめ

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

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

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

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

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

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


SketchのプラグインCraftの使い方(インストールとコンテンツの挿入)

Craftとは

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

SketchでUIデザインするときに便利な機能がたくさんあります!

Craftのダウンロードとインストール

トップページにメールアドレスを入力し、「GET CRAFT NOW」をクリックしてプラグインをダウンロードします。

ダウンロードしたファイル「CraftManager.zip」を解凍し、アプリケーションフォルダに移動します。Craftを起動するとMacのメニューバーにアイコンが表示されます。



追加されたアイコンをクリックし、進めていくとスケッチ用プラグインのインストール画面が表示されます。「install」をクリックしてプラグインをインストールしましょう。



インストールが完了するとSketchにメニューが追加されます。

画像やテキストの流し込み

Dataパネルを使って、画像やテキストの流し込みをしてみましょう。

①Dataパネルを開きます

②Photosを選択

③新しい画像を使う場合、開いてるブロックをクリックします。


④アイテム名や使う写真のディレクトリを選択します。


準備が整いましたので、画像を挿入したいところをクリックして、Dataパネルを使ってみるとどうなるか見てみましょう。

画像があっという間に追加されましたね。

テキストも「Type」から同様に追加できます。

コンテンツの複製

デザインを作る上で同じものが並ぶ場合はありますよね。

duplicate(複製)パネルを使って、画像やテキストの流し込みをしてみましょう。

複製したい方向のフォームに複製したい「数」と「間隔」を入力します。

青いボタンを押すと複製されます。


もしも、コンテンツ素材があらかじめ用意されている場合は、先に「画像やテキストの流し込み」で利用した「Data」パネルを利用しましょう。

あらかじめ「Data」パネルから素材を流し込んでいると、ランダムに画像とテキストが挿入されます!

あっという間にコンテンツが複製されましたね。

Craftには、プロトタイプ作成など他にも様々な便利な機能がありますので、改めて紹介したいと思います。


ランダムな感じでワイワイ配置したデザインの作り方

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

私は洗練されたミニマルでシンプルなデザインも好きですが、どちらかというと装飾をワイワイたくさん置いた華やかなデザインの方が好きです。

今回はそんなワイワイしたデザインを作るときに欠かせない、バランスの良いオブジェクトのランダム配置のやり方についてお話します。

オブジェクトの準備

まず、オブジェクトを大まかに、大・中・小に分けます。

「大」は主役、もしくは準主役です。

真ん中にタイトルなどが来る場合はそれが主役になるので、「大」のオブジェクトは準主役になります。タイトルなどがない場合(イラストなどだけをランダム配置する場合)は主役になります。

基本的には一つの画面に1個か2個だけ置きます。

「中」は脇役です。

主役よりも色や書き込みの量に少し差をつけるとなお良いです。

画面の大きさやバランスによりますが、主役より多く、3~5個ほど置くと良いと思います。

「小」はモブです。

画面の賑やかしです。

主役と脇役を配置したあと、余白に置いていきます。

置く数は画面の広さで大幅に変わります。脇役の数より多いこともあれば、少ないこともあります。

オブジェクトの配置

「大」「中」「小」の順に配置していきます。

まず「大」を配置します。

大胆に画面からはみ出るぐらい置くとダイナミックさが出ていいと思います。

2つ以上置く場合は一箇所に固まりすぎないように気をつけ、角度に差をつけます。 

次に「中」を、「大」の間に置いていきます。

こちらも、近くにある「中」同士が似た角度にならないように気をつけます。

最後に「小」を、余った部分に入れていきます。

「小」と「すこし小さめの小」を作って一緒に配置していくとよりランダム感が出ます。

配置の良い例・悪い例

こちらが配置の良い例です。

そしてこちらがあまり良くない例です。

よりいいバランスのランダム配置にするには、下記のポイントに気をつけましょう。

・余白が均等に空きすぎている

タイトルの目立ち感が少ないですね。

また、オブジェクト同士の余白がだいたい同じぐらい空いていて、スカスカしているように見えます。

「粗」(空いているところ)と、「密」(詰まっているところ)が生まれるように配置しましょう。

また、主役の周りは「疎」にすると主役をより目立たせることができます。

・似た要素を似た角度で置かない

「大 A」「大 B」の角度が似ています。

また、「中 a」と「中 B」の角度も似ていますね。

ランダム配置の場合に似た要素が似た角度になると「何らかの意味」があるように感じられて不自然になります。

角度はばらばらになるようにしましょう。

・「触れるか触れないか」はやめる

「大 A」の下、「小」が触れるか触れないかの場所に置いてあります。

この、「触れるか触れないか」というのも「何らかの意味」を生みます。

ちゃんと離すか、ちゃんと重ねるかどちらかにしましょう。

ランダム配置は、「おもちゃ箱を投げたときにおもちゃが床に散らばる感じ」をイメージします。

同じ形のおもちゃが全く同じ角度になる確率はとても低いだろうし、おもちゃとおもちゃの隙間が全部均等になることなんて多分ありませんよね。

作成したランダム配置に沿って、お花を置いてみました。

お花バナー

華やかで可愛い感じにできたと思います!

まとめ

ランダム配置は何度も作っていると、なんとなく感覚でできるようになってきます。

それまでは、

他人に見せる→バランスが悪いと思うところを指摘してもらう

というのを繰り返すといいと思います。

少し休憩を挟んだり、離して見てみたりするのも有効な手です。

1人で作っているとなんだかよくわからなくなってくるので…

(私もしょっちゅうなんだかよくわからなくなっています)

この世に私好みの可愛くてワイワイしたデザインが一つでも増えるといいなと思っていますので、みなさんもどんどんランダム配置を使ったデザインを作ってくださいね〜!(強欲)