パソコン

【職業訓練学校日記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リセット
  • 色の設定
  • 背景の設定
  • リンクのクリック設定
  • グローバルナビゲーション
  • ボックス概念と設定
  • 余白設定
  • カラムの概念と設定
  • 回り込み設定

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

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

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

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


【職業訓練学校日記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.インストール完了したものは「インストール済み」のタブに表示される


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



Adobe BracketsをMacBookにダウンロードしてみた!

以前にWindows10にCresent Eveをダウンロードしました。

ちょっと練習で使いましたが、訓練学校で使用しているので慣れていて使いやすかったです。


ただ、やっぱりWindowsが重い!

一応軽くする方法をYouTubeで探して自分ができる範囲でやってみたんですが、やっぱり重い。

そもそものスペックが低いので仕方ないのかも知れません。
スペックが低いからMacBook買ったわけですしね。

そこで、macでも使えるAdobeBracketsをダウンロードしてみました!


使ったことはないけど、これから訓練学校でCSSを習う時に使うみたいなので使い方が分からなくても聞けます!

Adobe Bracketsのダウンロードページ

あのAdobeさんから提供されているのに、フリーでダウンロードできます!

勝手にAdobeはお高いイメージを持っていましたが、フリーのものもあるんですね。

下にリンクを貼っておきます!

http://brackets.io/index.html

Adobe Bracketsダウンロードの流れ

  1. Bracketsサイトの「Brackets1.14.2をダウンロード」をクリック
    (バージョンはダウンロード時によって変わります)
  2. 保存先を指定して保存
  3. ダウンロードが終了したらファイルを開く
  4. Bracketsのアイコンをアプリフォルダにドラッグする
  5. 動作終了を待つ
  6. 完了するとBracketsのアイコンができる
    (私はデスクトップにショートカットを作りました)
  7. アプリを開くと警告メッセージが出る場合があるので、今後は警告しないようにチェックを入れてから開く
  8. アプリが開くとBracketsの解説が書いてあるサンプルファイルが開く

Adobe Bracketsダウンロードの具体的な方法



1.Bracketsサイトの「Brackets1.14.2をダウンロード」をクリック
  (バージョンはダウンロード時によって変わります)



2.保存先を指定して保存



3.ダウンロードが終了したらファイルを開く



4.Bracketsのアイコンをアプリフォルダにドラッグする


5.動作終了を待つ


6.完了するとBracketsのアイコンができる
  (私はデスクトップにショートカットを作りました)


7.アプリを開くと警告メッセージが出る場合があるので、今後は警告しないようにチェックを入れてから開く


8.アプリが開くとBracketsの解説が書いてあるサンプルファイルが開く


ちょっとmacでのダウンロードに慣れていなかったので、アプリフォルダへの移動で戸惑いましたが、無事ダウンロードできました!



HTML&CSS辞典にブックカバーフィルムをつけた!

突然ですが、本の表紙カバーって邪魔じゃないですか?

1回しか読まない本、たまにしか見ない本はそのままでも気になりません。

でも単語帳やよく見る本の場合、邪魔になりますよね?

で、表紙カバー取るとボロボロになります。

こんな感じでかなりボロボロになります。
マステで補強してます。



そして訓練学校で使っているHTNL&CSSの辞典なんですが、これもよく使う。
そして表紙が邪魔になりました。

で、表紙カバーを取って使っています。

使い始めて1週間くらい、すでに角が傷んできています。


そこで!
図書館でよく見るブックカバーフィルムを貼ることにしました!


使ったブックカバーフィルム


このカバーフィルムを使いました!

他にもカバーフィルムを貼りたいテキストがあったので、大きめの物を買いました!

ちなみにメルカリで350mm×2mmの大きなのがあったのでメルカリで買いました!

小さめでカット済みのカバーフィルムもあるようなので、用途に合わせて選べます。

ブックカバーフィルムの貼り方(写真付き)


では、私のカバーフィルム奮闘記をご覧下さい。
参考になれば幸いです。


ちなみにカバーフィルムはこんな感じのシートでロールになっています。
これを好きなサイズにカットして使います。


