When creating a web form you have to make a functional and visually aligned layout. The simplest way to do this is to place elements in a table or by fixing width of labels. Tables stretch its cells according to width of largest element in a column. That way you can have aligned form. Fixing label width will also also allow you to have a hard-coded but aligned form. But… But what if you don't want

Google Mail、Hotmail、Yahoo! Mail、eBayの各サインアップのフォームを使用して、22～33才までの平均27才のユーザー8人を被験者にしたアイトラッキングから検証した、使いやすいフォームの10のポイントをcxpartnersから紹介します。 Web forms design guidelines an eyetracking study 以下、10のガイドラインからポイントのピックアップです。 1. Vertical, not horizontal 水平ではなく、垂直に フォームのレイアウトは、水平方向の配置やそれが混在したものではなく、単純に垂直方向に配置したものが効果的です。 可能であれば、各ラベルも垂直方向に揃えて配置してください。 2. Left-aligned labels are clearer (anecdotally) ラベルは左寄せにすると、よ

Six Revisionsで、ショッピングカートなどのEコマース系アイコンセットが紹介されています。 ざっといくつかご紹介。 ↑はe-Shop Icons。 Shopping Cart Icon Weby Icons E-Commerce Icon Set ライセンスについてはリンク先を確認してください。 その他のリストは以下からどうぞ。 » 30 High-Quality Icon Sets for E-Commerce Designs 昨日は一日中飲んで寝てたら終わっちゃったぞ遅くなってすんまへんm(_ _)m 海に行く予定だったのになー。くそぅ雨め。

CSSによるフォントサイズの指定は「font-size」属性を使って簡単に設定することができますが、ピクセル指定などの絶対的サイズで統一する方法にくらべて非常にやっかいなのが、相対的なサイズによるサイズの統一です。 ブラウザによって異なる、フォントサイズの境界 例えば「font-size:70%」というふうに指定して、Internet Explorer 6とFirefox2.0で見てみたページが以下のようなものです。　※ページはxmlタグつきのXHTML1.0 Strictで作成、つまりInternet Explorer6は下位互換モードで表示されていますが、標準モードでも同じサイズで表示されます。 あきらかにFirefoxで表示されたページのフォントサイズが小さくなっていることがわかります。　このように、フォントをパーセント指定した場合は、その数値によってフォントサイズを規定する境界に微

Product Plannerは、YouTubeやTwitterなどで使用されているサインアップや招待・登録などユーザーフローが多数登録されているギャラリーです。 Product Planner Product Plannerはギャラリーを閲覧するだけでなく、新しくユーザーフローを作成・登録することもできます。 ギャラリーは、ユーザーフローのタイプ別にカテゴライズされています。

ウェブデザインにおける明確で効果的なコミュニケーションの取り方をSmashing Magazineから紹介します。 Clear And Effective Communication In Web Design 下記は、簡潔に意訳したものです。 1. コミュニケーションのアプローチ方法 ウェブサイトの来訪者とコミュニケーションを取るためのアプローチ方法をいくつか紹介します。 テキスト 見出しやコンテンツ内にかかわらず、来訪者はテキストをメッセージとして受け取ります。コミュニケーションにおいて、極めて重要な要素です。 画像 画像は、テキストよりもすばやくメッセージを伝えるときがあります。画像を作成する際は、メッセージを魅力的に伝えられるようにします。 タイトルとヘッダ タイトルとヘッダは、来訪者に主要なポイントと考えを伝える重要で効果的なものです。 アイコン アイコンはウェブデザインの特徴的

960 Grid System Download - CSS, sketch paper, and templates for: Acorn, Fireworks, Flash, InDesign, GIMP, Inkscape, Illustrator, OmniGraffle, Photoshop, QuarkXPress, Visio, Exp Design. Repository at GitHub. Essence The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns,

先日、お昼ご飯の際に仕事の話をしていたら、 「開発者として一生懸命書いたUIの制御コードを、デザイナーが全部入れ替えちゃったんだよ」 という話を冗談で話をしていた。 なかなかビジネス的にお客様に伝えるのが難しい概念だったので、どのように表現するか？を本人なりに考えてコードに落としたが、よりわかりやすいビジュアル表現に、ばっさり入れ替えられたということ。 冗談とは言え、それが話に出てくる以上は、相応に気にしていたのだろう。 逆に、僕が昔怒られた例として、Flashのデザインに組み込まれたインタラクションの制御コード（Action Scirpt）にサーバサイドの制御を加える作業で、基本となるデータ管理のコードを全部書き換えたら怒られたということがある。 当時はまだモダンプログラム的なことを意識していないと、オブジェクトのアクセサなどを使った効率的なプログラミングをFlashデザイナーが行うとい

