GoogleのUXデザイナーがサイトをチャットボット化して学んだ9つのこと
Adrianは現在Googleでデザインをしているスイスのチューリッヒ出身のフリーランスUXデザイナー。Twitter：@azumbrunnen_。 私は数ヶ月前から自分のWebサイトをチャットボット化する実験を行いました。このひとときの間に多くのご意見を頂き、マスコミがニュースで紹介してくれたりもしました。公開24時間の間に300通あまりのメールも頂きました。たくさんの方々が私のWebサイトと会話してくれたようで、まずは本当にありがとうございます。 何人かの方が今回の施策に関してのインサイトに興味を持ってくれたので、その辺を少しお話していきたいと思います。今回はそもそも対話型、ということで少し語りかける風にいきたいと思います。 それでは、まいりましょう！ botなどの対話型トレンドに対する憂鬱 私の母は毎日お決まりのように「失敗を恐れていては何も始まらず、失敗を多く経験することで大きな武
より直感的な時間入力のUIを考える
UX Movementにおいて記者、編集長を務めます。明快で効果的なデザインに美点を見出し、利用者のために払う労力を惜しみません。 カレンダーなどでイベントやミーティングの予定を入れるとき、フォームに時間の入力をする作業が発生します。 しかし時間を選択するのは簡単な作業ではありません。ユーザーはセレクトメニューにある長いリストをスクロールしなくてはいけません。ある調査では、ユーザーがよくセレクトメニューで諦めることを証明しています（→ 当サイトのWebフォームの離脱を防ぐためには？も参照ください）。 今こそ時間を選択する際、セレクトメニューを取り外し、クロックウィジェットを使用する時が来たのです。 クロックウィジェットとは？ カレンダーウィジェットは既に日付を選択する方法として定着しています。ユーザーはカレンダーの動きに慣れているので、とても直感的です。クロックウィジェットも同様の効果をも
16種類（45カテゴリ）の業界150サイトの調査から分かるスマートフォンサイトUIの現状10選（スライド付）
2015年5月、スマートフォンによるGoogleの検索数がPCでの検索数を抜いたというニュースがGoogleの公式ブログで発表されました。昨今の私たちは多くの情報をスマートフォンで検索しています。その流れに伴って、現在は多くの企業がスマートフォン用に最適化されたWebサイトを持つようになりました。 我々Web制作者はこの流れの初頭、PCサイト制作で培ったノウハウを元に、手探り状態で制作していたのを記憶していますが、この数年の間で一定の制作ノウハウが蓄積されてきたように思います。 しかしデバイスが多様な進化を遂げる中で、スマートフォンサイトのUI作法も日々刻々と変化し続けています。私たちWeb制作者は一定のノウハウを使い回すことに固執せず、常に新しい動向を自分の目でキャッチして知識を刷新し、日々の業務にフィードバックさせる活動が大切です。 というわけで少々前置きが長くなりましたが、今回は昨今
Weex - アリババ製のモバイルUIフレームワーク
スマートフォン用にWebサイトであったり、ハイブリッドアプリを提供する際には専門のUIフレームワークが欠かせません。デスクトップWebブラウザ向けとは異なるUI/UXが求められるためです。しかしそういった実装は簡単ではありません。 そこでUIフレームワークが重宝します。今回はアリババ社が作ったWeexを紹介します。 Weexの使い方 Weexでは多くのショーケースが登録されています。 マインスイーパのようなゲーム、計算機、さらに各種アニメーションもサポートされています。一般的なハイブリッドアプリはもちろん、ユーティリティ的なツールも作れそうです。 WeexではJavaScriptやHTMLを一つにまとめたtemplateと呼ばれる単位で開発を行います。Webコンポーネント的な考え方なのかも知れません。その中でアニメーションを実行したり、ページ切り替えを行うといった仕組みです。 Weexはn
モバイルWebのUIを速くする基本テクニックがわかる──Google I/O 2016 High Performance Web UI
モバイルWebのUIを速くする基本テクニックがわかる──Google I/O 2016 High Performance Web UI 川田寛（ピクシブ株式会社） こんにちは、ふろしきです！ 私はHTML5 Experts.jpで、過去2年ほどGoogle I/Oの情報を発信し、Web技術の変化についてお伝えしてきました。振り返るとGoogleは、2014年にモバイルWebの提唱と技術要素の拡大を図り、2015年からは「RAIL（モバイルWebが目指すべきパフォーマンス指標）」や「Progressive Web Apps（アプリのように振る舞うWeb）」といった、モバイルとの親和性が高いWebを作り出すための”考え方”を推し進めました。今年2016年は、さらにそれを踏み込んでいったという感じがします。 今回のI/Oで取り上げるのもそのひとつ。毎度お馴染みGoogle Developer A
dribbbleのぬるぬる動くメニューUIのアイデア10選
アプリデザインにおけるUIのアニメーションは、いざ作るとなると「どう動かすか」などと考えてしまい、無難なものに落ち着きがちです。発想が小さくなっているなと感じたら、他の人の自由な発想を見てみるのもいいかもしれません。 そこで今回は、dribbbleにて公開されているメニューUIのアニメーションから10点ご紹介いたします。ぬるぬる動きまくるポートフォリオからインスピレーションを見いだせれば幸いです。 ※過剰で独りよがりなアニメーションはユーザー体験として不適切になりがちですので、きちんとTPOをわきまえたアニメーションを心がけましょう！ Animated sliding tab bar フッター部分を完全に非表示にさせつつも、折りたたまれていたかのように表示させるアニメーションです。ユーザーが混乱しないように予め操作方法を説明しておくといった配慮が必要になりますが、デザインとしては使いやすい
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネットグループ(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 日本のドメイン登録業者(レジストラ)（「ICANNがレジストラとして認定した企業」一覧（InterNIC提供）内に「Japan」の記載があるもの）を対象。 レジストラ「GMO Internet Group, Inc. d/b/a Onamae.com」のシェア値を集計。 2023年10月時点の調査。
UIデザイナーのおしごと // Speaker Deck
All slide content and descriptions are owned by their creators.
iOSアプリケーションの国際化と地域化 - クックパッド開発者ブログ
海外事業向けのiOSアプリケーション開発を担当している西山(@yuseinishiyama)です。クックパッドは現在、海外複数カ国に向けてサービスを展開しています。 海外事業向けのiOSアプリケーションは、英語、スペイン語、インドネシア語、タイ語、ベトナム語、アラビア語をサポートしています。今後、サポートする言語は更に増えていく予定です。 これまで、複数の言語に対応するための国際化(internationalization)と地域化(localization)を行ってきました。ここでは、その中で得た知見を以下の4つのパートに分けて共有したいと思います。 コンテンツとUIの言語の決定 RTL対応 翻訳フロー 翻訳に関するTips ちなみに、当該プロジェクトがサポートしているiOSバージョンはiOS8以上です。そのため、iOS9以降でしかサポートされない機能については触れません。 また、我々の
UIデザイナーに必要なのは、決定力のあるデザインを作る能力 | tsublog
最近、デザイナーに求められるスキルが多くて何を学べば良いかわからなくなってきた。と言う声を聞くようになってきた。 流行りの記事にいくつか目を通すと、デザイナーは「 経営者と対等に話せるコミュニケーション能力、ビジネスセンスを保有していて、イケてるグラフィックを作り、コードまでかけないといけない 」らしい。 スキルを多く保有している方が望ましいのは間違いない。 ただ、 現場デザイナー に最も大事なのは実装面での考慮事項が網羅されて考え込まれた「 決定力のあるデザイン 」を作る力だと思う。 サッカーで言うと、決定力は「 得点を決める能力 」として使われているけど、UIデザインにおいては「 実装面まで考慮された実装可能なデザインであるか 」という言葉として使っている。 魅せるデザインとフィージビリティが考慮されているデザインでは、かなり内容が異なってくるので、現場デザイナーとしては特にこのあたり
レスポンスが気持ちいいボタンのUIアニメーション10選
アプリやサイトなどのボタンや小さいディテールで、気持ちのいいアニメーションがあると目を引きます。 過剰なアニメーションはユーザーの目的の妨げになるので気をつけたいところですが、うまく活用すればユーザーはあなたのプロダクトをもっと触れたいと思う要素にも成り得ます。 とはいえ、いざこういったものを作るとなると、どう動かせばいいのかわからないものです。そこで今回はそんなアニメーションのインスピレーションとなるような、ボタンやローディングなどのデザイン案を集めてみました。 レスポンスのよいアニメーション10選 Open & Close by Creativedash Add & Remove by Ricky Boyce Open & Close & Smash by Chuan² Fun Buttons by Eddie Lobanovskiy (Unfold) Submit Button by
サイズ感とバランスが大事！ レスポンシブにおける分量とフォントサイズ
Laura Franz氏はマサチューセッツ大学ダートマス校の教授であり、大学院のウェブ・インタラクションデザイン学科のコースで、ウェブタイポグラフィーなどの様々なクラスで教鞭をとっています。 レスポンシブなウェブデザインを洗練する中で、私たちは分量（＝行の長さ）と、人の読み方の関係性を重視してきました。 「理想的な分量」を考えるのが当たり前になったことにより、「大きい画面にはフォントサイズを大きく、そして小さい画面にはフォントサイズを小さくする」といったことが推奨されるようになりました。確かに、適切な分量はユーザーの閲覧体験を向上させますが、それは優れたタイポグラフィーに対する規則の１つでしかありません。もう１つの規則は、適切なフォントサイズを維持することです。 人はどのように読むのか 人は、求めている情報を探したり、新しいアイデアを見つけたり、あるいは自分の考え方を確認したりと、様々なニ
Rebass - Reactで使えるUIコンポーネント集
ユーザ向けに使うライブラリを使いたいと思うかどうかは、UIが優れているかどうかに大きく左右されます。特にBootstrapが出てきてから、その傾向が強くなっているように感じます。 今回はReactと組み合わせて使うUIライブラリRebassを紹介します。実に57種類（執筆時点）もある、UIライブラリです。 Rebassの使い方 スクリーンショットを多めに、主立ったUIコンポーネントを紹介します。まずはアロー。 アバター。 ラベル。 ブロック。 引用。 パンくず。 ボタン。 丸形ボタン。 ドーナッツ型。 YouTubeの埋め込み。 フォームもあります。インプット。 パネル。 プログレスバー。 レーティング。 ウィザード風に。 スイッチ。 テーブル。 ツールチップ。 Rebassはこの他にもたくさんのUIコンポーネントが揃っています。これだけあれば、Webサイトを自由に作成できることでしょう。
もう保守されない画面遷移図は嫌なので、UI Flow図を簡単にマークダウンぽく書くエディタ作った - Qiita
はじめに Webサービスやアプリを企画したり、立ち上げたりする際にプロトタイピングツールや、ExcelやPowerpoint、Illustraterなどを駆使した謎のファイルで画面遷移図を描くことがある。 こういう図を元に仕様を決めて行って、サービスを作っていくのは以下の点で困る。 画面遷移図が保守されない。 書くのが非常に面倒くさい ユーザーのモチベーションの流れが追いづらく、見た目ばかりに注目してしまうものになりがち マシンリーダブル(ソフトウェアで構造を取り出せない)でない。 このような欠点があってどうにも扱いづらい。 そんなわけで、markdown風のテキストから簡単に画面遷移図を描けないかなとコンパイラを作成し、次にそれをインタラクティブに編集できるエディタを作成した。 UI Flows図について 画面遷移図的なものを書く際に、僕が個人的につかっていた表現方法として、UI Flo
UX Design for Mobile: Bottom Navigation
Designers know that design is more than good looks. “The design is how it works” (Steve Jobs) Product experience is just like a conversation and navigation plays an important part in this conversation. Unable to navigate in the app feels similar to unable to find the right words in your conversation. That’s why today we will explore one of the most efficient ways of creating good mobile navigation
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://ui.trinine.net/sample-page/
http://post.simplie.jp/posts/23
Loading...
HugeDomains.com
Collect UI
