webデザイン力ってどうやったらあがるだろうかと、制作するたびに思わされますが、

そんな悩みを少し解決してくれるような記事達と出会いましたので、ご紹介させていただきます。

 

まずは一気にご紹介させていただきます！！

 

Webデザインのスキルを磨こう！Webサイト模写のススメ | Webクリエイターボックス

模写して学ぼう！駆け出しデザイナーのためのデザイン上達法 | 株式会社LIG

WEBデザインが短期間に上達した方法 | FEVDES BLOG

ぼっちでも独学でWEBデザイナーになる方法（基礎編） – Cntlog

Webデザイン完コピのススメ！ゼロから始める初心者は、まず沢山のページを模写し真似して作るべし！ | WEB-LABO

Webデザイン力をアップさせる4つのアクション | 株式会社アクトゼロ／動画コンテンツマーケティング・ソーシャルメディアマーケティング

独学Webデザイナーの独自なWebデザイン学習法 | ニシザワのブログ

 

webデザイン力をUPさせるために必要な事

 

上記の記事を踏まえて、わかったことは、

・情報収集をする(webサイトをキャプチャ、ブックマークして手元に置いておく)

・サイトの模写をする

することです。

 

情報収集をすることで、目を鍛え、最新のデザインに触れることができます。

また、収集されたものを見ると、自分の趣味趣向がわかります。

 

そして、収集するだけでは技術は上がらないので、

そこで模写をする必要があるようです。

 

模写はキャプチャしたサイトをphotoshopで同じように作っていくのですが、

模写のポイントとしては、以下のようなことが挙げられていました。

* デザインテイストを決めている要素　（写真・色・パーツの作り・フォントだったり、それらが複雑にからみ合っています）
* 情報の強弱・グルーピング（大きさや余白、色によって意味が違ってきます）
* レイアウトの幅（全体の大きさや例えば2カラムの場合の左右のカラムの大きさ。少しの幅の違いでバランスがかわります
* 余白間（マージン）の取り方
* 見出しやテキストとのジャンプ率の付け方
* 使用色の割合と使用数、差し色の使い方
* 要素同士のサイズ感のバランス
* 際立たせたい箇所の目立たせ方

これらを踏まえ、
「良い」と思った理由を分析し、キーワード化して認識すると、
おのずと良いデザインができるようになるのではないかということですね。

 

そしてphotoshopの扱い方もまなぶことができます。
グラデーション、シャイプの生成、テクスチャ等々、真似しようとすれば、
どのように作成したらいいのかを考えるようになります。

完成したpsdはそれをもとにコーディングもやると、
html構成、class/idのつけかた、css等を学ぶ勉強になるとなる思います。

 

いいことだらけですね！！

これはやるしかない！！

と思いつつ僕もやってますが、なかなか取り組めてません・・・

 

もっと取り組んで自分なりの考えができたら、またそれをまとめたいと思います。