タグ

Tutorialとuxに関するko-ya-maのブックマーク (6)

  • 画面をデザインするということ - Qiita

    この記事は社内の勉強会で話した内容を再編したものです。 私自身はPC/ブラウザ/スマホのアプリ開発をしている1エンジニアにすぎないのですが、対客や要件定義から開発、運用、そしてUIのデザインを担当しており、自分なりに伝えられるものがないかと試みたものです。 デザインとは デザインとは単に見た目だけの話ではなく、「ビジネス」と「ユーザーが得る体験価値」から始まり、それを実データと結びつけながら人の認知を通してどう見せるのかという作業です。 始まりの部分は最近だとUXデザイナー、終わりの部分はUIデザイナーとかグラフィックデザイナーとか呼ばれるような人の仕事です。そしてそれらを形にするのがエンジニアです。 画面を設計するまでの作業 ギャレットのUX5段階モデルに従って、どういったことを考えないといけないのか確認します。 (実際にUX5段階モデルを意識して仕事してるわけではありませんが、何かしら

    画面をデザインするということ - Qiita
  • ページ内リンクの実装から考える、a要素のclickイベントとその振る舞い

    この他に macOSChrome では、ShiftキーとMetaキーを併用することで、新しいタブで開きつつそのタブをアクティブにすることができました。 CSS によるスムーズスクロール ページ内リンクをクリックしたときのスクロールを、アニメーションによってスムーズにしたいということはよくあります。これは CSS のscroll-behaviorプロパティを使えば非常に簡単に実装できます。 body { scroll-behavior: smooth; } たったこれだけの宣言で、JavaScript を一切用いることなく、ページ内リンクをクリックしたときのスクロールにアニメーションが伴うようになります。また、ページ内リンクのクリックだけでなく、可視領域外にある要素がフォーカスされたときや、ページ内検索に一致したテキストがハイライトされたときなど、スクロールが伴う場面すべてに適用されま

    ページ内リンクの実装から考える、a要素のclickイベントとその振る舞い
    ko-ya-ma
    ko-ya-ma 2018/10/26
    「おわりに」まで読みたい記事
  • [JS]Webアプリやページのツアーガイドを簡単に加えることができる軽量スクリプト -Shepherd

    Webアプリやページにツアーガイドを簡単に加えることができる軽量スクリプトを紹介します。以前に紹介した時から、v.2に大きくバージョンアップされました。 既存ページに加えるのも簡単で、柔軟なカスタマイズにも対応しています。 Shepherd Shepherd -GitHub Shepherdのデモ Shepherdの使い方 Shepherdのデモ デモでは実際にツアーガイドを操作できます。 デモページ ページを表示するとすぐにツアーガイドが表示され、「Next」をクリックすると次に進みます。パネルはそのステップごとに、最適な位置に表示されます。 ツアーガイドは途中で終わることもでき、終了すると通常の画面が表示されます。

    [JS]Webアプリやページのツアーガイドを簡単に加えることができる軽量スクリプト -Shepherd
    ko-ya-ma
    ko-ya-ma 2018/07/09
    簡単・モダン
  • 第2回 UX/UIデザインのプロセスと具体例 -UX編-

    UXデザインとは、アプリケーションを利用するユーザーの体験をデザインにすることです。一方、UIデザインは、ユーザーの体験を豊にするためにアプリケーションの画面をデザインすることです。それぞれ必要とされるスキルが異なるため、ここではあえて分けてご紹介したいと思います。 今回は、UXデザインについて紹介します。

    第2回 UX/UIデザインのプロセスと具体例 -UX編-
  • 社内のIA(情報アーキテクチャ)研修の講師をしてみた。:そのフォローアップ | future-proof.jp

    ちょっと前になりますが、自分が現在所属している会社の研修の一環で「情報アーキテクチャ」をテーマにした講座の講師を拝命して研修を行いました。 対象はおもに若手社員、というターゲットが設定されていて、講座は全3回となぜかきまっていました。 正直、3回もネタが持つかなー、と思ったり聴いてくれる人も中だるみ感がないようにしたいな、と思っていろいろ考えました。 考えた結果、講座は ・過去 ・現在 ・未来 の3軸に分けることにしました。 なぜ、そうしたかというと若手をターゲットにしていたので、若手に「Web業界でなぜIAが必要とされるようになってきたか」、を知ってほしいと思ったからでした。 それを知ることで、僕らが相手にしているクライアントさんがどういう課題意識を持って、僕らにご相談いただいているのか、プロジェクトを進める過程でどういう悩みを持って僕らと対峙しているのか、という部分を少しでもわか

  • デオシークの口コミや効果を検証!ワキガの私が使い込んでみました! | 愛と小町

    デオシークの特徴 加齢臭も撃退 強烈な足のニオイも撃退 ワキ、足など全身のニオイをシャットアウト デオシークは厚生労働省が認可した医薬部外品で、殺菌効果や消臭効果がきちんと認められた有効成分が配合されている商品です。 市販されているデオドラントクリームと比べると、医薬部外品は入っている成分が違いますので、消臭効果が高いです。 デオシークは、デオドラントクリーム単品でも消臭効果が期待できますが、ボディソープとのセットを使用することでさらなる消臭効果が期待できます。 ワキガや加齢臭などのような頑固な臭いによる悩みは深いですが、デオシークによって悩みから解放される人が増えています。 博士有効成分は消臭効果や殺菌効果が認められている成分なんだ 頑固な臭いはデオシークで一発なんだ もう怖くないんだ 価格 3,380円(定期コース) 6,980円(単品購入) 有効成分 パラフェノールスルホン酸亜鉛、イ

  • 1