ちょっとした小ネタをストックしておく大切さ

ちょっとした小ネタをストックしておく大切さ

最近、改めて小ネタをストックすることの大切さを感じる機会が多いんですよね。
ここで言う小ネタとは「知識を使える状態にしておくこと」と定義しています。

例えば

CSS、斜め、背景とかでググるとよくこれが出てきます。

See the Pen Skewed background with CSS by Jose L Pimienta (@pipozoft) on CodePen.

で、これを見たらあぁ、こうやって作るのねって知識は手に入ります。

ざっくり言うと背景を以下のcssで傾ける。

transform: skew(0deg, -10deg);

ただこのままだと中の要素も傾いてしまうので以下のコードで傾きを逆に戻す。

transform: skew(0deg, 10deg);

そうすると、背景だけが傾いている状態の出来上がり。
CSSの二行だけでベースが出来るので見た目のインパクトの割に記述は簡単な部類に入ると思います。
ただ、この段階だとただの知識なんですよね。

模写とアレンジ

大事なのはここから。
いいなと思ったものがあれば、それを模写、アレンジしてみる。

例えば今回の例で言うと、斜めのブロックを複数並べるとしたら?傾きを逆にするとしたら?斜めの背景を重ねるとしたら?などなど。
手の込んだものを作る必要はないと思うんですが、アレンジしてモックを作ると理解が深まるんですね。

サクッと作ってみたのがこちら。

See the Pen skewed-background by OKD (@OKD) on CodePen.

こういうのを実際に作ってみると、ただの知識から使える小ネタになります。
これが「知識を使える状態にしておくこと」という事。

デザイナーの場合

先ほどのようにコードではなく、いいなって思うデザインがあれば模写して、それを自分なりにアレンジしてみるのもいいと思います。
トレースしただけでも気付くことは多いんですよね。
そして、そこからさらにもう一歩。色を変えたり、写真を変えてみたりアレンジしてみる。
そうすると最初よかったのに急にダサくなった→あぁ、あの色だったからデザインが成立していたんだ。なんて事にも気づき、デザインのスキルアップに繋がります。

また、そうやって小ネタを作っておく事で引き出しが増え、急な提案に対応しやすくなるメリットもあります。

フロントエンドエンジニアの場合

何かを実装するとしても、基本的にはパーツの組み合わせなんですよね。
小ネタをストックしておく事で、一から作らなくても少しいじるだけで実装出来ることもあります。
そして、複数の小ネタを掛け合わせることでより奥行きのある表現が可能になります。
例えば「大きさが変わるという小ネタ」×「透明度が変わるという小ネタ」で雪が降るような演出とか。

あと、WebGLなどのインタラクティブな表現はデザイナーでは表現しきれないってケースが出てくると思います。
平面のデザインではクライアントに伝わらない。そんな時に小ネタを使ってモックを一緒に提案できれば大きな推進力になるかと。

まとめ

web業界は流行り廃りもありますが、実際に触ってみないと分からないことも多いです。
日々の業務に追われて、そんな小ネタ作ってる暇ないよーって方もいると思いますが、時間は作るもの。
毎日30分でも続けることで、それが大きなアドバンテージになる。
なんてわかってはいるけどなかなか出来ない自分に言い聞かせてますw

SPONSORED LINK

CONTACT

ご意見やご感想、お仕事のご依頼など
お気軽にご連絡ください。

CONTACT FORM