スポンサーサイト

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

配色、デザイン、文章、写真、センスがないとあきらめる前に勉強しよう!

自分が作ったウェブサイトを見て、「センスないな」とへこむことはありませんか?

webdesignstudy.png

私はよくあります。色使い、レイアウト、写真、文章などなど、どれをとってもセンスないなとへこんでいました。

けど、センスがないのではなく、単に基礎を勉強していないだけということに最近気づきました。センスはもっと高い次元の話でした。

ということで、センスを言い訳にしてしまいがちな分野の基礎を学べるすばらしい記事を集めました。この記事自体単なるまとめ記事ですが、できるだけ厳選し、読んでほしい順に並べました。皆さん、あきらめずに一緒に勉強しましょう。

配色

webdesign-color.png

アクセントになる色を使うのが苦手で、同色系の色ばかり使ってしまうのですが、これらを読めば恐れずに使えそう。

色彩センスのいらない配色講座

ベースカラー、メインカラー、アクセントカラーに分類してどのような色を選ぶべきか分かりやすく解説してくれています。具体例もあって分かりやすいです。

配色パターンからWebデザインを考える | Webクリエイターボックス

色が与える印象を具体例を踏まえて説明してくれています。サイトの目的に合わせて適切な色が使われているのが分かります。

配色初心者でも効果的なカラーデザインが出来るようになる4つの工程 / Maka-Veli .com

色に対する印象やアクセントカラーの決め方など、色を決める手順が紹介されています。

デザインの基礎

webdesign-kiso.png

デザイン、レイアウトなどの基本を丁寧に説明してくれています。

デザインの基礎力をワンランクアップしたい私(Webデザイナー)の注意書き

レイアウトの基本や図版率、ジャンプ率など初心者には聞きなれない言葉など幅広く親切に紹介されています。

良いデザインって?技術を学ぶ前に知っておきたいデザイン・レイアウトの基本的なこと | 秋田県webデザイナー【weblog】

サイトの目的やターゲットによってどのようなデザインにすべきかを、基礎から詳しく説明されていています。

[Webデザイン] 文字組みについて本気出して考えてみた | Stocker.jp / diary

細かいところですが、実践すると印象もかなり違ってきます。「括弧」を細くとか「円」を小さくっていうのは、知ってるか知らないかだけで別にセンスの問題ではないので、ちゃんと勉強しておきたいです。

デザインの基礎、黄金比から大和比、第2黄金比まで : Web Design KOJIKA17

普段全くしにしていないですが、洗練されたデザインだなと思ったサイトをよく見てみると、ここで紹介されている比率になっていたりします。取り入れるとデザインが安定するかもしれないです。

細部にこだわったデザイン

webdesign-kiso.png

ちょっとした線や影を追加するだけで全然印象が変わってくるという

少しの手間で大きく変わる、細部にこだわったWebデザインを | Webクリエイターボックス

1pxの線や小さな影などちょっとしたことで全然印象が変わってきます、ということを実際のサイトで解説してくれています。

素人っぽいデザインから脱却するための12のデザインチップス | webox blog

先ほどのものと似た内容でご本人はご謙遜されていますが、こちらも実例があってすごく分かりやすくていいです。

Webデザインにおける、1pxへのこだわり « Parkn' Park

すごい細かいところにまで注目されています。おもしろいです。

文章

webdesign-text.png

文章を書くのって昔から本当に苦手なんですよね。これも、デザインと一緒で様々なルールや技術があります。

読みやすい文章を書くための技法 - #RyoAnnaBlog

読みやすい文章を書くうえで知っておきたい技法がたくさん紹介されています。知らず知らず使っていることも多いですが、効果を知ったうえで使えばよりよい文章になると思います。

驚くほど違う→あなたの文章を最適化するたった4つのルール 読書猿Classic: between / beyond readers

論文用に書かれた記事ですが、分かりやすい文章を書くという意味ですのでどこでも使えます。例が多くて分かりやすいです。

「シンプルな文章の書き方」 ― 読まれなかった文章をカイゼンしてわかったこと : earth in us.

シンプルって逆に難しく感じるんですよね。

人を惹きつけ人を動かす文章を書く方法 初心者にもわかるコピーライター養成講座 ~言葉で世の中を動かそう - プログラマーkkの勉強/成長ブログ@ライブレボリューション

奥が深いです。ブログのタイトルにも役立ちます。

写真撮影

webdesign-text.png

画像があるのとないのではサイトの印象は全然違いますね。普段素材サイトの写真を使わせていただいていますが、自分で撮るとどうしても素人っぽくなります。

素人から脱却するデジカメの撮り方テクニック集 | nanapi[ナナピ]

様々な状況に合わせたテクニックがたくさん紹介されています。

写真がうまくなりたい?「ひとつ上の構図」を目指すための9のTips | IDEA*IDEA

サンプル写真があって分かりやすいです。写真の一部を切り取って使う場合なんかも使えます。

写真がうまくなる36の法則 - ライフハックブログKo's Style

いろんなサイトを見てお勉強

これらを学んでから色んなサイトを見ていると、「このサイトよく考えられているな」と感心することも多く、勉強になると思います。

ということで、個人的によくみるギャラリーサイトを3つ紹介しておきます。

WEBデザインの見本帳|WEBデザイナーのためのデータベース・リンク集、サンプル・配色・参考・ご提案に!!

webdesign-mihon.png

1ページに載せられているサイト数がかなり多いです。クリックすると大きめの画像になります。

Webデザインギャラリー | I/O 3000

io3000.png

ページの移動なくどんどん見られます。クリックする必要はありますが、オートページャーみたいな感じです。

WEBデザインのクリップ・リンク集|Web Design Clip 【Webデザインクリップ】

webdesign-clip.png

細かく分類されているので、探しているタイプのサイトが見つかりやすいかも。

まとめ

「センス」なんて結構あいまいな言葉で、生まれ持ったみたいなイメージがあるので言い訳に使われがちだと思います。

けど、何事においても自分で限界を決めてしまうと成長しないと思います。

今回紹介した「読みやすい文章を書くための技法 - #RyoAnnaBlog」より。

文章を書く力は生まれつきのものではない。努力する事により、読みやすい文章を書けると信じたい。

文章に限らず、今回紹介した分野は努力により上達するはずです。と言い聞かせ勉強に励んでいきます。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
なるほど

結構参考になりました

他の記事も拝見させていただきます

更新期待しております
【2013/04/30 06:38】 | 毒舌野郎 #MP6OAdhI | [edit]
毒舌野郎 さん

コメントありがとうございます!
参考になったようで嬉しいです。
またお立ち寄りくださいね~
【2013/04/30 08:01】 | 管理人 #E2ywrYdA | [edit]
デザインの勉強をしようか悩んでいたらこの記事にたどり着きました!
デザインの勉強をしようと思うきっかけになりました。ありがとうございました!
これから頑張ってみます!
【2013/08/14 17:06】 | haraDa #- | [edit]
haraDa さん

コメントありがとうございます。
いいきっかけになってうれしいです!
私もまだまだ勉強不足ですのでともにがんばりましょう~
【2013/08/14 18:28】 | 管理人 #E2ywrYdA | [edit]
デザインの勉強を始めました。とっても参考になります。本を読もうとすると肩に力が入りますが、少しずつ小出しでまとめていただけてて、とっつきやすいです。
ありがとうございます!
【2014/09/12 13:53】 | しよずか #- | [edit]
しよずか さん

コメントありがとうございます。
参考になってよかったです。
ぜひまたお立ち寄りください!
【2014/09/13 07:02】 | 管理人 #E2ywrYdA | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。