1. /
  2. /
  3. /
  4. ほぼテク9月4日ChatGPTでUX研究所？説明が難しいUXデザインでよく使用する心理学を体験できるページをデザイン！？
ビジネス

ほぼテク9月4日ChatGPTでUX研究所？説明が難しいUXデザインでよく使用する心理学を体験できるページをデザイン！？

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
  • 0
ほぼテク読者の皆様、いつも大変ありがとうございます！
我妻裕太です。

GPTに関する連続投稿約133日目です！
本日のテーマはこちらです！

口で説明するのがなかなか難しい UX（ユーザーエクスペリエンス）デザインでよく使用する心理学を体験できるページをデザイン！？


大分長い見出しになりましたが、そのままの話です！

UX（ユーザーエクスペリエンス）デザイン時に心理学を適用しながら心地よいデザインとは？を考えていくことが多いのですが、その時に周りにこういう所が心地良いんですと伝えるのがなかなか難しい時があります。

せっかく良い手法やアイディアがあってもそれを関係者に上手く伝えられずにお蔵入りすることもみなさんあるのではないでしょうか。

私はたまにそれで諦めてしまうこともあります・・・(汗)

諦めてしまうのであれば！もう答えは簡単！

そう！大好きChatGPT！

ChatGPTの英知は様々なところで応用が可能です。特にデザインの部分でも有効です。Webページのデザインから心理学まで幅広くアイディアや回答を出してくれます。

今回はChatGPTに心理学を体験できるWebページを作ってもらいましょう！
それではどうぞ！

フィッツの法則を体験！シンプルなデモで UX（ユーザーエクスペリエンス）デザインの基本を理解しよう


UX（ユーザーエクスペリエンス）デザインは、ユーザーが製品やサービスを使いやすく、満足度を高めるための設計手法です。その中で重要なのが、ユーザーが目標に到達するまでの「効率」と「快適さ」です。今回は、この点にフォーカスを当て、フィッツの法則を用いたシンプルなデモで UX（ユーザーエクスペリエンス）デザインの基本を体験していただきます。

フィッツの法則とは？
フィッツの法則は、人が物理的なターゲットに到達するための時間が、その距離とサイズによって変わるという法則です。この法則は、ボタンの大きさ、テキストリンクの範囲、スクロールの速度など、多くのUI（ユーザーインターフェイス）設計に応用されています。

デモの紹介
今回のデモは、ウェブページ上でランダムに配置される「ターゲット」をクリックするものです。このターゲットは、クリックするたびに新しい位置とサイズで出現します。

体験できること
ターゲットが大きいと、クリックがしやすい。
ターゲットが近いと、クリックが速くできる。
これらはフィッツの法則に基づいています。この体験を通して、 UX（ユーザーエクスペリエンス）デザインの基本的な要素を実感できます。

オシャレなデザインについて
このデモは、使い心地を考慮し、オシャレなデザインで構築されています。背景には穏やかな色を使用し、ターゲットも鮮やかな色で目立たせています。さらに、ターゲットのサイズが変更される際にはスムーズなアニメーションが追加されています。

これを体験するためのWebページを作成するプロンプトはこちらです。

【プロンプト】
あなたは優秀なUXデザイナーです。
フィッツの法則を体験することができるHTMLを作成してください。
その際に生成したHTMLはどのようなことが体験できるのか具体的な説明も交えて解説をお願いします。
HTMLは使っていて楽しいと思えるようなオシャレなデザインでお願いします。


回答はこちらです↓



【生成したテキスト】

私は直接コードを実行することはできませんが、フィッツの法則を体験できるHTMLのサンプルコードと、その説明を提供できます。

HTML + CSS + JavaScriptのサンプルコード

<!DOCTYPE html>
<html lang=”ja”>
<head>
  <meta charset=”UTF-8″>
  <title>フィッツの法則デモ</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f0f0;
      margin: 0;
      padding: 0;
    }
    .container {
      max-width: 800px;
      margin: auto;
      text-align: center;
      padding: 20px;
    }
    .target {
      width: 50px;
      height: 50px;
      background-color: #3498db;
      position: absolute;
      cursor: pointer;
      transition: all 0.3s ease;
    }
  </style>
</head>
<body>
  <div class=”container”>
    <h1>フィッツの法則デモ</h1>
    <div id=”target” class=”target”></div>
  </div>
  <script>
    const target = document.getElementById(‘target’);
    target.addEventListener(‘click’, function() {
      const x = Math.floor(Math.random() * window.innerWidth);
      const y = Math.floor(Math.random() * window.innerHeight);
      target.style.left = `${x}px`;
      target.style.top = `${y}px`;
      target.style.width = `${Math.random() * 100 + 30}px`;
      target.style.height = `${Math.random() * 100 + 30}px`;
    });
  </script>
</body>
</html>


体験できることと説明
このデモでは、青い四角形（ターゲット）がランダムな位置とサイズで表示されます。このターゲットをクリックすると、新しいランダムな位置とサイズで再び表示されます。

