【本】フラットデザインの基本ルール

フラットデザインはアイコンやメニューなどのUIを、立体感のないフラットな図形として表現するデザインのことです。

Windows8やiOS7ではじめて採用されたデザインですね。

iOS7になるタイミングで、立体感のあるアイコンからフラットデザインに変わったことで、「ださい」「きもちわるい」などとかなり叩かれたようですが、今となってはすっかり馴染んでしまいました。

この本ではフラットデザインへ移行した背景や、フラットデザインのスタイルの説明のほか、数多くのWebサイトやアプリケーションを例に挙げながら、フラットデザインについて説明されています。

ものすごく分かりやすい本だな〜、と思ったら「デザインの教室」の著者の方の本だったんですね(ﾟДﾟ)

デザインの教室 手を動かして学ぶデザイントレーニング(CDROM付)

とくに面白いな、と思ったのがフラットデザインの必要性を説明した項目。

現在ではスマートフォンでWebページを拡大しながら読むのするのが当たり前になったから、拡大に耐えうるデザインという意味でフラットデザインが主流になってきた、という説明には目からウロコでした。
　

これまでウェブはピクセルという単位を基本に作られてきたが、多くの環境でできるだけ見やすく、美しく見せるために、「画像解像度に依存しないUI」に動き始めている。

　
そう考えると、トップページのタイトルを画像で表示しているサイトって減っていますね。フォントなどの文字も画像として表示すると、拡大した時に汚くなってしまうからでしょう。

あと、もう一つ面白かったのが、ウェブデザインとアップルの関係。
両者に明確な相関があるわけじゃないんだけれども、デザイナさんってアップル製品を使っていることが多いから、どうしても影響があるよね、というお話。
　

ウェブのデザインは、必ずしもOSのUIデザインの影響を受けるわけではないが、アップルの採用してきたデザインが多くのデザイナーに影響を与えているのは確かであり、その影響は少なくないと考えられる。

　
iOSがフラットデザインになったことで、それに影響を受けたデザイナさんが、これからのデザインの主流を作り出していく、という流れは確かにありそうだな〜と思いました。

うーん、おもしろい！

フラットデザインの基本ルール Webクリエイティブ&アプリの新しい考え方。

【Arduino】LEDを点滅させる

Javaなどのプログラムで一番始めに作るプログラムは、画面上に「Hello, Wolrd」と表示するプログラムが定番です。

Arduinoの場合は、このHello, Worldに相当するプログラムがLEDを点滅させるプログラムのようです。LEDをチカチカさせるから、通称Lチカといいます。

LEDを光らせる回路

LEDを光らせるためにはArduinoとLEDを接続するための回路が必要になります。
ただ、Arduinoにはデフォルトで13番ポートにLEDがつながっているので、これを使いましょう。

自分で回路を作る場合は、次の図のように13番ポートとLED、抵抗（330Ω程度）を接続して下さい。

LEDには豆電球と違って極性があります。足の長い方をプラス側（今回の場合は13ピン側）に繋いで下さい。

LEDを点滅させるプログラム

Arduinoで出来ることは基本的に次の２つだけです。

・ポートから指定した電圧を出力する
・ポートに入力されているの電圧を調べる

どんな複雑に見える回路も、基本的にはこの２つの組み合わせで作られています。こう書くと、なんか、簡単そうに感じてきますね〜！

今回はLEDを点滅させたいので、指定したポート（13番）から0Vと5Vを交互に出力します。次のプログラムを入力して下さい。

void setup()
{
        pinMode(13, OUTPUT);
}

void loop()
{
        digitalWrite(13, HIGH);
        delay(1000);
        digitalWrite(13, LOW);
        delay(1000);
}

setup関数はプログラム起動時に一度だけ実行されます。loop関数は何度も実行される関数です。

pinMode関数で第一引数のポートを「出力」として使うか「入力」として使うかを指定しています。
ここではLEDがつながっている13番ポートを出力（OUTPUT）に指定しています。

loop関数では、「LEDを点灯」→「１秒停止」→「LEDを消灯」→「1秒停止」という処理を行っています。まずdigitalWrite関数を使って13番ポートの出力をHIGH（5V）にします。

続いてdelay関数を使って１秒間処理を止めています。delay関数の引数には処理を止める時間をms単位で指定します。

もう一度digitalWrite関数を使って13番ポートの出力をLOW（0V）にして1秒停止します。これを繰り返すことでLEDを点滅させています。

実行結果

上のプログラムを実行した結果がこちらになります。地味ですが自分の書いたプログラムでハードウエアを動かせると感動もひとしおですね〜

www.youtube.com

Arduinoをはじめよう 第3版 (Make:PROJECTS)

【Unity】XキーとZキーのショートカット使ってますか？

Unityのショートカットキーの中でもあまり知られていない（？）
XキーとZキーのショートカットを紹介したいと思いますー！

Xキー：World/Localの切り替え

オブジェクトを移動させるときにワールド座標系に従って動かすのか、ローカル座標系に従って動かすのかを切り替えることができます。

カメラの注視点は変えずにもう少し被写体に寄せたいんだけど・・・。
こんなときカメラが傾いていると、X方向に少し動かして、Z方向にも同じだけ動かして、と細かい微調整が必要になります。

そんなときにはXキー！
カメラの視線方向にしたがってカメラを移動できるようになります。

Zキー：Pivot/Centerの切り替え

オブジェクトを回転させるときの中心座標にピボットを使うか、オブジェクトの中心座標を使うかを切り替えることができます。

2Dゲームを作っていると、「足場を回転させてつなぎたい」ということが時々あります。

普通に回転させるとオブジェクトの中心座標が回転の中心になるので
足場がつながらない！なんてことになります。

そんなときにはZキー！
これで回転の中心をPivotに切り替えられ、簡単に足場をつなぐことが出来るようになります。