ちょっと使ってみたくなるHTML5/CSS3のUIエレメント集 -Boxtuffs | コリス

Bylineから

HTML5/CSS3で作成した、ちょっと使ってみたくなるようなUIエレメントがダウンロードできるサイトを紹介します。

Boxtuffs

掲載されている数はまだ少ないですが、どれもユニークなもので、いつかサイトで使ってみたくなるようなものばかりです。

下記に、現在掲載されているデモを全部、紹介します。

各デモのダウンロードや対応ブラウザは各ページに記載されています。

Autogrow Search
デモページ

フォーカスすると、入力欄がアニメーションで拡大します。

Download Me!
デモページ

クリックすると、アニメーションでスライドします。

My Notes
デモページ

ユーザーが入力した文字をノート風に表示します。

CSS3 Album Selection
デモページ

一枚のアルバム画像をホールドすることができます。

tickets
デモページ

「Go」をクリックすると、レシートみたいにぺろっとアニメーションします。

Switcher
デモページ

スイッチをオン・オフにアニメーションで切り替えます。


RSSリーダーで見るために変換していますo


iPhoneから送信

コデラノブログ4 : mixiに受けた「いやァな感じ」 - ライブドアブログ

Bylineから

11月30日に正式導入された、mixiの「メールアドレスでの検索機能」は、事実上3日でサービスを取り下げることとなった。これまでfacebookが搭載してきた機能をなんの臆面もなくパクって来たわけだが、今回の失敗は割と致命的だったのではないかと思われる。


そもそもmixiSNSとして台頭してきた理由は、なんでもかんでもオープンになるネットに辟易として、共通の秘密あるいはプライバシーを持ちたいという人々のニーズにマッチしたからである。以前もコラムで指摘したことがあるが、プライバシーが守られたパソコン通信の時代が崩壊し、同時にプライバシーの壁も崩壊したネットの世界に、もう一回壁を作り直したのだ。それがmixiがウケた理由である。


ところが今ソーシャルメディアとして成長しているのは、人と人との繋がりの間にプライバシーが挿入されるクローズドな環境ではなく、見ず知らずとの他人と簡単に繋がるドライなTwitterfacebookのようなサービスである。これは単に、mixiのセキュアではあるがベタベタした付き合いの反動で、今そういう時代が巡ってきたということにしか過ぎない。これはいずれまたその揺り戻しが来るだけのことである。それなのに、そもそもクローズドだよ、特定の関係じゃないと非公開だよ、という前提で始めたmixiが、ある日突然メールアドレスをキーに日記まで丸見えになるというのは、まあどう考えても話が違う、ということになる。


多くの人はそうだと思うが、オープンな場とクローズドな場では、当然発言も違う。違って当然だし、プライベートな場ではきわどいことも書いたりするだろう。それは気心が知れた仲間内しか見ないからという、安全が確保されているからそうなるわけである。それが過去に遡ってまで丸見えになる可能性があるのであれば、当然事前に綿密な告知があってしかるべきであり、そのリスクについてもきちんと説明があったのちに実働させるべきだった。


こういった、サービスの根幹に関わる部分の変更なのに、そのリスクが理解できていなかったばかりか、謝罪の態度もなくいけしゃあしゃあと「ユーザーの皆様がご利用しやすいよう一部機能の見直しをおこなうため」などと逃げを打つというのでは、個人のプライバシーを預けるに値しない。というか、もう会社としての体を成していない。


昨年夏頃になるが、安心ネットづくり促進協議会のイベントで、大阪の箕面市に行ったことがある。この時の講演がmixiの笠原社長だったのだけど、当時大阪というケータイ教育に関してかなりアウェーな土地柄に来ておきながら、しかもその時mixiは会員の年齢制限引き下げを間近に控えた時期だったにも関わらず、リテラシーの話をすることもなく延々mixiの宣伝をやってのけた。これはよほど空気を読む必要がない大物か、基本的になにもわかってないのかどっちだろう、と思ったものである。


この時僕は、mixiのIDに相当するメールアドレスを、捨てアドに変更した。それまでは仕事でも使っているアドレスだったのだが、こういう会社に大事な情報を預けとくと危ないと感じたからである。そしてこの事件だ。金が儲かればよいというだけで、そこには運営ポリシーもユーザー保護の観点も何もないということが明らかになった。機能を引っ込めたことでみんななんとなく落ち着いているけど、きっとまた同じようなことをやらかすだろう。だって、何のポリシーもないんだもの。


