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

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

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

【資料】

Dropboxにある資料をダウンロードしましょう。
作品制作のポイントをまとめた資料です。

[保存場所]
Dropbox / DEAUアカデミー WEBデザイナー養成科 (短時間) / 資料 / 【STEP4】Webページの制作・・・「デザインの考え方」の教科書⑥.pdf

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

LP(ランディングページ)とは?

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

参考サイト

ワンポイントアドバイス

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

ワイヤーフレームとは?

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

参考サイト

ワンポイントアドバイス

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

制作のポイント

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

本日の課題

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

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

実技 ポートフォリオ作成実習②

-本日のアジェンダ-

1限目
実技 ポートフォリオ作成実習②
WordPressサイトの掲載内容について

2限目
実技 ポートフォリオ作成実習②
WordPressサイト中間チェック

3限目
実技 ポートフォリオ作成実習②
WordPressサイト中間チェック

4限目
実技 ポートフォリオ作成実習②
WordPressサイトを拡充しましょう

5限目
実技 ポートフォリオ作成実習②
WordPressサイトを拡充しましょう

本日のテーマ

WordPressサイトの中間チェックです

WordPressサイトの掲載内容について

WordPressサイトには、以下の内容を掲載しましょう。

ポートフォリオサイト

ポートフォリオサイトとして活用できるように以下の項目を掲載してください。

  • ご挨拶
  • プロフィール(自己紹介)
    • 名前
    • 顔写真
    • 生年月日
    • 略歴
    • 仕事への姿勢や意気込み
    • 自己PR
  • 保有スキル
    • スキル項目
    • スキルレベル
  • ポートフォリオ
    • 作品
    • 作成の説明
    • 作品ツール
    • 作成時間
    • その他(苦労したこと、考慮したこと、学んだこと など)
  • 後書き

訓練ブログ

学んだことの復習や忘れてしまったことを思い出す資料として訓練ブログを作成してください。

  • 訓練の1日単位で投稿ページを作成してください。
  • ページのタイトルは、訓練内容がわかるようにしてください。

参考サイト

注意事項

  • テーマやプラグインを入れすぎるとサーバーのディスク容量が大きくなってしまうと同時にWordPressの動きが重たくなってしまうので不要になったテーマは削除するようにしましょう。

WordPressサイト作成時の注意事項

WordPressサイトの作成に当たっては、ポートフォリオとしての活用を中心に考えてサイト構成を考えてください。また、ポートフォリオの作成に当たっては、ポートフォリオを見る人の立場に立って考えてみましょう。

  • 採用担当者の立場になって作りましょう(採用担当者が何をみたいか考えてみましょう)
  • トップページは作品主体にしましょう(ポートフォリオとしてのトップページを意識してみましょう)
  • 操作性や導線を考慮しましょう(クリックの多すぎは見る気がしなくなります)
  • 未経験者の場合は「学校でこんな事を勉強してきました」、「私はこんなことができます」をわかるようにしましょう

本日の課題

ポートフォリオサイト、訓練ブログの完成度を上げてください。
修了式前の9月15日(金)に発表会を行います。