3月3日(金)-ポートフォリオ作成実習②

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

ポートフォリオサイト

◆ご挨拶
◆プロフィール(自己紹介)

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

訓練ブログ

学んだことの復習や忘れてしまったことを思い出す資料として記録する

・訓練の1日単位で投稿ページを作成
・ページのタイトルは、訓練内容がわかるように

【参考サイト】

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

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

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

WordPressのカスタマイズ

※カスタマイズはあまりしないこと
 基本機能で工夫してどうしてもできない場合にカスタマイズするようにする

・【ブロックのクラス・ID指定】
ブロック→高度な設定→【HTMLアンカー】にid指定、【追加CSSクラス】にクラス指定ができる


・【追加CSS】
外観→カスタマイズ→【追加CSS】にCSSを追加、【公開】でカスタマイズできる

【HTMLアンカー】でid指定したものは、#○○、【追加CSSクラス】でクラス指定したものは、.○○で入力

2月8日(水)-ポートフォリオ作成実習①

WordPressサイトには、以下の内容を掲載する。

ポートフォリオサイト

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

ご挨拶
◆プロフィール(自己紹介)

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

訓練ブログ

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

・訓練の1日単位で投稿ページを作成
・ページのタイトルは、訓練内容がわかるようにする

参考サイト

【参考サイトからのメモ】
◆紙ポートフォリオについて
ポートフォリオサイトをすでに持っているなら、紙のポートフォリオも併せて制作するのがおすすめ(サイト>紙)

紙のポートフォリオは、Web版のポートフォリオとは本質的に異なります。

サイトの動きが表現しづらかったり、紙面の大きさやページ数に制限がある一方で、見開きが使えたり、こちらの意図する順番でページをめくってもらうこともできます。

そうした紙ならではの利点を最大限に利用するためには、ポートフォリオサイトをただ印刷するのではなく、紙版ポートフォリオ用にレイアウトをきちんと工夫することも重要です。

また、一般的な印刷紙ではなく、写真用の光沢紙を使ったり、上質な紙を使うなど、質感などにもこだわると、グッとグレードがアップしますよ。

PinterestなどのSNSで「紙ポートフォリオ テンプレート」などと検索すると、様々なアイディアが掲載されていますので、興味のある人は、ぜひ一度探してみてください。

https://www.sejuku.net/blog/106987

注意事項

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

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

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

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

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

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

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

12月17日(金)-CMS構築基礎④固定ページの作り方(パスワード設定と実用例)

