Bugle Diary: design

Bootstrapに270の使えるアイコンを追加できる「Elusive icons」
Bootstrap標準アイコンも140種類と豊富に使えますが、これに270種類を追加すれば、アイコンにはもう困らないかも。
Bootstrapを使っている方、使おうと思っている方は是非覚えておきたいですね。
ベクター形式なので拡大してもOK。
via:Bootstrapに270の使えるアイコンを追加できる「Elusive icons」

実際にサイトに訪問したら、lessを使った適用方法、CSSを使った場合、さらにIEを考慮したときも丁寧に書かれていたので、割と楽に導入できるのかなと。これは、便利。

2012/04/22

[design]ボタンのクリック率が評価できる時

ちょっと以下のエントリーにおいて提案というか意見があったので、1エントリー

こういったCall-To-Actionのボタンのテストですがたまにクリックのみで評価されてしまっているケースがあります。しかし、これはテスト結果を間違って評価してしまいかねないので注意が必要です。というかクリック率だけで評価とかは、基本はダメです。
via:ボタンをCTRで評価しない理由

確かに、サイト全体の評価を行う時は、クリック率だけでは、ダメだが、個々の構成要素、つまり、ミクロ的に見た場合、個別のページにいては、クリック率で評価はしていいんじゃーないのかなーっと。

例えば、アンケートページの構成を考えると以下のようになると思う。
Photobucket

で、もちろんサイト全体の評価を行う場合は、「アンケート数をある一定の数以上まで集めるようにする」ということを念頭におく必要があるのだが、TOPページに最初訪問して、すぐに他のサイトへ行ってしまった場合、結果として次のページにクリックされずに終了ということになります。
TOPページ単体でみた場合の評価基準は、次のページへのクリック率であり、数字が悪い場合の要因として、

キャッチが弱い
ボタンがどこにあるかわからない
イメージが伝わりづらい

と次のアクションへ向けての反省がクリック率をベースとしてできるのかなと。

そう言った意味で、やはりクリック率もある種評価基準にはなるんじゃーないのかなーっと。

2012/04/21

[design]ユーザビリティと経済的影響について

ちょっと下記のエントリーにおいて思うところがあったので、1エントリー

抜本的革新はすぐに日用品になる。例えば、電気や蒸気機関車、コンピューターは今や誰もが使っている。肝心なのは企業がそうしたものを使って何をするかだ。鉄道会社が穀物のより優れた輸送方法を考案すれば、蒸気機関車を発明した会社より、たくさんお金を稼ぐかもしれない。iPhoneは偉大な進歩だが、Android等の競争相手によって、徐々に市場シェアを食われていっている。
via:A/Bテスト、ユーザビリティエンジニアリング、抜本的革新：どれが最も有益か

確かに、今や、スマホは日用品となりつつあるし、市場シェアも喰われてしまっているが、その一方で利益で考えた場合はどうなのだろう？

コンピュータで見た場合、Appleと他社メーカーの利益率は、全然、違う。
iPhoneで見た場合もそうだ。

なので、上のエントリーでは、ネガティブな感じで書かれているが、本当にそうなのだろうか？と思うし、例としても、不適切だと感じました。

2012/03/29

今、iOSアプリの実装しているのだが、その中で、facebook APIを使おうかなーっと思っており、ログインボタンをどうしようかと検索していたら、たまたまSocial Loginsというページを発見しました。

このページ、もともと、Designmooのコンテンツの一部なのだが、PSDファイルの共有サイトで、他にもたくさんのリソースがあり、今後も活用させていただくことになりそうだ。

すごくクオリティーの高いものもあったので、1エントリー書きました。

2012/01/27

[BootStrap]buttonの実装

久しぶりに今日は、buttonの実装方法について。

実行結果は、こんな感じ
Photobucket

ちょっとかっこいいボタンの出来上がり。

2012/01/08

[css]Bootstrapベースのtextareタグ

前回、Bootstrapベースを使ったinputタグの生成方法について書きましたが、今回、textareaについて調査しました。

サンプルソースは以下のようになります。

実装した結果、このようになります。
Photobucket

かっけぇ！！

2011/12/28

