yytypescript/book

GPTsへの導線を作りませんか？

suin opened this issue · 6 comments

suin commented

概要

サバイバルTypeScriptのウェブサイトに、読者がChatGPTを用いた質問支援システム（GPTs）に簡単にアクセスできるような導線を設ける提案です。これはIssue #732で議論された、サバイバルTypeScriptのコンテンツについて質問できる特別なChatGPT GPTsを読者に提供するためのものです。

背景

  • Issue #732において、サバイバルTypeScriptの読者がコンテンツに関する質問をChatGPT GPTsを通じて行えるようなシステムが構築されました。
  • この新しいツールを読者に積極的に利用してもらうためには、サイト内での目立つ導線が必要です。

提案内容

  • サバイバルTypeScriptのウェブサイトのヘッダー部分に、GPTsへのリンクを追加します。
  • リンクには、認識しやすいアイコンを使用し、読者の注目を引きます。提案されたアイコンは、Lucideのbotアイコンです。
  • アイコンまたはリンクにマウスをホバーした際に、GPTsの簡単な説明がポップアップ表示されるようにすることで、読者がその機能を理解しやすくします。

導線のデザイン案

以下の図は、提案された導線をヘッダーにどのように配置するかの具体的なイメージです。

Frame 2

実現のための次のステップ

  1. デザインの承認：提案された導線のデザイン案についてチーム内で合意を得る。
  2. 実装：承認されたデザインに基づき、ウェブサイトのヘッダーに導線を追加する。
  3. テスト：変更を適用した後、ウェブサイト上での表示と機能を確認し、問題がないかテストする。

提案の目的

この提案は、サバイバルTypeScriptの読者が新たに追加されたChatGPT GPTsをより気軽に利用し、サイトのコンテンツに関する疑問や質問を解決できるようにすることを目的としています。また、この導線の追加により、ウェブサイトの利便性とユーザーエクスペリエンスが向上することが期待されます。

着手の可否について

本提案の実装に関しては、プルリクエストを作成することにオープンで、誰がやってもいいです。

suin commented

GPT Plusが必要な旨はボタン押す前にわかったほうがいいかもしれません

  • 👍2
t-yng commented

デザインは概要の提案された内容で違和感なかったです。
別ドメインへの遷移になるので、GitHubと同様に新規タブのアイコンを表示しておくと良いかもです🙋🏻‍♂️

t-yng commented

docsaurasが内部で利用しているinfimaのボタンデザインに従うなら、ボタンの角の丸みは弱めた方が良さそうでした。

image

ただ、提案されている角丸デザインの方が見た目的にはスッキリしていて違和感が無い感じがしております。
image

t-yng commented

説明はツールチップで出すとこんな感じになりますが、もう少しデザインした方がいいでしょうか？
image

ブラウザ標準だと表示までラグがあるので、自前でツールチップを出した方が良いかもです。

t-yng commented

決まったこと

  • ボタンはinfimaのボタンデザインに合わせる
  • レイアウトはdocusaurausのレイアウトに合わせる
  • ツールチップの表示は一旦title属性で対応する
  • モバイルでもデザイン崩れ起きないように調整