僕はバブル時代から崩壊以降の20年の間、フリーランスという立場から多くの会社倒産を見てきたわけだが、自社に大したアイデアもないのに事業を拡大し、なりふり構わぬ金儲け体質に陥った会社がだいたいヤバいことになっていた。mixiとは仕事上の付き合いはないので、社内の雰囲気がどうなのか知らないけど、オフィスに見慣れないスーツ姿の男達を見かけるようになったり、経理をはじめとする事務方がこれといった理由もなく次々に辞めていったり人が入れ替わったりしてたら、大抵の会社はもうダメである。アスキー大陸書房、Japan Mixみんなこうだった。これは身についた本能みたいなもので、こういうところに長居は無用、ささっと逃げるが勝ちだ。一ユーザーとしては、もはやmixiで培った人間関係は今facebookTwitter上で再構築されつつあるし、近々身辺整理をして、アカウントをたたもうかと考えている。

プライバシーと高度情報化社会 (岩波新書)
著者:堀部 政男
販売元:岩波書店
(1988-03)
販売元:Amazon.co.jp
クチコミを見る


RSSリーダーで見るために変換していますo


iPhoneから送信

2010-11-25 - きしだのはてな 技術力をあげたいプログラマが読んでおかないと話にならない本10冊

Bylineから

ここにあげた本じゃなくてもいいので、同じ分野でなにか読むとか、本に書いてあるほど詳しくなくてもそれなりに知識をもっておくべき本。







アルゴリズムクイックリファレンス

まずはアルゴリズム。クイックって書いてあるけどぜんぜんクイックじゃないw。各言語で書かれた入門書を読んでもいいと思う。

実際のプログラムにアルゴリズムの知識を活かすということを知りたいならプログラミングコンテストチャレンジブックがおすすめ。







プログラミングの基礎 (Computer Science Library)

プログラミングってなにかということを。再帰とか、そういうの。OCamlという関数型言語で書かれてるので、関数型言語も知っておくという意味でもおすすめ。




そろそろ並行処理の勉強は必須になるんじゃなかろうか。ほかにThe Art of Multiprocessor Programmingとか。あと、実際にプログラムを書くためのライブラリとしてはJavaがかなり充実してるのでJava並行処理プログラミングとか読んどくといいですね。







データベース入門 (Computer Science Library)

NoSQLとはいうけども、リレーショナルデータベースのコンセプトを知らないのは話にならないと思われる。

知っておくべきは、現実データから論理データへの落とし込み・一貫性の確保について。要するに、現実世界から論理世界にデータを変換して、物理的にどう扱うかという問題があることを知っておく必要があるということです。







Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus)

HTTPとかURLとか、このあたりは、ちゃんと整理して知っておいたほうがいいですね。







ネットワークはなぜつながるのか 第2版 知っておきたいTCP/IP、LAN、光ファイバの基礎知識

ネットワークについてちゃんと知っておいたほうが、ちゃんとネットワークを扱うプログラムが書けます。







図解 64ビットがわかる (図解 知りたい!テクノロジー)

CPUなどハードウェアのアーキテクチャ。これから多コアを意識するのプログラムのが大事になると思うので、知っておいたほうがいいかも。

薄い割に、OSの対応から仮想化までとりあげられていい本なんけど、この分野はすぐに「出品者からお求めいただけます。」になっちゃうのよねー。まあ、似たような本はだいたいいつでも出てると思います。

あと、アーキテクチャという点でOSについてLinuxとWindowsを理解するためのOS入門とかで勉強するのもいいんじゃないかと思います。けど、この本のAmazon評価、タイトルにつられて間違えて買った人が逆切れしてる感じで、かなりかわいそうなことになってます。







ソフトウェア工学入門 (Computer Science Library)

要求定義、設計、テスト、プロジェクト管理といった、プログラムを作る作業について。実際の技法は好みや環境でかわるけど、プログラムを作る作業の中で何が問題とされているかは知っておく必要があります。

いい本がどれかはわかんなかったので、シリーズとしてお気に入りの「Computer Science Library」のやつをあげておきました。

実際のプログラムを作る作業についての分野だけに、「いいプログラムを作る」という文脈では設計やテストといったソフトウェア工学の分野ばかりが取り上げられがちだけど、「いいプログラマになる」という点では、重要ではあるけど一分野にすぎないことを踏まえておいたほうがいいと思います。

まずプログラムを書く能力があって、そのプログラミング能力をいかに有効に使うかというのがソフトウェア工学だと思ってます。







数学ガール

数学が直接プログラムに関係はしないとはいえ、無印数学ガールの範囲の数学は知っておきましょう。あと、これからは統計がどんどん重要になると思うのでRによるやさしい統計学なんかで勉強しておくといいと思います。







