【職業訓練学校日記13】全期間終了 Webサイト構築演習とプレゼン

ついに11月の下旬に職業訓練学校が修了しました。

最後の2週間はこれまで習った知識を駆使してWebサイト制作をしました。

方法は2つ。

ひとつは、学校が制作済みのカフェサイトをリライトする。
もうひとつは、自分で新規制作する。

私は迷わず後者を選びました。
せっかくなら1から制作したいですし、そうしないと仕事することになった時に困ると思ったからです。

学校で用意されていたカフェサイトは、作りもそこまで複雑ではなく私の好みのテイストではなかったというのも大きな理由のひとつです。

ただ、訓練学校は習得度の差が激しく、リライトでないと制作できない方もいるように思いました。

必ず入れる機能を入れれば、あとは自分の好きなように作れたので、3ヶ月の間で1番楽しい内容でした!

ちなみに必ず入れないといけない主な機能はこんな感じです。

・jQueryでスライドショー
・jQueryでスムーススクロール
・レスポンシブ対応

jQueryはコピペするだけなのでいいんですが、レスポンシブのレイアウト崩れの原因探しと修正に3日ほど掛かってしまいました。

そして出来上がった架空サイトのデザインカンプがこんな感じ。

これはイラストレーターで作成しました。

サーバーにアップしているので、サイトを見ることはできるんですが、ここではデザインカンプで。

制作期間2週間といっても、週末もあったり、途中で漏れてたらしい授業があったりで、実質1週間くらいで制作しました。

学校のパソコンのスペックが低くて、イラストレーターを開くと重くて思うように操作できずストレスだったことから、家でちょっとだけやりましたが、ほぼ授業時間内で完成しました。

出来上がった架空サイトはプロの方から見たらまだまだ未熟だと思います。

でも3ヶ月でこんなサイトが作れるようになった達成感でいっぱいです!

修了証の他に評価表ももらえるのですが、なかなか良い評価をいただけて嬉しかったです!
結構やる気満々で授業も受けていたことが評価に繋がったのかもしれません。

職業訓練に通ったからといって、Webデザイナーには正直慣れないと思います。
スキルが基礎の基礎だと思うし、求人を見ても実務経験者しか応募できないという状況です。
ましてやアラフォー、なかなか厳しいです。

でもやっぱり職業訓練は行って良かったです!

さ、ポートフォリオサイトを作ろう!

【職業訓練学校日記12】10月後半終了 就職支援とllustrator

早いのもので、10月が終わってしまいました。

未だ就職は決まっておりません。

最近はWebデザイナーにはこだわらずに求人を探しています。

薄々感じてはいたけれど、未経験者は厳しい職種なんですね。
しかもアラフォー!!

でもせっかく習ったWebデザインなので、もしWebデザイン関係に就職できなくても何かしらで役立てるつもりではいます。


さぁ、そんな職業訓練ですが、10月の後半はPhotoshopの残りとIllustratorを習いました!

どちらも基礎なので、そこまで難しいこともなく、引き続き眠気との戦いでした。

デザインカンプの作り方を本格的に習いたかったですが、Adobeソフトを見るのも初めてという方が大半なので仕方ありませんね。

そして毎月必ずある就職支援の日もありました。
今回は、面接対策を講義形式で聞くのと、応募書類の作成がありました。

そろそろ本格的に就職活動を始めなければ!


HMTLとCSSをひと通り習ったので、家でWebサイトを作ってみました!

モデルは友達の犬です。
ネットに公開していないので、残念ながらお披露目はできないのです。

トップページのスクリーンショットだけ貼っておきます!

作るのはとても楽しかったです!
レスポンシブ部分でちょっとまだつまづいてるところがありますが、概ね満足です!

この他にももっと実践的なサイトを架空でもいいから作ってポートフォリオに載せたいところです!

【職業訓練学校日記11】10月前半終了 CSSとPhotoshop

もう10月も半ばですね!!

早いもので職業訓練学校も2ヶ月近く通っています。

残り1ヶ月、無事に就職できるでしょうか。
とても不安です。

最近、Webデザイナーで求人を探し始めていますが、未経験不可ばかり。
とても不安です。