フィッツの法則によれば、ターゲットのサイズと距離に応じて、ターゲットに到達するための時間が決まるとされています。このデモを使って、ターゲットが大きいほど、または近いほどクリックしやすいという体験を得られます。

オシャレなデザインとして、背景色やフォント、ターゲットの色などが設定されています。また、ターゲットのサイズが変更される際のトランジションも追加しています。

このような体験を通じて、フィッツの法則がどのようにユーザーインターフェイスに影響を与えるかを実感できます。

—————————————————————-

おぉーーーー今日も安定のHTML生成ですね。
素晴らしいです。

さらに生成したページを画面で開いて動作させていますが、確かに心地よさと心地よくないを体験することができます！
ずーッとやっているとより遠く離れたものや小さいものが出てきたときの残念な感じと押したくない気持ちが凄い満載になりますね！

体験できてこそ初めてその意味が分かるので、これはいいですね。
またしても良いChatGPTの使い方ができました(^^)/

こういったHTMLを生成するのも結構大変ですが、ChatGPTであれば瞬時に出してくれるのでかなり効率化しながら相手に良さを体験してもらえるのはいいですね。

まとめ


っということでいかがでしたでしょうか。

本日はなかなか伝えづらい心理学を体験できるWebページをデザインしてみました。
他にも様々な心理学があるので、次回はまた違うものを体験できるWebページを生成できればと思います！

生成AIがデザインや心理学に与えるポジティブな影響は大きいですね。
よりUXについて深化することができそうです。

本日の記事がみなさまの何かのヒントになれば幸いです。

今回も最後までお読みいただき、ありがとうございました。
それでは、また次回のほぼテクでお会いしましょう！

SRA東北の我妻裕太でした。
さようなら！

原稿執筆
株式会社SRA東北ビジネス・ディベロップメント
チーフ・ディレクター 我妻裕太

バックナンバー

ほぼテク9月1日ChatGPTで社内イベント企画？社内イベントで催すアトラクションを聞いてみた！

ほぼテク8月31日久しぶりの開催！社内イベント誕生会を開催しました！もちろんおつまみはChatGPTが考案！

ほぼテク8月28日コロナ以前のイベントより上を目指そう！？ChatGPTと社内イベント企画？お酒とおつまみ何がいいか聞いてみました！

ほぼテク8月25日ChatGPTの限界に挑戦！約63言語一括翻訳できたので、ここらへんで一旦やめようかと思いますの巻！

ほぼテク8月24日ChatGPTの限界に挑戦！50言語一括翻訳の実験！

ほぼテク8月22日言語の壁を一気に打破！ChatGPTによる多言語翻訳34言語に挑戦！

ほぼテク8月21日バスケットボールW杯応援企画？今回は日本語を参加国20言語に翻訳してみました！

ほぼテク8月18日言語の壁を一気に打破！ChatGPTによる多言語翻訳の革新！？

ほぼテク8月10日ITセキュリティの新時代？ChatGPTによるシステム異常の自動検出！？

ほぼテク8月8日GPT-4で「文章の中の大事な単語を拾いだす」テキストデータから宝を見つける究極のガイド？医療情報分析における固有名詞抽出の可能性！

ほぼテク8月7日ChatGPTで「文章の中の大事な単語を拾いだす」テキストデータから宝を見つける究極のガイド？医療情報分析における固有名詞抽出の可能性！

ほぼテク8月4日動画の字幕をGPTと一緒にクリエイティブしてみました！

ほぼテク8月1日GPTのライバルになるか？満を持して登場のMetaのLlama2で日本語が得意か実験してみました！

ほぼテク 7月31日ChatGPTで夏真っ盛り！夏の行楽シーズンの旅行計画をChatGPTと考えてみた！地元宮城県はどこまで計画してくれるか試してみた編！？

ほぼテク 7月28日ChatGPTで夏真っ盛り！夏の行楽シーズンの旅行計画をChatGPTと考えてみた！くせになって国内でも旅行計画GPT-4の福岡編！

ほぼテク 7月27日ChatGPTで夏真っ盛り！夏の行楽シーズンの旅行計画をChatGPTと考えてみた！くせになって国内でも旅行計画GPT-4の福岡編！

ほぼテク 7月25日ChatGPTで夏真っ盛り！夏の行楽シーズンの旅行計画をChatGPTと考えてみた！GPT-3.5のロンドン編！

ほぼテク 7月24日ChatGPTで「文章の中の大事な単語を拾いだす」テキストデータから宝を見つける究極のガイド？研究者ネットワーク編！

ほぼテク 7月21日GPTのライバルになるか？ついに登場IBM WatsonからLLMが登場！その名もwatsonx！

ほぼテク 7月20日GPTと創る新しいビジネス体験の世界へ！Bing Chat EnterpriseとMicrosoft 365 Copilotの進化！

ほぼテク 7月18日ChatGPTで「文章の中の大事な単語を拾いだす」テキストデータから宝を見つける究極のガイド？論文から引用解析編！