Use of texture in Web design is extremely common. Part of the reason textures are so useful to designers is the relative ease of the integrating one into a design if a high-quality textured image already exists, not to mention the endless possibilities. Use of texture in Web design is extremely common. Part of the reason textures are so useful to designers is the relative ease of the integrating o

MTを使ってサイト構築をしたい場合、デフォルトのテンプレートは削除して、まっさらの状態からテンプレートを作っていきたいという場合が良くあります。 とりあえず、新規ブログを作成して、テンプレートを削除して、さて、テンプレートの作成をしましょう……という感じになると思います。手数的にはそれほど多くはないといえ、たくさんのブログから構築されているサイトなどでは、この作業自体を自動化できないかな、と思います。 そこで、こんなテンプレートセットを作りました。 システムテンプレート以外のテンプレートが空の状態のブログを作成できるテンプレートセット、です。 さすがに、システムテンプレートが空の状態だと、後で追加も出来ないので、困ったことになってしまうので、これだけは残してあります。 ファイルをダウンロード このアーカイブをダウンロードして、解凍して出来た「initial_template_set」ディレ

By Theresa Neil As Bill mentioned in an earlier post, we don’t want to limit this blog to just the principles and patterns found in the book. For that you can check out our Explore the Book section. This is the second article in a three part series on patterns and principles for RIA design. Standard Screen Patterns: 12 patterns w/100 examples Essential Controls: 30 controls for RIA design and deve

Usability is an essential goal of any website, and usable navigation is something every website needs. It determines where users are led and how they interact with the website. Without usable navigation, content becomes all but useless. Menus need to be simple enough for the user to understand, but also contain the elements necessary to guide the user through the website — with some creativity and

内閣官房やラックが登壇 ゼロトラストが官民一体で サイバーセキュリティを定義する 日清食品グループのDX（後編） 内製化とローコードで実現？ビジネス部門 によるアプリ開発のリアルボイス！ さあ、クラウドで解決しよう。 Google Cloud が「業務最適化」と 「イノベーションの実現」のヒントを提案 RPAによる自動化を年30万で実現 小さな投資が目に見える大きな効果に！ デジタル化によるわかりやすい業務効率向上 特集：IT最適化への道 成功の秘訣をその道のプロが解説 カギとなるのはシステムの「見える化」 VMware 渡辺氏に聞く 顧客のデジタル変革のために 自らも改革を続けるヴイエムウェアの戦略 サーバースペシャリストへの道 PCサポートとサーバ管理の共通項 ひとり情シスのためのスキル向上のコツ ライバル同士がタッグを組む理由 マイクロソフトとヴイエムウェアが連携し パブリッククラウ

「最近、どこの企業のサイトを見ても、だいたい同じような感じになってて、それで何かが変わるかって言っても別に何が変わったってこともなく、あまり効果もないみたいだし、もう企業サイトをピカピカにするという時代は終わった感じだね…」。 昨夜行われた文化庁メディア芸術祭の授賞式。その式典が終わった後の懇親会パーティで、ある人にこんなことを言われました。ちなみに昨夜、これを僕に言った相手は、Web業界ではそれなりに実績のある人で、僕としては「この人わかってないなー」って思ったんだけど、その人は広告の方の人だし、「いやそれは違うでしょ」とその場で言っても時間の無駄だなと思ったのと、もっと別に話したい人もいたので、にっこりしながら「そうですねー」と言っておいた。 まぁ、似たようなトップページがあり、脈絡のない打ち出しがFlashで作られてぴょこぴょこ動いてたり、クリックすると本体も似たようなグリッドで似た

2010 Update- 15 patterns and 80 new examples By Theresa Neil As Bill mentioned in an earlier post, we don’t want to limit this blog to just the principles and patterns found in the book. For that you can check out our Explore the Book section. In the spirit of that, I want to share an additional set of principles and patterns I have been using for RIA design. While the book takes a much more consu