成功法則が詰まったBtoBサイトの標準ワイヤーフレームを無料配布します | knowledge / baigie
約1年前、BtoB企業における顧客獲得型サイトの勝ちパターンをまとめた『BtoBサイト・チェックリスト』を、ベイジ、才流さん、WACULさんの3社連名で発表し、大きな反響をいただきました。 このチェックリストはブログで公開しただけではなく、私たちのウェブ制作の現場でもフル活用されています。この1年間に手掛けた多くのBtoBサイトが、このチェックリストを満たすように設計され、多くのBtoBサイトでコンバージョン数/率やフォーム誘導数/率の向上など、ポジティブな変化が生まれました。 このような活動の中から、『BtoBサイト・チェックリスト』の内容を満たした『BtoBサイト・ワイヤーフレーム』なるものが誕生しました。これを今回、皆さんにご提供します。リード情報なども一切取らず、そのまま丸ごとお渡しします。 BtoBサイト標準ワイヤーフレームXD版（770KB） BtoBサイト標準ワイヤーフレーム
「コマンドプロンプトは黒い画面に文字がたくさん出て怖い」→「チャット風」にしてみた LINEみたいで「分かりやすい」と話題に
黒い画面に“コマンド”を入力して操作を実行する「コマンドプロンプト」。慣れていないと少しとっつきにくいその画面を、LINEっぽくすることで親しみやすくした「チャット風コマンドプロンプト」を実際に作ってみた人が現れ話題になっています。 プログラマーでITエンジニアのkenji（@kenjinote）さんが開発し、GitHubでソースコードなどを公開しています。 チャットでメッセージのやり取りをしているような見た目で、こちらがコマンド（命令文）を入力すると、返信のような形で内容が表示・出力されます。入出力がはっきり分かれていて見やすく、“相手側”がアイコン付きなのが、なんだかホッとします。なにより全体的にかわいらしい。 チャット風コマンドプロンプト（画像提供：@kenjinoteさん） 通常のWindowsのコマンドプロンプト このアイデアは、Web制作企業ビックリマークの代表取締役でエンジニ
このインターフェースは初体験。ロシア発かっこ良すぎるスケジューラーアプリ『Sooner』 - リニューアル式
Sooner: to do list & weekly planner 1.0（￥85） カテゴリ: 仕事効率化, ビジネス 販売: SMS Services O.o.o.（19.9 MB） なんてユニークなインターフェース！ 348個目の原石アプリは「Sooner」。ロシアのAppStoreで「仕事効率化」カテゴリ１位になったタスク・スケジュール管理アプリだ。 特徴はこのユーザーインターフェース。 動画はロシア語だが、動きや雰囲気は十分に伝わると思う。 はっきり言ってかっこいい。 リマインダーも設定できるし、iPhoneのカレンダーとの同期もできる。 つい自慢したくなるアプリだと思う。 オススメ度 ★★★★★ 12月５日まで85円セール中だそうです。 高橋モトシ(@Motoshi_t）でした。
iPhone/iPadアプリデザインで使っているツール
企画やらUIを考えるツール iPhone Idea Sheet（PDF） 三階ラボさんのアイデアシート（PDF）。 iPhoneの枠だけじゃなく、ナビゲーションバーやタブバー、ステータスバーが書きやすいように、うっすら線が入っていてGOOD。 印刷して何枚か持ち歩いている。何か作りたいなーどうかなーと思ったら、手書きでワーっと書く。このシート自体が美しいので、いいもの作れそうな気がしてくる。 紙なので、対面でのブレストやら打ち合わせしながら書き込みやすい。 Cacoo（Web） UIの構想がまとまってきたら、Cacooで清書してチームで共有。 iPhoneの各パーツのステンシルが揃っているので、きれいに、わかりやすく作れる。SkypeミーティングのときにみんなでCacoo触りながら話したりとかしている。 Interface HD（iPad App） iPad上で、iOSパーツを組み合わせて
UIの可能性を感じさせる、「Think Different」なiPhoneアプリのインターフェイスのまとめ
Clear Clearはボタンのない、ジェスチャーベースのインターフェイスで私たちに衝撃を与えました。ユーザビリティとアクセシビリティに若干問題があるにもかかわらず、その操作性とミニマルなインターフェイスはジャスチャーだけでユーザーに素晴らしい経験を与えます。
デフォルトが酷いとまじめに入力したくなる | コーヒーサーバは香炉である
codewallに登録してみたら、ちょっと面白い仕掛けがあった。プロフィールを何も入力していない状態だと、「スキル」の欄がこんな悲惨な内容になっている。 これは悲惨すぎる! ちゃんと編集しないといけない! もしもここに「まだ入力されていません」としか表示されていなかったら、あまり真面目にプロフィールを編集しようとは思わない人も多いだろう。後で気が向いたら書けばいいや、と。 しかし「ちゃんと記入しないと『IE6大好き☆ 特技はVBで〜す☆』ってことになるぞ」ってのは多くの人にとってはかなり嫌な脅迫となる。これはもう速攻で記入するしかないよ! 実際に何もしないと本当にIE大好きで特技はVBですと表示されるのかどうかは謎。おそらくはただの気の利いたジョーク……だと思う。 わかったのは、デフォルトが酷いものになっていると、「未入力です」と表示するよりもずっと強力に記入したい気分になるってこと。
Metro UIは「UXアプリ養成ギプス」 : 小野和俊のブログ
昨日、今日とWindows Developer Days(WDD)に参加してきた。二日間セッションに参加して感じたのは、「Metro UIは『UXアプリ養成ギプス』だ」ということである。 デザインの原則がある。 例えば原則のひとつに、”Content before Chrome”というものがある。これは、「コンテンツを主役にし、ツールバーやメニュー等のコンテンツへの没入を妨げるものは最小限にする」というものだ。 こうしたデザインの原則やガイドラインがきちんと決められている、ということは重要なことではあるが、それ自体はさほど驚くべきことでもない。先日ブログに書いたように、最近の主要なプラットフォームには、大抵UX/UIのデザインガイドラインが定められているからだ。 では私が何に驚いたかというと、Metro UIではこのデザインガイドラインが「半強制」されていることだ。 UX/UIに意識の高い
WEBシステムのデザインについて今の会社を退職する前に私が後輩に伝えたこと
このたび会社を退職することが決まり、デザインについてほとんど初心者である後輩に対して私の思考を託す時が来ました。 私自身WEBシステムの制作を手がけたことはなく（ないのかよ！！と全力でつっこんでおｋ）今度のプロジェクトでうちのチーム初のWEBシステム制作案件があるそうなので、デザインする時のポイントなどを自分なりにまとめてみました。 私は携われないんですけどね＼(^o^)／ 様々なWEBシステムのデザイン よいデザインはデザインをする対象（今回はWEBシステム）のことを知らなければ出来ません。 自分の考えだけでデザインをはじめると、思考の偏った使いにく～いものになってしまう恐れがありますので 必ず調査をしましょう。 そして、何故その要素がそこに配置されているのかを考えましょう。 以下に様々なWEBシステムのキャプチャと 超稚拙で言葉足らずな安易すぎる説明を掲載します。 ですが、掲載されてい
話題のアプリ『Clear』のUIを独自実装してみた！(+Gumroad)
ひとつ前のエントリーの続きです！(動画も同じ) 今回こそ、当初の目的であった 『Clear for iPhone』のUIを独自に再現した実装 についての解説を書いていきますね。 初めに断っておきますが、今回のエントリーはStudy CoreDataシリーズのようなチュートリアルではありませんのであしからず。。 部分部分でどういった実装をすればあのUIが実現出来るのか？というポイントを解説していきます。 このエントリーの最後に、Clearと同じくなにかと話題のGumroadでテストアプリを公開していますので欲しい方は是非！ (※ 更新：内容が古くなったため公開は終了しました) では、まず目次をば。 。。と、その前に前のエントリーで書きそびれてしまった事があったので。 ようこそタッチフリーの時代へ！画面に触れずに本が読める、MagicReaderを発表！ – STUDIO LOUPE こちら、
大規模UIをJavaScriptで実現するためのテクニック、サイボウズkintone開発の現場から。デブサミ2012
大規模UIをJavaScriptで実現するためのテクニック、サイボウズkintone開発の現場から。デブサミ2012 7万行規模のJavaScriptプログラムで構築されたユーザーインターフェイス。そのプログラミングで使われたテクニックとはどういうものか。 2月16日、17日の2日間、都内で開催されたイベント「デベロッパーズサミット2012」（デブサミ2012）で、サイボウズ株式会社 開発部 若原祥正氏、生駒浩隆氏が講演「kintoneの表と裏～大規模JavaScript開発と非構造データベース」を行いました。 講演では前半に大規模JavaScriptのテクニック、後半でスキーマレスデータベース構築の仕組みが解説されましたが、この記事では資料が公開された前半のJavaScriptのテクニックについて、ダイジェストで紹介します。 7万行のコード、フレームワークはClosure Library
■ - naoyaの日記
もう外野になった人間ががとやかく言うのも、中の人的には面白くないかもしれないけれど... 言わないで後悔するより言った方がマシ、という精神で書き残します。あくまで個人の視点です。あまり賛同してもらえないと思うし。 純粋にインタフェース、という意味の改善ではすごく良いなあと感じた モダンになったし、拡張性のある UI だと思った 使いやすいと思う 一方、コンセプトの転換、という点ではあまり評価できない マイホットエントリーは、技術屋がアルゴリズムを使ってみたいからそうしましたというのを抜け出せてない と、現時点では思ってしまった。作った人には、申し訳ない まだ精度のチューニングが十分でないから? 夕方に新UIに切り替えてから、ほとんどフィードが流れてない まだ、facebook の News Feed のような「大きな問題を解決」した機能にはなってないと思った 今のはてなブックマークは、ユー
Webアプリケーションの開発に。面白いコンポーネントが多数揃ったUIライブラリ·Ninja UI MOONGIFT
Ninja UIはHTMLを使わずにJavaScriptで画面を描画していくUIコンポーネント。 Ninja UIはjQuery/JavaScript製のオープンソース・ソフトウェア。思うにWebサイトというのは表現力が高く、かつ自由度が高すぎるのだ。そのため見栄えにこりだすと収集がつかなくなる。またデザインセンスがないと格好いいサイトが作れない。 ボタンやアイコン アイディアがどれだけ良く、技術力があっても見栄えがぱっとしないサイトは受け入れられない。もうHTMLは書かず、JavaScriptで組んでしまうのはどうだろう。それを可能にするのがNinja UIだ。 Ninja UIはjQuery Webjutsu（Web術？）を掲げているライブラリで、枠組みだけHTML5で組み、コンポーネントの配置は全てJavaScriptだけで記述するライブラリだ。ボタンやドロワー、アイコン、ポップアッ
『iOSヒューマンインターフェイスガイドライン』はUI解説書の枠を越えている ：国内・海外情報から見える『企業のWEB活用法』：ITmedia オルタナティブ・ブログ
中小企業がITを活用して売り上げにつなげるにはどうしたらいいか？WEBマーケティングとWEB戦略コンサル実績350社50業種以上の実績とノウハウで、海外の最先端情報を中心に、噛み砕いてご紹介。 作成者：中山陽平 iOS、実質的にはiPhoneのアプリケーションを作る際に参照してくださいと言う事で配布されている「iOSヒューマンインターフェイスガイドライン（以下iOS_HIG）」 弊社のシステムを真剣にスマートフォン対応にするために読み始めたのですが、この内容が、ただのインターフェイスのガイドラインだけではなく、さらに踏み込んだ内容になっていて驚きました。 Appleのサードパーティアプリに対する姿勢、サードパーティアプリケーションがiPhoneの大きな魅力であるという認識が、このガイドラインからはにじみ出ています。 App開発者以外もぜひ見ておくべき これはぜひ、WEBに関わる方は見て頂き
ログイン画面の離脱率を下げる！ECサイト各社の工夫
こたつにみかんはじめました。nonakaです。 週に１度は通販で買い物してます。そんな中、ログインする画面をいろいろ見たので、ファッション通販サイトのログイン画面を集めました！ ファッション通販サイトの場合、ログイン画面に「新規会員登録」への誘導があるのがほとんどです。今回は、2つのパターンにわけてご紹介します。 「ログイン画面」エリア、「新規登録」エリアが上下にあるパターン セレクトショップ：BEYES ログイン画面、新規登録が上下にあるパターン。入力フォームが大きめで入力しやすい。新規会員登録のボタンは色を変えて目立たせてます。 無印良品 ログイン画面、新規登録が上下にあるパターン。フォームとボタンの横幅がそろっていて見やすいですね。 ユニクロ ログイン画面、新規登録が上下にあるパターン。入力フォームが大きくて見やすいです。ログインと会員登録の分けかたも見やすいですね。 子供服：goo
SIGIXD 2nd Googleにおけるインタラクションデザイン - 安藤日記
安藤日記 安藤日記：デジタルガジェット好き「安藤幸央」の日々のメモ ( yukio.andoh@gmail.com ) [ http://twitter.com/yukio_andoh ] Design Sprint Newsletter https://designsprint.substack.com/ SIGIXD 2nd ------------------------------------------------------- http://sigixd.org/2nd.php Googleにおけるインタラクションデザイン ＃川島さんの示唆に富んだ話がすばらしかった。 川島 優志氏 シニアウェブマスター・アジア太平洋マネージャー: "Behind the web design & Doodle creation" Judy Shade UX Researcher: "UX at
インターン講義5日目「ユーザインターフェース,HTML5」 - Hatena Developer Blog
インターン生は、連日の講義と課題で大変そうですが、今日も講義が続きます。 本日は、id:nanto_viによる「ユーザインターフェース,HTML5」です。仕様書を隅々まで読んだ講師によるディープな講義内容となっています。今日も2時間の長丁場ですが、頑張って着いていきましょう! ユーザーインターフェース、HTML5 ユーザーインターフェースで大切なこと、HTML5 及び関連 API で何ができるか 自己紹介 nanto_vi (外山真, TOYAMA Nao) ブックマークチーム アプリケーションエンジニア はてなブックマーク Firefox 拡張 はてなツールバー for Firefox はてなブックマーク Twitter 投稿機能 はてなサマーインターン 2008 なんとなく Emacs 富山県南砺市とはあまり関係なし 概略 UI の評価・設計・実装の概略 HTML についての概略、HT
やってしまいがちなユーザビリティのミスとその解決方法
ユーザビリティでやってしまいがちなミスや見落とされがちな10の罪とその解決方法をLINE25から紹介します。 10 Usability Crimes You Really Shouldn't Commit 下記は、やってしまいがちなユーザビリティの10のミスとその解決方法を意訳したものです。 はじめに 1. ラベルがないフォーム 2. トップページにリンクしないロゴ 3. 訪問済みリンクの指定がない 4. アクティブなフィールドが明示されない 5. altの記述がない画像 6. 背景色がない背景画像 7. 長い長いテキスト 8. 下線付きだがリンクではない 9. ココをクリック 10. 均等割付「justified」の使用 はじめに ここで紹介している10のユーザビリティのポイントは、ありがちなミスだったり見落とされがちなものを集めました。 あなたのウェブサイトのユーザビリティを拡張する手
カゴメのジュースに隠されたメッセージに感動 - エキサイトニュース
「たたんでくれてありがとう」 こんな言葉が目に飛び込んできた。カゴメのジュース『野菜生活』（200ml）を飲み終わり、パッケージをたたんだときのことだ。 写真にあるように、このメッセージはパッケージをたたんでみないと出てこない場所に書いてある。たたんだ人だけに贈られる言葉。なんてステキなんだろう！ なんだか嬉しくて、ほっこりした優しい気持ちになった。 そこで、さっそくカゴメ株式会社の広報部に問い合わせてみた。この企画をした、現・商品企画部長の高野仁さんをはじめ、社員の布川浩一さん、大谷紗貴子さんに取材することに。 まず、このメッセージを入れた経緯をうかがってみると、入れはじめたのは2008年9月頃。 実は、その半年前に商品をリニューアルした際、最初は言葉ではなく、イラストを入れていたんだそう。 「『野菜生活』というブランド性を考えたときに、なにかちょっとした楽しみを提供したいと思い、たたん
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
エンジニアtype 技術者のキャリアを考えるWebマガジン - 転職＠type
転職・退職代行マガジン -