さて、そんなわけで10月前半の職業訓練学校はCSSとPhotoshopを習いました!

そう、CSSが一通り終わリました。

最後の方はちょっとややこしいコードがあってややこしかったけど、形になっていくのが楽しかったです。

Photoshopは大学の時にデザインの授業があったので使ったことはあります。

でも20年も前なので忘れているかな?と思ったのですが、基礎部分はそこまでの変化もなく、眠気との戦いでした。

基礎よりも具体的なWebデザインをやりたかったのですが、それはサイト構築の授業の時にやるっぽいです。

10月前半に習ったCSS

  • ナビゲーションデザイン4種類
  • 背景画像の設定
  • 背景画像の上に文字配置
  • ボックスの重ね順指定
  • メディアクエリ
  • jQuery導入



10月前半に習ったPhotoshop

  • 基本操作
  • 写真加工
  • 画像修正
  • 画像合成


こんな感じでした!

メディアクエリがややこしかったです。

背景色だけの練習の時は理解もできるし、そこまで難しくないんですが、元々あったサイトにメディアクエリを追加するのがレイアウト崩れして混乱しました。

でもモバイルサイズにした時にレイアウトが変わっていくのは楽しいですね!!

10月後半はPhotoshopの残りと、Illustratorを習う予定です!

Adobe Stockで写真が売れたのでタックスフォームを送信した!

突然ですが、Adobe Stockという写真販売サイトに登録しています。

興味本位で登録して写真を9枚だけアップして放置していました。
いえ、忘れていました!

そしたら、メールで「写真売れたよ!」のお知らせが!

1番左のフルーツサンドの写真が5.25ドルで売れていました!
今さらだけど、ドルなんですね。

1枚で500円とかすごい!
嬉しくて新たに5枚の写真を審査にアップロードしました。


この写真売れたよメールに書いてあったのあが、アメリカの源泉徴収税についてのお知らせです。
なんかタックスフォームを提出しないとアメリカの源泉徴収税が掛かってしまう模様。


売り上げが500円ちょっとだから別に困らないとは思うのですが、今後のためにも手続きを終わらせておこうと手続きしました!

今回はその流れをご紹介します!

Adobe Stockのタックスフォームを送信する流れ

  1. Adobe Stockのマイページから「コントリビューターアカウント」をクリックする
  2. 「タックス情報」をクリックする
  3. 「タックス情報を追加」をクリックする
  4. 説明をよく読んで「続行」をクリックする
  5. 「個人」をクリックする(その他の方は下の方)
  6. 日本は米国との租税条約を締結している国だそうなので、2つ目の項目の「W-8 BENを入力してください」をクリックする
  7. W-8BENという英文の書類が出てくるので★印のところを入力します
  8. 最後まで入力するとサイン欄が出てくるので、パソコンで名前を入力します
  9. 「源泉徴収申請フォームが承認されました」というメールが来て完了

Adobe Stockのタックスフォームを送信する具体的な方法


1.Adobe Stockのマイページから「コントリビューターアカウント」をクリックする



2.「タックス情報」をクリックする



3.「タックス情報を追加」をクリックする



4.説明をよく読んで「続行」をクリックする



5.「個人」をクリックする(その他の方は下の方)



6.日本は米国との租税条約を締結している国だそうなので、2つ目の項目の「W-8 BENを入力してください」をクリックする

※ここで、こういうエラーメッセージが出る方、私も出ました。
 (出ない方は7番にお進みください)

※その場合は、ブラウザのCookieを受け入れる設定に変更してください
 (GoogleChromeの場合はこんな感じです)



7.W-8BENという英文の書類が出てくるので★印のところを入力します
  (この直前に別のAdobeSignという電子サインのアプリが立ち上がり登録を求められますが、必要なので登録しましょう)

英文でびっくりしますが、英語ポンコツの私でもできました!
入国カードくらいの難易度なので、頑張りましょう!
基本的に、名前と住所、国籍くらしか入力はありませんでした。


8.最後まで入力するとサイン欄が出てくるので、パソコンで名前を入力します