論理学

プログラマがやるのは結局のところ論理コンピュータを動かすことになるわけですが、その論理とはなにか知っておくと論理自体の限界とかがわかって、コンピュータにできることとできないことの判別がつきやすくなります。つまり、プログラム組みえないことをプログラムしようと思わなくなるので楽になります。

同じ著者による文庫本の入門!論理学のほうが、簡単でいいかも。

論理学からコンピュータプログラムにどうつながるのか知りたければ論理と計算のしくみを読むとラムダ計算につながっていくのでいいです。







創るJava NetBeansでつくって学ぶJava GUI & Webアプリケーション[改訂第3版]

なにか問題でも?

まあ、なにかプログラム言語を知って実際にプログラムが書けることは大事ですよねー。ここまでにあげた10冊以外に、自分のメイン言語については、しっかり押さえときましょうってことです。




なにか問題でも?

まあ、クラウドとかはやってるし、知っておいたほうがいいですよねー。実際に作ったプログラムを動かす環境とかも、おさえておいたほうがいいですね。


RSSリーダーで見るために変換していますo


iPhoneから送信

日本のWebサイトの404ページデザインいろいろ+α - かちびと.net

Bylineから

かちびと.net > WEBデザイン > インスピレーション > 日本のWebサイトの404ページデザインいろいろ+α

日本のWebサイトの404ページデザインいろいろ+α


Cat: » WEBデザイン, インスピレーション

Day:11月 25, 2010


Share:Tweet




気になって探したのですが、ググッても

9割は海外のデザインだったので、日本

の素敵な404ページを探してみました。

時間の関係でさほど数を揃える事が出来

ませんでしたが、少しでも参考になれば

幸いです。

404は、誰でも訪れる可能性のあるページです。ある意味、用意したコンテンツよりも見られる可能性がありますのでほんの少しでも手を入れておくといいかも知れませんね。

どこかで「404は古い。無条件でトップページリダイレクトが最適」なんて意見も見かけましたが、個人的にはユーザーを混乱させる要因になるのでリダイレクトは避けたほうがいいと思います。

では、個人的に気になった404ページをご紹介していきます。順不同で、ややサイトの属性がWeb関係に偏っていますがご了承ください。尚、リンクは404ページではなく、TOPページにしてあります。

株式会社サクラクレパス



デザインも好評のサクラパレスの404ページ。ついでにプロダクトもアピールした秀逸なアイデアです。

株式会社サクラクレパス

CSS HappyLife



よく拝見させてもらっているcss happy lifeさんのユニークな404ページ。無駄に凝ってて和みますw

CSS HappyLife

KAYAC DESIGNER’S BLOG



最近よく見かけるカヤックさんのデザイナーブログの404。やはりというか想像通りユニークですね。会話式で、途中に最新記事も含めてあります。

KAYAC DESIGNER’S BLOG

面白法人カヤック



こちらは本家カヤックさんのサイトの404です。こちらも統一された404コンテンツです。

面白法人カヤック

これからゆっくり考L +α

導線がとてもわかり易く作られているこれからゆっくり考L +αさんの404。「見つからない。じゃあどうしよう?」と考えさせないよう工夫されている感じです。

これからゆっくり考L +α

could



couldさんの404ページはかなりユーザビリティを考慮したデザインです。ページが見つからない→URL正しい?→検索してみては?→アーカイブもあるよ→よかったら連絡してね、という流れが組まれているのでユーザーも何をすればいいか考えずに行動できそうです。

could

クックパッド



クックパッドの404です。ミニマルですね。最初見たときにどうかなと思ったのですが、あまりWeb慣れしてないユーザーも多いサイトでしょうし、無駄なコンテンツを表示させないのは正解なんでしょうね。でも検索窓くらいあってもいいような気もします。

クックパッド

楳図かずおオフィシャルホームページ



漫画家、楳図かずおさんの公式サイトの404です。放置していても漫画が出てくるユニークな作りです。ぜひご覧頂きたい404の1つですね。

楳図かずおオフィシャルホームページ

Website Usability Info



ユーザビリティ関連のWebsite Usability Infoさんもやはり導線を意識した404です。迷った方が来るページでしょうし、うまく誘導してあげるのが基本なのでしょう。

Website Usability Info

ビービット



同じくユーザビリティ関連で有名なビービットさんの404ですが・・・TOPに戻るリンクと短文のみですが、これはどうなんでしょう。個人的にはなぜこうしたのか疑問でしたけど、僕程度では分からないユーザビリティ的な理由があるのかも知れませんね。

ビービット

Webデザインレシピ