[css]Bootstrapベースのinputタグその1 text編

Bootstrapを使ったデザインの勉強をしているのですが、プログラムを見ると、ものすごい量のCSSで、ちょっとげんなり。
そこで、inputタグのtext属性だけ抜き出せないかなーっと思い、ちょっとこさえました。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
input {

-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-ms-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;

-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);

display: inline-block;
height: 18px;
padding: 4px;
font-size: 13px;
line-height: 18px;
color: gray;
border: 1px solid #CCC;

-webkit-border-radius: 3px;
-moz-border-radius: 3px;

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
vertical-align: baseline;
}

input:focus{
border-color: rgba(82, 168, 236, 0.8);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(82, 168, 236, 0.6);
outline: 0 none;
}

input.mini{
width: 60px;
}
input.small{
width: 90px;
}

input.medium{
width: 150px;
}

input.large{
width: 210px;
}

input.xlarge{
width: 270px;
}

input.xxlarge{
width: 530px;
}
</style>
</head>
<body>
<input class="xlarge" id="xlInput" name="xlInput" size="30" type="text">
</body>
</html>

できたパーツは、こちら
Photobucket

この調子で、どんどんパーツごとに抜き出したいなー。

2011/09/22

[twitter][icon]ログインアイコンについて

備忘録として。

よく、サインインの時に、twitterでログインするかどうか聞かれますが、そのときに、表示されるアイコンってあるのかなーっと思って、探していたら、devloperページにありました。

すぐに見つけることができないので、メモ。

2011/09/18

[icon]日本のソーシャルサービスアイコン

まじであざーす。
フラットなフリーの日本向けソーシャルアイコンセット
こいうのをまじで求めていたんだよねー。

2011/09/13

[icon]Crystal Clear

こちらのサイトは、生きているようだ。

16×16、22×22、32×32、48×48、64×64、128×128までの各サイズがそれぞれ600個以上、全合計で3600個ぐらいある無料で利用可能なアイコン集、それが「Crystal Clear」です。クリエイティブコモンズライセンスで提供されており、PNG形式で提供されています。

via:無料で利用できる600個以上のアイコン集「Crystal Clear」

で知って、これも当時、頻繁にたずねていたが、最近、訪問したときも、無事に生きていてほっとしました。

まー、Crystal Clearが、ドメインがwikimedia.orgとなっていたので、大丈夫だろうとは思っていましたが、代わりに、Everaldo.com : Crystal Iconsのサイトが死んでいました。

ぐぐったところ、Crystal Project Icons - Everaldo: Crystalがあったので、一安心。

結構、たくさんのアイコンがあるので、便利です。

2011/09/12

[button]MyCoolButtonがいつの間にか有料に。。。

トホホ。

だいぶ前に、

サイズ、色、フォントを指定し、テキストを入力することでWeb 2.0風なボタンを作成することができる「Web 2.0 Button Generator」というサービスがありました。
via:Web 2.0風なボタンをオンラインで作成「Web 2.0 Button Generator」

というのを読んで、実際に、My cool buttonサイトをたずねて、色々とボタンを作っていては楽しんでいたのですが、いつの間にか有料に。

確かに、あれから、色々バージョンアップしているようだが、それでも無料でいてほしかった。

2011/09/09

[twitter][design]Bootstrapをもとに勉強

これは、すばらしい。

CSSを使うWebアプリケーションを作るためのツールキットで、CSSの文字指定、フォーム、ボタン、テーブル、グリッド、ナビゲーション、アラートなどなどを使ってアプリケーションのフロントエンドを作る。
via:Bootstrap: Webアプリケーションのための高度なCSSフロントエンドを手早く作れるツールをTwitterがリリース

ガチなデザインのもと、HTMLを組もうとすると、すっげー時間がかかってしまう。

ここ数週間(ひょっとしたら数ヶ月間)デザインで悩んでしまった。
正確には、CSSに悩んでしまう。

JavaScriptもさることながら、CSSもブラウザによって解釈が違うので、やになってしまう。
特にIE!!

このサービスを利用することで、そんなブラウザ間を意識することなく、統一性のとれたCSS及びデザインが組めればと思う。