【引き出しを増やそう!】Webデザインのインプット

Webチームでデザイン担当をしていますsakaiです。

デザインを任せていただけるようになって早数年…にも関わらず、まだまだ勉強が必要だなんて日々感じているこの頃です。

発想の幅を広げるべく、Webデザインの引き出しを増やすために見ているもの、していることを今回はあげてみました。

最近はコーディングの方もすこーしずつ勉強しているところ。初心者向けではありますが、その勉強でお世話になっているところも合わせてご紹介します。

長くなってしまったので、ご興味のあるところからどうぞ。

01 デザイン参考サイトをみる

デザインのギャラリーサイト、デザイン系SNS、デザイナーの方のブログ…
表現方法や、新たな技術の発見のためにもほぼ毎日チェックしています。

01-01 デザイン系SNS

優れたデザイナーの方の作品や、世の中のハイレベルなデザインが集まるSNS。ただ眺めるだけでも、時間が経つのも忘れるほどに楽しいもの。
お気に入りをストックして、インスピレーションの糧としましょう。

Pinterest

03_0930

https://jp.pinterest.com/

Webデザインのほか、ロゴやバナー、パッケージデザインなどを、「Pin」することでストックできるSNSサービスです。
お気に入りのユーザーやボードをフォローすることで、自分のタイムラインにすてきなデザインがどんどん集まります。

Tumblr

20_0930

https://www.tumblr.com/

ブログサービスでもあるのですが、自分でアップするのはもちろん「リブログ」することで他のユーザーのデザインをストックしていくこともできるSNSです。
投稿されるデザインは多種多様で、中には独創的でユニークな作品も。

Behance

18_0930

https://www.behance.net/

世界中のクリエイターが投稿したデザインをみることができます。
Adobeが運営しているサイトで、Adobeアカウントがある方なら誰でも利用可能。

Dribbble

17_0930

https://dribbble.com/

こちらもBehance同様、世界規模のクリエイターSNS。 投稿できるのは招待制で登録された人だけなので、デザインはもれなくハイクオリティ!

01-02 Web系ブログ

Web制作に関すること。Web界隈のこと。Webだけに限らないデザイン全般のこと。
しっかり学べる5つのブログサイトをご紹介します。

コリス

08_0930

http://coliss.com/

Web業界の方ならおなじみのコリスさん。
多岐にわたった新鮮な情報を、ほぼ毎日更新されています。

PhotoshopVIP

04_0930

http://photoshopvip.net/

まだWebデザインを始めたばかりの頃。Photoshopを使った画像加工やグラフィックデザインの作成など、たくさんの実践的な技術をこちらで学びました。
Photoshopのテクニックはもちろん、Illustratorなどのグラフィック関連を学びたい方にぜひおすすめしたいです。

Webデザインレシピ

11_0930

http://webdesignrecipes.com/

まるで教科書のような丁寧でわかりやすい記事。
読者に寄り添うような文章なので、ボリュームのある内容でもすっと内容が入ってきます。
現在は残念ながら更新されていないようですが、今でもWordPressやJavascriptなどの記事を繰り返し読んで、勉強しています。

デザイナーのイラストノート – spicagraphスピカグラフ

06_0930

http://in.spicagraph.com/ 

フリーランスで活動されている、Web・DTPデザイナーの角田綾佳さんのブログ。
実務ですぐに活用できそうな、具体的なデザインテクニックなど公開されています。
公開されているスライダーもぜひ!チェックしてみてください。
https://speakerdeck.com/ayakasumida
フリーランスではなくても、デザイナー全般に通じる考え方がすごく勉強になります。

ツクロア – DESIGN LAB

07_0930

http://design-lab.tuqulore.com/

「なぜこういうデザインになったのか」というのを念頭に置いたデザインフロー。見た目の良さだけではなく、考えてデザインを構築することの大切さを書いた、歯科予約システムの作成についての記事は本当に参考になりました。

01-03 Webデザインまとめサイト

業務に取り掛かる前の段階。具体的なイメージを固めるときに、よく眺めるデザインギャラリーサイト。
ディレクターやお客様とのイメージのすり合わせなんかにも、とても便利ですよね。
こういったギャラリーサイトはたくさんありますが、私自身特に使いやすい、更新頻度の高いサイトをあげました。

MUUUUU.ORG

01_0930

http://muuuuu.org/

「縦に長いサイトを集める」といったコンセプトで運営されているギャラリーサイト。更新頻度が高く、毎日チェックしておきたいサイトのひとつです。

S5 Style

19_0930

http://bm.s5-style.com/

毎日チェックしておきたいサイトその2。登録なしでも自分専用のお気に入りリストを作成することができます。

bookma

10_0930

http://bookma.org/

現代デザイン

12_0930

http://gendaidesign.com/

一覧ページで、トップページのほか下層ページも表示してあるのが嬉しい。

LP アーカイブ

16_0930

http://rdlp.jp/lp-archive

