投稿者: master

実技 WEBデザイン実習

-本日のアジェンダ-

1限目
実技 WEBデザイン実習
オーサリングツールについて

2限目
実技 WEBデザイン実習
Dreamweaver の使い方について

3限目
実技 WEBデザイン実習
課題制作

4限目
実技 WEBデザイン実習
課題制作

5限目
実技 WEBデザイン実習
課題制作

本日のテーマ

Dreamweaverです。

Dreamweaverについて

Adobe Dreamweaver（アドビドリームウィーバー）は、ひとことで言うとホームページ制作ソフトです。
編集機能やレイアウトの表示機能、ファイル管理機能など、制作や更新作業に必要な機能がひとまとめになっている、統合ソフトウェアとなります。
アドビシステムズのホームページでは、“Webデザインソフトウェア、HTMLエディター”となっています。“Webオーサリングツール”や“Webサイト作成ソフト”などとも呼ばれます。ホームページは基本的に「HTML＋画像」なので、頑張れば「メモ帳＋ペイント」でもなんとか作れます。しかし、作業効率などやミスの防止などを考えると、専用ソフトを利用した方が効果的です。

参考資料

ドロップボックス
資料＞【STEP4】Webページの制作＞「WEBデザイン実習の教科書.pdf」をダウンロードしましょう。
制作のポイントをまとめた資料です。

ワンポイントアドバイス

Dreamweaverの歴史は長いです。いま世にいるデザイナーのほとんどの方がDreamweaverを過去に使った又は習った事のあるケースが多いです。ただし、昨今ではDreamweaverの需要は落ちています。
その理由は、様々ですがこれからの希望職に合わせて、習得してみてください。

参考サイト

本日の課題

「デザインラフ」の続きを作成しましょう。
今日の時点でできたところまでの成果をDropboxに上げてください。

※ファイル名は、work_xxxx_20230722.jpg

学科 ユーザーインターフェイス基礎④

-本日のアジェンダ-

1限目
学科 ユーザーインターフェイス基礎④
デザインラフについて

2限目
学科 ユーザーインターフェイス基礎④
HTML/CSSをイメージしたレイアウト考案について

3限目
学科 ユーザーインターフェイス基礎④
制作に向けての準備

4限目
学科 ユーザーインターフェイス基礎④
制作に向けての準備

5限目
学科 ユーザーインターフェイス基礎④
制作に向けての準備

本日のテーマ

コーディングの準備をしましょう

デザインラフとは？

ラフは、WEBサイトを作る上で、レイアウトなどのイメージを作り、チーム内やクライアントと共有するためのものです。 割と重要なものになります。 いきなりワイヤーフレームを作ったり、デザイン案を作ったりというケースもありますが事前にラフを作っておくことにより、より一層スムーズに制作が進められるようになります。

参考資料

ドロップボックス
資料＞【STEP4】Webページの制作＞「「デザインの考え方」の教科書⑦.pdf」をダウンロードしましょう。
制作のポイントをまとめた資料です。

【動画】　「「デザインの考え方」の教科書⑦」

ワンポイントアドバイス

ワイヤーフレームの次はデザインラフを提出する事がよくある制作の流れです。デザインラフは画像でサイトの仕上がりをお客様に見せる為です。逆を言えば、デザインラフはしっかりと完成形をイメージして制作する必要があります。コーディングというお仕事は、デザインラフ通りに再現する事が求められます。HTML/CSSをしっかりと意識して作成しましょう。

本日の課題

課題提出はありません。
今後のデザインラフ制作とコーディングに向けて、レイアウトのブラッシュアップや掲載内容（細かい文言など）を考え、まとめておきましょう。