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

Tweet

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

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

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

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

Tweet