9.「源泉徴収申請フォームが承認されました」というメールが来て完了


他の写真も売れたらいいな。



【職業訓練学校日記10】9月後半終了 CSS

本当に時が経つのは早いもので、9月が終わってしまいました。

職業訓練が始まって半分が終わったことに!!!


さて、9月後半は完全にCSSだけ習いました!!
CSSに必要なHTMLタグも使いましたが、メインはCSSです。

HTMLの時よりも1回に習うことは少ないよう思いました。

ただ、CSSがレイアウト設定だからか、HTMLより考えることが多いような?

でもどんどんレイアウトされていくとサイトっぽくなっていくのですごく楽しいです!

でもこの辺りからついてこれない方も出てきている様子でした。

パソコンが使えたらそんなに難しくないとは思うんですが、そもそも使えない方には難しいのかもしれませんね。

基本的にできない人に合わせて授業は進むので、私はHTMLの時のように時間が余りがちです。

HTMLの時は別課題を準備されていましたが、CSSはあまり別課題が準備されておらず、困っています。

退屈時間を持て余している状態です。

しかし、協調性が大切なようなのでがんばります!


9月後半に習ったCSSは基礎でした!

  • フォントの各種設
  • CSSリセット
  • 色の設定
  • 背景の設定
  • リンクのクリック設定
  • グローバルナビゲーション
  • ボックス概念と設定
  • 余白設定
  • カラムの概念と設定
  • 回り込み設定

順不同ですが、こんな感じでした。

これが基礎なので、応用すれば色んなレイアウトができるんだろうなと思います。

なかなかそれが難しそうですが、それができないと仕事としてできない気もしてきています。

そろそろ就職活動も動き始めないと!!


2021年のスケジュール帳はハンズダイアリーのマンスリーとガントチャートのにした。

9月になるとスケジュール帳が店頭に並びますね!

文房具好き、中でもノート類、さらにスケジュール帳が大好きな私。

でもいつも1冊を使いきったことがないんです。
いつも挫折するんです。

これまで挫折してきたスケジュール帳


これまで挫折した手帳の数々リストです。


  • ほぼ日手帳(しかも2回)
  • ほぼ日WEEKLY
  • ジブン手帳
  • CITTA手帳
  • トラベラーズノート
  • 能率手帳
  • クオバディス
  • 無印マンスリー手帳
  • ロルバーンダイアリー
  • ダヴィンチシステム手帳
  • 自作のスケジュール帳


このように数々のスケジュール帳挫折経験があります。
中にはスケジュール帳にしてはお高いものも。

インスタとかに毎日とても丁寧に書かれている方たちがいて、尊敬の眼差しで見ています。


私が手を出してはいけないスケジュール帳の種類

色んなスケジュール帳に挫折してきた私が手を出してはいけないなと思うスケジュール帳の種類があります。

  • 1日1ページのスケジュール帳
  • レフト式のスケジュール帳
  • 紙がペラペラのスケジュール帳
  • 線がありすぎるスケジュール帳
  • 書くことが決められすぎているスケジュール帳


1日1ページはそんなに書くことがない!
みんな何を書いてるんだろう?

あとペラペラの紙はズバリ、トモエリバーです。
ほぼ日とジブン手帳に採用されているとても良い紙です。
私は書き心地と裏写りが気になりました。

これらに該当しないスケジュール帳を選びます!

私が欲しいスケジュール帳のページ

逆に欲しいページは何だろう?と考えてみました。

そしたら2つしかなかった!

マンスリーとガントチャート!

マンスリーはいりますよね。
予定書くから。

ガントチャートは、今後の転職活動やらブログ更新やらを管理したいなと思っています。

2021年のスケジュール帳はハンズダイアリーにした!

これらを考慮して東急ハンズにスケジュール帳を物色しに行きました!

そこで見つけたのがこのスケジュール帳!

ハンズのスタッフさんが開発した東急ハンズのオリジナルです!

色々なサイズと様式があったのですが、これはマンスリーとガントチャートの2冊が一緒になったものなんです。

表も裏もシンプルです。
裏に控えめに「hands」と書いてます。


