Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/smileapps/www/design/wp-content/plugins/jetpack/_inc/lib/class.media-summary.php on line 77

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/smileapps/www/design/wp-content/plugins/jetpack/_inc/lib/class.media-summary.php on line 87

Warning: Cannot modify header information - headers already sent by (output started at /home/smileapps/www/design/wp-content/plugins/jetpack/_inc/lib/class.media-summary.php:77) in /home/smileapps/www/design/wp-includes/feed-rss2.php on line 8
デザインの基本原則 – 3URPRISE.DESIGN https://3urprise.com/design デザインの素人が何を勉強すればどう変わるのかを記録した Tue, 23 Aug 2016 20:00:35 +0000 ja hourly 1 https://wordpress.org/?v=4.6.29 90199658 4つの基本原則・4つの復習 https://3urprise.com/design/?p=129 https://3urprise.com/design/?p=129#respond Tue, 28 Apr 2015 10:42:44 +0000 http://3urprise.com/design/?p=129 続きを読む »]]> 全４回に渡ってデザインの基本原則である近接、整列、反復、コントラストを学びました。今回はその復習です。

 

001 copy

 

 

基本原則の復習その１

まずは近接のおさらいをします。今回の復習でも前に習って同じように素材を使って復習していきます。

それでは復習をするまえの素材を確認してみましょう。（以前の資料は大きさが適切ではなかったので今回から横にします。）

 

design_review01

 

近接とは

  • 近接の目的は様々な要素をページ上で組織化し可読性を高める
  • どこから見ればいいか、どこを見ていいか分かりにくい場合は近接ができていない
  • どかから見て終わりはどこか明確にする
  • 組織化するといってもページ上にグループを作りすぎない。適切な個数は３〜５個（内容による）

 

これをまずは近接の原則に当てはめてみます。

 

deisign_review02

 

人間の目は上から物を見ていく習性があるのでタイトルを太字にし、グループ化（近接）してみました。次は整列を加えてみましょう。

 

Sponsored Link

 

 

整列とは

  • ページの一体化と組織化
  • 強い整列は洗練された表現、格調ある表現、楽しい表現、真剣な表現を生み出す主役になる事がある
  • 要素を意識的に配置しましょう。空間的に離れていても揃える事ができる他の要素を見つけ出し整列させる

 

それでは近接を当てはめた上から整列を加えていきます。

 

design_review03

 

タイトルをもっと大きく大胆に、全てを左揃えにして強い整列を意識してみました。次は反復を加えてみましょう。

 

Sponsored Link

 

 

反復とは

  • すでに存在する一貫性を高める
  • それによってより一体化と面白さを洗練する
  • 一貫性がなければ作り出す
  • 反復は洋服のアクセントに似ている

 

それでは更に反復を加えていきます。

 

design_review04

 

タイトルには目立つように中抜きを白で際立ててみました。見出しの字体と文字色を同じに。次は最後のコントラストを加えてみます。

 

Sponsored Link

 

 

コントラスト

  • コントラストはページに面白みを作り出す事、それにより情報の組織化を支援する
  • 線の太さや色、形、サイズ、空間などでコントラストを付ける
  • 大切なのは強調する事、あくまでもはっきり違いを強調する事

 

それでは最後のコントラストを加えてみます。

 

design_review_End-01

 

 

上のタイトルをアクセントカラーで囲ってみました。そして下も同様のアクセントカラーで色をつけて完成です。

最初の近接から比べるとましになったのではないでしょうか？基本原則はこれで終了です。

 

Sponsored Link

]]> https://3urprise.com/design/?feed=rss2&p=129 0 129 デザインする時の4つの基本原則・コントラスト https://3urprise.com/design/?p=57 https://3urprise.com/design/?p=57#respond Mon, 27 Apr 2015 03:50:08 +0000 http://3urprise.com/design/?p=57 続きを読む »]]> デザインには４つの基本原則があり、それらを外してデザインする事はごく稀であると勉強しました。

具体的にコントラストとは何か？を記事にしてみます。

 

20150426_02

 

 

基本原則・コントラストその１

コントラストで生み出される効果はページに面白みを作り出す事と、情報の組織化に役立つそうです。それを踏まえた上で前回作った物に面白みがあるか見てみましょう。

これが前回

 

Design_004

 

Sponsored Link

 

 

基本原則・コントラストその２

今回勉強したコントラスト前回作ったやつに適用させてみた。

 

Design_005-01

 

うーん、使う色が変なのかなー。

難しいなー。

 

 

