blog
copyright ©
creamu Inc. All Rights Reserved.
art direction & design: Kunitaka Kawashimo
code, interaction & photography: creamu Inc.
category: Technology

Photoshopのデザインデータをブラウザでプレビューする方法

レスポンシブの時代、ブラウザサイズや端末がたくさんあってデザインが大変ですね..。最近は、1440px x 835pxでデザインしています。 ただブラウザで見てみないと実感がわかない、ユーザの気持ちがわからないので、何かプレビューする方法はないかと思っていたところ、見つけまし …

category: Technology

スマートフォンサイト制作に関する本を書きました

スマートフォンサイト制作に関する本を書きました。「スマートフォンサイト制作ハンドブック」というタイトルで、秀和システムさんから発売されます! クライアントの依頼から始まり、情報設計、デザイン、コーディング、プログラミング、サーバへのUPまで、一貫した流れでスマートフォンサイト …

category: Technology

WordPressがMAMPローカルで真っ白になってしまった場合の対処法

ちょっとメモ。かなり個人的ですが。 作業途中でwp-adminにアクセスすると、急に真っ白になってしまいました。PHPなのでなにかどこかでエラーが起きていると思うんですが、エラー出力も面倒なので(出ないことが多いし)、いろいろ悶々と調べたりしていたんですが解決せず。 ほぼ同じ …

category: Technology

ユーザーのマウス・キーボードの動きを記録するユーザビリティーテストツール

サイト上でのユーザーの動きを知りたい。 そんなときにおすすめなのが、『userfly』。ユーザーのマウス・キーボードの動きを記録するユーザビリティーテストツールです。 これはすごい感じですね。いろんなサイトでも話題になってるし。 ユーザーのマウスがどこからどう動いて、どこをク …

category: Technology

Macのセカンドモニターにもメニューバーを表示するツール

ちょっと面白いのでご紹介。 Secondbarという、Macのセカンドモニターにもメニューバーを表示するツールが公開されています。Macでデュアルモニターにすると、メインのモニターの方にしかメニューバーは表示されませんが、それをセカンドの方にも表示できるようですね。 使いどこ …

category: Technology

説明を追加できる、jQueryを使ったドロップダウンメニュー

グローバルメニューに説明を加えたい。 そんなときに使えそうなのが、『jDiv』。説明を追加できる、jQueryを使ったドロップダウンメニューです。 メニューにマウスオーバすると、メニューのリストと説明の入る部分が大きく表示されますね。ふわっと表示される動きが気持ちいいです。 …

category: Technology

マウスオーバーするとスライド式で現れるナビゲーション

Codropsというサイトで、マウスオーバーするとスライド式で現れるナビゲーションの作り方が公開されています。 ul,liのシンプルなメニューに、jQueryで動きをつけています。動きがスムーズで気持ちいいですね。 デモは以下から。手書きのデザインでなかなか斬新なものになって …

category: Technology

建設業を多くの人に知ってもらうために生まれたサイト『BUILDUP!』

ブロガーズラウンジからの案内をもらったのでご紹介。 建設業のサイトは普段見ないですが、すごくかっこいいサイトになっています。 以下の4つのコンテンツが用意されていますね。 Kensetsu FILMS明日をつくる建設。その「今」を映し出す建設ドキュメンタリー BUILDUP …

category: Technology

PHPで確認メール付きのユーザー登録フォームを作るチュートリアル

nettuts+で、PHPで確認メール付きのユーザー登録フォームを作るチュートリアルが紹介されています。 仮登録後、確認メールが送られてきて、URLをクリック後に本登録となるシステムですね。 DBの設計も書かれていて、本登録ユーザーに対してはactiveフラグを用意して、0と …

category: Technology

クールなグリッドレイアウトのテンプレートを配布する『Fluid 960 Grid System』

かっこいいグリッドレイアウトでデザインしたい。 そんなときにおすすめなのが、『Fluid 960 Grid System』。クールなグリッドレイアウトのテンプレートを配布するサイトだ。 このサイトでは、↑のようなグリッドのソースが紹介されている。メニューの「Download …

category: Technology

オープンソースのPHPスクリプトがダウンロードできる『Open Source PHP』

オープンソースのPHPをもとに何か開発がしたい。 そんなあなたにおすすめなのが、『Open Source PHP』。オープンソースのPHPスクリプトがダウンロードできるサイトだ。 このサイトでは、オープンソースのPHPスクリプトがギャラリーになって並んでいる。インターフェース …

category: Technology

Movabletypeのカテゴリーアーカイブページなどをカスタマイズ中『Customizing archive pages』

サーバ移行をして、パフォーマンスを見直して、次にアーカイブページなどの整理をしています。大体終わったかな☆ 今までは、カテゴリーアーカイブと月別アーカイブは、エントリーの内容をそのまま表示していたんだけど、ユーザビリティとパフォーマンスの観点から、タイトルだけのリンクにしたか …

category: Technology

Appleのサイトで使われているようなアコーディオンメニューを作成する方法『Slide out and drawer effect』

クールなアコーディオンメニューが作りたい。 そんなあなたにおすすめなのが、『Slide out and drawer effect』。Appleのサイトで使われているようなアコーディオンメニューを作成する方法だ。 このエントリーでは、jQueryを使ったクールなアコーディオン …

category: Technology

Macで一度アップした.htaccessを編集して上書きする方法『How to manage .htaccess on Mac』

Macで.htaccessを作成する場合、新規にアップロードだけなら簡単なんですが、サーバ上に置いてある.htaccessを編集して上書きしたい、というときにとまどってしまったのでまとめておきます。 まずはFTPクライアント。いつもはRBrowserを使っているんですが、.h …

category: Technology

テキストとリンク先を変えるだけで実装できる美しいCSSナビゲーション『Elegant navigation bar using CSS』

美しいナビゲーションメニューを実装したい。 そんなあなたにおすすめなのが、『Elegant navigation bar using CSS』。テキストとリンク先を変えるだけで実装できる美しいCSSナビゲーションだ。 このエントリーでは、↑のような美しいメニューのHTMLソー …

category: Technology

マウスオーバでテーブルのセルをアクティブ状態にするjavascript『Tablecloth』

テーブルのユーザビリティを上げたい。 そんなあなたにおすすめなのが、『Tablecloth』。マウスオーバでテーブルのセルをアクティブ状態にするjavascriptだ。 シンプルなコードを2行追加するだけで、ユーザを魅了するテーブルを作ることができる。 ↑の画像のように、マウ …

category: Technology

Yahoo.comのようなマウスオーバでタブを切り替えるインターフェースをCSSで作成『Mini tabbed pages』

↑のYahoo.comのようなマウスオーバでタブを切り替えるインターフェースが作りたい。 そんなあなたにおすすめなのが、『Mini tabbed pages』。ミニタブページが作成できるCSSを配布してくれている。以前紹介したCSS Playのエントリーだ。 CSSは以下の通 …

category: Technology

世界中の人の感情をドットで表示 [wefeelfine]

たまにニューヨークのことを考える。そこにはどんな人がいて、何を考えながら歩いているんだろう。自分がもし今そこにいたら、小さな悩みごとや問題も吹き飛びそうだ。 wefeelfineは、世界中の人の感情をドットで表示してくれるサイト。今いる狭い世界のことを忘れて、世界の広さを考え …