LP(ランディングページ)のまとめサイト。
実際のページに飛ばなくても、同サイト内でページ全体のデザインが閲覧できます。
モックにはまったファーストビューのイメージも、合わせて確認できるのも嬉しいですね!

01-04 テンプレート素材

最近では無料のものでも高品質なWebデザインテンプレートがたくさん配布されています。デザインの基礎として使い、作業の効率アップにつなげることもできますし、すみずみまで中身を見て、表現方法を学ぶこともできます。

先にあげたコリスさんやPhotoshopVIPさんでも、テンプレート素材を配布しているサイトをよく紹介されていますので、ぜひチェックしてみてください。

01-05 配色ツール

色の組み合わせに迷ったとき。イメージしてる色を探しているとき。こういったツールを使ってみると自分では思いもよらない発見があるかもしれません。

Adobe Color CC

21_0930

https://color.adobe.com/ja/

Adobeが配信している、配色ツール「Adobe Color CC」。
アップロードした画像をもとにカラーパレットを作成し、編集したものをそのままスウォッチとしてPhotoshopやIllustratorで使用することができます。

Paletton

14_0930

http://paletton.com/

カラーホイールで、直感的にカラーを作成し、それを反映したWebサイトのイメージをみることができます。
作成したカラーは、HTMLやPNGなどでも出力可能。

shade

22_0930

http://jxnblk.com/shade/

美しいグラデーションをベースカラーをもとに自動生成してくれます。ブラウザ上で色相、明度などの編集もでき、作成したグラデーションは右下に表示されるCSSをコピーできます。

02 実物を観察する

「なぜ美味しそうなのか。なぜ綺麗にみえるのか。実物をたくさんみて、目を肥やことが向上につながる」
レタッチを教わっていたときにいただいた言葉です。
食べ物、身の回りのもの、空の色…ブラウザや紙面に落とし込まれていないものだって、デザインのお手本の一つです。

03 オンラインスクールで学ぶ

Web動画などオンライン上で学べるスクールサイト。コーディング、デザインのほか、一般的な教養などその内容はバリエーションに富んでいます。
無料で始められるものもありますので、気になったところからまずは始めてみてはいかがでしょうか。

ドットインストール

05_0930

http://dotinstall.com/

HTML、CSSから、WordPressやフレームワークを利用したサイト作成など実務的なことまで。基本的なコーディングやプログラムを、動画で一通り学べる学習サイト。
どの講座も基礎的なことからスタートしているので、初心者の方でもすぐにはじめられます。
1本約3分と短めですので、空き時間にサクサクこなせるのが嬉しいですね!

schoo スクー

09_0930

https://schoo.jp/

LIVE配信される授業動画にアクセスし、学んでいくのが基本スタイル。19時〜の配信が多く、終業後でも閲覧しやすいかも?
デザインやプログラムのほか、企業や英会話などのビジネス関係の授業や生活に役立つ知識教養など、ちょっと変わった授業も配信されています。

Skillhub

02_0930

http://skillhub.jp/

Webデザインの基本的なスキルを動画で学びます。
コーディングのほか、Photoshop・Illustratorのグラフィックソフト操作方法、サーバーへのアップロード方法など、サイトとして完成させるまでのことが一通り学べるようです。

04 インプットするとき、したあとに意識的にしたいこと

せっかくインプットしたのに、「ただなんとなく見ただけ」になってしまうともったいない! 引き出しに入れたインスピレーションやアイディアを、自分のデザインで応用できるようになるために、心がけたいこと・やっていきたいことを最後にあげてみました。

05-01 理由をつけてみる

なぜいいと思ったのか。自分なりの理由を探してみてみます。

自分が作るものとなにが違うのか。どういう目的のデザインなのか。
誰のためなのか。いつ、どんなときに使うものなのか。
そんなことを頭の片隅に置きつつ、いろいろな角度からデザインを観察してみましょう。

05-02 デザインだけではなく、ソースもみてみる

このWebサイトで使っているのは、どんなフレームワーク?どんなフォント?どんなアイコン?
どのようなコードでデザインを実装しているのか、ソースコードをみてみるのも勉強のひとつ。
classのつけ方ひとつでも、特に初心者の内は本当に参考になります。

05-03 デザインを模写してみる

Web技術の上達方法として、おなじみの模写練習。絵や字の練習と同じで デザインでもコーディングでも、実際に手を動かして作ったものはやっぱり身につきやすいです。
最初は模倣ではありますが、自分でもできたという達成感を重ねることで、モチベーションのアップにもつながります。

最初からWebページまるごとの模写だと、ハードルが高く挫折してしまいがち。 グラフィックであれば写真の加工、コーディングであればコーポネント単位など、ボタンやバナーのような小さなパーツからまずははじめてみましょう。

終わりに

いかがでしたでしょうか。
今回は、特にWeb制作を始めたばかりの方の参考になりましたら幸いです。

 


「【引き出しを増やそう!】Webデザインのインプット」への1件のフィードバック

ありな へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 が付いている欄は必須項目です