アプリUIの隠された「ジェスチャー」をユーザーに伝えるには？
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 ジェスチャーとはユーザーがアプリを使用するときに用いる指の小さな動作のことです。タッチインターフェースはタップやスワイプ、ピンチなどのジェスチャーで操作を行いますが、そういったインタラクションはGUIの操作部分とは違って隠れてしまっていることが多いです。したがって、ユーザーに知識があり、そこにジェスチャーが存在していることに気付いてもらえない限り、試してもらうことができません。 では、目に見えないジェスチャーをどうすればうまく取り入れることができるのでしょうか？ これらを認知させるため、いくつかのビジュアルインタラクションデザインのテクニックがあるので、紹介していこうと思います。 オンボーディングの間に行うチュートリアルとウォークスルー ジェスチャー主体のアプリ
HTML5 + JavaScriptによるFormバリデーション ~マークアップ編~ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのいなばです。 最近何件かフォームのバリデーションの実装について相談される機会が続いたので、 社内勉強会の資料を作ったついでに記事にもしてみました。 今回は、大きく分けて下記2点を満たすフォームを作ってみたいと思います。 不正な入力値のとき、エラー内容がリアルタイムに表示される 各項目の入力内容により、送信ボタンの非活性化 / 活性化が切り替わる 最近では当たり前になりつつある、エラーの内容がその場で確認できて、項目のバリデーションがすべて通らないと送信ボタンが押せないフォームです。 基本方針 HTML/CSSでできることはHTML/CSSでやる HTMLでできないことをJavaScriptでカバーする HTML5からフォームのバリデーションに関する機能が拡張されたため、使えるものは使ってなるべく楽に実装することを目指します。 フォームを構成する要素 ざ
WordPressをここ2,3年触っていない人も要チェック！PHPの知識がゼロでもテーマを作成・カスタマイズしたい人にオススメの解説書
WordPressはPHPの知識無しでも利用できますが、ちょっとしたカスタマイズをする際、テーマのカスタマイズ、テンプレートファイル、テンプレートタグ、子テーマを使った拡張、function.phpの設定など、PHPは避けて通れません。 WordPressのテーマづくりに必要なPHPの使い方が初心者でもやさしく学べるオススメの本を紹介します。 ここ2, 3年触っていない人も、けっこう変化しているので要チェックです。 本書はHTMLやCSSはひととおり分かるけど、PHPが苦手という人を対象にしたものです。WordPressをカスタマイズできるようにPHPの知識がゼロでもテーマを作成・カスタマイズしたい人にぴったりな一冊です。
Photoshop作業を爆速に！便利すぎる無料ツール、拡張機能、素材あつめました。
デザインの現場に欠かせない Photoshop（フォトショップ）は、みなさんが考えている以上に自分好みに拡張、カスタマイズすることができます。 効率的にカスタマイズする方法として、独立したプログラムとしてPhotoshopをより効果的にサポートする「拡張プラグイン」や、あらかじめ定義しておいた操作をボタンひとつで再生できる「アクション」、独自のコントロールパネルで機能を提供する「パネル」の利用が挙げられます。これらを利用することで、Photoshopをより強力なツールに拡張できます。 今回は、Photoshop作業を爆速にする、無料ダウンロードできる拡張プラグインやアクション、パネル、フィルタ素材などをまとめてご紹介します。より快適なフォトショップライフを目指しませんか。 Photoshopってすごい！作業効率をアップする拡張機能・プラグインまとめ プロ級の写真加工がボタンひとつ！良質Ph
Mastodon インスタンスの画像や動画の保存先をクラウドストレージ （Amazon S3） に移行した話
Mastodon インスタンスが取得する画像や動画の保存先を外部サーバに変更して自分のサーバのストレージ消費を抑えた話。Mastodon がデフォルトで対応している Amazon S3 に画像や動画が保存されるように設定した際の手順をまとめます。 日本で話題になってから 1週間も経たないうちに一部では大盛り上がりの Mastodon （マストドン）。 私も先週末に早速いじってみて、さくらの VPS に自分専用 Mastodon （マストドン） インスタンスを立てた話をこの Blog で書きました。 さくらの VPS + CentOS7 で 俺専用 Mastodon インスタンスを立ててみた話 mastodon.burnworks.com Mastodon インスタンス立ててみてちょっと気になっていたのが、Mastodon はインスタンスに登録されているユーザーがアップロードした画像や動画フ
来館者数200%UP！サンパウロ州立美術館、人工知能によるガイドサービスをローンチ | PR EDGE
Case: The Voice of Art 2010年に行われた調査によると、「機会がないから」「敷居が高いから」といった理由で、ブラジル人のおよそ7割もの人が美術館を一度も訪れたことが無いといいます。 そんな中人々にもっと美術館に親しんでもらおうと、ブラジルのIBMが人工知能『Watson』を活用し、サンパウロ州立美術館におけるガイドサービスを開発しました。 これは館内に展示されている作品について、歴史、新聞記事、作者の自伝、社会で起こったこととの関連性などの情報を6ヶ月間かけてWatsonに学習させ、来館者からの様々な質問に答えられるようにするという取り組み。 美術館や観光地などでよくある音声案内とは異なり、人々の疑問・質問にその場で答えるインタラクティブな仕掛けが特徴です。 利用者は入り口で貸し出されるスマホとヘッドフォンを使い、気になる作品についてWatsonに自由に問いかけるこ
ステップ式のウィザードを実装できるjQueryプラグイン「jquery-steps」 – bl6.jp
jquery-stepsは、ステップ式のウィザードを実装することができるシンプルで軽量なjQueryプラグインです。ステップごとに内容を進めていくことができるので、ユーザーにとってはとてもわかりやすいのがいいですね。 jquery-stepsの実際のデモページは以下になります。 デモ デモページでは、Step 1〜Step 3まであるサンプルが設置されています。「Next」ボタンをクリックすると、Stepが進んで行く仕組みです。また、直接「Step」の部分をクリックしても、そのStepの内容に行くことができます。 Step 1を選んでいる場合は「Next」ボタンしか表示されていませんが、Step 2では「Next」ボタンの他に「Previous」ボタンも表示されます。前のステップに戻りたい場合は「Previous」ボタンからすぐに戻ることができます。 最後のStep 3では「Previou
UXデザインにマズローの欲求階層説は有効なのか
ユーザーは、自分のウォンツよりもニーズを満たす製品を選ぶ傾向にあることが立証されています。Abraham Maslow氏は人間の欲求についての理解を深め、それがどのように満たされるのか研究しました。デザインの文脈においても、マズローの欲求階層説を活用することで、ユーザーのウォンツよりもニーズを満たす、より効果的なUXを提供することができます。 ユーザーにあなたの製品を受け入れてもらいたければ、受け入れてくれるように動機づける必要があります。アメリカの心理学者、Abraham Maslow氏は、人間のモチベーションに関する研究で知られています。1943年、Maslow氏は論文『人間のモチベーションに関する理論』を発表しました。論文の中で、彼は人間の欲求について自身の解釈を明らかにし、欲求がもっとも基本的なものからもっとも複雑なものへと、階層を形成していることを提唱しました。 彼は、人間が満足
無料でもできる？おすすめABテストツールを徹底比較
ABテストツールとは？ ABテストツールは、サイトに訪れたユーザーを均等に配分し、表示するものを切り分けるツールです。例えば、ツールを使うとAグループには「ぶどう」の画像を表示し、Bグループには「みかん」の画像を表示し、どちらがよくクリックされるか判断することができます。 別名では「スプリットテスト、スプリットランテスト」とも呼ばれていますが国内ではほとんどABテストツールと言う呼び名で浸透しています。 2種類だけでなく、様々なパターンを組み合わせて行うテストを「多変量のテスト」と呼んだりもします。 使い方としては、画像だけではなくタイトルタグを変更したり、文章を変更したり、サイトのデザイン自体をガラリと変えたり、サイト内であればどの部分でもABテストすることが可能です。 ABテストツールのメリット・デメリット ABテストは、すベてに置いて万能なツールとは言えません。海外では、数値データで
エンジニア4年目がエンジニアを語ってみた。 | ネクストページブログ
HOMEブログエンジニア4年目がエンジニアを語ってみた。 | ネクストページブログ こんにちは、アンドレです。 気付けばまた1年が過ぎ、今年でエンジニア4年目となりました。 そしてこの1年で、エンジニアとはどうあるべきか、度々考えることがありました。 今回は、新たにエンジニアを目指す人に向けて、また自戒の念も込めて、僕なりのエンジニア像を語ってみたいと思います。 エンジニアとは… 考える・こだわりを持つ ウェブエンジニアの仕事は、基本的にはデザインをHTML・CSSで再現し、必要な機能を実装することです。 しかし、それは最低限の仕事であり、真にエンジニアというなら、パフォーマンスや保守性なども考慮しながらコードを書く必要があります。 具体的には、前者は、サーバーリクエストを少なくなるようにしたり、関数の呼び出しを最低限にするなど。 後者は、コードに一貫性を持たせたり（命名規則等）、コード（
ウェブデザインにおけるハンバーガーボタンについて考える「Analyzing the Hamburger Menu in Web Design」
TOP > WebDesign > ウェブデザインにおけるハンバーガーボタンについて考える「Analyzing the Hamburger Menu in Web Design」 スマートフォンのメニューデザインの定番と言っても過言ではないハンバーガーボタン。当たり前のように利用されていますが、今回はそんなハンバーガーボタンに関して分析をした考察「Analyzing the Hamburger Menu in Web Design」をご紹介したいと思います。 メニューアイコンとしてなくてはならない存在になっていますが、その反面でハンバーガーボタンのデメリットを考え提唱している、奥深い考察です。 詳しくは以下 一目でここにメニューがあるとわかる便利なミニマムデザインであるハンバーガーボタンですが、実は幾つかのデメリットを併せ持っています。まず1つ目が、サイトの機能を全てハンバーガーボ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
