Category Archives: 学科 ユーザーインターフェイス基礎

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

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

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

参考資料

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

デザインラフとは？

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

ワンポイントアドバイス

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

デザインラフの例

制作のポイント

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

参考サイト

第4回成績考査(予告)

9月27日の4限目終了までに、WEBページのデザインラフを提出してください。
WEBページの内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。
※提出方法はデータ保存したデザインラフのWordpress投稿です。

今後の予定

・9/13（火）：レイアウトデザイン 練習①
・9/19（月）：●レイアウトデザイン 練習②
・9/20（火）：デザインラフ作成に向けた準備（本日・オンライン）

・9/21（水）：レイアウトデザイン 練習③ （オンライン）
・9/22（木）：●デザインラフ作成①
・9/23（金）：レイアウトデザイン 練習⑤（オンライン）
・9/26（月）：レイアウトデザイン 練習⑥（オンライン）
・9/27（火）：成績考査 （●デザインラフ作成②）

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

-本日のアジェンダ-

1限目
学科 ユーザーインターフェイス基礎③
Webサイト・LPについて

2限目
学科 ユーザーインターフェイス基礎③
ワイヤーフレームについて

3限目
学科 ユーザーインターフェイス基礎③
レイアウトのポイントについて

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

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

本日のテーマ

Webサイト制作にあたり、まずはワイヤーフレームの制作のコツを学びましょう。

参考資料

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

Webサイトとは？

ウェブサイトは、World Wide Web 上にあり、一般に特定のドメイン名の下にある複数のウェブページの集まりのこと。サイトと呼ばれることもある。企業などの団体が自身を紹介するため自ら構築したサイトを、その団体の公式サイトなどと呼ぶ。 ホームページと呼ばれることもあるが、この用法は誤用とされる場合もある。 ウィキペディア

参考サイト

LP（ランディングページ）とは？

ランディングページ最適化はコンバージョン最適化、もしくはコンバージョン率最適化と呼ばれるより広範なインターネットマーケティング手法の一つであり、セールスリードや顧客となりうるウェブサイト訪問者の比率を向上させることを目的としている。 ウィキペディア

ワンポイントアドバイス

未経験でいきなりWebサイトを作るよう業務を指示する制作会社はありません。もし言って来たら疑ってください。個人レベルや担当者がWebサイト制作の知識理解が足りない等で、依頼されるなどの事は逆によくあるかもしれませんのでお気を付けください。
そこで、まずは最初の一歩としてチャレンジするのであればLP（ランディングページ）のような、1ページのページ制作をしっかりと行ってみると良いでしょう。

参考サイト

ワイヤーフレームとは？

ワイヤーフレームとは、webページのレイアウトを定める設計図のことです。
webサイトの制作現場で聞かないことがない、といえる単語であり、サイト制作において決して欠かせない要素です。単に「ワイヤー」と呼ぶことも多いです。

制作のポイント

・使用ソフトはPhotoshopです。
・サイズはPC基準です。規格は世の中のサイト例を参考にしてみましょう。
・まずは色を入れず、白黒で制作しましょう。
・余白を意識し、サイズバランスもWEBサイトの完成形と同じにしましょう。(実務ではpxピクセル単位で仕上げます)
・バナー制作と同じく、
①掲載が必要な内容(情報)を先にしっかりまとめる
②情報の順番づけ
③レイアウトを考える 手順で制作すると良いでしょう。
そのレイアウトが、HTMLとCSSというルールに変わるだけです。

ワンポイントアドバイス

ワイヤーフレームの段階では、お仕事の契約成立に至っていない場合が多いです。逆を言えば、しっかりとしたワイヤーフレームを作成できるという事は、「仕事を獲得できる力がある」という証明にもなります。お客様のご要望（相手の気持ち）をしっかり理解する事を心掛けて制作をしてみましょう。

参考サイト

UI/UX とは？

さまざまデバイスに対応したコンテンツを作るには、環境・時間・空間・性別・年齢・人数…等々
それらを「User Interface：ユーザインターフェイス」や「User Experience：ユーザエクスペリエンス」と
いう言葉で表現されています。ここで活きるのは「体験という経験」になるでしょう。

ワンポイントアドバイス

「使い易い」「役に立つ」「解りやすい」をポイントにデザイン設計を考えてみましょう。

参考サイト

本日の課題

ワイヤーフレーム作成に向けての準備

白黒のワイヤーフレーム作成に向け、世の中のサイトを参考に情報収集しながらレイアウトを考えましょう。
手書きでメモしておくと良いです。
9月19日(月)の学科 レイアウトデザイン基礎②で実際に作成します。