ONE STYLE MEMBERS ／ MOCK

会員サイト「レイアウト・機能整理の改修」モック

運営の改修依頼に沿って作った、触れる試作です。同じ機能・同じ架空データで、見た目と使い勝手の方向が違う3パターンを用意しました。どのページでも、上の帯の「パターン 1・2・3」で同じ画面のまま切り替えられます。表示されている名前・投稿・予定はすべて架空で、押しても何も送られません。

ログイン後の画面から試す（マイページ）

実際のサイトでは、ログインするとマイページが最初に開きます。マイページから、チャット・講座・課題・予定へ進めます。まずはここから触ってみてください。

パターン1　マイページ →パターン2　マイページ →パターン3　マイページ →

上の帯の「受講生として見る｜運営として見る」で、見る立場を切り替えられます。運営として見ると、辻さん（講師）の画面になり、チャットの部屋が多く、あなた宛ての未読も多く、「管理画面へ」が出ます。

迷ったら、パターン1（今のサイトの雰囲気のまま）がおすすめです。
見方：3つのパターン（見た目の方向）×チャットのスマホ2案（案A＝下のメニュー／案B＝左上の三本線）です。スマホは、各パターンの「チャット（スマホ案A／案B）」で2案を並べて比べられます。

PATTERN 1

上品・ゆったり

今の One Style の見た目そのまま。余白を多めにとり、見出しは明朝、一覧の行間もゆったり。左メニューの「チャットルーム」は開いたり閉じたりできます（開いている間は、いちばん上に出ます）。

マイページ（ログイン後）→チャット（パソコン）→チャット（スマホ案A／案B）→

PATTERN 2

仕事向け・すっきり（Chatwork寄り）

毎日たくさん返信する運営向け。一覧は1行に「名前・最終発言・時刻・件数」で詰め、本文はゴシック中心で密度高め。あなた宛ての未読は緑の見出し帯と濃い地で強く示します。左メニューの一覧は、はじめから開いた状態で、パターン1・3と同じく閉じることもできます。

マイページ（ログイン後）→チャット（パソコン）→チャット（スマホ案A／案B）→

PATTERN 3

やわらかい・カード（ラフ寄り）

運営のラフに寄せた形。一覧もメッセージも淡い地の上の角丸カードにし、ボタンは丸く大きめ。スマホで指で押しやすいことを優先しています。

マイページ（ログイン後）→チャット（パソコン）→チャット（スマホ案A／案B）→

見方のヒント：チャットの一覧の並びは「あなた宛ての未読（緑） → AIアシスタント → ピン留め → ほか」です。緑の数字がその部屋の「あなた宛て」の件数で、「ほか2」はあなた宛てではない未読です。「未読だけ表示」で絞れます。会話の赤い線が「ここから未読」、薄い緑の地が未読の投稿です。ホーム・タスクのメニューは無くし、マイページに集めています（タスクは「やること」に出ます）。
仮置きの点：「課題・添削」の添削の受け取り方は相談中のため、今は仮置きの表示です。講座の課題は、コンテンツの各回から提出する形にしています。
キーボードでも操作できます（Tab で移動、Enter で決定、Esc で概要パネル・メニューを閉じる、入力欄で ⌘／Ctrl＋Enter で送信）。