Webデザインレシピさんの404はシンプルに写真とテキストだけですが、ヘッダに検索ボックスが、フッターにプロフィールがもともとあるので問題なさそうですね。

Webデザインレシピ

WIRED VISION



WIRED VISIONさんの404もユーザビリティをしっかり考慮しています。誘導が旨いですね。

WIRED VISION

hail2u.net



hail2u.netさんの404ページも素敵です。今回調べた限りでは唯一、「もしかして」コンテンツがあった404です。

hail2u.net

sagool



sagoolさんの404は凄く腰の低いテキストでなんだかシュールでしたw

sagool

s5-style



Webデザインのギャラリーサイト、s5-styleさんは、普段表示させていないアーカイブを全て出しています。これはナイスアイデアですね。

s5-style

404NotDesign



国産のWebサイトの404ページを集約しているギャラリーサイトです。なかなか貴重では。

404NotDesign

サクラクレパスの404エラーが素敵なので、404ページを集めてみたくなったのだ



国産Webサイトの404ページデザインのまとめ記事です。

サクラクレパスの404エラーが素敵なので、404ページを集めてみたくなったのだ

その他Tipsとか。

404ページのデザインはユーザビリティ向上に必ず貢献してくれる、というより保険という感じになりますが、離脱率を減らすひとつの手にもなる可能性がありますので、手を入れて損はないかと思います。




Comments & Trackbacks

 

  1. かちびと.netにリンクの無いトラックバックは受付けてないです。
  2. コメントされる前にガイドラインをご覧下さい

この記事のトラックバックとURL

URL:
TRB:




Leave a Reply







Name (必須)

Mail (非公開) (必須)

Website




Submit Comment







RSSリーダーで見るために変換していますo


iPhoneから送信

さくらインターネットにPukiWikiをインストール

さくらインターネットにPuki Wikiをインストールします。
(今回はデフォルトでプラグインが入っているPukiWiki Plus!をインストールしています。)


以下、手順

1.PukiWiki Plus!をダウンロード

## ドキュメントルートに移動
cd ~/www/

## ダウンロード
wget 'http://pukiwiki.cafelounge.net/plus/?plugin=attach&refer=Download&openfile=pukiwiki-1.4.7plus-u2-eucjp.tar.gz'

## 解凍
tar xzvf index.html\?plugin=attach\&refer=Download\&openfile=pukiwiki-1.4.7plus-u2-eucjp.tar.gz

## ディレクトリをリネーム(「wiki」の所は好きな名前にしてください。)
mv pukiwiki-1.4.7plus-u2-eucjp/ wiki

2.ディレクトリの権限変更(これ以降はディレクトリ名を「wiki」にした前提で進めます)

chmod 644 *.php *.lng image/* image/face/* lib/* plugin/* skin/*
chmod 666 cache/* wiki/*
chmod 755 image/ image/face lib/ plugin/ skin/
chmod 777 attach/ backup/ cache/ counter/ diff/ trackback/ wiki

3.Wikiの設定変更

## パスワード変更
php -r "echo md5('HOGEHOGE');"
  ---------------
  HOGEHOGEHOGE
  ---------------
vi pukiwiki.ini.php
  ---------------
  // CHANGE THIS
  $adminpass = '{x-php-md5}HOGEHOGEHOGE'; // md5('pass')
  ---------------

## ページタイトル変更
vi pukiwiki.ini.php
  ---------------
  $page_title = 'HOGEHOGE';
  ---------------

## ページタイトル変更
vi pukiwiki.ini.php
  ---------------
  // Site admin's name (CHANGE THIS)
  $modifier = 'HOGEHOGE';
  ---------------

## wikiのページを変更 
vi pukiwiki.ini.php
  ---------------
  // Site admin's Web page (CHANGE THIS)
  $modifierlink = 'http://hogehoge.com/';
  ---------------

以上。
おつかれさまでした。

mp4ファイルから音声だけを取り出す方法(Mac)

  1. プロジェクトライブラリで右クリック→QuickTime使用してを書き出す→「書き出し」の項目で「サウンドからAIFF」を選択
  2. 作成されたファイルをiTunesで開く
  3. 曲名ファイルサイズが大きいのでAACファイルにエンコード(曲名を選択して右クリック→AACバージョンを作成)

iMovieでmp4ファイルを結合する方法(Mac)

  1. ベントライブラリを作る
  2. iMovieからmp4ファイルを読み込む
  3. プロジェクトライブラリを作る
  4. プロジェクトライブラリに再生順にファイルを並べる
  5. プロジェクトライブラリで右クリック→ムービーを書き出す→モバイル