実技 2025.11.3

授業内容

• デザインラフ制作に向けて
• XD実践
• 課題制作

習得内容

• デザインラフ制作に向けて

■制作のポイント
実務ではデザインラフの制作はお客様と、多くのやり取りが必要になる。デザインは必ず複数パターンの提案（最低2パターン）をして、お客様とのイメージの共有を具現化して行けるよう進めよう。

• XD実践

■「Adobe XD」とは？
WEBサイト制作は、いざとなれば「テキストエディタ」と最低限の「画像書き出しツール」で事足りてしまう。
では、「Adobe XD」はその「Photoshop」「Illustrator」を使って「WEBデザイン」をしてきたユーザーを対象
としたアプリケーション。「Adobe XD」は「WEBサイト制作」のツールではない。「WEBプロトタイプ」を作るためのアプリケーション。
「WEBデザイナー」がまったく新しいことを覚えることなく、「Illustrator」と同じような感覚で操作ができ、動
作が軽く、痒い所に手が届くような必要最低限のツール。

■実践内容

• アプリの起動と作業画面
• 複数アートボードの作成
• 図形の描画
• テキストの入力
• 画像の配置
• リピードグリッドの使い方
• 画面遷移の設定とプレビュー

詳細は「AdobeXDの教科書.pdf」で確認する。

• 課題制作

■ワイヤーフレームからの変更点

• ヘッダーのメニューログインボタンはページ外に飛ぶボタンなので他のボタンとは区別し、表示を変えました。
• 予約ボタンに丸みをつけました。丸みがある方が安心感が出て押す時の抵抗感が薄らぐと思いました。
• 講師の告知を追加しました。講師がお得になる部分を作ってみました。

■Design rough
▢制作時間　200分
▢使用ソフト　Photoshop

■修正点

• スペースが狭い
• 講師スペースをキラースペースより狭く
• 配色を再検討する
• フッダースペースを狭くする
• 「講師プロフィール」のタイトルを記載する