表紙を開くとこんな感じで2冊入っています。
左の表紙には1年分のカレンダーがあります。

開くとこんな風に左にマンスリー、右にガントチャートを見ることができます。
2つを見ることができるので、スケジュール帳管理がしやすそう。

ちなみにマンスリーの右ページは方眼のメモ欄です。
これはなかなか便利っぽい。

ちなみにガントチャートの後ろにもメモページが少しあります。


使用例が紹介された紙も入っていました。
こんなに上手く使えるでしょうか?

あんまり気負うとまた挫折するので、自分なりに使っていこうと思います!

そしてこのハンズダイアリーは何やら良い事もしてる気持ちにさせてくれます。



2021年は挫折せずにこの手帳だけで乗り切りたいと思います!!

多色の付箋を保管している方法

多色の付箋ってあるじゃないですか?

ピンク、ブルー、イエロー、グリーンの配色でよくある付箋です。

こういうベタなどこにでもある付箋セットです。


私はこれを上から順番ではなくて、色別に使いたいんですよね。


今、訓練学校で使っているテキストも意図して色別に使っています。

ちょっとメモの内容はお恥ずかしいですが、こんな感じです。

HTMLのページが水色ベースだから付箋はピンクで、CSSのページはピンクベースだから付箋はブルーと決めて使っています。

こういう風に色別に使うと、2つ以降の色を取る時に面倒ですよね。

ピンクをのけて、ブルーを1枚取って、またピンクを戻して。

そこで、もう色別に分解してしまおう!と分解したんですが、問題が生じました。


そう、裏の粘着部分が汚れるんです。



部屋って見えない所で汚いんですね(泣)
ホコリみたいなものが粘着部についちゃいます。

そこで、私は1番後ろの付箋を半分におって台紙代わりにすることを思いついたのです!

これです!
ちょっと見辛いですが、折り目が見えるでしょうか?

これで好きな時に好きな色をストレスなく取れます!

些細なことですが、すごく便利になりました!

その他の細かい付箋は小さい箱に入れて保管しています。

かわいい系の付箋はこの2つしかもっていません。
どちらもいただきもの。

【職業訓練学校日記9】9月前半終了 就職支援とHTML

早くも9月の前半が終了しました!

それとともにHTML基礎も終了しました。

9月前半に習ったHTML

9月の前半は最初にちょっとだけ就職支援があっただけで、ずっとHTMLの演習をしていました。

就職支援はジョブカードの作成と履歴書、職務経歴書の書き方などハローワークで教えてもらえるような内容でした。

HTMLは、これである程度の基礎は終わりだそうです。
もう少しこれから習うCSSに関係する使うタグはまだ残っています。

授業のスピードは、想像していたより遅いなと思っています。

丁寧といえば丁寧なんですが、私はどうやら早く作業が終わるので、結構待ち時間があります。

できない人ができるまで待って次に進むので、なかなかに退屈です。

個人的には3倍くらいスピードアップして、残った時間を自習とかにして欲しい気持ちです。

ただ、面接でも協調性についてすごく聞かれたので、きっと待たないといけないんだと思って、眠気と戦っています。

ただ、授業で習ったサイト練習が終われば、別で3つくらいサイト練習を用意してくれています。

それをやることで「人より3倍HTML記述練習ができてる」と前向きに捉えています。

ただ日常の進み方はもうちょっとだけスピードアップして欲しいなというのが本音です。

ついてこれない人にとってはとても優しくていいのかもしれません。

あ、つい愚痴ってしまいました。
協調性、協調性。


9月前半に習ったHTMLはこんな感じです。

  • 表の設定
  • 他のHTML埋め込み
  • 動画ファイル埋め込み
  • 入力フォーム作成
  • 文章に構造化
  • SEO対策
  • OGP基本設定
  • Brackets使用方法


この中ではSEO対策がとても勉強になりました!
ブログにも役立ちそうです!

進み具合遅くない?
HTMLタグもこれだけでいいの?

そんな不安はありますが、とりあえずHTMLは終わりました。

習う前はHTMLって難しいかな?と思ってたけど、やってみるととても楽しいです!

