＠IT：ユーザーが選びやすいフォームのカタチを考えよう
Webアプリケーションのユーザーインターフェイス[2] ユーザーが選びやすい フォームのカタチを考えよう ソシオメディア 上野 学 2005/6/24 前回「ユーザーにとっては “ユーザーインターフェイス”こそが製品そのもの」は、ユーザーインターフェイスというもののとらえ方と、それをデザインするうえでは、人とシステムとの対話であるインタラクションデザインを論理的に行わなければならないという話をしました。今回は、GUIをデザインするうえで必要な前提知識と、Webアプリケーションの課題、そしてウェブアプリケーションにおけるインタラクションの要となるフォームコントロールについて考えていきたいと思います。 ■WIMPインターフェイス GUIは、別名「WIMPインターフェイス」とも呼ばれます。WIMPとは、ウィンドウ（W）、アイコン（I）、メニュー（M）、ポインター（P）のことで、GUIを構成する代
Sensitive... Google風ロゴの作り方
Googleのロゴで使われているフォントは「Catull」という名前らしいです。書体のサンプルは IdentiFont にあります。（この書体自体は残念ながら有料です。）書体が手に入らなければ、別の書体で試してみてください。 次にGoogle風ロゴの作成ですが、想像していたよりも作り方は簡単です。慣れてしまえば5分で出来上がるはずです。どのように作っているかは下のPSDファイルを開いてみてください。今回はPhotoshopを用いて作りましたが、使っているフィルタは「ドロップシャドウ」と「ベベルとエンボス」の二つだけなので、フリーのソフトでもこの機能があれば十分作れると思います。上下のロゴはPhotoshopを使って実際に作成したものです。 → Google風SensitiveとGoogleロゴのPSDファイル ※フォント情報はラスタライズしてあります。 上のSensitiveのサンプルがト
Adobe - デベロッパーセンター : Dreamweaver 拡張機能 for Movable Type 3によるテンプレートカスタマイズについて
はじめに ウェブログが注目されている理由は、以下に挙げられるように、ウェブにおける表現の自由が個人レベルまで高められた点にあります。 誰もがカンタンに投稿し即時にウェブ公開できる ウェブサイトの更新情報を RSS 技術により効率的に配信できる 検索エンジンとの親和性が高い Movable Type （ムーバブル・タイプ） は、シンプルでカスタマイズ性が高いと定評のあるウェブログ作成ソフトウェアです。図1のように投稿データと出力用のテンプレートを個別にデータベースへ格納し、公開のタイミングにデータベースより取得した投稿データとテンプレートを使い、XHTML とスタイルシートを自動生成します。 図1 これまで、Web 制作を自社で行わない企業などは、デザインの変更・ウェブコンテンツの更新作業を Web の制作会社に依頼しなければなりませんでした。結果、制作会社へかかる負担は大きいものとなり、
＠IT：Webアプリケーションのユーザーインターフェイス［1］-1
Webアプリケーションのユーザーインターフェイス[1] ユーザーにとっては “ユーザーインターフェイス”こそが製品そのもの ソシオメディア 上野 学 2005/6/2 ■はじめに Webクライアントの技術が進歩し、多様化するに従って、Webベースのシステムにはデスクトップアプリケーションと同等の品質を持つユーザーインターフェイスが必要となってきています。 しかし開発の現場では、ユーザーインターフェイス（特にGUI）デザインについての専門的なスキルを持った技術者が圧倒的に不足しています。その理由は、ソフトウェア製品におけるユーザーインターフェイスの重要性が正当に理解されていないためと、ユーザーインターフェイス・デザインに関する教育機会がほとんどないためです。 利用者の視点に立てば、ユーザーインターフェイスとは製品そのものです。いくら高度に洗練された仕組みがバックエンドにあったとしても、それが
検索の思考モデルはさらに堅固になっている
ユーザは現在、検索の動作に対して明確な期待を持っている。その思考モデルに訴えるデザインでありながら、異なる動作を行うものは混乱を招く。 Mental Models For Search Are Getting Firmer by Jakob Nielsen on May 9, 2005 検索は、ウェブのユーザ行動の中であまりにも突出したものであるため、それがどのように動作するべきかという、堅固な思考モデルをユーザたちは形成している。彼らは3つのコンポーネントが検索機能を構成していると思っている。 検索文字列を入力するためのテキストボックス。 「検索」というラベルのついた、検索を作動させるために押すボタン。 別ページに設けられた、リニアで優先順位がつけられた上位候補一覧—検索結果ページ（SERP） ユーザテストでウェブサイトやイントラネットでの検索が、Xのように動作したほうがよいと、人々は訴
fladdict.net blog: flash使いから見た、ajaxのユーザビリティ（１）
ajaxにおけるユーザビリティについて、flash使いの視点から書いてみる。 おそらくは、ajaxに携わる人の９９％はプログラマやSEだと思うので、プログラマの言葉でデザインについて語ってみるテスト。今回は遷移について。 如何に遷移状態を知覚可能にするか 非同期通信のユーザビリティにおいて最も重要なことはおそらく、ユーザーに対し如何に状態繊維を意識させるか？ということではないかと思います。 「せっかくのシームレスな環境で、何故わざわざ遷移を意識させなければいけないのだろうか？」 と不思議に思う方も多いと思いますが、実はシームレスな環境だからこそ、遷移を意識させなければならないのです。 シームレスに遷移が行われるということは、同時にユーザーが現在位置を見失う可能性があるということでもあります。ロードが終了したのに気付かずに、いつまでも待っているというようなものはカワイイもので、例えばマウスオ
MBoffin.com - Designline - A Design Timeline
I have often wondered what it would be like to see a web site design progress from start to finish, with each tweak and change being shown as it progresses—a design timeline, if you will. I don't mean from conceptual start to finish—from blank piece of paper to finished Photoshop image of the design. I mean from a blank browser and text file to a completed HTML file with associated CSS and images.
正しいアダルトサイトの作り方
正しいアダルトサイトの作り方「正しいアダルトサイトの作り方」は成人向けに作られたページです。18歳未満の方はこちらより速やかに退出願います(注意/免責事項)。 アダルトサイトを作る場合、非アダルト系と異なり、様々な点に注意を払わなくてはなりません。「エロサイトは、アクセスが多そうだから、サイトを立ち上げれば儲かるんじゃないの？」といった甘い幻想を抱くだけではいけないのです。社会のルール（法律）を知らずに違法なHPを作成すれば、１ヵ月後に警察のおじちゃんが訪ねてくる、なんてこともあるかもしれません。また、ただ闇雲に作成してもアクセスは向上しませんし、収入も見込めません。 当サイトは、「普通のホームページは作成できても、アダルトサイトは作ったことがない、作るのはちょっと不安」といった方々のための作成解説マニュアルです。特に「法律に触れない、損害賠償の対象とならない、ウィルス侵入に負けない」よう
塊魂オンザウェブ
2018/9/14 「塊魂アンコール」がNintendo Switch™とSTEAM®で発売決定！詳しくはコチラ 塊ラインナップを更新しました 2013/4/25 「塊魂 ノ・ビ～タ PlayStation®Vita the Best」が2013年4月25日にお得な価格で本日発売!!! 2012/11/27 塊魂 オンザウェブ、塊ラインナップを更新しました 2012/11/21 PlayStation®2アーカイブスにて「塊魂」配信開始 詳しくはコチラ 2012/9/11 塊魂 オンザウェブ、塊博士2のくだらない話を更新しました 2012/9/4 塊魂 オンザウェブ、塊博士2のくだらない話を更新しました 2012/8/28 塊魂 オンザウェブ、塊博士2のくだらない話を更新しました 2012/8/21 塊魂 オンザウェブ、塊博士2のくだらない話を更新しました 2012/8/17 塊魂 オンザ
Lucky bag::blog: float の問題を overflow で解決
float させた要素を内包したボックスは、高さを指定しないと下方に伸びません。これを、clear を使わずに overflow で解決しちゃう方法。 CSS - Clearing floats 簡単に説明してみます。container 内に left と right があり、それぞれを左右に float させています。で、実はcontainer に背景色 #ddffbb を指定しているのですが、反映されてません。 floatサンプル01 container 自体の高さを指定していないので、下方に伸びないからです。これを解決するためには、(X)HTML に手を加えて clear させるしか方法はありませんでした。 floatサンプル02 しかし、container に幅と overflow を指定すれば解決します。 #container { background-color: #ddffb
Usable XMLHttpRequest in Practice
Please enter your email and we will send you an email where you can pick a new password. Welcome to Baekdal/Plus Baekdal/Plus is for journalists and editors who want to be more relevant to their readers. Each edition of this weekly newsletter focuses on ways you can help improve your coverage, avoid mistakes that are known to drive people away, and overall create something more useful for people t
IEでもborder-radiusっぽいことをするbehavior
特徴 IEで丸い角を表現するためにVMLのroundrectを利用します（超安直）。とりあえずCSS3で書いた（-moz-）border-radiusなスタイルシートにひとつ記述を加えるだけで使えるので、将来に禍根を残すことはないはず。画像を使う方法よりはメンテナンスが楽で、余計な要素が氾濫しているソースよりは綺麗なんじゃないかなぁ、と。新版と旧版がありますが、どちらも中途半端です。 使い方 非IE系のブラウザ用にborder-radius: npxまたは-moz-border-radius: npxを指定してあるところへ、ついでにbehavior: url(border-radius.htc)を追加して下さい。なお、 あらかじめhtml要素の開始タグあたりにxmlns:v="urn:schemas-microsoft-com:vml"を書き加えておく必要があります（しなくても動作し
0503 - eto.com/d
ContentsDebugWindow注目をあびる優れた検索エンジンwemaNifty Corners++ Updateダウンロードniftypp.htmlniftypp2.css議論リンクsIFRNifty Corners++download使い方で、Buzz GameGiant StepsRuby on RailsGonzui CSS対応Gonzui JavaScript対応JavaScript at SourceForgeTinyMCEIE7HtmlAreaGoogle MapsAlphaImgFactoryAjaxversionの違い動的生成使いまわしがききそうな部分他の分析2005-03-18AjaxAjaxを説明する時に絶対使ってはいけない用語VML誰も知らないけど実はイケてる技術で、Mozilla SVGRealtimeWikiWikiばな Vol.4RastBreak it
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://svslab.jp/0x0a/20050611.html
CSS Filters - CSS-only Filters Summary (dithered.com)
Downloads
ecjapan.jp
http://www.yasuhisa.com/could/entries/000724.php
WYSIWYG型がブログをダメにする？ | Webデザインのタネ
http://dac.lolipop.jp/blog/archives/000259.html