ほぼテク 7月14日ChatGPTで「文章の中の大事な単語を拾いだす」テキストデータから宝を見つける究極のガイド？論文から専門用語と概念抽出！

ほぼテク 7月13日ChatGPTで「文章の中の大事な単語を拾いだす」テキストデータから宝を見つける究極のガイド？論文メタデータ編！

ほぼテク 7月11日ChatGPTで「文章の中の大事な単語を拾いだす」テキストデータから宝を見つける究極のガイド？レシピ開発編！

ほぼテク 7月10日ChatGPTで「文章の中の大事な単語を拾いだす」テキストデータから宝を見つける究極のガイド？スケジュール管理編！

ほぼテク 7月7日AIで「文章の中の大事な単語を拾いだす」テキストデータから宝を見つける究極のガイド？マーケット調査編！

ほぼテク 7月6日ChatGPTで「文章の中の大事な単語を拾いだす」テキストデータから宝を見つける究極のガイド？契約書編！

ほぼテク 7月4日ChatGPTで「文章の中の大事な単語を拾いだす」テキストデータから宝を見つける究極のガイド？ニュース記事の分析編！

ほぼテク 7月3日ChatGPTで「文章の中の大事な単語を拾いだす」テキストデータから宝を見つける究極のガイド？カスタマーサービス編！

ほぼテク 6月30日ChatGPTと固有表現抽出！テキストデータから宝を見つける究極のガイド？SNSマーケティング編！

ほぼテク 6月29日ChatGPTと固有表現抽出！テキストデータから宝を見つける究極のガイド？

ほぼテク 6月27日GPT活用で時短！議事録作成の革新的な効率化テクニック②GPT、Bardで議事録作成！

ほぼテク 6月26日GPT活用で時短！議事録作成の革新的な効率化テクニック①GPTによる架空の議事録生成実験

ほぼテク 6月23日GPTはメールの緊急度はチェックできるのか実験をしました！

ほぼテク 6月22日GPTと自社データをシームレスに結びつける新サービス「Azure OpenAI Service On Your Data」公開プレビュー！を徹底解説！

ほぼテク 6月20日メールをチェックするのはあなたとChatGPT！

ほぼテク 6月19日ChatGPTのリアル活用事例を参考にシステム開発の目線で仕組みを考えてみました！

ほぼテク 6月16日GPT-4！テクノロジーの進化と新たな可能性

ほぼテク 6月15日ChatGPTがさらにパワーアップ！新モデルと機能のリリース情報？

ほぼテク 6月13日大好きChatGPT！全知全能の神様ではない、その真実に迫る？

ほぼテク 6月12日ChatGPTの言語理解力を革新する「大規模言語モデル」を徹底解説？

ほぼテク 6月9日AIを活用した業務効率化！ChatGPTでのタスク管理と優先順位付け？

ほぼテク 6月8日AIとメールの融合？ChatGPTを活用したメール作成術！

ほぼテク 6月6日AIと英語学習の融合？ChatGPTの有効活用法！

ほぼテク 6月5日ChatGPTで金融業でのAI活用？クライアント情報の間違いを探し出す

ほぼテク 6月2日AIの進化とレシピ生成の競争：ChatGPT「GPT-3.5」対「GPT-4」対Google Bard

ほぼテク 6月1日新3大AI！ChatGPT or Google Bard比較パート⑥（一番上手そうなレシピを生成してくれるのはどれか？Google Bard編）

ほぼテク 5月30日新3大AI！ChatGPT or Google Bard比較パート⑤（一番上手そうなレシピを生成してくれるのはどれか？GPT-4編）

5月29日新3大AI！ChatGPT or Google Bard比較パート④（一番上手そうなレシピを生成してくれるのはどれか？GPT-3.5編）

5月26日新3大AI！ChatGPT or Google Bard比較パート③（だれが回答を出す際の音速の貴公子か？）

5月25日ChatGPT or Google Bard比較パート②（生成AIに最新情報は取得できるか）

5月23日(ChatGPT or Google Bard)

5月22日(ChatGPTを自社Webサイトに組み込むには？ )

5月19日(ChatGPTを自社システム・自社サービスに組み込むには？ )

5月18日(SRA東北版ChatGPT誕生しました？ )

5月16日(ChatGPT? OR SRA東北?まとめ ) 

5月15日(ChatGPTと過ごした3日間？AI・人工知能EXPO出展報告、ChatGPT対応ソリューション多数ございます！)

5月11日(宇宙ビジネスをより注力します！)

5月10日(ChatGPTとSRA東北の比較？)

5月9日(特定型AI（Narrow AI）とは)

5月8日(日本最大級のイベントAI・人工知能EXPO) 

5月2日(スケール則（scaling law）：極めて重要な法則)

5月1日(ChatGPTの背景と開発目的、特徴、留意事項)

4月28日(ChatGPTを開発しているOpenAI社とは？)

4月27日(ChatGPT? OR SRA東北?)

 
  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る