見出し画像

教師からWebデザイナーへ③ 〜デザイン編〜

テックアカデミーの
カリキュラムは
着々と進んでいる。


これまで教えてもらったことがベースにあるから
スラスラ理解することができる。


カリキュラムの最初は
【Webデザインの原則】


デザインなんてしたことなかったし
そういうセンスに自信は全くない


どうすれば
見やすい
読みやすい
分かりやすい
デザインになるのか
全然、わからなかった。


「なんか良いな」と思うサイトがあっても
なぜそれを「良い」と感じるのかわからなかった。


本当にゼロから
学ぶ感じ。



<基本原則>

情報を見やすくする配置することを
「レイアウト」といい

そのレイアウトには
4つの基本原則がある。


①近接

関連する情報を近くに配置してグループ化すること

そのために必要なのが
レイアウトを作る前に
情報をリストアップして、整理・分類すること。

②整列

無造作に置かれた文章は読みにくいから
レイアウトの中に、見えない線を意識して
配置を揃えていく。
近接が、情報のグループ化であれば
整列は、情報の一体化。

③反復

色や形、書体、大きさなどの視覚的要素を繰り返すこと。
サイト全体を通して反復する要素を
グローバルナビゲーションという。

反復を継続することでリズムが生まれ、
ユーザーがスムーズに読み進めることができる。

また、あえて反復から外れたものを作ると
そこへ視線を促すことができる。

④コントラスト

異なる2つの要素を使って、メリハリをつけること。
その違いはできるだけ大胆に。
コントラストは色だけでなく、大きさや太さでも用いることができる。




<配色>

主に3種類学んだ。


サイトでの
基本的な色となる
「ベースカラー」

2番目に多く使われる
「サブカラー」

そして、ベースとサブの配色の
アクセントとなる
「アクセントカラー」


それぞれの配分は順に
ベース70%
サブ25%
アクセント5%


配色を決める順番は
1 アクセント
2 ベース
3 サブ


一番、最初に
アクセントを決めるのは
意外だった。



<色のトレンド>

2020年のトレンドカラーは
”クラシックブルー”

PANTONEという色見本帳のブランドが
あらゆるジャンルでリサーチをして
トレンドカラーを毎年12月に発表する。


もう1つは
”ヒューマンレッド”

こちらは主に、
ファッション業界のトレンドカラーを発表している。


こういうトレンドカラーを取り入れながら
配色を決めていく。


その時に活用できるのがこれ。
adobe color cc
https://color.adobe.com/ja/create


使いたい色を入力すると
それと類似する色や
補色する色を教えてくれる。


こういうサイトは他にもあったけど
個人的には、
ここが一番使いやすい気がした。

画像1


<いざ、デザインへ>

こういうデザインの基礎や
photoshopの使い方を学んでから
早速、デザインした。


photoshopを使って
バナーを作るという課題。


レイアウトの原則を取り入れて
配色を考えて


生まれて初めて作ったバナーは
信じれないくらいダサかった。


ある意味、
今後の成長の励みになりそうな。


デザインの基礎は基礎でしかなくて
それを知ったからと言って
おしゃれなデザインができるわけがない。



<で、結局、大切なのは>

自分の力だけで作った
ダサすぎるバナーに絶望したあと



「バナー おしゃれ」と検索してみた


思いつくこともなかった
デザインがそこには
たくさんあった。


自分の好みにあった
デザインを見つけて
そっくりそのまま真似する勢い

もう一度作り直した。


photoshopのスキルが足りなくて
思い通りにいかない部分もあったけど
最初のダサいバナーより
格段に良くなった。


良いデザインを作る力は
良いデザインをたくさん見ることで身に付く

っていう言葉の意味が
ようやく分かった。


つまり
目を肥やす
ってことだと思う。



それは
学校の授業と一緒だって気づいた。


たくさんの授業を見て
良いと思うものを最初は真似て、実践する。


自分の経験を通して
自分のものにして
どれだけの引き出しを自分の中で持てるか。


デザインにおいても
それが大事なんだって思った。


全く違うことでも
つながることはある。


<やり始めたこと>

デザインが上手になるために
やり始めたこと。


1日1サイト、模写する


私はどうしても
じっと見る
じっと考えるだけでは
身につかない。


どこかが動いてないと
ダメらしい。


だから、サイトを見るだけじゃなくて
それを白紙の紙に描いてみる。



レイアウトはいきなりパソコンの画面で作るのではなく
最初は手書きすると良いと学んだから



描くことは
役に立つかなと思って。


模写するだけでも
ド下手だけど


繰り返してれば
少しは上手くなるはず。


Webデザインの良し悪しは
センスではなく
知識と引き出しの多さだって
思えてきた。


乾いたスポンジみたいなものだから
楽しくて、仕方なくなってきた。










サポートしてもらえたら、飛び跳ねるほど喜んで、もっと良い記事を書こうって頑張る子です。よろしくお願いします♪