セミナー

【絶対にできる!】デザインセンス【0】の人でもおしゃれなwebサイトを作るコツ

驚く女性

こんにちは。

突然ですが皆さんはデザインってできますか?

 

正直に言うと私は全っ然できませんでした。

 

センス【0】の人でもデザインをするにはどうすればよいかの話

驚く女性
まじで

 

 

実はhtml、css、jsって私の人生の中でもかなり最初のころに学び始めた言語なんですよね。けど習得するのは一番時間がかかっています。7年かかった。。。

 

それぐらい自分の思った通りのデザインができるようになるには時間がかかりました。

 

なんでこんなに時間がかかったのか。そして、どうしてデザインができるようになったのか、今日はそれをご紹介したいと思います。

 

デザインはセンスによるものだと思っていた。

 

余談ですが、私が今まで扱ってきた言語は多岐にわたります。

C、html、css、js、C#、python、Java、、、

大体こんな感じ。これ実は学び始めた順番で書いてあるのですが、htmlはかなり最初のころにやっているんですよね。

 

もう今は残っていませんが、昔作ったホームページを思い出します。全体像をお見せすると昔のハンドルネームとかがばれてしまうので詳細は伏せます笑。これだけみても恐ろしくセンスが無いんだな、ということがお分かりいただけるかと思います。

まじでひと昔前みたいなホームページだな…笑

 

 

実は私のtwitterで流している【昔のブログあるある】というのはこの辺の経験からきていたりします笑

 

 

本当になつかしい笑 そして恥ずかしい笑

 

そんな私が今はこんなサイトを作るまでになりました。

https://www.blogassistant.jp/

 

驚かれることが多いのですが、こちらのデザインは私1人で行いました。ありがたいことに多方面からおしゃれというほめ言葉をいただいています。

 

私はデザインよりもプログラムを触ってきたので、デザイナーというよりかはSE気質です。ただずっとデザインには挑戦しており、今回なんとかまともな形で仕上げることができました。

ではなぜこのようなサイトを作ることができたのでしょうか。(自分でいうのもなんですが笑)

 

それは次のことを意識してデザインしたからです。

  • 既にあるデザインを真似する。
  • デザインの本で色をパクる

1つずつ見ていきましょう。

 

既にあるデザインを真似する

 

そもそもセンスが無いので、自分でデザインを思いつくということはしません。とにかく探しました。「こんなデザインがいいな~」というのを探して、その画面をコーディングする。そういう作業を行いました。

もちろん探したデザインは参考にしただけでコードをコピーしたわけではありません。コピーするとcssとの連携が面倒ですからね。あくまで画像やアイコンの配置とかデザインだけを参考にしました。配色はあとで考えるので、それは参考にしません。

 

検索するとセンスがあるデザインは簡単に見つけることができます。

自分の中でしっくりくるデザインを見つけることがコツです。

そもそもデザインセンスが無い人って、(私も含めてですが)身近にあるデザインに対してかなり無関心です。例えば横断歩道の道路標識がどんな感じだったかと言われて、パッと思い出せる人は少ないでしょう。

 

ちなみにこんなやつです。

 

見れば細部まで分かりますが、記憶の中で細部まで覚えている人は少ないはずです。webサイトにも同じことが言えます。「こんなサイトを作りたい!」という思いがあっても、細部まで覚えている人は少ないです。しかし、細部まで分かっていないとデザインはできません。

必ず調べてビジュアルを明確にしてからコーディングに取り掛かりましょう。それぐらいデザインって微妙なバランスの中で成り立っています。

 

デザインの本で色をパクる

 

次はこちら。デザインの本で色をパクります。センスのない私には色の創造など到底無理な話でした笑

 

そこでめっちゃデザインセンスのある友人に話を聞いてみました。

配色の仕方についてアドバイスしてほしいんだけど…
めっちゃデザインセンスのある友人
めっちゃデザインセンスのある友人
私が参考にしている本を教えてあげるからそれを参考にしてみるといいよ

 

webサイトのデザインは検索すればいくらでも見つけることができました。

 

ただ、配色は別です。

 

色は検索しても参考になるサイトがあまり出てきません。代表的なカラーコードや補色など、デザインの参考になる色の使い方は出てきますが「この色を使うとこんなサイトになる」というのはないんですよね。

 

そこで本を使うというわけです。

ちなみに教えてもらった本はこちら。

 

Amazonで買う場合は、kindleとかにするよりも実物の本を買った方が良いと思います。ページ数もたくさんあるので。

 

試しに中を見てみると、こんな感じで配色がたくさんあります。

 

ここで、自分の好きな色の組み合わせを見つけて配色をするという感じですね。カラーコードまで出ているので使い勝手抜群です。

 

このようにして私はちゃんとしたデザインを行うことができました。

 

 

デザインはセンスがなくてもできる。「デザインは知識」

ここまで見てきて分かる通り、これらはセンスが無なくても実践できる方法です。

 

私の友人の恐ろしくデザインセンスがある人曰く

めっちゃデザインセンスのある友人
めっちゃデザインセンスのある友人
デザインは知識

だそうです。

最初は信じられませんでしたが、今回このような方法を実践してきて、「確かにデザインは知識かもしれない」と本気で思うようになりました。

 

思えばゴッホやピカソなどの世界的な画家を見てもそうです。ゴッホは日本絵に興味を持って真似していたこともありましたし、ピカソは美術館の名画を模写してデザインの勉強をしていました。

 

結局、どれだけデザインに触れ、知識を蓄えてきたか。

 

それに尽きるのかもしれませんね。

 

デザインはやりたい!でもセンスがない!と悩んでいる人は「デザインは知識」という言葉を思い出して、地道に経験値を積んでみてはいかがでしょうか。

 

ここまでお読みくださり、ありがとうございました。

 

ABOUT ME
中村彰吾
中村彰吾
ブロアシを作った中の人。 プログラム歴は7年で「人間がやりたくない仕事をすべてプログラムにやらせる!」という目標を持ち日々活動している。 ブログ執筆中、「ブログって記事を書く以外にやらなきゃいけないことが多すぎるな…」と思い、少しでもブロガーの負担を減らせるような「ブロアシ」を開発。現在は動作改善と新機能追加に邁進している。