BLOG﻿メニューとウィジェットFacebookTwitter検索:ABOUT当サイトは株式会社アートグラフィック新潟WEB制作ブログです。WEB制作にまつわることや新潟の情報など投稿していきます。会社のホームページはこちら♪ご注意:記事は当時の情報を元に書かれておりますので、仕様が変更され記事と合わない事がございますので、その際はご容赦願います。(1)BasketballspiritsPR【引き出しを増やそう!】WebデザインのインプットWebチームでデザイン担当をしていますsakaiです。デザインを任せていただけるようになって早数年...にも関わらず、まだまだ勉強が必要だなんて日々感じているこの頃です。発想の幅を広げるべく、Webデザインの引き出しを増やすために見ているもの、していることを今回はあげてみました。最近はコーディングの方もすこーしずつ勉強しているところ。初心者向けではありますが、その勉強でお世話になっているところも合わせてご紹介します。長くなってしまったので、ご興味のあるところからどうぞ。デザイン参考サイトをみるデザインのギャラリーサイト、デザイン系SNS、デザイナーの方のブログ...表現方法や、新たな技術の発見のためにもほぼ毎日チェックしています。デザイン系SNS優れたデザイナーの方の作品や、世の中のハイレベルなデザインが集まるSNS。眺めるだけでも、時間が経つのも忘れるほどに楽しいもの。お気に入りをストックして、インスピレーションの糧としましょう。Pinteresthttps://jp.pinterest.com/Webデザインのほか、ロゴやバナー、パッケージデザインなどを、「Pin」することでストックできるSNSサービスです。お気に入りのユーザーやボードをフォローすることで、自分のタイムラインにすてきなデザインがどんどん集まります。Tumblrhttps://www.tumblr.com/ブログサービスでもあるのですが、自分でアップするのはもちろん「リブログ」することで他のユーザーのデザインをストックしていくこともできるSNSです。投稿されるデザインは多種多様で、中には独創的でユニークな作品も。Behancehttps://www.behance.net/世界中のクリエイターが投稿したデザインをみることができます。Adobeが運営しているサイトで、Adobeアカウントがある方なら誰でも利用可能。Dribbblehttps://dribbble.com/こちらもBehance同様、世界規模のクリエイターSNS。Web系ブログWeb制作に関すること。Webだけに限らないデザイン全般のこと。学べる5つのブログサイトをご紹介します。コリスhttp://coliss.com/Web業界の方ならおなじみのコリスさん。多岐にわたった新鮮な情報を、ほぼ毎日更新されています。PhotoshopVIPhttp://photoshopvip.net/まだWebデザインを始めたばかりの頃。Photoshopを使った画像加工やグラフィックデザインの作成など、たくさんの実践的な技術をこちらで学びました。Photoshopのテクニックはもちろん、Illustratorなどのグラフィック関連を学びたい方にぜひおすすめしたいです。Webデザインレシピhttp://webdesignrecipes.com/まるで教科書のような丁寧でわかりやすい記事。読者に寄り添うような文章なので、ボリュームのある内容でもすっと内容が入ってきます。現在は残念ながら更新されていないようですが、今でもWordPressやJavascriptなどの記事を繰り返し読んで、勉強しています。spicagraphスピカグラフhttp://in.spicagraph.com/フリーランスで活動されている、Web・DTPデザイナーの角田綾佳さんのブログ。実務ですぐに活用できそうな、具体的なデザインテクニックなど公開されています。公開されているスライダーもぜひ!チェックしてみてください。https://speakerdeck.com/ayakasumidaフリーランスではなくても、デザイナー全般に通じる考え方がすごく勉強になります。LABhttp://design-lab.tuqulore.com/「なぜこういうデザインになったのか」というのを念頭に置いたデザインフロー。見た目の良さだけではなく、考えてデザインを構築することの大切さを書いた、歯科予約システムの作成についての記事は本当に参考になりました。Webデザインまとめサイト業務に取り掛かる前の段階。具体的なイメージを固めるときに、よく眺めるデザインギャラリーサイト。ディレクターやお客様とのイメージのすり合わせなんかにも、とても便利ですよね。いったギャラリーサイトはたくさんありますが、私自身特に使いやすい、更新頻度の高いサイトをあげました。MUUUUU.ORGhttp://muuuuu.org/「縦に長いサイトを集める」といったコンセプトで運営されているギャラリーサイト。更新頻度が高く、毎日チェックしておきたいサイトのひとつです。Stylehttp://bm.s5-style.com/毎日チェックしておきたいサイトその2。登録なしでも自分専用のお気に入りリストを作成することができます。bookmahttp://bookma.org/現代デザインhttp://gendaidesign.com/一覧ページで、トップページのほか下層ページも表示してあるのが嬉しい。アーカイブhttp://rdlp.jp/lp-archiveLP(ランディングページ)のまとめサイト。実際のページに飛ばなくても、同サイト内でページ全体のデザインが閲覧できます。最近では無料のものでも高品質なWebデザインテンプレートがたくさん配布されています。デザインの基礎として使い、作業の効率アップにつなげることもできますし、すみずみまで中身を見て、表現方法を学ぶこともできます。先にあげたコリスさんやPhotoshopVIPさんでも、テンプレート素材を配布しているサイトをよく紹介されていますので、ぜひチェックしてみてください。配色ツール色の組み合わせに迷ったとき。イメージしてる色を探しているとき。いったツールを使ってみると自分では思いもよらない発見があるかもしれません。アップロードした画像をもとにカラーパレットを作成し、編集したものをそのままスウォッチとしてPhotoshopやIllustratorで使用することができます。Palettonhttp://paletton.com/カラーホイールで、直感的にカラーを作成し、それを反映したWebサイトのイメージをみることができます。作成したカラーは、HTMLやPNGなどでも出力可能。shadehttp://jxnblk.com/shade/美しいグラデーションをベースカラーをもとに自動生成してくれます。ブラウザ上で色相、明度などの編集もでき、作成したグラデーションは右下に表示されるCSSをコピーできます。実物を観察する「なぜ美味しそうなのか。実物をたくさんみて、目を肥やことが向上につながる」レタッチを教わっていたときにいただいた言葉です。食べ物、身の回りのもの、空の色...ブラウザや紙面に落とし込まれていないものだって、デザインのお手本の一つです。オンラインスクールで学ぶWeb動画などオンライン上で学べるスクールサイト。コーディング、デザインのほか、一般的な教養などその内容はバリエーションに富んでいます。無料で始められるものもありますので、気になったところからまずは始めてみてはいかがでしょうか。ドットインストールhttp://dotinstall.com/HTML、CSSから、WordPressやフレームワークを利用したサイト作成など実務的なことまで。基本的なコーディングやプログラムを、動画で一通り学べる学習サイト。どの講座も基礎的なことからスタートしているので、初心者の方でもすぐにはじめられます。スクーhttps://schoo.jp/LIVE配信される授業動画にアクセスし、学んでいくのが基本スタイル。19時〜の配信が多く、終業後でも閲覧しやすいかも?デザインやプログラムのほか、企業や英会話などのビジネス関係の授業や生活に役立つ知識教養など、ちょっと変わった授業も配信されています。Skillhubhttp://skillhub.jp/Webデザインの基本的なスキルを動画で学びます。コーディングのほか、Photoshop・Illustratorのグラフィックソフト操作方法、サーバーへのアップロード方法など、サイトとして完成させるまでのことが一通り学べるようです。引き出しに入れたインスピレーションやアイディアを、自分のデザインで応用できるようになるために、心がけたいこと・やっていきたいことを最後にあげてみました。理由をつけてみるなぜいいと思ったのか。自分なりの理由を探してみてみます。自分が作るものとなにが違うのか。いう目的のデザインなのか。いつ、どんなときに使うものなのか。そんなことを頭の片隅に置きつつ、いろいろな角度からデザインを観察してみましょう。デザインだけではなく、ソースもみてみるこのWebサイトで使っているのは、どんなフレームワーク?どんなフォント?どんなアイコン?どのようなコードでデザインを実装しているのか、ソースコードをみてみるのも勉強のひとつ。classのつけ方ひとつでも、特に初心者の内は本当に参考になります。デザインを模写してみるWeb技術の上達方法として、おなじみの模写練習。デザインでもコーディングでも、実際に手を動かして作ったものはやっぱり身につきやすいです。最初は模倣ではありますが、自分でもできたという達成感を重ねることで、モチベーションのアップにもつながります。最初からWebページまるごとの模写だと、ハードルが高く挫折してしまいがち。グラフィックであれば写真の加工、コーディングであればコーポネント単位など、ボタンやバナーのような小さなパーツからまずははじめてみましょう。終わりにいかがでしたでしょうか。今回は、特にWeb制作を始めたばかりの方の参考になりましたら幸いです。コメントをキャンセルメールアドレスが公開されることはありません。