手書きでイラスト

段々イラストレーターさんと仕事する機会も出てきましたね。何故かわかりませんが。

ある方に、イラストを描いてみたら、と薦められたので、
可愛い魔女

うううう、難しい。。。

検索ページをスタイリング

sumo

リクナビ

吉本タレント検索

レコチョク検索

amazon

zozo

model search

model town:http://www.modeltown.jp/index.php?app_controller=search&type=items&run=true
モデルタウンすげーな、髪型で検索できんのかよ!めっちゃいいやんけ。
私も機械学習の画像認識で、髪型登録して、髪型検索のサービス作りたいです。。。。

初期画面

シンプルだが及第点ってところか?

OK, 悪くない

後は、メール受信画面を成形

ほぼ出来たか?

メールボックス ログイン後のUI

hotmail: 大人っぽいデザインです。

gmail:やすっぽい印象があり、あまり好きではない

yahoo:ごちゃごちゃしていて見にくい

アマゾン:特に感想なし

テキスト小さめで、ヘッダーは黒・紺の方が落ち着いて見える気がします。

初期画面

アカウント登録画面のデザイン

amazon: カッケー

hotmail: 渋い

yahoo: ヤフーっぽい感じが出てて、なんか好感持てる!

google: ああ、登録画面はGoogleが一番いいかも。特にセキュリティをケアしているところが好きだ。

どこも、基本はログインの画面と整合性が取れてますね。
なるほど!

初期画面

css

.form1{
	width:100%;
	height:30px;
	margin-top:5px;
}
.submit {
	width:100%;
	height:30px;
	margin-top:5px;
	background-color:#0099FF;
	color:#fff;
	border:0px;
}
select{
	width:100%;
	height:30px;
	margin-bottom:5px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 1px solid #999;
	padding-left:5px;
}

修正後 ->
適当だけど雰囲気はそれっぽい(笑)

ログイン画面のデザイン

なんじゃこれ、よく見たら、全部カッケーーーーーー すげーーーーー

ホットメール

gmail

yahoo

twitter

facebook

LINE

Amazon

なんだよこれ、2回言うけど、全部カッケー
すげーなー

input formはyahoo, facebookを除いて中央寄せがトレンドのようですね。

初期画面

スタイリングしていきます。

<div class="signin">
      <h1>サインイン</h1>
      <form method="POST" action="login.php">
        <input type="text" name="username" placeholder="ユーザー名"/><br>
        <input type="password" name="password" placeholder="パスワード"/><br>
        <input type="submit" value="ログイン" />
      </form>
      ※アカウントを持ちでない場合、<a href="register.php">新規登録</a>できます。
      </div>

css

body{
	background-color:#EEEEEE;
}
.signin{
	background-color:#fff;
	margin:50 auto;
	padding-top:10px;
	padding-left:10px;
	width:400px;
	height:400px;
}

更にスタイリング

body{
	background-color:#EEEEEE;
}
.signin{
	background-color:#fff;
	margin:50 auto;
	padding-top:10px;
	padding-left:10px;
	padding-right:10px;
	width:400px;
	height:400px;
}
.form1{
	width:100%;
	height:30px;
	margin-top:5px;
}
.submit {
	width:100%;
	height:30px;
	margin-top:5px;
	background-color:#0099FF;
	color:#fff;
	border:0px;
}
#fs-s{
	font-size:small;
	color:gray;
}

おおお、それっぽい(笑)

ロゴはgif、jpg, pngのどれにするべき?

JPG:サイズが小さい、非可逆圧縮、色数が大井、圧縮すると画質が悪くなる、サムネイルなどに適す
PNG:容量が大きい、圧縮しても画質が落ちない、グラフィック画像などに適す
GIF:svgやaiと相性が良い、256色しかない、グレースケール画像・アニメーション・フォント・バナーに適す

JPGは加工に適しておらず、容量優先の際に推奨されています。
画質が求められる場合は、PNGが良いようです。

ロゴはGIFかPNGが良いようです。

Performance

Performance
– Latency (Start -> Done)
– Throughput (# / Second)
Throughput = 1 / Latency

Benchmarks
– Programs and input data agreed upon for performance measurements

Benchmark suite
– Multiple programs
– Each representative of some type of app

Computer Architecture

Computer Architecture
Design a computer is well-suited for its purpose

Why do we need?
1.improve performance
2.improve ability

Fablication Technology, Circuit design

Active Power
P = 1/2 C * V^2 * f * α
capacitance, power supply, frequency, active factor

ACME

System simple_cs = {
	Component client = { Port send-request; Port err-trap; }
	Component server = { Port receive-request; Port alert; }
	Connector rpc = { Role caller; Role callee; }
	Connector err = { Role source; Role sink; }
	Attachment server.receive-request to rpc.callee;
	Attachment client-request to rpc.caller;
	Attachment client.err-trap to err.sink
	Attachment server.alert to err.source
}