はじめに
どうも、最近デザインを意識するようになった人です。
技術力とデザイン力は反比例する
先にはっきりと言わせてもらうが、お前らのwebサイトはダサい！
かくいう自分のwebサイトもダサい！
どうせ、原色使ってたり、情報を全て並べただけとかになってるだろ。
（過去の自分）
決して、原色を使っている人たちを全て否定しているわけではない。
使い所によっては原色はいいアクセントにもなる。
情報を全て並べることも悪ではない。
しかし、使い所によっては、（悪い意味で）ラスボス的存在になりうる。
じゃぁ、どうすればいいの？
自分の経験やその道に詳しい人たちの話や記事を調査した結果をまとめてみた。
色
そもそも、原色を使ってる人は今すぐその行為をやめた方がいい。
原色を使い続けると、主張が激しすぎて、目が疲れてくる。
自分としては、「material color」と呼ばれる色を使うのが良いと思う。
カラーパレットをいくつか集めたので、載せとく。
レイアウト
レイアウトはとてもむずかしい。
意識していたとしても、ついついダサいUI/UXを作ってしまいがちだ。
そこで、VuetifyというVue.jsのライブラリを紹介しておこう。
このライブラリはVue.jsに多数のコンポーネントを追加するものだ。
これらのコンポーネントは、マテリアル・デザインと呼ばれるものらしく、
まさに、「理想形」と言えるだろう。
知らんけど
アニメーション
Web開発をしたことある人なら、「CSS」を使ったことがあるかもしれない。
そんなCSSで作れるアニメーションのことを「CSSアニメーション」という。
この「臆病な魔女」は、 @yui540 によってつくられた、CSSアニメーションがふんだんに使用されたポートフォリオサイトだ。
ここまでしなければいけないわけではないが、CSSアニメーションを使用することで、ワンランク上のwebサイトを作ることができる。
このcssアニメーションを勉強するにあたり、まずは、cssのプロパティの、animationとtransitionを学ぶとよい。
基礎が大体理解できたら、既存のプロジェクトのコードを解析するのがいいとおもう。
最終形態があるため、「ここがこうなれば、こうなるのか」ということを考えながらcssアニメーションを学習できる。
自分が意識していること
情報を並べただけだと相手に伝わりづらいのは、少しでも考えればわかるだろう。
しかし、それを考えていたとしても、実行できるかは別というのは理解している。
そこで、
「自分のwebサイト、カッコイイ/カワイイ？」
という風に、自分を常に疑いながらwebサイトを作ることで、デザイナーではない君たちでも、「カッコイイ/カワイイ」webサイトに近いものを作ることができると思う。
おすすめの本
自分は、勉強するにあたり、本もいくつか買った。
その中での一押しを紹介する。
【動くWebデザインアイデア帳】
この本がイチオシだ。
二つ種類があるが、大雑把に説明すると、
- 黄色い方は、「ヘッダー・フッター等、"外側"のアニメーション」
- 赤色い方は、「テキスト・ボタン等、"内側"のアニメーション」
のことが書かれている。
webサイトを動かすことを詳しく解説しているのは、黄色い方なので、
「webサイトのデザインを学びたい」というのであれば、黄色い方をおすすめする。
一方で、「自分が作りたいものははっきりしてる」という人は、赤色い方をお勧めする。
こちらは、テキストの現れ方やボタンの動き、画像の動きなどのサンプルがあるので、いい刺激になると思う。
結論
デザインをろくに学ばずにweb開発を始めた人は、「ダサいwebサイトしか作れない症候群」になってる可能性が高い。
「技術力とデザイン力は反比例する」
などと言われたくないだろ？
デザインにあまり触れない人たちには、デザインに少しでもいいから触れてほしい。
セカイが変わる。
最後に
具体的な勉強法を提示しておく。
自分専用カラーパレットを作る
これは、上で述べた「色」・「レイアウト」・「アニメーション」これら三つの要素すべてが関わってくる。
カラーパレットを作ることで、
自分が好きな色やクールな色を探すうえで、「色」と向き合うことができたり、
「使いやすいレイアウトはどのようなものなのか」と、レイアウトを一生懸命考えたり、
アニメーションを使った演出を学んだりもできる。
最後に一言、
「全個人開発者に告ぐ！ デザインを学べ！」