1.準備物を用意する。
  (私は結局カッターとカッターマットは使いませんでした)


2.表紙カバーの内側を少し斜めに切り取る。


3.本の上下と左右に2cmの余白が出るようにカバーフィルムを切る。


4.切り取ったカバーフィルムを本に巻いてみてサイズを再確認する。


5.カバーフィルムの角を少し剥がし本に貼る。
  (本を置く位置に注意!)


6.フィルムの紙を剥がしながら空気が入らないように少しずつ貼っていく。
  (この時定規を使うと貼りやすかったです)


7.6の要領で全面にカバーフィルムを貼る。
  (背表紙部分はフィルムがたるみがちなので注意が必要です)


8.本体を一旦外す。


9.赤い点線部分を切り取り、斜線部分は表紙カバーに貼り付ける。


10.本の中身を再セットして、余白部分を中に折り込んで貼り付ける。


11.気泡が入ったらカッターの先で少し穴を開けて空気を出す。


12.これで完成!!

ブックカバーフィルムの貼り方を参考にしたサイト

このフィルムコートの貼り方は下の「埼玉福祉会」さんのサイトを参考にしました!

社会福祉法人 埼玉福祉会 
ブックコートフィルムの貼り方


You Tubeで動画解説もされています。

ただ、動画見ながら作業するのは再生・停止するのに手が足りなくてはちょっと難しかったです。



最後に、私が訓練学校で使っているHTML&CSS辞典のご紹介。

めっちゃ書き込んでます!
これ1冊で分かるように授業の補足説明も余白に書きまくっています。

Crescent EveをWindows10にダウンロードしてみた

8月から職業訓練学校でWebデザインを学んでいる私ですが、家でも復習したい!と思い始めました。

まだHTMLを習い始めたばかりです。



訓練学校で使っているテキストエディターはCrescent Eveというソフトです。

他を使ったことがないし、まだまだ入門なのでこのソフトの使い心地は比較できないですが、今のところ私は使いやすいです!

そこで愛用のMacBookにダウンロードしようとしたのですが、どうやらMacには対応していいないようでした。


そこで最近ちょっとだけ軽くなったWindowsパソコンにダウンロードしてみることしました!

Crescent Eveのダウンロードページ

フリーでソフトを提供して下さっている「kashim.com」さんのサイトでダウンロードできます!

リンクを貼っておきますね!

https://www.kashim.com/

こんな便利なソフトをフリーで提供されてるだなんて、凄いですね!

おかげで私も楽しくHTMLを学べています!
ありがとうございます!

Crescent Eveダウンロードの流れ

  1. 「kashim.com」のCrescent Eve「詳しくはこちら」をクリック
  2. Crescent Eveページの「ダウンロード」をクリック
  3. 「Crescent Eveのダウンロード」をクリック
  4. ダウンロードの保存先を指定し「保存」をクリック
  5. 保存先のアイコンかウィンドウ下部からファイルを開く
  6. インストール先を指定して「次へ」
  7. オプションを選択して「次へ」をクリック
  8. 「次へ」をクリックし、インストールを開始する
  9. インストールが完了したらデスクトップにアイコンが出る
  10. アイコンをダブルクリックで開けるか確認する

Crescent Eveダウンロードの具体的な方法


1.「kashim.com」のCrescent Eve「詳しくはこちら」をクリック



2.Crescent Eveページの「ダウンロード」をクリック



3.「Crescent Eveのダウンロード」をクリック



4.ダウンロードの保存先を指定し「保存」をクリック



5.保存先のアイコンかウィンドウ下部からファイルを開く

※この時、オレンジのユーザーアカウント制御が出たら「はい」をクリック



6.インストール先を指定して「次へ」

※私はデフォルトの設定から変更から「ダウンロード」に変更しました



7.オプションを選択して「次へ」をクリック

※私はデスクトップにショートカットが欲しかったので、チェックを入れました。



8.「次へ」をクリックし、インストールを開始する



9.インストールが完了したらデスクトップにアイコンが出る
 (7でショートカット設定していなければ出ません)



10.アイコンをダブルクリックで開けるか確認する


これで訓練学校の復習ができます!!
頑張ります!!