サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
アメリカ大統領選
webnoborder.jp
オブザベーションやコンテキスチュアル・インクワイアリーから必要な情報を集め分析してペルソナを作る方法がありますが、分析テクニックが必要だったり、慣れるまで時間がかかったりとハードルが高めです。 そこで、すぐに実践できる方法としてアクセスログオブザベーションやコンテキスチュアル・インクワイアリーから必要な情報を集め分析してペルソナを作る方法がありますが、分析テクニックが必要だったり、慣れるまで時間がかかったりとハードルが高めです。 そこで、すぐに実践できる方法としてアクセスログから情報を集めてプラグマティックペルソナを作る方法を紹介します。 はじめに アクセスログからペルソナを作るため、現状を把握する目的でサービス利用者のペルソナは作れますが、これから使って欲しい人たちのペルソナを作ることはできません。また数値を基に人物像を想像して作る必要があるため、必要に応じて追加調査で不足情報を部分を補
アプリの世界観や操作方法を伝える手段として、初回起動時にガイドを表示することが多くなってきました。 そこで！なんとなく気になったので、どのようなパターンがあるのか独断と偏見でまとめることにしました。 操作方法を伝えるパターン アプリの価値やアプリの世界観や操作方法を伝える手段として、初回起動時にガイドを表示することが多くなってきました。 そこで！なんとなく気になったので、どのようなパターンがあるのか独断と偏見でまとめることにしました。 操作方法を伝えるパターン アプリの価値や操作方法を伝えるために表示するガイドです。 Yahoo!ニュースのアプリでは、世界観と共にジェスチャー操作の方法を伝えています。 王道といえば王道のガイドですが、長すぎると読み飛ばす。すでに知っている場合はスキップしたくなるといったことも考えられるため、操作を説明するのであれば長すぎず、またスキップ機能は必要です。
数年前にECサイトの画面設計のポイントを店舗の状況に例えながら考えたことがありました。 設計のポイントは初歩的な内容ではあるものの、今でも通用する考え方の１つだと思うので３つのステップに分けて考え方を紹介します。 訪れたユーザーを逃がさない数年前にECサイトの画面設計のポイントを店舗の状況に例えながら考えたことがありました。 設計のポイントは初歩的な内容ではあるものの、今でも通用する考え方の１つだと思うので３つのステップに分けて考え方を紹介します。 訪れたユーザーを逃がさない サイトを訪れたユーザーが直帰（すぐに帰る）してしまう原因の１つとして、さまざまな経路からサイトに辿りついたユーザーが直感的に「違う」と思ってしまうことがあげられます。 実店舗に例えるなら「入店前と入店時に感じるギャップ」です。 ユーザーはギャップを感じると商品を見る前にサイトから離脱してしまうため、以下のポイントを
モバイルデザインパターン― ユーザーインタフェースのためのパターン集を読んで、スマートフォンサイトのアンチパターンも作りたいと思ったのがキッカケで作ってみました。 独断と偏見で評価しています。 反応エリアを探させるアコーディオン 「お金からモバイルデザインパターン― ユーザーインタフェースのためのパターン集を読んで、スマートフォンサイトのアンチパターンも作りたいと思ったのがキッカケで作ってみました。 独断と偏見で評価しています。 反応エリアを探させるアコーディオン 「お金から探す」周辺のリストがアコーディオンになっていますが、テキストの部分をタップしても何も動作しません。 プラスアイコンの部分をタップしないと反応しないのです。 このようにタップ領域がユーザの意識と違う場所に設定されているのは、ユーザビリティに問題があるといえるので改善が必要でしょう。 参考サイト スマートフォンサイトにお
世の中、様々なジェネレータがあり、また紹介されているため、すでに知っているサイトばかりだとは思いますが、どれか１つでも新しい出会いがあればと思い個人的に愛用しているジェネレータを紹介します。 目次 簡単なボタンデザインをCSSで再現する グ世の中、様々なジェネレータがあり、また紹介されているため、すでに知っているサイトばかりだとは思いますが、どれか１つでも新しい出会いがあればと思い個人的に愛用しているジェネレータを紹介します。 目次 簡単なボタンデザインをCSSで再現する グラデーションを細かく指定したい 斜め線のリピート用画像を簡単に作りたい CSSスプライトの画像を簡単に作りたい ローディング画像を生成したい ファビコンを作りたい 簡単なボタンデザインをCSSで再現する CSS3 Generator – By Peter Funk & Eric Hoffman スマートフォンサイトなど
マルチデバイス対応を考える上で問題の１つとなる「コンテンツの管理方法」についての考え方は多種多様ですが、小規模サイトや予算が少ない場合、作業時間は少なく、サーバサイドの開発は0で効率よくコンテンツを管理したいですよね。 そんな時は、「JSOマルチデバイス対応を考える上で問題の１つとなる「コンテンツの管理方法」についての考え方は多種多様ですが、小規模サイトや予算が少ない場合、作業時間は少なく、サーバサイドの開発は0で効率よくコンテンツを管理したいですよね。 そんな時は、「JSON形式のファイルで管理」してみてはどうでしょうか？ 店舗情報を１つのJSONファイルで管理し、JavaScriptを使ってPCとスマートフォン別々のHTMLに店舗情報を表示ことも可能です。 今回は店舗情報をJSONファイルに保存してHTMLに一覧表示するまでの流れを紹介します。 JSON形式のファイルって何？ そもそ
HTMLメールのスマートフォン対応はどうするべきか？の続きです。 前回はHTMLメールもレスポンシブ対応をおすすめしましたが、実際にテンプレートを作ろうとするとHTMLメールならでは限界があります。 HTMLメールはTableレイアウトが主HTMLメールのスマートフォン対応はどうするべきか？の続きです。 前回はHTMLメールもレスポンシブ対応をおすすめしましたが、実際にテンプレートを作ろうとするとHTMLメールならでは限界があります。 HTMLメールはTableレイアウトが主流 今時WebサイトをTableレイアウトでマークアップする会社は無いと思いますが、HTMLメールはTableレイアウトが主流です。 OS×ブラウザ×メーラーでレイアウトが崩れる可能性があり、対応しているCSSのプロパティにもばらつきがあるのが原因なんですが、TableレイアウトだとPCのレスポンシブ対応以上に厳しい
Webサイトのスマートフォン対応は進んでいますが、HTMLメールのスマートフォン対応は進んでいません。 何故、進まないか？理由はいくつかありますが大きな問題としてメールアドレスだけでは、受信しているデバイスを判別出来ない点が上げられます。 Webサイトのスマートフォン対応は進んでいますが、HTMLメールのスマートフォン対応は進んでいません。 何故、進まないか？理由はいくつかありますが大きな問題としてメールアドレスだけでは、受信しているデバイスを判別出来ない点が上げられます。 HTMLメールの最大の問題点 @docomo.ne.jpなどのキャリアドメインのメールアドレスの場合は、メールアドレスとデバイスが対になっていますが、対になっているデバイスがフィーチャーフォンかスマートフォンの判別がつきません。（i.softbank.jpはiPhone用のメールアドレスだけで判別できるようですが。）
前の記事で情報アーキテクチャ(IA)の第一歩！Webサイトを分解して設計意図を考えるでサイトストラクチャという単語を出しました。 今回は個人的に好きな会社の１つでる株式会社ビービットのWebサイトを分解してハイレベルサイトストラクチャにまと前の記事で情報アーキテクチャ(IA)の第一歩！Webサイトを分解して設計意図を考えるでサイトストラクチャという単語を出しました。 今回は個人的に好きな会社の１つでる株式会社ビービットのWebサイトを分解してハイレベルサイトストラクチャにまとめ、設計の意図を考えていきます。 サイトにアクセスしてハイレベルサイトストラクチャを完成させる まずは株式会社ビービットのサイトにアクセスしてハイレベルサイトストラクチャを作っていきます。 ハイレベルとは抽象的という意味で使われているため、サイト全体が把握できる程度の抽象度でまとめます。今回は主にユーザー導線の設計の意
スマートフォンサイトでは、表示スペースを節約する手段の１つとしてアコーディオンを使う場面が多くいため、アコーディオンについての考え方を整理してみました。 アコーディオンの最大の魅力と欠点 アコーディオンとはタイトルをタップ（クリック）するとスマートフォンサイトでは、表示スペースを節約する手段の１つとしてアコーディオンを使う場面が多くいため、アコーディオンについての考え方を整理してみました。 アコーディオンの最大の魅力と欠点 アコーディオンとはタイトルをタップ（クリック）すると内包している情報を表示するUIで、最大の魅力は同レベルの情報をまとめて管理できる点につきます。 例えば全ての商品カテゴリを１つ１つ並べて探すより、興味のある大ジャンルを選んでから細かいジャンルを探したほうが探す時間を短縮できるため結果、探しやすくなります。また余計なページ遷移数を減らせることも出来ます。 ただしタイトル
最小限の作業工数で、どうやってモックを作るのか悩んでいたんですが、InVisionが解決してくれそうです。 実際にさわってみて便利だったので、使い方を紹介します！ InVisionって何？ 画像を用意するだけでプロトタイピングできるツールで最小限の作業工数で、どうやってモックを作るのか悩んでいたんですが、InVisionが解決してくれそうです。 実際にさわってみて便利だったので、使い方を紹介します！ InVisionって何？ 画像を用意するだけでプロトタイピングできるツールです。 ワイヤーフレームやデザイン案レベルで行うプロトタイピングは、ペーパープロトタイピングが主流だったと思います。しかし、このツールを使うと紙ではなくデバイス上でプロトタイピングが行えます。必要な画面数だけ画像を用意すればいいので、プロトタイピング用に用意しなければいけない資料はほとんどなく、デザイナーやディレクターで
皮肉をこめて「みんな大好きカルーセル」と言われるほど、スマートフォンサイトでは頻繁にカルーセルが使われています。（特にECサイト） 今回は、そんなカルーセルの特徴や注意点を改めてまとめてみました。 カルーセルの特徴 カルーセルとは、指を左右皮肉をこめて「みんな大好きカルーセル」と言われるほど、スマートフォンサイトでは頻繁にカルーセルが使われています。（特にECサイト） 今回は、そんなカルーセルの特徴や注意点を改めてまとめてみました。 カルーセルの特徴 カルーセルとは、指を左右にフリックすることで画像やテキストを切り替えることができ、情報を効率よく閲覧できるのが大きな特徴です。 と、言葉で説明してもイメージしにくいと思うので、実際に使われている例を紹介します。 メインビジュアル スマートフォンサイトでカルーセルを採用する場合、最も多く使われるパターンはメインビジュアルとして使われるパターンで
スマートフォンが登場してからMedia Queriesで制作されたレスポンシブWebデザインが注目され続けています。 マルチデバイス時代の構築手法の１つであるレスポンシブWebデザインが注目される理由について考えていきます。 レスポンシブWスマートフォンが登場してからMedia Queriesで制作されたレスポンシブWebデザインが注目され続けています。 マルチデバイス時代の構築手法の１つであるレスポンシブWebデザインが注目される理由について考えていきます。 レスポンシブWebデザインの本当のメリットとは何か？ レスポンシブWebデザインのメリットから注目される理由を探っていきます。 レスポンシブWebデザインのメリットとしてよく言われているのは、「URLが１つで済む」「ユーザーエージェントに依存しないからユーザーの環境を選ばないで済む」「コンテンツ優先で考えられる」「HTMLが１枚で
スマートフォンアプリのUI設計では各プラットフォームが出しているガイドラインに従うのが良いとされていますが、実際に配信されているスマートフォンアプリは、どの様に対応しているのでしょうか？ 今回は、iPhone、Androidでアプリを提供しスマートフォンアプリのUI設計では各プラットフォームが出しているガイドラインに従うのが良いとされていますが、実際に配信されているスマートフォンアプリは、どの様に対応しているのでしょうか？ 今回は、iPhone、Androidでアプリを提供しているサービスのUI設計の違いを比較してみました。 はじめに iPhoneとAndroidのアプリを比較してみたところUI設計には傾向があり、大きく３つのパターンに分類できることがわかりました。 実例を踏まえながらパターンを紹介していきます。※当然、例外はあります。 また今回はUI設計思考を見ているため細かいUIや
Web制作に関わる人なら１度はユーザビリティという言葉を聞いたことはあると思います。またWeb制作に携わっていればユーザビリティテスト（評価）をする機会もあるのではないでしょうか。 今回はユーザビリティやユーザビリティテスト（評価）の基本とWeb制作に関わる人なら１度はユーザビリティという言葉を聞いたことはあると思います。またWeb制作に携わっていればユーザビリティテスト（評価）をする機会もあるのではないでしょうか。 今回はユーザビリティやユーザビリティテスト（評価）の基本となる考え方を整理してみました。 ユーザビリティとは？ ユーザビリティの定義を知ることで、ユーザビリティの基本となる考え方が見えてきます。 多く引用されているユーザビリティの定義としてISO 9241-11があります。 ISOでは、以下のように定義されています。 Extent to which a product ca
Webサイトを分解して、Webサイトの設計意図を考えたことはありますか？ 競合サイトの調査や現状サイトの分析をするときには、必ずといっていいほど使っているWebサイトを分解する方法を紹介します。 Webサイトを分解する 「Webサイトの分解Webサイトを分解して、Webサイトの設計意図を考えたことはありますか？ 競合サイトの調査や現状サイトの分析をするときには、必ずといっていいほど使っているWebサイトを分解する方法を紹介します。 Webサイトを分解する 「Webサイトの分解」は、４つの内容で構成されています。 全体の調査であれば４つ全て実施しますが、UIの調査だければUIパーツの部分だけ使うときもあります。 ページ/Webサイトを分解する UIパーツ/ページを分解する 整理・分類された情報/UIパーツを分解する 素材/情報の集合体を分解する ページ/Webサイトを分解する Webサイト
スマートフォンサイトでチェックボックスやラジオボタンを実装しようとした時、labelタグが使えないため困ったことはありませんか？ labelが使えない問題点 labelが使えるPCの場合、チェックボックスやラジオボタンの隣にあるテキストをクスマートフォンサイトでチェックボックスやラジオボタンを実装しようとした時、labelタグが使えないため困ったことはありませんか？ labelが使えない問題点 labelが使えるPCの場合、チェックボックスやラジオボタンの隣にあるテキストをクリックしても選択したことになります。 しかしiPhoneは、labelで囲んでいるテキストをタップしても選択したことになりません。 これだと使いにくいためテキストをタップしても動作させる必要があります。 チェックボックスとラジオボタンの準備 labelにonclickを記述する以外は普通の記述方法で問題ありません。
Googleの検索結果にはスニペットと呼ばれる説明文などを表示するエリアがあります。そのエリアに、説明文以外の情報を埋め込むことができるリッチスニペットを知っていますか？ リッチスニペットを利用すると、より有益な情報をGoogleの検索結果Googleの検索結果にはスニペットと呼ばれる説明文などを表示するエリアがあります。そのエリアに、説明文以外の情報を埋め込むことができるリッチスニペットを知っていますか？ リッチスニペットを利用すると、より有益な情報をGoogleの検索結果に表示することができるので、Google経由のユーザ体験を向上させることが見込めます。 リッチスニペットを表示するとどうなるか？ 対応しているジャンルの中で分かりやすいショップ、レシピ、イベントのリッチスニペットを紹介します。スクリーンショットはPC画面ですが、スマートフォンサイトでも同様のリッチスペニットが表示されて
インターネット上に様々なガイドラインが公開されていますが、その中でもUI、UX、ユーザビリティについて言及している日本語限定の情報を集めてみました。 有志で翻訳されたガイドラインもあります。感謝です！ Apple 超が付くほど有名なガイドラインターネット上に様々なガイドラインが公開されていますが、その中でもUI、UX、ユーザビリティについて言及している日本語限定の情報を集めてみました。 有志で翻訳されたガイドラインもあります。感謝です！ Apple 超が付くほど有名なガイドラインです。これを抑えておけば他は必要ないかも？ アップル ヒューマンインタフェースガイドライン iOS ヒューマン インターフェイス ガイドライン(PDF) iPadヒューマンインターフェイスガイド ライン(PDF) Google AndroidアプリはiPhoneと同じUIで良いんんじゃない？と思っている方は、開発す
Web制作全般に関する情報を掲載しているブログです。制作関連の話は分かりやすさを重視して書いています。ユーザビリティテストと聞くと、「一般ユーザを呼んで対象のサイトをテストする」イメージがほとんどだと思いますが、実は、サイト制作者でもユーザビリティテストをすることが出来ます。 Web制作の受託案件で、「時間とコストは無いけど、最低限のユーザビリティテストはしたい！」そんな時に私が使っている簡易版ユーザビリティテストの方法をご紹介します。 続きを読む
このページを最初にブックマークしてみませんか？
『ハッピーメールログイン｜スマホからわずか1分で簡単登録』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
