成功法則が詰まったBtoBサイトの標準ワイヤーフレームを無料配布します | knowledge / baigie
約1年前、BtoB企業における顧客獲得型サイトの勝ちパターンをまとめた『BtoBサイト・チェックリスト』を、ベイジ、才流さん、WACULさんの3社連名で発表し、大きな反響をいただきました。 このチェックリストはブログで公開しただけではなく、私たちのウェブ制作の現場でもフル活用されています。この1年間に手掛けた多くのBtoBサイトが、このチェックリストを満たすように設計され、多くのBtoBサイトでコンバージョン数/率やフォーム誘導数/率の向上など、ポジティブな変化が生まれました。 このような活動の中から、『BtoBサイト・チェックリスト』の内容を満たした『BtoBサイト・ワイヤーフレーム』なるものが誕生しました。これを今回、皆さんにご提供します。リード情報なども一切取らず、そのまま丸ごとお渡しします。 BtoBサイト標準ワイヤーフレームXD版（770KB） BtoBサイト標準ワイヤーフレーム
人はなぜ「分かりやすいデザイン」でも失敗するのか｜Tsutomu Sogitani
これは私が最近よく訪問する日本橋駅直結の商業ビル、東京日本橋ビル内のエレベーターのボタンです。 唐突に質問ですが、このボタンで操作ミスを起こすポイントがあるとすれば、それがどこだか分かりますか？ 説明が必要と思いますが、このビルは7Fがオフィスロビーになっています。駅直結のB1と1Fからは7Fまで直通するシャトルエレベーターがあり、全員7Fで一度降り、セキュリティチェックをし、23Fより上にあるオフィスフロアに入ります。そのオフィスロビーとオフィスフロアを行き来するためのエレベーターのボタンがこれです。 ボタンが23Fから30Fまでしかなくて、下に大きく7Fのボタンがあるのは、そういったビルの構造からです。 私と同行したディレクター（26歳）は、打ち合わせが終わってオフィスフロアからオフィスロビーに帰る際に、操作ミスをしました。それも1度だけでありません。次の打ち合わせの帰りにもまったく同
UXを定量的に評価する7つの基準で客観的にサイトを改善していこう | 【レポート】Web担当者Forumミーティング 2015 Spring
オンラインビジネスの成功のためには、ユーザーの意見を客観的に多数取得し、その数値分析から具体的対策を練ることが重要だ。当たり前のことだが、これができているサイトは少ない。 UXはたびたび、Webサイトやサービスの「使い勝手」を指す「ユーザービリティ」と混同されがちだが、UXとは単なる使い勝手ではなく、商品・サービスを含めた体験そのものを表す。 UXの概念を示すものとしては、ピーター・モービル氏が提唱した「UXハニカム構造」が有名だ。しかし、キーワードは英語で言葉の意味がわかりづらく、内容を理解するのは少々難解である。 これを専門家以外にもわかりやすく、ゴメス・コンサルティングで編集したのが「サイト全体構造とUX7つの要素」だ。Webサイトの構造例と、それぞれに対応する7つのUX基準を記している。 1. アクセスのしやすさ「アクセスのしやすさ」とは、Webアクセシビリティやマルチデバイス対応
Belajar Bahasa Inggeris Online 2022 (Kelas English 1-to-1)
Kalau anda teringin nak fasih English, boleh belajar Bahasa Inggeris online dengan kami. Kelas dijalankan menggunakan Zoom / Google Meet. Kelas Bahasa Inggeris Online Ini Khas Untuk Orang Dewasa Yang Faham English, Tapi Bila Speaking: Ayat Berterabur, Grammar Hancur Dalam proses nak fluent English, kenapa mesti malu? Kami di JomEnglish Academy faham, anda nak sangat cakap smooth dan rasa confident
最近のWebデザインで採用されているページレイアウトやUIの新常識がチェックできる素材のまとめ
最近のWebのUIはフラットデザイン・Material Designが着実に進化し、シンプルでコンテンツにフォーカスされたデザインが定着してきました。テキストは読みやすく、写真はより大きく使用されています。レイアウトは縦長型やカード型の人気が高く、デスクトップでもスマホでもスクロールを前提にしたデザインが主流となっています。 最近のWebデザインで採用されているページレイアウトやUIの新常識がチェックできる素材やプレビューを紹介します。 Boring Cards UI Kit PSD、個人・商用利用無料。 Bootstrap 4でも新しいコンポーネントとして注目されているカードを使用したUIキット。黄金比をベースにしたデザインはさまざまなサイズ・カラーで展開することができます。
暮らしの情報サイトnanapiはサービスを終了いたしました | nanapi [ナナピ]
2020年8月31日(月)をもちまして、nanapiに関わるすべてのサービスは終了いたしました。 nanapiは、2009年のサービス開始より「みんなで作る暮らしのレシピ」という考えのもと、ユーザーの皆さまに生活に関する様々な「ハウツー」を投稿していただく投稿型ハウツーサービスとして運営してまいりました。 約11年間にわたって皆さまからご支援をいただきサービスを継続できたこと、nanapi編集部一同、心より御礼申し上げます。 掲載されていたコンテンツなどのnanapiについてのお問い合わせは、nanapi@supership.jp までお願いいたします。 長きに渡りnanapiを応援してくださり、本当にありがとうございました。
![暮らしの情報サイトnanapiはサービスを終了いたしました | nanapi [ナナピ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/8b15ebee4606b6050444b2a1e95d0bd3fe0a6c28/height=288;version=1;width=512/https%3A%2F%2Fp.cdnanapi.com%2Fr%2F2015%2F08%2F11%2F22%2F84447952-5bed-4c6b-b60b-15c65783c994.jpg%3Fheight%3D76%26width%3D76)
ウェブからの電話の問い合わせを増やすには受付時間外のフォローの仕掛けも考えておこう
概要 ▶ 電話がダメならメールでやるでしょ、といった安易な考えをしていませんか？ 電話しようと思った人をキチンとフォローする仕組み作りをしましょう。 Yahoo!BBのページをスマートフォンで見ていたときに、この電話受付はなかなか良いな、参考にしようと思ったのでブログでシェアします。 ●ウェブからの電話対応そのページはYahoo!BBの ADSLのキャンペーンページです。 「お電話で今すぐお申し込み・ご相談」の下に「tel:」で始まるリンクが仕込まれた「電話をかける」ボタンがあります（なぜか「受付時間」という言葉がダブっていますが…）。 「電話をかける」ボタンをタッチすると、電話アプリが立ち上がって電話が掛かります。 「電話をかける」ボタンのすぐ横に目立つ緑のカラーで「折り返し電話予約」ボタンがあります。 今回、いいなと思ったのはこの緑色のボタンです ●折り返し電話予約ページの内容について
IllustratorでUI制作 | murmuring design
昨今、マルチデバイス化にともなってデジタルメディアのデザインでもベクターデータの需要が上がってきました。それにともないIllustratorやSketchでUIデザインを制作する機会も増えてきたと思います。 そんな中、流行りものが好きでミーハーな私は「イラレでUI作るといいらしいよ…」という噂を聞き、早速やってみることにしました。 約半年間のナレッジを「環境設定、管理、効率化」という章に分けてご紹介します。 環境設定編 「株式会社三階ラボ」さんの記事を一読して、やってる間に慣れます。 Notes こちらの本も大変参考になります！ Web制作者のためのIllustrator＆ベクターデータの教科書 マルチデバイス時代に知っておくべき新・グラフィック作成術 管理編 文字、色、パーツをしっかり管理して複数人作業、作業効率化、うっかり反映漏れを防ぎます。 汎用パーツのシンボル管理 できるだけ最
アップルとグーグルのガイドラインに学ぶスマホWebデザインの要点（スライド付） | ベイジの社長ブログ
スマートフォン対応させるWebサイトが急増しています。しかし、スクリーンが小さくタッチ操作がメインのスマートフォンでは、デスクトップ向けWebサイトのデザインで培ったノウハウの多くが通用しません。このような時代におけるスタンダードなデザインルールを学ぶために、弊社デザイナーの荒砂を中心に、Appleが公開しているiOS Human Interface Guidelineと、Googleが公開しているMaterial Design Guidelineの比較を行いました。（以降、両者をガイドラインと略します） スマートフォン向けのWebサイトのデザインを考える上で、アプリのUIデザインの定石を知ることは重要です。なぜなら、スマートフォンにおいてはWebサイトをブラウズする機会は14％しかなく（comScore調査／2014）、多くの時間をアプリの中で過ごしているためです。さらにユーザは「これは
Backdrop | UXの語感
UXという言葉は2005年ぐらいにはすでにバズワードだったが、その後もますますバズっぷりを増している。 UXという言葉は人によっていろいろな意味で使われるとよく言われる。実際、私も仕事でいろいろな人がいろいろな意味で（そして真面目に）UXという言葉を使っているのに遭遇する。 デザインコンサルタントとしては、UXを何かひとつ定義づけることよりも、世間でこの言葉がどのような使われ方をしているのかを知ることの方が重要だ。 ちなみに、私の定義はとても簡単だ。誰かが私に「UXとは何ですか？」とたずねれば、私はこう答える。 「利用者体験のことです」 それ以上でも以下でもない。英単語の直訳で十分意味のある言葉だと思う。 例えば「デザインって何ですか」とか「UIって何ですか」といった質問に答えることの方がずっとコンセプチュアルで難しい。UXは簡単だ。 ただ世間でいろいろなニュアンスが盛られて使われているよ
ユーザテスト×ヒートマップ＝「インサイト・ヒートマップ」で、驚きの課題発見力を実現！ | ユーザ視点をもっと間近に - ポップインサイト公式ブログ
以前、弊社ブログで「ヒートマップ」に関する記事を掲載しました。 「ヒートマップツールで分かること・分からないこと」 ヒートマップツールで「この要素が見られている」ことが分かったとします。しかし「なぜこの要素が見られているか」「その要素を見ることにより、購入に繋がるのか」ということまで知ることはできません。 上の記事にある通り、ユーザテストはヒートマップだけでは知ることのできない「なぜ見られているのか」を解き明かすカギとなります。まずは、ヒートマップだけの画像を見てみます。 さて、このヒートマップ画像を見て、どのようなことが読み取れるでしょうか？最も分かりやすいのは、 画面下部によく見られている部分がある ということです。セオリー通りヒートマップを利用すれば、この赤い部分をページ上部に持ってくる、という施策が考えられますが、果たしてそれで十分といえるでしょうか？ 「なぜ見られているか」「見ら
UIデザイン時の「ユーザーの使いづらい」には2パターンある。350万ダウンロードの家計簿アプリ「Zaim」が教える、UI改善の失敗談。 | アプリマーケティング研究所
UIデザイン時の「ユーザーの使いづらい」には2パターンある。350万ダウンロードの家計簿アプリ「Zaim」が教える、UI改善の失敗談。 今回は350万ダウンロード突破、家計簿アプリの「Zaim」さんにお話を伺いました。ユーザーが伸びたタイミングや、UI改善の失敗談など。 ※株式会社Zaim 代表取締役 閑歳 孝子さん。 「Zaim」の近況について 「Zaim」のユーザー数は今どのぐらいですか？ 閑歳： 2011年7月にリリースして、350万ダウンロードを超えています。OSで言うとiOSの方が多いですが、最近はAndroidも伸びています。今も広告費は使っていません。 今までに、ユーザーが大きく伸びたタイミングはありますか？ 閑歳： 去年はダウンロード数がグッと伸びた印象があります。2013年の終わり頃から、スマホをみんなが本当につかうようになって、すごく高齢者と若年層が増えました。 データ
ユーザーを補助するための「見せる」コンテンツ
語るより見せたほうが早い スマートフォンをはじめとしたタッチデバイスが世の出回って 5 年以上経つわけですが、タッチ & ジェスチャーをどうすれば良いのか分からないことがあります。アプリによって右スワイプというシンプルな動作のフィードバックが異なりますし、特殊なジェスチャーで機能へアクセスできるものもあります。分断化するジェスチャー操作は随分昔からの課題ですが、最近ではユーザーのオンボーディング体験を通じて、操作を学習してもらうといった対策がなされているところもあります。 特殊な操作をユーザーに学習してもらうには、どのような表現が適しているのでしょうか。 従来は明確なテキストや、スクリーンショットを通して説明することが多かったですが、最近では動画が使われる機会が増えています。OS X で関心したのが「システム環境設定」のなかにあるトラックパッドの設定画面です。通知センターや、辞書で調べると
言葉の言い回しでこんなにも変わる事例
なお、ズレの大きい言葉でしか表現されていない場合が問題であって、「お問い合わせ・ご相談」「登録・入会」のように企業側の言い回しとユーザ配慮の言葉の両方が併記して用いられていることで、よりわかりやすく表現できる場合もあります。 ユーザの行動手順に基づいていること 注意しなければならないのは、ユーザにとってわかりやすい表現というのは、ユーザが言葉の意味を理解できるようになってさえいれば良いというわけではありません。ユーザの行動手順に基づいているかまでを含めて考える必要があります。特にコンバージョンに結びつくボタンなどの場合はこれができているかできていないかが決定的なコンバージョン率の違いをうむことになります。 わかりやすい事例として、beBitさんのユーザビリティ実践メモに掲載されていた宿泊先を探して予約できる旅行サイトの事例を紹介します。 ラベリングが及ぼす影響 - 「予約」か「検索」か (
スマホサイトのパーツをことごとく網羅！「スマートフォンサイトUI図鑑」は是非手元においておくべき一冊
スマートフォンサイトを構築してて「このパーツなんて言う名前なのかな」「どうやって作るのかな」と言う瞬間は結構あるものです。 そんな悩める子羊を救う良著がKADOKAWA/アスキー・メディアワークスさんより発売されました。その名もCSS3&jQueryで作る スマートフォンサイトUI図鑑。 ありがたくも一冊ご恵贈頂きましたので、レビューしてみたいと思います。 いや、マジこの本オススメ。こう言う本、ほんとに欲しかったんです。 書籍の内容 何度もコピペして使いたい定番43パーツを厳選。 スマホサイトのUIの名前と使い方、ソースコードをまとめました。 「コーチマークってどんなUI?」「タイムラインってどうやって作るの?」 本書は、スマートフォンサイトの制作で欠かせないUIパーツの「名前がわからない」「使い方がわからない」「作り方がわからない」を解決する本です。 定番の43パーツを体系化して収録。豊
ユーザビリティを高める7つの基本テクニック
IROHA GRAND HOTEL 【いろはグランホテル松本駅前】コラボパートナーになってホテル... 詳細を見る
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
全エンジニア・全デザイナー必見！UI/UXを入門からマスターできるスライド資料25選 | iPhoneの神様
【永久保存版】エンジニア・デザイナー必見！「UI/UX」の基礎が学べるSlideshare30選
Webデザインの引き出しを増そう！細部までこだわったUIデザインが参考になるDribbbleアートワークのまとめ
