Author Archives: %s

デザインスキルを身につける、デザイン力を上げる9つの方法

18 6月 18
Spike
No Comments

1.デザイン理論を学ぶ

Webサイトを見て、「綺麗だ。真似したい。」と思っても、そのサイトのどこが優れているのか、どういう点に配慮して制作しているのか、理論的な知識がなければ、わかりません。

自分で制作する時のためにも、デザイン理論を学んでいると、制作する上で迷いが少なくなり、クライアントにも、上手に論理的に説明することが出来ます。

また、下記で紹介する、優れたデザインを観察する際にも、理論を学んでおくと、制作者が、「どういう意図を持って、どういう点に工夫しているのか。」が、よく理解することができる。

オススメデザイン書

デザイン理論だけではなく、世の中では、デザインが、どう役に立っているのであろうかとか、

例えば、椅子の形状は、人が側にいれば、座りたくなる家具であり、椅子の形状(デザイン)は、人に、そう仕向けている。

同じように、ドアの取っ手なども、そのデザインにより、押したくなる、引きたくなる、など、認知心理学の面から紹介した本などを読んでおくと、デザイナーという仕事が、社会に、こう活かされているのだという誇りにも、繋がり、心理学の根本を知っておくと、その知識は、一生、生きてくるのではないでしょうか。

いずれにおいても、デザインに、心理学というのは、必要な知識です。

また、ものが飽和し、これからの時代、デザインなどの装飾をいかなければと、幾つもの本で主張されています。

 

Read More…

デザインの基本

09 6月 18
Spike
No Comments

 

デザインの基本

  • 「何を」
  • 「何のために」
  • 「誰に」
  • 「どのように」

情報を、上のことを考慮した上で、受け手にわかりやすく整理する。

色が持つ意味。フォントの大きさなどによる強弱など。

Read More…

[ CSS ] 3カラム・レイアウト、コーディング clearfix

02 4月 18
Spike
No Comments

 

clearfix を用いた3カラム・レイアウトのコーディングの手順

  1. 3つのボックスに対して、それぞれ、float プロパティを指定する。
  2. clearfix を使い、回り込みを解除する。
Read More…

[ CSS ] オーソドックスな3カラム・レイアウト、コーディング

02 4月 18
Spike
No Comments

 

3カラム・レイアウトのコーディングの手順

  1. 各段の幅を設定。
  2. float を指定して2段組にする。
  3. float したボックス内でさらに float を指定する。
Read More…

Coding:WordPress

30 1月 18
Spike
No Comments

 

Coding:WordPress

 

[wpdm_package id=’72’]

Read More…

CSS3

30 1月 18
Spike
No Comments

 

トランジション (Transition)

Transition

HTML

<!doctype html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Transition</title>
        <link rel="stylesheet" href="style/style.css">
    </head>
    <body>
        <a href="#" class="btn">Button</a>
    </body>
</html>

 

CSS

@charset "utf-8";

.btn {
    weight: 40px;
    /*height: 20px;*/
    display: inline-block;
    padding: 0.8em 2.5em 0.8em 2.5em;
    margin: 50px 0 0 50px;
    font-family: sans-serif;
    color: rgb(129, 128, 128);
    font-weight: bold;
    text-decoration: none;
    background-color: #b4e9ed;
    border: 4px solid #666;
    border-radius: 13px;
    box-shadow: inset 0px 0px 4px 0 rgba(0, 0, 0, 0.5);
    transition-property: border-color,box-shadow;
    transition-duration: 0.3s;
    transition-delay: 0s;
    transition-timing-function: ease-out;
}
.btn:hover{
    border-color: #999;
}
.btn:active {
    border-color: #666;
    box-shadow: inset 0px 0px 12px 0 rgba(0, 0,0, 0.75)
}
Read More…