ウェブページを見る目の動きは「F」パターン - GIGAZINE
つまり人間はページを見る場合、「F」の字を描きながらページ全体を見ているというわけ。 これは232人の被験者を対象に行われたもので、大体1ページから重要なコンテンツを見つけるために2秒から3秒というものすごい短時間に驚異的な速度でページを見ていくそうで。 で、その視線の経路をビジュアル化したのがこの画像。全部で3段階のステップを踏んでおり、各段階を踏んでいった結果、「F」の字を描くというわけ。大体どのユーザーも一貫してこのパターンを踏んでいるらしい。以下がその全3段階の説明。どういうレイアウトが効果的なのかが分かります。 F-Shaped Pattern For Reading Web Content (Jakob Nielsen's Alertbox) http://www.useit.com/alertbox/reading_pattern.html 第1段階： 訪問者は最初にページの
第9回 より見てもらえるようにユーザーを“そそる”、ワンランク上の画面構成のコツ | Web担当者Forum
第9回 より見てもらえるようにユーザーを“そそる”、ワンランク上の画面構成のコツ 現実の店舗や窓口では、目の前にいるお客が困っていればすぐにわかるし、同じトラブルが重なれば問題が起きないように施策をとる。しかし、ウェブサイトを作っているときにはお客は目の前にいないし、公開後にお客の対応をするのはウェブサーバーやスクリプトという機械だ。そのため、現実の商売では当然のように行っている接客ができない、いや忘れてしまってはいないだろうか？ 今木 智隆（株式会社ビービット） 限られた画面内でユーザーの目線を 効果的に誘導するテクニックを紹介「ファーストビュー」、すなわち「ユーザーがサイトを訪問したその瞬間に画面に表示される領域」は、画面設計・デザインにおいて、常に意識しなければならないポイントの1つだ。限られたスペースの中で、いかにコンテンツに優先度を付け、効果的に構成するか、かなり悩まれた経験のあ
ショートカットキーまとめ - 萌え理論Blog
ショートカットキーを使いこなすと、作業効率がグンと上がります。キーボードからマウスへ手を移す隙がなくなるので、慣れると早くなります。以下はWindowsを中心に、様々なアプリで便利操作を実現する、50個のリンクを一つ一つまとめあげました。*1 Windows系 公式 キーボードショートカットキーの一覧 情報 便利なWindowsの機能 windowsを10倍便利にするキーボードショートカット集 MS-IME2002・キー操作一覧：Maniac-IME マウスを使わないキーボードテクニック ITmedia Biz.ID：第1回 キーボードショートカットを活用するホームポジション uessay: パソコン作業を華麗にスピードアップ(100tips) 表ワザ大全スレ（初代） 【2ch】ニュー速クオリティ:目から鱗が落ちるようなお前らが知ってるWindowsの小技教えろ TIPS FPN-かな漢字
Zopeジャンキー日記 :Webのターニング・ポイントをとらえた重要文献、ティム・オライリーの 「Web 2.0とは何か」
「Web 2.0とは何か？」という議論がバズ（Buzz）的にひろがっているのを受けて（例）、言いだしっぺの本家、ティム・オライリーによる論文「Web 2.0とは何か」が出た。 O'Reilly : What Is Web 2.0 http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html 副題は 「Design Patterns and Business Models for the Next Generation of Software」 （次世代ソフトウェアのデザインパターンとビジネスモデル） というもので、５ページにわたるきわめて充実した内容。 わかりやすい具体例と全体構成、結論部分のみ、とりあえずピックアップしてみた。 --------------------------------
ひとり開発ブログ | » ロボット投稿型スパムをさくっと防ぐ超簡単な方法
なんと、このideamiというしょぼいサイトにも海外からのロボット投稿型スパムが来るようになってしまいました。悲しい。 何とか対策をしようと思っていたところ、dotliveのオカダ君がいい方法を教えてくれました。（Thanks!） やり方は簡単。 ロボットスパムは、htmlのソースからformを見つけ、そこにデータを自動的に入れて投稿しているわけです。その投稿の仕方は単純で、どうやらnameでよく使われるような単語を見つけて、それに投稿しているぽい。 たとえば、「name」は名前、「mail」はメール欄、「url」はurl入力欄、みたいな感じです。 今回の対策では、これを逆手に取ります。つまり、偽物のフォームを作り、それに入力があるもの＝ロボットによる投稿、と見なし、投稿させないというものです。 偽物のフォームを作り style=”display: none” しておいて、ユーザーには見
HatenaをXHTML+CSSで組みなおす
授業中、生徒は課題制作で忙しく僕は用無し。ってことで、○○○をXHTML+CSSで組みなおすシリーズ(?)第二段を勝手にこっそり作ってた。 なるべく皆が知ってるサイトで、コーディングが楽しそうなサイトを探してたのだけど、なかなか決まらず、結局、生徒のリクエストでhatenaのトップページを組みなおす事にしました。 hatenaは一部レイアウトにテーブルを使っているものの、基本はCSSでの段組がされているので、mixiを組みなおすような大きな軽量化は出来そうにない。なので、楽しみ方としては、いかに無駄なマークアップを減らしてシンプルなXHTMLで同じ見栄えを再現するかだ。 これがまた、パズルで遊んでいるときの感覚に似ていてとっても楽しい。近い将来、CSSで１つの要素に複数の背景画像がおけるようになったとき、このパズル感が失われてしまうと思うと残念でならない。(半分ホンキ) で、帰ってきて手直
惑星が爆発したような画像を作成するPhotoshopのチュートリアル | P O P * P O P
これはすごいです。 惑星が爆発する画像を作成するPhotoshopのチュートリアルが公開されていました。1枚の泥の画像から作成していますよ。 » How to: Exploding Planet Effect in Photoshop (via TechEBlog） 5分もかかっていない早業です。以下に動画と共にご紹介。 ↑ このような乾いた泥の画像が・・・。 ↑ 球体風になり・・・。 ↑ 完成しました。 動画はこちらからご覧ください。 The Hole – video powered by Metacafe ↑ ドラゴン○ールで見たようなシーンですね。 こちらを作成された「Luv2Help」は他にも多くのチュートリアルを公開しています。ご興味のある方はこちらからどうぞ。 » Luv2Help.com 役立つTips情報や愉快なガジェット情報を提供してくれているTechEBlogからの情報
Yamadaアルティマニア2007
すっごいヤマダウィルスみたいなタイトルですが気にしないでくださいね。 さて、ホームページを作る人のネタ帳が2007年1月から開始し、今月で1年が終わりそうです。 昔を振り返ってエントリを見ると笑えるほどカテゴリわけがきちんとされてなかったり、タグもきちんと整理されていない事がよくわかり、自分の未熟さや、ずぼらな性格がこんなところでも表れるんだなぁと実感。 アクセスアナライザが6月前のデータ全て何故かなくなっていました。 その為全てを振り返れなかったのが残念ですが、6月～11月末までの6ヶ月間で、2,394,808PVを達成することが出来ました。 皆様に応援され、励まされ、罵倒され、ののしられ、ここまでやってこれました。 そこで今回は、2007年のエントリの中でも、ある程度人気になった記事をうまいことカテゴリわけして、無理やりお届けしたいと思います。 サブタイトルとしては 12月と言えば、自
Seth Godin「すごいWebサイトを作る方法」（日本語訳） - Trans
著者: Seth Godin件名: How to create a great website日付: 2007年10月11日URL: http://sethgodin.typepad.com/seths_blog/2007/10/how-to-create-1.html訳者: Arata Kojima How to create a great website あなたが逃れられない原則はこれだ。 委員会なんかは首にしてしまえ。歴史上、3人以上で作られたすごいWebサイトというのは存在しない。1つもない。厄介なことになるだけだ。 インタラクションを変えろ。すごいWebサイトをすごいと言わしめるのは、簡単そうな感じと同時に、新しいことだ。これは、そのWebサイトがあなたに新しいこと、新しいインタラクション、新しい関係性をもたらすことを意味する。その一方で、すぐにどうやって使えばいいのかも分かる
話題の次世代Webサービス「Web2.0」っていったい何だ？ - 日経トレンディネット
「Web2.0」が話題になっているだけど、なんだかさっぱりわからないという人も多いみたい。きちんとしたビジネスや技術的な解説なら、デジタルARENAと同じく日経BPのIT Proのサイトにある『「Web 2.0」を知っていますか？』という記事などを読むといい。ここではもっと簡単な説明をしてみよう。 Web2.0とは何か？ Webというのは、ここでは「Webサービス」ということ。インターネットのブラウザーを通して提供される各種のサービスのことだ。 Webサービスには、ニュース、株価などの情報提供や、オンラインショッピングやインターネット・バンキングなどいろいろある。Web2.0というのは、こうしたWebサービスが第２世代になりましたよということだ。 似たような言葉に「第３世代携帯電話」というのがある。FOMAとかCDMA 1X、VGSなどだ。確かに以前の携帯電話と違うっていう感じはわかる。じ
便利に使えるアクセス解析レポートのエクセルテンプレート | アクセス解析 “超” 基礎講座
『Web担当者 現場のノウハウVol.8』の読者のために、データを入力するだけで簡単にアクセス解析レポートを作れる、エクセルのフォーマットをダウンロードできる形で用意した。自分なりにアレンジしてぜひ活用してもらいたい。このツールを使えば、アクセス解析ツールだけでは直接読み取れない、別の視点からウェブサイトを解析できる。 また、『Web担当者現場のノウハウvol.8』の特集p.32のステップ7で紹介した、上司への報告書向けのテンプレートも用意したのであわせて活用してもらいたい。 →→エクセルのテンプレートをまとめてダウンロードする。 ページビューで見るウェブサイトの偏差値各ページやディレクトリに「偏差値」をつけるエクセルのひな形を用意した（図1）。統計の言葉の中で、「偏差値」ほどブルブルっとくる言葉はないだろう。一度はこれで悩んでいるはずだ。 →→偏差値のテンプレートをダウンロードする。 偏
WebAppSec - WebAppSec Wiki - XSSの実例
data スキーマを使ったスクリプトの実行 † data スキーマは、画像やIFRAMEなどのデータをHTML中に埋め込んで使用するための方法で、RFC2397で定義されています。複数のWebメールにてこれを使用してスクリプトの実行が可能な脆弱性がありました。 <iframe src='data:text/html;base64,PHNjcmlwdD5hbGVydCgiZGF0YToiK2RvY3VtZW50LmNvb2tpZSk7PC9zY3JpcHQ+'></iframe> <img src='data:text/html;base64,PHNjcmlwdD5hbGVydCgiZGF0YToiK2RvY3VtZW50LmNvb2tpZSk7PC9zY3JpcHQ+'> 多くのWebアプリケーションでは、http もしくは https スキーマのURIのみを入力値として許可すれば十分だと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
wordpressについて30個のブックマークまとめ*ホームページを作る人のネタ帳
editor.pc-saiban.jp – このドメインはお名前.comで取得されています。
http://e0166nt.com/blog-entry-399.html
Photoshop使い方サイト:www.fmod.jp
REST - 羊堂本舗 ちょき
http://www.designwalker.com/2008/04/april.html
http://e0166nt.com/blog-entry-403.html
http://e0166nt.com/blog-entry-392.html