≡ ←ハンバーガーメニューのデザインでクリック率は違う（2014年のA/Bテストの結果から）

2015/06/10 1053 users ハンバーガーメニュー Bテスト 概要 メニュー 三本線

概要 2014年のA/Bテストの結果によれば、いわゆるハンバーガーメニューは使わない方が良いという結果に。 スマートフォン対応サイトで右上や左上にある「≡」こんな形の三本線のメニューはいわゆるハンバーガーメニューと言いますが、ハンバーガーメニューのデザインに関してA/Bテストを行っていた記事があったので紹介します。 ●ハンバーガーメニューのデザインパターンハンバーガーメニューは色々なデザインがあっ... 続きを読む

「鶏肉のジップロック煮」の簡単さと美味しさがチートレベル：小鳥ピヨピヨ

2012/07/31 920 users 小鳥ピヨピヨ 手間ひま 鶏肉 昨夜 スープ

「鶏肉のジップロック煮」の簡単さと美味しさがチートレベル Ads by Google 昨夜は家で一人だったので、自分の好きな物ばかりを作ってみました。 スキルも不要で、手間ひまもかからないのに、美味しいものばかり。 食べ終わったら、驚くほどお腹が苦しくなりました。作りすぎたか…… 左上はきのこスープ。基本の作り方は以下の通り。 低カロリーで美味しくて医食同源なスープ「五菜のきのこスープ」 今日は五... 続きを読む

マンガで分かる JavaScriptプログラミング講座

2010/04/25 3788 users マンガ JavaScriptプログラミング講座 右下 応用

はじめに 「マンガでわかるJavaScript」は、難しそうに思えるプログラムを、簡単そうに見えるマンガで解説するという初心者向けの入門講座です。架空の高校生たちに教える形式で、プログラムの基礎から応用を、解説していきます。一通りのマンガを読めば、かなり実践的なところまで、プログラムを書けるようにしていきます。（マンガは、左上から右下へと読みます）プログラムというと、けっこう大変そうに思えますが、... 続きを読む

アイトラッキングの実験からわかった12のWeb戦略 - IDEA*IDEA ～ 百式管理人のライフハックブログ ～

2009/05/22 524 users IDEA アイトラッキング 視線 ウェブ 実験

ユーザーがどこを見ているか、その視線を追うことができるアイトラッキングシステムですが、それを使った実験の結果がまとめられていました。ウェブを作る際にどこに気をつければ良いかがわかって参考になりますね。 12のポイントがありますので早速超訳してみます。 タイトルは写真よりも注目される 写真が一番目立つかとおもいきや、本文中の写真よりも左上のタイトルをまずは見る人が多かったそうです。 タイトルの最初の... 続きを読む

有名サイトのボタンデザイン21個をPhotoshopのレイヤースタイルファイルにしてみました | DesignWalker

2007/06/14 727 users YouT DesignWalker Photoshop 日本

っちゅうわけで、わたくしも集めようかと思ったのですが。。。せっかくなので、以前ご紹介した「Photoshopのレイヤースタイルファイルを日本の伝統色で作ってみた」みたいに、あとあと簡単にボタンが作れるように、Photoshopのレイヤースタイルファイルにしてみました。。 こんなん↓が簡単につくれますよん。 今回、作ったレイヤースタイルファイルは。。。左上から・・・ mixiの検索ボタン風 YouT... 続きを読む

「左上の魔術師」理論

2007/04/11 736 users 理論 魔術師 カラム 見栄え デザイン手法

Web業界のデザイン手法として、密かに流行し始めている「左上の魔術師」理論。 サイトとしての「見栄え」よりも、ユーザーの「目の動き」に着目したWebデザイン手法として注目を浴びています。 今回は、まず始めにWebサイトのデザイン別にユーザーの「目の動き」を解説します。 そして、実際にミリオン単位でユーザーを獲得しているサイトを考察することで、「左上の魔術師」理論を解説したいと思います。 1.カラム... 続きを読む

写真がめくれた感じを表現する | DesignWalker

2007/03/28 653 users DesignWalker グラデーションツール Altキー

めくれを表現するだけでも、いろいろな方法があるのですね。 っちゅうわけで、個人的に気に入った一番目のPSTUTさんのチュートリアルを簡単にご説明 1. セレクトツールで写真の大きさに選択。グラデーションツールを選んで左上から右下にドラッグ。そのとき、背景色は#F7F2E7にしておく。 2. 選択範囲を小さくする。(Altキー + S + M + C)もしくは、下の画像のように、[選択範囲]メニュー... 続きを読む