Home > スポンサー広告 > Webサイトデザインのストックの探し方と、利用のしかた。

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comments: -

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: -

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/128-5bef4294
Listed below are links to weblogs that reference
スポンサーサイト from バニデザノート

Home > スポンサー広告 > Webサイトデザインのストックの探し方と、利用のしかた。

Home > デザイン > Webサイトデザインのストックの探し方と、利用のしかた。

Webサイトデザインのストックの探し方と、利用のしかた。

ember.png

よいデザインをトレースして、空間やサイズを感覚で叩きこむのが、すごく大事だなぁと改めて思うようになりました。たとえ全体の雰囲気が好みでないとしても、サイドメニューや、ひとつひとつの作り込みで勉強になるところは沢山あります。
そんな勉強になりそうなデザインの探し方と、既にまとまっているサイトを紹介します。

まずは、いつも使っているサイトからヒントを探る

デザインの好みに関係なく、「利用できる」「使えている」サイトには、何かその理由があるハズです。「使いやすい」「ほしいものがある」「わかりやすい」など。
そういったサイトをピックアップします。
そこから、デザインだけではなく、サービス自身や運営方法にも目を向けます。
サービスと、使いやすさが重なる部分をピックアップして、スクリーンショット→保存。
あとでまとめて見返すと、自分が「なぜ利用しているのか」の理由が見えてくるかも。

→「よく使う」という意味での好みを把握しておくことで、さらに広いところでヒントになるようなものを探すときの目安になります。

参考になりそうなサイトいろいろ。

ここまで下準備ができたら、いろんなデザインストックサイトを回ってみましょう。
ストックサイトには大きく2つあって、クリエイターさんがアップするクリエイター主体のポートフォリオサイトと、管理人さんが独自に抽出したものがあります。

最初は偏りなく、いろんなところを見ていくのがいい気がします。

JAYPEG

クリエイターさんのポートフォリオサイトですが、サイトデザインやタイポグラフィがいっぱいです。
日本人っぽい感性を観察したいときに。
https://jypg.net

Dribble

センスのよいちょっとしたアイデアがたくさん詰まってます。もうだいぶ老舗です。
海外っぽい英語のタイポグラフィや、アイコン、ロゴのセンスが学べます。

https://dribbble.com

Behance

こちらも、ポートフォリオ系サイトですが、デザインアイデアいっぱいです。ウェブサイトのカンプだけではなく、フリーフォントもアップされていたりします。

https://www.behance.net

I/O 3000

こちらは管理人さんがストックしているタイプのサイト。メインは日本のサイトで、大手さんとか、一般的にいいよね、ってされているものがおおいです。

http://io3000.com


街に出ても、写真を撮って資料に。

ウェブとは直接関係ないようなもの。駅の大きな広告とかにもヒントがあります。
建物にも、景色にも色や形のヒントがあるかもしれません。
いいなぁと思うものがあったら写真を撮って資料にします。

高解像度のものとか求めなくていいです。スマホレベルでじゅうぶんかと思います。
お店の陳列や、ごはん、店舗インテリアを撮りたい場合は許可を必ず貰って下さい。

※壁紙・包装紙・折り紙、布地のパターン、モノグラム等には
ネット以上に著作権がきちんとあります。
資料としてはいいのですが、完全トレースしたものやスキャンしたものをそのまま使っちゃダメです。

スクショデータはどこかにひとまとめにして後で見れるように。

わたしはアプリから入るタイプなので、今年からemberというアプリを使って管理することにしてみました。(前はlittle snapperを使ってました。)
フォルダで分けてDropboxで共有でもいいですし、iphotoやevernoteを使う人もいるかも。お好みで。

後で見れること、サイトとのひも付けをしておくことが大事です。

※入れたまんま忘れるような方法はもちろんダメです。見返すことで、観察眼が育ちます。
そして、時々トレースしたり、デザインの参考に引いてくること。
見るということと、手を動かすことは、全く違う作業です。
(完全トレースしたものを公開するのは著作権的にアウトですからねー。だめですよー。)


色とバランスの調和や、
文字組みや配置のこと。
写真の色彩バランスやコントラスト、配置。
空間の使い方。
パーツのデザインの完成度。
枠のあしらい。

前はDTPから学ぶしかありませんでしたが、今はウェブデザインにもそういったルールができつつあるように感じます。きちんと、独特のものがあります。しっかり観察して、手(マウス?)でなぞる。
繰り返すことで、より精度の高いサイトが作れるようになるような気がします。

勉強できることはまだまた沢山ありますね。
ご参考にどうぞ。
関連記事

Comments: 0

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: 0

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/128-5bef4294
Listed below are links to weblogs that reference
Webサイトデザインのストックの探し方と、利用のしかた。 from バニデザノート

Home > デザイン > Webサイトデザインのストックの探し方と、利用のしかた。

Sponsored Link
▲WordPress初心者向けに、ばにが書きおろしたオンライン授業です。上記バナーから受講いただくと、33%OFF!
ホームページ・ウェブサイトデザイン・制作ならバニレートデザイン事務所まで。Wordpress(ワードプレス)、カラーミーショップのカスタマイズから、レスポンシブ、Retina対応、スマホ用サイトもできます♪デザインカンプのみの納品や、バナーのみの納品などでも受付いたします!お気軽にご相談くださいませ。
Books - 寄稿させていただいた本たち
WordPressデザイン 仕事のネタ帳 見た目と効果を向上させるプロのテクニック
WordPressを利用して、趣味〜お仕事が可能なレベルの実践的な内容になっています。 ブログ風、Pinterest風、CMSとしてWordPressを利用する方法の3つをメインに、さらにこれらを拡張していきやすいような考え方や、きっかけを掴んでいただければという想いで書かせていただきました。担当Chapter:9chapter (メイン3、サブ6。110ページ前後ぐらい。)
【Amazon.co.jp限定】神速Photoshop [Webデザイン編] CC対応 特製PSショートカットステッカー for Mac 付
Photoshopの作業をすばやく行って、デザイン自身に集中できるように。基本動作であっても、考え方としてどのように持っていくか、ということをテーマに書かせていただきました。(担当:本編の全体89のテクニックのうち、23ぐらいのテクニックと、特典PDFの中にもいくつか。)
レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法
「レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法」にてCase Studyの1つを寄稿させていただきました!
Popular Posts
Recent Entry
Category
about:vanillate
vanillate

author: vanillate(バニレート)

フリーランスのウェブクリエイター。
wordpressやカラーミーショップのデザインなど、シンプルで可愛いサイトを作っています。






Link
Recommend
レンタルサーバー 【ヘテムル】 なら、 独自ドメイン【無制限】、データベース【50 個まで】を追加費用無料で設定できます。 しかも、サーバー容量は余裕の 42.195GB! 1 つの契約でたくさんのサイトを運営したい方にぴったりのサービスです。
★【カラーミーショップ】なら本当に安心!★
かわいいテンプレートが続々登場するから、初心者のあなたにも安心!
オンラインショップ・ショップブログ・モバイルショップなど、こんなに揃って月額875円~!
有名ショップ様にも多数ご利用をいただいているから、どんどん参考にしちゃおう!
Design Items
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。