月: 2023年10月

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

-本日のアジェンダ-

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

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

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

4限目
実技 ポートフォリオ作成実習①
職務経歴書との違いについて

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

本日のテーマ

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

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

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

ポートフォリオサイト

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

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

訓練ブログ

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

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

参考サイト

注意事項

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

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

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

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

アンサーページの作成について

求人票には「○○の出来る方」というような条件がついている場合があります。このような時は、指定された条件の回答となるページを作成して提示することで保有スキルをアピールすることができます。
訓練の中では、成績考査の提出物をアンサーページとして作成してもらうこともあります。

  1. アンサーページを固定ページで作成
  2. アンサーページを開くためのメニュー項目を追加
  3. 必要に応じてアンサーページを開くためのパスワードを設定

参考サイト

本日のテーマ②

ここからは補足資料になります。
手を動かしながらの視聴でも構いません。
もしくはお時間のある時にご自身で視聴ください。

就活で必要な書類、ポートフォリオについて今一度考えてみましょう。

【資料】

下記のファイルをダウンロードしましょう。
「職務経歴書との違いについて.pdf」　

【動画】職務経歴書との違いについて

WEBデザイナーになるためには？ (7:44)
https://youtu.be/iGE2f_ffpPk

求人をイメージしてみましょう (19:14)
https://youtu.be/wsEgr7TqDUM

求人募集企業側のはなしの例① (13:46)
https://youtu.be/Z3v4MKZ9tZI

求人募集企業側のはなしの例② (15:37)
https://youtu.be/k5o5kltWVS4

書類選考について考えてみましょう(12:45)
https://youtu.be/nwVlaR0IVvE

書類選考のポイント(7:11)
https://youtu.be/dTDrSAGcf1s

履歴書について考えてみましょう(7:49)
https://youtu.be/WpknOaq03E0

履歴書での主なチェック項目 (16:11)
https://youtu.be/L3FRs5f9dKM

職務経歴書について考えてみましょう(15:06)
https://youtu.be/-4QzpujfSm0

職務経歴書の確認時のポイント (7:44)
https://youtu.be/hU69hu1WjPo

おまけとまとめ (13:15)
https://youtu.be/W3nU1rTVf0o

参考サイト

本日の課題

ポートフォリオサイトの完成度を上げてください。

学科 HTML基礎②【オンライン】

-本日のアジェンダ-

1限目
学科 HTML基礎②
HTMLの基本構造について

2限目
学科 HTML基礎②
HTMLの文書情報について

3限目
学科 HTML基礎②
セクション分類タグについて

4限目
学科 HTML基礎②
コンテンツ分類タグについて

5限目
学科 HTML基礎②
本日の講義のまとめ

本日のテーマ

HTMLの基本構造を理解しましょう

【まとめサイト】

【動画】

HTMLの基本構造について

<!DOCTYPE html>
<html lang=”ja”>
<head>
　　（文書の情報を記述）
</head>
<body>
　　（文書の本体を記述）
</body>
</html>

  • !DOCTYPE 宣言（ドキュメントタイプ宣言）
  • html 要素（HTML の文書）
  • head 要素（文書情報）
  • body 要素（文書本文）

文書情報について

  • title 要素（ページタイトル）
  • meta 要素（文字コード指定/charset）
  • meta 要素（ページの説明文/description）
  • meta 要素（ページのキーワード/keywords）
  • meta 要素（ページの作者情報/author）
  • meta 要素（ビューポート/viewport）
  • link要素（外部 CSS ファイルの紐付け）
  • link要素（ファビコンファイルの紐付け）

文書本文について

  • セクション分類タグ
  • コンテンツ分類タグ
  • テキスト分類タグ
  • コンテンツ埋め込みタグ
  • テーブルタグ
  • フォームタグ

参考サイト

ブロックレベル要素とインライン要素について

要素の多くは、ブロックレベル要素とインライン要素に分類されます。
ただし、HTML5ではブロックレベル要素とインライン要素という考え方はなくなっていますので、あくまでも性質を持っていると考えておきましょう。

参考サイト

セクション分類タグについて

  • h1～h6 要素（見出し）
  • article 要素（アーティクル）
  • section 要素（セクション）
  • header 要素（ヘッダー）
  • footer 要素（フッター）
  • nav 要素（ナビ）
  • aside 要素（アサイド）

参考サイト

ワンポイントアドバイス

見出し（h1～h6）要素でh1タグ以外は、特に使用回数に制限はありません。h2やh3などは大きな見出しとなることが多いためたくさん使われると思います。「h1タグは1ページで一回の使用で抑え、数字の順序をしっかり守ること」これを守っていれば使用になんら問題はありません。ただ、html5の場合は、sectionタグやarticleタグと組み合わせることで1ページに複数のh1タグを記述することができます。

参考サイト

コンテンツ分類タグについて

  • p 要素（段落（パラグラフ））
  • hr 要素（区切り）
  • ul/li 要素（順序のないリスト）
  • ol/li 要素（順序のあるリスト）
  • dl/dt/dd 要素（定義・説明リスト）
  • div 要素（ひとつのかたまりの範囲）
  • main 要素（メインコンテンツ）

ワンポイントアドバイス

マークアップに悩んだらとにかく「p」にしましょう。

本日のテーマ②

ここからは補足資料になります。
情報収集など手を動かしながらの視聴でも構いません。
もしくはお時間のある時にご自身で視聴ください。

紙のポートフォリオは面接の時に利用しましょう

まずはポートフォリオサイトに日々の学びと多くの作品をまとめておきましょう。
そして、面接が決まったら「紙のポートフォリオ」も用意して企業さんへの手土産として持参しましょう。

【資料】

カリキュラム資料 ダウンロード用サイト
https://cu-doc.deau-ac.com/

下記のファイルをダウンロードしましょう。
「紙のポートフォリオについて.pdf」　

【動画】

おさらい ポートフォリオ・ポートフォリオサイトとは？(11:07)
https://youtu.be/LyZ3pObfsOA

紙ポートフォリオとWebポートフォリオサイトの違い (7:30)
2
https://youtu.be/1Pbw-0-2_OQ

面接のお話 (6:12)
https://youtu.be/uyhcUvp5mRU

紙のポートフォリオ作成のためのコツと抑えるべき基本 (6:40)
https://youtu.be/ZLMAYfizybw

ポートフォリオを作る5つの要素 (10:40)
https://youtu.be/vE7fiugNxnI

ポートフォリオを作る5つの要素～まとめ (8:58)
https://youtu.be/yDKBqf5EMZA

参考サイト

本日の課題

本日学んだ内容を復習して整理しておきましょう。
ポートフォリオサイトの投稿ページ作成が出来る方は投稿ページにまとめておくと良いです。