Balsamiq Mockups | Balsamiq
Balsamiq Wireframes is a rapid low-fidelity UI wireframing tool that reproduces the experience of sketching on a notepad or whiteboard, but using a computer. It really forces you to focus on structure and content, avoiding lengthy discussions about colors and details that should come later in the process. Wireframes is FAST: you will generate more ideas, so you can throw out the bad ones and disco
はてブ追加時の「コメント」ボタンが紛らわしい問題 - 聴く耳を持たない(片方しか)
昨日から続いて、今日はデザイン面でのはてなブックマーク改善案……というわけでもないのですけれども、ちょっと気になった点。 - ところてん - アットウィキ 出っ張ってる印象を与えるオブジェクトはボタンに見える。 で、ついクリックしてしまう。 http://www16.atwiki.jp/tokoroten/pages/1015.html こちらで指摘されていますが、新しいはてなブックマークのBookmarkletのデザイン*1で、誤操作が多いようですね。 例えば私のTwitterのタイムラインでも、そうした話題が結構聞かれてます、 はてブ２のブックマーク追加ページ、「追加する」ボタンじゃなくて、コメント欄左のコメント部分をつい押してしまう。なんかボタンぽいデザインなのでつい・・・・・・。 リニューアルしたはてブの、ブクマを追加するときのコメント & タグ入力画面、「タイトル」と「コメント」
ユーザーにとってはUIがすべて：UIデザイン原則をソシオメディアが語る - builder by ZDNet Japan
シーネットネットワークスジャパンは9月29日、builderとしては2回目のイベントとなる「builder tech day」を開催した。今回は「User Interface & beyond」をテーマに、ソシオメディア、マイクロソフト、アドビシステムズ、カールのスピーカーが登壇し、ユーザーインタフェースの現在と未来について講演した。 本稿では、ソシオメディア取締役である上野学氏の基調講演「ユーザーにとってはUIがすべて」を紹介しよう。 トイレにひそむUIのヒント 講演の冒頭、上野氏は米国の著名なデザイン・コンサルティング・ファーム、Adaptive Pathに2008年まで在籍していたDan Saffer氏と対話した際のエピソードを披露。 Saffer氏が「トイレにはユーザー・インタフェース・デザインの様々なヒントがある」と話していたことを紹介し、下の画像を示した。 上野氏は赤色の注意書
ウノウラボ Unoh Labs: 四角いリンク
yamaokaです。 最近タブをメタファーにしたナビゲーションをよく見るようになりました。タブには大抵、内容を示すキャプションが付けられています。さて、どこからどこまでがリンクでしょうか。どの部分をクリックすればそのタブを選択できるでしょうか。 例えば、キャプションの文字だけにリンクが貼られている場合。利用者はタブの中のさらに狭い範囲、文字の部分を狙ってクリックしなくてはなりません。 実はマウスの操作というのは難しいのです。狭い範囲を狙って指定することにはあまり向いていません。目的到達のために狭い範囲のクリックを強制するのはどう考えてもよいインターフェースではありません。 そこで大抵のタブ型インターフェースではタブの枠の中全体をリンクとして扱えるようになっています。 アンカー要素のdisplay属性をblockにして、必要な高さと幅を与えることでリンクの範囲を四角形に広げることができますね
Pencil – Get this Extension for 🦊 Firefox (en-US)
Pencil is a free and opensource tool for making diagrams and GUI prototyping that everyone can use. Top features: * Built-in stencils for diagraming and prototyping * Multi-page document with background page * Inter-page linkings! * On-screen text editing with rich-text supports * Exporting to HTML, PNG, Openoffice.org document, Word document and PDF. * Undo/redo supports * Installing user-defined
やっぱり[OK]ボタンは右なんだよ - ぼくはまちちゃん！
こんな話題はいまさらかもしれない！ それはわかってます！ だけど書きたい！ なにって、[OK]ボタンの位置のことです！ これって右に置くのが自然だよ絶対！！ 理由は単純で、 [OK][キャンセル] は、画面によっては [保存] [取り消し] だとかに名前を変えるし、 さらに、入力が3ページあるようなウィザード形式の画面なんかだと、 [ここまでOKそして次の画面へ]、[間違ったかもしれないから前へ戻って修正] とかになっちゃう。 うん、このウィザード形式の時のことを考えるとわかりやすい！ ウェブは横書き！ 左から右に読む！ 左からやってきたんだから、[戻る] のは左！ 右に進んでいくんだから、[進む] のは右！ だから、[次へ] も [保存] も [OK] も右が自然！ ウィザードっぽい画面の時と他の画面の時とで 「OK的なもの」の位置がぶれていると、少し迷うよね。 だから[OK]は右に統一
![やっぱり[OK]ボタンは右なんだよ - ぼくはまちちゃん！](https://cdn-ak-scissors.b.st-hatena.com/image/square/281b1fd51f0e3fedc726435362724c3af4fce817/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F13208692334729888519%2F26003855888873578%2F1550052661)
アプリケーションデザインの間違い・トップ10
ユーザーがユーザインタフェース（UI）の操作方法を知ること、UIが操作の流れを的確に導くこと、共に実現されればアプリケーションのユーザビリティは上がる。しかし、ガイドラインを守らなければ、どちらも実現は難しい。 Top-10 Application-Design Mistakes by Jakob Nielsen on February 19, 2008 アプリケーションデザインの間違いをまとめるのは難しい。最悪の間違いは、業界固有の特殊ケースである場合が多いからだ。アプリケーションが失敗に終わる理由には、 (a) そもそもの問いを間違えている、(b) 問いを正しく捉えながらもそれを解くための機能を間違えて作っている、(c) 的確な機能を作りはしたものの、難しくし過ぎてユーザーに理解してもらえない、などが考えられる。 どれを間違えても、アプリケーションの失敗は決定的で、それを避ける方法をお
モバイル向け広告の「クリエイティブ」の考え方とデザイン : LINE Corporation ディレクターブログ
こんにちは！『livedoor Fortune』や『livedoor 歌詞』を担当している吉沢です。今回はモバイル業界に欠かせなくなってきた広告の「クリエイティブ」の考え方とデザインについてお話したいと思います。弊社でも外部に広告を出稿することはありますが、自社コンテンツの回遊率アップのため、自社媒体に自社コンテンツへの広告を掲載することがあります。 広告の形式は 3G端末の普及と共に姿を変えつつありますが、最近のおもな形式としてテキストとバナー（静止画・FLASHなど）があり、見た目にリッチな広告を目にする機会が多くなってきました。広告はテキストよりも画像の方が視認性があるので、ユーザの関心を引くことができる広告をできるだけ配信したいですよね。 広告のクリエイティブを考える際、プロのコピーライターへ依頼できるといいのですが、そうもいかないのが現場の事情です。情報収集力やデータ分析能力など
ウノウラボ Unoh Labs: デザイナの立場からの「デザイン依頼のコツ」
こんにちは。yamazakiです。 このブログをご覧になっているのはエンジニアの方が多いと思いますので、デザイナの方とのやりとりをされている方も結構いらっしゃるはず。 社内で「どういうふうに依頼されるのがデザイナとしてはいいもの出てきやすい？」というお話を振られたので今回はそれについて書いてみようと思います。 ※もちろんあくまでこれは私個人が思うところであり、全てのデザイナにあてはまるわけではないと思います。 ので、できればこれをご覧になったデザイナーの皆様も、「こういうふうに依頼してくれると力が発揮できる」というポイントなど書いていただけたら非常に嬉しいです。 また逆に、デザイナにはこういう点気をつけて欲しい、といった、エンジニア視点でのデザイナへのリクエストなどもいただけると嬉しいです。 ---- ビジョン、ゴールを共有するこれは複数の人間が関わるプロジェクトなら当たり前といえば
「最速インターフェースの研究と実践」メモ - 最速チュパカブラ研究会
昨日のSIGHCIのメモです。 最速インターフェースの研究と実践： ライブドア mala氏 まず、自己紹介を兼ねて概論 ブログ「最速インターフェース研究会」 WebのUIの進歩の停滞に対する批判を込めて名付けた 自分の肩書きは「インターフェースエンジニア」 よいUIを作るために「実体験に基づいたチューニングをしている」 自分で使ってみる ユーザの反応を見る 欲望に忠実に作る 作業としては、perl, html, jsの記述 「実のところ、プログラミングに詳しいと言える自信はないし、デザインのことも深くはわからないが、一人で一通りこなせる（完成品を作れる）という点は自分の強み。 よいUIを作るための作業は横断的。割り当てられた仕事をするだけの人ではダメ。」 作品紹介 2ch最速検索 キーボード操作だけでスレッド検索 まだAjaxは使っていない 「めくり型」UIの実験 スクロールしながら読むよ
勝手にフィードバック：新生銀行：江島健太郎 / Kenn's Clairvoyance - CNET Japan
さて、前回に続いて「勝手にフィードバック」シリーズに登場いただくのは新生銀行です。 引き続き、開発者に黙ってサイトの使い勝手を遠慮なくバッサバッサと斬っていきたいと思います。 ■新生銀行って？ かつて高度成長期に「長銀」と呼ばれて栄華を誇り、その後バブル崩壊とともに経営破綻、国有化と外資の投資組合による買収を経て「新生銀行」として再出発した普通銀行ですが、消費者の目線に近いかなり大胆なサービスへと刷新することで、大きくイメージアップしました。 特にサービスのコスト面での単純明快さ（ほとんど全てが無料）では他に抜きんでていて、たとえば、コンビニや郵貯のATMで入出金しても365日24時間いつでも手数料無料、他行への振込手数料もネット経由なら月５回まで無料（つまり一般人には永久に無料）、という具合です。 で、私はというと最近までシティバンクとジャパンネット銀行をメインで使っていたのですが、宮川
デザイン勉強会の資料を公開します。 - El diario de la diseadora viviendo en tokio
すみません、昨日今日とだらだらしてしまって、すっかり資料の公開が遅くなってしまいました＞＜2007年9月8日にノッキングオンさんにて行なわれたデザイン勉強会で、私がお話したことの資料を公開いたします。「デザイナーでない人のためのレイアウト入門」（pdfファイル・約41MB）当日お見せしたものから不要なアニメーション部分を取り除き、1ページ説明を追加してあります。このpdfだけでは当日お話したことがカバーし切れていないのですが、 そこは素晴らしき「ついったったー」の皆さまにより、完璧フォローされておりまする！（皆様に大感謝！！！）デザイン勉強会まとめサイト（by woopsdez嬢）デザイン勉強会のまとめをするよ！（by hamashunさん）「デザイン勉強会」に参加してきました！（その2）（by necozeさん） あ、あと、まとめサイトから、floralさんが録音してくださった音声データ
ウノウラボ Unoh Labs: 「名刺作り」で学ぶレイアウト（＋α）基礎講座
こんにちは。yamazakiです。 4月に入社してはや3ヶ月目。同じように4月に入った方などは、仕事にも少しずつ慣れてきて、そろそろ少しずつ外に目を向ける余裕も出てくる頃でしょうか。 たとえば社外のイベントや勉強会などに参加する、となれば必携の「名刺」。 会社から支給される場合がほどんどだとは思いますが、中には自分でオリジナルの名刺を作って配る、なんていう人もいるかもしれませんね。 今回は「名刺のデザイン」をネタに、「レイアウト」の基本的なあれこれを解説してみたいと思います。 名刺といえば大抵の場合、以下のような内容を載せますね。 名前 肩書き メールアドレス 携帯電話番号 会社の電話番号、Fax番号 会社名 会社の住所 これ以外にも会社によって色々あるかと思いますが、ひとまず今回はこれだけの要素で作ってみることにします。 また、使うフォントは、（MS ゴシックは印刷向けには
窓の杜 - 【NEWS】ひっかき傷で描かれたようなおどろおどろしい日本語TrueTypeフォント「怨霊」
ひっかき傷で描かれたようなおどろおどろしい雰囲気の日本語TrueTypeフォント「怨霊」v1.0が、5月19日に公開された。Windowsに対応するフリーソフトで、現在作者のホームページからダウンロードできる。 「怨霊」は、ホラー系の日本語TrueTypeフォント。作者によると、怨霊が書いた文字をイメージしたとのこと。文字の線は直線的でかつ荒れており、拡大すると、細かな傷が無数に寄り集まって文字を形作っているのが分かる。1本1本の傷に怨念が込められているかのように感じられる、不気味な雰囲気のデザインだ。 文字幅はプロポーショナルで、半角・全角の英数字とカタカナ、全角ひらがな、一部記号のほか、JIS第一水準文字を収録する。肝試しの手紙など、怖さを醸し出したいときにぜひ使ってみよう。 【著作権者】暗黒工房 【対応OS】（編集部にてWindows XPで動作確認） 【ソフト種別】フリーソフト 【
M+ と IPAフォントの合成フォント
ホーム フォント紹介 M+フォントは高品質デザインでぜひ日常的に使いたいのですが、漢字がたりない‥‥そこでIPAゴシックから漢字を補完しました。どなたでも無料でお使いになれます。 2020-04-15Clampフォントを修正しました。詳細は変更履歴をご参照ください。 2020-03-07MigMix／Miguフォントをバージョンアップしました。変更点「M+ TESTFLIGHT 063a に同期」「Clampフォントを追加」など‥。詳細は変更履歴をご参照ください。 2015-07-12MigMix／Miguフォントをバージョンアップしました。変更点「M+ TESTFLIGHT 060に同期」など‥。詳細は変更履歴をご参照ください。 Webサイトをスマートフォン対応しました。画像をSVGにしたのでページを拡大表示すると（PCの場合Webブラウザの横幅を変えると）一部画像を大きく見ることが可能
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[Think IT] 【見やすさと使いやすさ】ガラリと変わる！UI入門
リグレト - みんなで「ヘコむ」を楽しもう！
Pixelians
ウェブサービスを作るときはBlank Slateを工夫しよう | IDEA*IDEA
Yahoo! UI Library: Button