とりあえず今回のコントラストのまとめ

  • 線の太さ、色、形、サイズ、スペースなどでコントラストを付ける
  • コントラストをつけるなら太そうな線ともっと太そうな線でコントラストを付けない。全く同じでないならはっきりと違いを付ける事

 

次はこの原則の復習をします。

 

Sponsored Link

]]> https://3urprise.com/design/?feed=rss2&p=57 0 57 デザインする時の4つの基本原則・反復 https://3urprise.com/design/?p=49 https://3urprise.com/design/?p=49#respond Sun, 26 Apr 2015 03:33:46 +0000 http://3urprise.com/design/?p=49 続きを読む »]]> デザインには４つの基本原則があり、それらを外してデザインする事はごく稀であると勉強しました。

具体的に反復とは何か？を記事にしてみます。

 

20150426

 

 

基本原則の反復その１

いつもと同じように前回勉強した物と比べてみましょう。まずは前回作ったものを見てみましょう。

 

Design_003

 

Sponsored Link

 

 

基本原則の反復その２

そして今回勉強した反復を取り入れたのがこれ

 

Design_004

 

 

反復のまとめ

  • 反復とは同じ字体やサイズ、色などを取り入れて統一感、一体感などを強化するという物らしいです。
  • そして反復の基本的な目的は一体化や統一感、面白さを加える事だそうな。
  • 要は前回の整列に続いて見出しや一体感のある要素を意識的に面白くしようって事だと思うので上のようにしてみました。
  • 反復は洋服に例えるとアクセントだそうです。

 

難しいですね。

次はコントラストを勉強します。

 

Sponsored Link

]]> https://3urprise.com/design/?feed=rss2&p=49 0 49 デザインする時の4つの基本原則・整列 https://3urprise.com/design/?p=30 https://3urprise.com/design/?p=30#respond Fri, 24 Apr 2015 05:45:48 +0000 http://3urprise.com/design/?p=30 続きを読む »]]> デザインには４つの基本原則があり、それらを外してデザインする事はごく稀であると勉強しました。

具体的に整列とは何か？を記事にしてみます。

 

20140424-01

 

 

整列その１

まずはこちらをご覧下さい。

 

Design_002

 

前回の近接の時に作った不出来なものですが、これを今回の整列の原則を使ってもう一段階カッコよくします。

で、具体的に何をしたのかと言うと、近接の親戚みたいなもんで文字やオブジェクトの位置を揃えます。それにより見やすくグループ化しようって事を学びました。

 

Sponsored Link

 

 

基本原則の整列を元に編集したらこうなった

 

Design_003

 

 

整列のまとめ

  • ページ上の全ての物を意図的に配置する
  • ページ上の全てのオブジェクトが視覚的つながりをもつようにする
  • 一体性を大切に各要素が離れていても配置で結びつけるようにする
  • 同じページで２種類以上の文字揃えを用いない
  • とりあえずはダメ

 

次は反復を勉強する

 

Sponsored Link

]]> https://3urprise.com/design/?feed=rss2&p=30 0 30 デザインする時の４つの基本原則・近接 https://3urprise.com/design/?p=3 https://3urprise.com/design/?p=3#respond Thu, 23 Apr 2015 19:43:15 +0000 http://3urprise.com/design/?p=3 続きを読む »]]> デザインには４つの基本原則があり、それらを外してデザインする事はごく稀であると勉強しました。

具体的に近接とは何か？を記事にしてみます。

 

download

 

 

 近接を適用するその１

近接を勉強する前の私の作った自己紹介文を見てみましょう。

 

Design_001

 

勉強前なので色々わかりにくい & 醜いです。

何も言えない、酷すぎて。

 

Sponsored Link

 

 

近接を適用するその２

では基本原則の近接に従って編集してみます。

 

Design_002

 

近接のヒント！

近接とは互いに関連する項目は近づけてグループ化し、情報を組織化するのに役立ち、混乱を防ぐ役割を果たします。

先の例で説明すると、勉強前は見やすいと思い空の行を開けていましたが、勉強後の編集では近接の原則を意識して互いに関連する項目は近づけてグループ化してみました。

もちろん完璧ではございませんが、なんとなく見やすくなったのではないでしょうか？

 

 

近接のまとめ

  • 各オブジェクト（項目、ユニット）をグループ化する
  • 全体を見渡して視線が止まった回数が3~5回を超えていればグループ化できないか検討する
  • スペースに空きがあっても無駄にものを配置しない
  • グループ間に均等の空白を作りすぎない

 

次は整列を勉強します。

 

Sponsored Link

]]> https://3urprise.com/design/?feed=rss2&p=3 0 3