ブロックエディタの主要機能

  • テキスト→「段落、見出し、リスト」(改行入力、リンク設定)
  • テキスト→「コード、整形済テキスト、詩」(複数の空白や改行をそのまま表示
  • テキスト→「テーブル」:表組型式を作成
  • メディア→「画像、ギャラリー」:写真掲載の基本
  • メディア→「カバー」:テキストをオーバレイした画像を配置
  • メディア→「メディアとテキスト」:写真と文章を並べる
  • メディア→「ファイル」:PDFファイルなどのダウンロードを配置
  • デザイン→「ボタン」:リンクを作成するのに便利
  • デザイン→「カラム」:横方向に複数欄を作成し、それぞれのメディアを指定可
  • デザイン→「続き」:抜粋に表示する範囲を指定
  • デザイン→「ページ区切り」:別ページにする時に指定
  • デザイン→「区切り」:文章と文章の間に水平線を表示
  • デザイン→「スペーサー」:空間を作成
  • ウィジェット→「ウィジェット」:色々な表示部品を指定
  • ウィジェット→「ソーシャルアイコン」:SNSへのリンクを作成
  • 埋め込み→「埋め込み」:代表的なサイトへのリンクを作成

参考サイト

WordPressブロックエディターの使い方
ブロックエディタ(Gutenberg)の使い方

投稿ページと固定ページ

使いやすい(見やすい)ポートフォリオサイトにするためには、投稿ページと固定ページの使い分けや適切なメニュー設定が必要

参考サイト

WordPressの固定ページと投稿ページの違いを解説
WordPressの「固定ページ」って? 「投稿」との違いや使い方を紹介
WordPressでカスタムメニューを作成する方法【初心者向け】

固定ページとは

「固定ページ」は、カテゴリーとの紐付けやトップページとの連動のない独立したページを作る機能で、お問い合わせページや会社紹介ページなどカテゴリーに属さないコンテンツを作るのに適している

パスワード設定

①パスワード保護を追加したいコンテンツのWordPressエディターを開く
②右側のサイドバーにある「公開状態」オプションをクリック
③「パスワード保護」を選択し、投稿のロックを解除するのに使用するパスワードを入力

ポートフォリオに作品を載せるのは、ある程度許容されていることであり、作品を掲載したことで著作権を訴えられるという可能性はほとんどない。
しかし、著作権や守秘義務をいい加減にしてよいというわけではない。
このことを決して念頭から離さず、ポートフォリオに掲載する場合は著作権や守秘義務にきちんと配慮していることを示すことを心がけるようにする。
そうした姿勢を見せることで応募先の企業によい印象を持ってもらえる可能性が高まる。

固定ページを企業向けページとして用意

ポートフォリオは「デザイナーが実績をアピールするための作品集」。
ポートフォリオサイトは、その応募企業様向けに利用する。

ポートフォリオサイトのトップページは基本送らない。
企業の応募要項に合った作品該当ページを、企業側が探してくれるわけはないので、しっかりとその企業に向けたページを用意すること。
権利や守秘義務を意識しパスワード設定をした固定ページを利用する。

求人票の宿題をまとめるのが固定ページ

求人票にある宿題「○○の出来る方」のアンサーをパスワード設定した固定ページで作成し、その応募企業様向けのページを作成する。
これから、ロゴやピクトグラム、アクセスマップや名刺、バナー作成をして、HTMLとCSSを学びLP(ランディングページ)を作成していくので、それを掲載できるように、企業用に改変したり、新規に作成したりする。
その宿題がクリア出来たら、様々な案件に対応できる100ページの実績を見せて、面接に繋げていく。

多くの作品を作っておき、様々な企業にアプローチできるように準備しておく

多くの企業が様々なサービスを提供しているので、これが出来れば仕事に繋がるという絶対はない。
また、社内に既にその技術スタッフがいれば、間に合っています。となり、契約に至る事も難しい場合もある。

対策は「多くの作品を用意しておく」こと。
未来の仕事に対して、雇用主は可能性を考えるため、より多くの種類の作品を用意することで、可能性を広げておく。
訓練時間で、より多くの作品を作れるよう意識していく。

12月13日(火)-CMS構築基礎③

メディア

【PDF】
→サムネイル表示できない
サムネイル表示したい場合は、JPGやPNGなどで別ファイルで表示させる
PDFはDLして読んでもらうなどの資料向け

【JPG】
・圧縮率が高いので画質が荒れやすい
・データが軽い

【PNG】
・圧縮率が低いので画質は綺麗め
・データがJPGより重い
・透過画像が作成できる

 

※画像を借用する場合

・「営利目的ではありません。」
・「勉強のために使用させていただきました。ありがとうございました。」
・「勉強のためにトレースさせていただきました。」
等の謝辞をトップページの隅やプロフィールページ等に載せておくのがよいとのこと
※作品を載せた全ページに記載したりは不要
※©(コピーライト)は付けない。©は著作者しか使用できないので、注意。

【注意】
※人物は借用を避けたほうが良い(著作権の他に被写体の肖像権があるため)
→使う場合は自分で撮った(被写体の許可がある)ものまたは、無料画像サイトのものを使用する

※ロゴマークも借用は避けたほうが良い(商標権が絡むので)

作品を掲載する際のポイント

・どのツールのどんな機能を使用したか
・何を描こうとしたのか
・どのくらいの時間を使ったのか など
技術と結果を明確にすると良い

特に、現在・過去・未来、
現在の作品の自己評価、過去の作品からの改善点、次はこうしたいという未来への目標
これらを考えて次に繋げていく
過去に作成した作品をブラッシュアップして比較し、成長曲線を可視化できるようにすると良い

【企画】ポートフォリオサイトの制作イメージ

【制作のポイント】

・訓練校の6ヶ月の成果と自身の自己表現を掛け合わせた作品の方向性をまとめる。
・就職活動を意識した構成を心がける。

【目的・ビジョン・コンセプト】

フィンランドの紹介や、グッズ・軽食販売をしているお店をイメージしたサイト

目的

風景、食べ物、デザイン、サウナや暮らし方、おもしろい言葉など、遠いフィンランドの世界を楽しんでもらいたい

コンセプト

北欧チックな木や緑、湖や白色など暖かくナチュラルな風合いのサイトデザイン
メインのフィンランドの紹介ページの他に、小さなグッズや飲食スペースのある販売店がある想定で、架空のお土産やフード、アクセスマップや名刺・バナー作成

(気になる点)

  • 店内画像はPhotoshop等で適当に描いたものまたは、食べログなどのお店の画像を使用したい
    もしくは自分でお店に撮影に行き、掲載許可いただく必要あり?
  • ムーミンバレーパークや水元公園、IKEA、フィンランド料理のお店やマリメッコなどの写真や商品写真使用してOK?
  • 基本自分で撮りに行かなければいけない?
    (※あまり行ける余裕がなさそうなので)

【先生より】※うろ覚え
基本的にアウトだけど、商用でなく課題制作なのでグレー?謝辞など載せればOK(とのことだったような…要再確認)

 

【ターゲット】

フィンランド、北欧、旅行が好きな方

【タイトル】

Hygge‐フィンランドの暖かい暮らしの雑貨や優しいごはんのおみせ

【見出し1】

フィンランドの暖かい暮らしやデザイン or フィンランドの穏やかで幸せな暮らし

 

【ページ構成】

🎅About フィンランドとは

簡単に国の位置や公用語、人口、国のイメージなど

🎄風景

小分類:各町の雰囲気、湖、山、サウナ、サンタクロース村など

🥖食べ物

小分類:ベリー、サルミアッキ、お酒、コーヒー、パン、チョコレートなど

👗デザイン

小分類:ムーミン、マリメッコ、アアルト、イッタラ、アラビアなど

🛁サウナや暮らし

小分類:自然や受け継いだものを大事にする文化、1日4~5食やコーヒー重視の食文化
サウナやキャンドル、ヤンテの掟という考え方、働き方など

👧おもしろい言葉や文化など

小分類:基本のあいさつなど、日本語に似た言葉、カルサリキャンニトという文化など

☕架空のショップ情報

小分類:お土産案内、軽食メニュー、営業カレンダー、アクセスマップ、バナーなど

 

【ポイント①】

遠い国のフィンランドを身近に感じてプチ旅行した気分になってもらいたい

【解説】

写真を交えながら紹介し、日本にも同じ空気を味わえる場所があります(→ムーミンバレーパーク等)などの紹介もして、旅行気分で楽しめるサイトを作りたい

 

【ポイント②】

意外と日本人と似ているフィンランド人の性格や、おもしろい言葉などの紹介

【解説】

実際に行ったこともフィンランドの人との関わりもないので、本やネットの受け売りになってしまいますが、
おもしろかった情報を載せたいと思っています。
※情報収集がメインではないので、ふわっと軽く調べる予定です。

 

【ポイント③】

架空のグッズ、飲食ブースのあるお店もあるイメージで作る

【解説】

デザインソフトの練習も兼ねて、グッズや料理イメージ、メニュー、アクセスマップなども作成したいと思っています。
※軽食メニューや店内画像などの用意が難しい場合、省いてグッズ販売のみの設定にするなどの可能性もあります。

 

【参考サイト】

◆サイトイメージ参考サイト

⛄北欧ギフト雑貨トムテ | 南行徳のかわいい雑貨屋さん
URL:https://tomte-web.com/

⛄Mikon Finland Shop & Cafe | 北欧フィンランドのプロがお届けする、通な雑貨屋さん
URL:https://mift.net/

※サイト内商品画像を使用したいと考えているサイト
⛄北欧雑貨 Rallissa ラリッサ ネットショップ
URL:https://rallissa.theshop.jp/

⛄北欧料理リラ・ダーラナ
URL:http://dalarna.jp/

 

◆情報参考予定サイト

⛄今日から使える!北欧の国々の10の特別な言葉たち ? Project Nord (JP)
URL:https://projectnord.jp/blogs/nordic-lives/nordic-10-special-words

⛄フィンランド公式トラベルガイド VisitFinland
URL:https://www.visitfinland.com/ja/

⛄フィンランド共和国|比べてみよう!世界の食と文化|株式会社 明治 – Meiji Co., Ltd.
URL:https://www.meiji.co.jp/meiji-shokuiku/worldculture/finland/

⛄フィンランド観光おすすめランキング|海外旅行のSTW
URL:https://stworld.jp/feature/FI/tourism/

⛄フィンランド「見逃せない」観光地16選!名物料理、夏・冬の楽しみ方も教えます! | 旅Pocket
URL:https://www.tabikobo.com/tabi-pocket/europe/finland/article39143.html

⛄フィンランド観光特集 | 北欧旅行フィンツアー
URL:https://www.nordic.co.jp/finland/