プロペパ君で作るオーソドックスなWebサイトのレイアウト（9パターン）
春ですね。 「プロペパ君」（『キッズのための、紙で作るＷｅｂサイト（というかページ）設計』）の別バージョンを作ってみました。 少しパーツを増やしてみました。LEGOと一緒でパッケージになりすぎると想像力が刺激されなくなると思いつつも試しに増やしてみました。（そのうちpdfにするかもしれません）追記：しました。記事の終わりにあります。 地道にはさみでチョキチョキ・・・。 写真じゃわかりにくいですが、なんと今回はマグネットでペッタンコです。 では、Webでよく使うレイアウトをどこまで作れるかチャレンジ開始。（3カラムはやってません。第三の目で適当に右か左にナビゲーションを想像して追加してみるといいかもしれません。） ■トップページなどで多いオーソドックスなタイプ コンテンツ部分が広めで余りがち。トップはやはり配置するものがどうしても多くなるので、項目が多い場合は、あとでバナーをぺたぺた貼る羽目
＠IT：UCD＝利用者中心設計のプロセスとは？
Webアプリケーションのユーザーインターフェイス[3] UCD＝利用者中心設計のプロセスとは？ ソシオメディア 上野 学 2005/8/9 「ユーザーにとっては “ユーザーインターフェイス”こそが製品そのもの」「ユーザーが選びやすいフォームのカタチを考えよう」に続き、連載第3回は、ユーザーインターフェイスデザインの上流工程に着目して、利用効率が高くユーザーが目的を十分に達成できるシステムを作り上げるのに必要な、プロジェクト初期の取り組みについて考えていきます。 まず前提として、システムを利用するユーザーは何らかの目的を持っている、ということを意識することが大切です。ユーザーインターフェイスを評価するうえでは、この目的がどれぐらいスムーズに達成されたかという視点が重要になります。個々の画面がどれだけ論理的にデザインされていたとしても、そのシステムを利用した結果としてユーザーが本来の目的を達成
http://blog.iaspectrum.net/UserExperienceDeliverables.html
See related links to what you are looking for.
ユーザー行動を構造的に分析するための5つのワークモデル: DESIGN IT! w/LOVE
不確実な時代をクネクネ蛇行しながら道を切りひらく非線形型ブログ。人間の思考の形の変遷を探求することをライフワークに。 ひさびさに人間中心設計（Human Centered Design＝HCD）に関する話題を。 ここで書くのは、ユーザー調査から得られたユーザーの行動を構造的に分析するために用いる、5つのワークモデルについて。このワークモデリングの手法はContextual Designで用いられているものです。 ペルソナ／シナリオ法の使われ方に問題あり？で、なんで急にこんな話を書こうかと思ったかというと、世の中のペルソナ／シナリオ法の使われ方に疑問をもったからです。 前に「ユーザー行動シナリオは最初のデザイン」というエントリーで「ペルソナ／シナリオ法の肝は、実はペルソナのほうじゃなくてシナリオのほう」だと書きました。 しかし、世の中ではどうも「ペルソナ」という言葉のほうばかりが先走ってしま
ユーザーエクスペリエンスデザインの成果物リスト | Web担当者Forum
ユーザーエクスペリエンス（UX）デザインの世界に身を置くわれわれにとっては、いまや心浮き立つような時代となった。UXの価値はますます広く認められるようになり、次々に生まれる新たなテクノロジーやメディアを超えたトレンドは、UXデザインの実践面で飛躍的な進化を生み出す土壌を整えつつある。 私自身、新たなチャレンジの数々に見舞われてあやうく安全圏から押し流されそうになりながらも、インフォメーションアーキテクトとしてはそれらを大いに楽しんでいる。これまでに、ソーシャルソフトウェアやリッチユーザーインターフェースをデザインしたり、モバイル検索の未来についてのシナリオを描いてみたり、いろいろなチャネルやアプリケーションにまたがるようなUXを設計してきた。するとそのうち、VIPルームの“エラい人たち”に自分のアイデアをご理解いただこうと苦心する場面が次第に増えつつあることに気づいた。 そんなわけで、私は
ウェブインターフェイスの６原則
既に英語版が発売されている「Designing Web Interfaces: Principles and Patterns for Rich Interactions」。書籍のブログとFlickr コレクションには UI に関する豊富な例が紹介されていて、これを見ているだけでも楽しめます。 主にウェブアプリケーションを対象にした書籍ですが、企業サイトやショッピングサイトの構築際も参考になる点は幾つもあります。本は14章に分かれており、それぞれ異なるインターフェイスを紹介しているわけですが、この 14章を大まかに 6種類の原則にまとめることが出来ます。 単刀直入に アウトプットがあるところにインプットが出来るようにする。ページ単位ではなく、ページの中の情報単位での操作を可能にする 軽量化 ファイルサイズだけではなく、物理的な動作や精神的な負担を軽減するような UI つくりを心がける ひと
ウェブデザインにおける効果的なコミュニケーションの取り方
ウェブデザインにおける明確で効果的なコミュニケーションの取り方をSmashing Magazineから紹介します。 Clear And Effective Communication In Web Design 下記は、簡潔に意訳したものです。 1. コミュニケーションのアプローチ方法 ウェブサイトの来訪者とコミュニケーションを取るためのアプローチ方法をいくつか紹介します。 テキスト 見出しやコンテンツ内にかかわらず、来訪者はテキストをメッセージとして受け取ります。コミュニケーションにおいて、極めて重要な要素です。 画像 画像は、テキストよりもすばやくメッセージを伝えるときがあります。画像を作成する際は、メッセージを魅力的に伝えられるようにします。 タイトルとヘッダ タイトルとヘッダは、来訪者に主要なポイントと考えを伝える重要で効果的なものです。 アイコン アイコンはウェブデザインの特徴的
はぁ、またか、とFlashがダメだなと思う一瞬
先に補足を追記します： 僕のスタンスをはっきりしておかないとFlashという単語などの想定しないところで思考がひっかかる人が出てきそうなので書いておくと、 ・これから以下に書くようなFlashを作っていた人でもあります。 ・FlashやAdobe(Macromedia)プロダクトが大好きです。 ・現状の環境で素晴らしいUIを実現するにはFlashとJavaScript(Ajax）の適材適所での利用は不可欠だと思っています。 以上のことを踏まえた上で読んでいただけるとありがたいです。 こんな記事を見つけた。 次世代画像クルージング技術「ImageCruiser」、楽天市場で実験開始 :: SEM R 色検索とか地図検索とか作っていろいろ思うところが多い者としては、行く末が気になります。 予想を裏切って欲しいという意味で、成果があがることを期待しつつ。 が、どうしても気になっていて、これ画面ね
コラム一覧｜ビービット(beBit)- エクスペリエンス・デザイン・パートナー
本コラムの前編では、昨今eNPS℠が重要になってきていること、また、eNPS℠には「正当な報酬」・「正当な評価」・「顧客への貢献実感」が影響していることを述べました。 本コラムでは、仕事の役割が見える「部署」を切り口に、eNPS℠の比較を行い、そこからeNPS℠を高めていくための方法について考察・ご紹介します。 「中国のデジタルサービスが進んでいる」「中国のCX/UX※1が優れている」そんな評判や記事を最近多く耳にするようになりました。また、Alibaba傘下のAnt Financialが、Harvard大学から「先進的かつ再現可能」なビジネスとして評価され、Harvardビジネススクールの企業事例集に取り上げられたことは記憶に新しいニュースです。 コピー商品や、「安かろう悪かろう」の製品のイメージが根強くあった中国。しかし、そのような「偏見」はもう昔のことです。中国は今、デジタルを活用し
B to Bサイトでのビジネスリード獲得方法 (ユーザビリティ実践メモ)
B to B向けの製品・サービス紹介サイトでは資料請求・問合せをビジネスゴールに設定しているケースが少なくありません。 今回はB to B向けサイトで資料請求数を効果的に増やす方法として以下の2つを紹介します。 （1）全てのページで資料請求への導線を設置する （2）ユーザの求める情報を具体的に提示する しかしB to BサイトはB to Cと比べて、訪問ユーザは製品・サービスに対して一定の興味を持っているため、そうした懸念は杞憂であると考えられます。逆に全てのページに資料請求への導線を設置していない場合、ユーザが何のアクションも起こさないままサイトから立ち去るリスクが高まります。 弊社の調査でも、あるページで欲しい情報を獲得したあと、そのページに資料請求への導線がなかったため、そのままサイトから立ち去るというユーザ行動が確認されています。 （2）ユーザの求める情報を具体的に提示する B t
効果倍増！ アクセス解析から見直す「企業情報」のあり方 | 基本編
一般的な「企業情報」コンテンツは これが最終型なのだろうか？「企業情報」は、ウェブではごく一般的なコンテンツだが、実際のサイトの姿となると幅が広い。 会社概要沿革組織事業所一覧（交通アクセス）などが標準的なコンテンツだが、業種や取引先、企業規模によっては、次のような情報まで掲載しているサイトも少なくない。 社長の挨拶ニュースリリースCM情報／イベント情報採用情報投資家情報社会／環境活動（CSR）調達情報これらの外国語版いずれにしても、根幹をなす会社概要や沿革については、多くのサイトが堅い印象に仕上げているようだ。 また、米国のサイトの企業情報と比較してみると、日本の企業情報に少ないものに「mission（使命）」がある。日本では「社長ご挨拶」が代わりの役割を果たしているのかもしれない。「沿革」にあたる「history」も長い文章になっていることが結構多く、英語が不得意な人にはくたびれるサイ
『ペルソナ作って、それからどうするの？』といっしょに読みたい参考文献：2.認知科学・UCD編: DESIGN IT! w/LOVE
不確実な時代をクネクネ蛇行しながら道を切りひらく非線形型ブログ。人間の思考の形の変遷を探求することをライフワークに。 『ペルソナ作って、それからどうするの？』の第1章では、「デザインって何なのでしか？」という問題の整理をスタート地点にして、「ウェブの制作とデザイン」、「創造性とデザインの方法」、「ユーザーの行動とデザイン」、「ウェブサイトをデザインする際の境界線問題」と話を進め、現在のウェブデザインの問題点と課題を整理・指摘しています。 それを受けた第2章は「ペルソナ／シナリオ法とウェブデザイン」と題して、＜「誰のためのデザインなのか？」という疑問に対して「誰のどんな問題を解決するのか」を明示するデザイン手法がペルソナ／シナリオ法＞を紹介するとともに、「ユーザビリティとペルソナ」、「ユーザーエクスペリエンスとペルソナ」、「ペルソナを用いてインタラクション･デザインを考える」など、ペルソナ／
人間中心設計プロセスに欠けているのは具体的なモデリングの手法: DESIGN IT! w/LOVE
不確実な時代をクネクネ蛇行しながら道を切りひらく非線形型ブログ。人間の思考の形の変遷を探求することをライフワークに。 これはもうほぼ断言してもいいと思いますけど、"ISO13407：Human-centred design processes for interactive systems（インタラクティブシステムの人間中心設計プロセス）"の弱点は「設計による解決案の作成」に用いる具体的な手法の提案がないことだと思っています。 たとえば、以前、「人間中心設計（Human Centered Design＝HCD）で使う主な手法」というエントリーで、こんな図を描いて、 人間中心設計＝ユーザー中心のデザインで使われる主な手法を以下のように整理しました。 利用の状況の把握と明示：フィールドワーク（観察法）、コンテキスチュアル・インクワイアリー、ワークモデル分析ユーザーと組織の要求事項の明示：ペルソ
[体験レポート]やってみましたペルソナ作り――これがウェブサイト向けペルソナの作り方だ | Web担当者Forum
Web担編集部では、今回、Web担当者Forumのサイト向けに実際にペルソナを作成してみたので、その様子をレポート形式でお届けする（ペルソナについて詳しくは「ウェブサイト向けペルソナを理解して、思いこみのユーザー像と決別しよう」を参照）。 結論からいうと、ペルソナ作りはWeb担当者にとって非常に役立つものであり、編集部のスタッフは、今回のペルソナ作りによって新しい発見と良い刺激を得ることができた。また、ペルソナ作成はしっかりとした方法論のもとに行う必要があり、経験のある人の助けを借りることは必須だということもわかった。 使えないペルソナで失敗した経験実はWeb担編集部では、最初にメディアの中心としてのウェブサイトWeb担当者Forumをスタートした2006年7月の時点で、一度ペルソナを作成していた。「台東区にある玩具などのメーカーに勤める三島啓介さん（32才）」というペルソナだ。しかし、そ
![[体験レポート]やってみましたペルソナ作り――これがウェブサイト向けペルソナの作り方だ | Web担当者Forum](https://cdn-ak-scissors.b.st-hatena.com/image/square/5ab74e15948c807ebbb39ce141223cec7464b905/height=288;version=1;width=512/https%3A%2F%2Fwebtan.impress.co.jp%2Fsites%2Fdefault%2Ffiles%2Fstyles%2F1200x630%2Fpublic%2Fimages%2Farticle2008%2Fpersona_design%2Fpersona_icon.jpg%3Fitok%3DiOf_wBp2){kind=icon}
あなたのブログのユーザビリティを改善する方法トップ5
少し前にブログをつくったときのチェックリスト | IDEA*IDEAという記事がありました。とても大事です、耳が痛いですｗｗ というわけで今回は
40分でできるホームページ診断 ～最低限クリアしたい40項目のチェックシート | Web担当者Forum
40分でできるホームページ診断 最低限クリアしたい40項目のチェックシート［訪問者目線編 2008年版］ SEO？ ユーザビリティの向上？ それ以前にしなきゃいけない「サイト作りの基本のキ」を、あなたのサイトではちゃんとできているだろうか？ 高度な施策に目を向ける前に、最低限クリアしておきたいチェックポイントをまとめてみた。あなたのサイトは何点とれるだろうか？ TEXT：編集部 協力：株式会社 環 ウェブサイト作りの基本のキSEOやユーザビリティに限らず、キーワード広告、アクセス解析、LPO、リッチインターフェイスなど、サイトの効果をアップさせる手法はさまざまあり、Web担でも詳しく解説してきている。 しかし、そういった施策にコストを割く前に、現状の自社サイトが、訪問者が「あれれ？」とマウスをうろうろさせてしまうような状態になっていないか確認したことがあるだろうか。 そんなあなたのために、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
webサイトを作る時に顧客とあらかじめシンクロしておくと良い7つの基礎*ホームページを作る人のネタ帳
ウェブサービスを作るときはBlank Slateを工夫しよう | IDEA*IDEA
https://www.openvista.jp/archives/note/257/?257/