長友ひより/MyNote の履歴(No.2) - ソーシャルデザイン学科

AIを使ったWebサイト制作について

長友ひより/情報デザイン演習IIA_01

「Camera Roll to Vlog - 写真フォルダからはじめる動画編集」

出力されたもの
⇓

「Camera Roll to Vlog」Webサイト画面構成案（ワイヤーフレーム設計）

1. 全体レイアウト構造
PCでの動画編集作業（Premiere Pro）と並行して閲覧されることを想定し、画面の現在地とサポート機能を常時表示できる「2カラム（左右分割）構造」を採用する。

2. 各エリアの詳細構成
① ヘッダーエリア（全ページ共通）
ユーザーが迷ったときや、特定のツールを探したいときにいつでもアクセスできる要素を配置。

② メインエリア（左側：コンテンツ表示部）
「文字ベースで自分のペースで学べる」を体現する、直感的で視覚的なレイアウト。

レッスンの見出し（例：「2-2. タイムラインに写真を並べてみよう」）
リード文：このレッスンで何ができるようになるかを1行で説明。
ステップ式解説（テキスト＋画像・動画）
- 1.　テキスト手順：専門用語を排した、短く簡潔な説明文。
- 2.　5秒ループ動画（GIF等）：マウスポインタの動きやドラッグ＆ドロップの操作だけを繰り返すミニ動画。
- 3.　補足用スクリーン画面：Premiere Proの実際の画面キャプチャ（注目箇所を赤枠で強調）。
- 4.　初心者向けキーボード・カード：文章内に「キーボードの C を押す」といった視覚的な装飾を配置。
アレンジのヒント（コラム枠）：プレミアならではの自由度を伝える、少し凝った演出の紹介。
ページ移動ボタン：「◀ 前のレッスンへ」 / 「次のレッスンへ ▶」

③ 右サイドバーエリア（全ページ共通・スクロール追従型）
初心者の「心が折れる」のを防ぎ、現在地を常に迷わせないためのナビゲーション。

【最上部】進捗インジケーター（プログレスバー）
- 現在の全体の達成度をパーセンテージとメーターで視覚化（例：「現在：35%完了 [=======>---------]」）。
【中央部】追従型（スティッキー）コース目次
- 全6章のツリー構造を表示。
- 現在閲覧しているレッスンをハイライト（太字・カラー変更）し、完了したレッスンにはチェックマーク（✓）を付与。
【下部】困ったときのレスキュー（お悩み解決ショートカット）
- 初心者がパニックになりやすいトラブルへの直通リンク。
- 項目例：「画面が消えた！」「音が鳴らない！」「プレビューがカクつく！」

3. レスポンシブ（スマホ・タブレット対応）時の挙動
ターゲットがPC1台しか持っておらず、ブラウザの画面幅を狭くして「動画編集ソフトと横並び」に配置した場合、または「スマホでサイトを見ながらPCで作業する」場合を考慮した設計。

画面幅が狭くなった場合（タブレット・スマホサイズ）：
- 右サイドバーは自動的に「画面最下部」に回り込む、もしくは「ハンバーガーメニュー（三本線ボタン）」の中に格納される。
- これにより、メインのテキスト解説が横潰れせず、十分な可読性を保てるようにする。

DiscordのBotについて

長友ひより/情報デザイン研究I