後半は楽しくCSSを学んでいきます!


Adobe Bracketsの拡張機能をインストールしてみた!

先日、愛用MacBookにダウンロードしたAdobe Bracketsですが、試しに使ってみたけどどうも使いにくい。



もともと職業訓練学校ではCresent Eveを使っていたので、慣れてないからかな?と思っていました。


そうして授業でBracketsも使うことになり、使う前に拡張機能を追加した方が使いやすいとのこと。

拡張機能!!
なんか便利そう!!


そこで、自宅のBracketsにも拡張機能をダウンロードしました!

Adobe Bracketsにインストールした拡張機能

この拡張機能をインストールしました!
全部で10個です!

  • Extensions Rating
    →拡張機能の管理画面が使いやすくなる。
  • Custom Work
    →ファイルがタブ表示になる。
  • Show Whitespace(全角空白・スペース・タブ表示)
    →スペースや制御文字の表示ができる。
  • Emmet
    →HTMLやCSSが省略して書ける。
  • Quick Insert
    →タグファイルパスなどを簡単に挿入できる。
  • Autosave Files on Window Blur
    →自動保存してくれる。
  • Overscroll
    →下の方までスクロールできる。
  • Select Lines
    行番号をクリックすると行を全選択できる。
  • Interactive Linter
    →保存する時にエラーチェックをしてくれる。
  • colorHints
    →カラーコード上で色をハイライト表示する


この10個の拡張機能は訓練学校でおすすめされたものです!


他にも色々と便利な拡張機能もあるみたいですが、まだまだWebデザインを勉強中の私はこの10個にしています!

Adobe Bracketsに拡張機能をインストールした流れ

  1. Adobe Bracketsを開き「拡張機能マネージャー」をクリックする
    (長方形の上に突起2つのマークが矢印のどちらかの位置にあります。)
  2. 拡張機能マネージャー」ウィンドウが開くので、「入手可能」タブを開く
  3. 検索窓でダウンロードしたい拡張機能を検索し、該当の拡張機能の「インストール」をクリックする
  4. 自動でインストールが始まり、「インストールが完了しました」が表示されたら「閉じる」をクリックする
  5. インストール完了したものは「インストール済み」のタブに表示される

Adobe Bracketsへの拡張機能インストール方法



1.Adobe Bracketsを開き「拡張機能マネージャー」をクリックする
  (長方形の上に突起2つのマークが矢印のどちらかの位置にあります。)



拡張機能マネージャーのアイコン



2.「拡張機能マネージャー」ウィンドウが開くので、「入手可能」タブを開く



3.検索窓でダウンロードしたい拡張機能を検索し、該当の拡張機能の「インストール」をクリックする



4.自動でインストールが始まり、「インストールが完了しました」が表示されたら「閉じる」をクリックする



5.インストール完了したものは「インストール済み」のタブに表示される


これでずいぶん使いやすくなりました!



メタルスライムのおでかけステンレスボトルを手に入れた!

突然ですが、メタルスライムのおでかけステンレスボトルを手に入れました!

可愛くて嬉しくて自慢したくてブログに書くことにしました(笑)

これです!!
めっちゃかわいい!!




友達がUFOキャッチャーで取っていたのを見て、欲しくなり挑戦しました!

しかし!!
UFOキャッチャーというものは欲しいからといって初心者がいきなりお手軽にゲットできるマシンではないのです。

1回100円。
果たして何回で取れたのか?

はい、25回2,500円でした!

2,000円の段階で辞めるかどうか悩みました。
が、ここで諦めたら2,000円が無駄になります。


店員さんに助けを求めること5回、ついにゲットできました!!


メタルスライムの方!!

種類が2種類あって、スライムとメタルスライムがあります!
箱の裏にラインナップが書いてありました。


そう、この箱も可愛いんですよ!

横の面が可愛い!!
スライムとメタルスライムなんですが、このデザインはステンレスボトル本体のデザインなんです!


ステンレスボトル本体はこんな感じです!!

はい、可愛い!!

これにお茶を入れて持ち歩こうっと。

これで楽しいマイボトルライフを過ごしてエコ生活をします!