Webegg！～未経験者のWebデザイン奮闘記～

初心者Web学生の奮闘記！ 2018年から歩き始めたWebデザイナーの卵です！未経験者目線ですがWeb業界のあれこれをピックアップできたらと思います！

06：Bracketsはすごい子！

HTML3日目！

Webページを制作するために必要なものが2つ、HTMLとCSSです。

デザイン畑にいれば必ず聞くアドビシステムズ(Adobe)。Photoshop(フォトショップ)やillustrator(イラストレーター)など、一度は聞くソフト名だと思います。

 

その中で、Adobe Dreamweaver(アドビ ドリームウィーバー)がHTML webサイトを作成、コーディング、編集、管理できるソフトらしいです。しかし、現在のAdobe商品は月額使用料を払って使うようになってます。月額...まだWebを知りたてなのにハードルが高い(迷)

 

そんな時の救世主！知る人ぞ知るWebサイト作成フリーソフト？エディターがあります。それが「Brackets」です。

 

■Adobe Bracketsとは

Bracketsは、Adobe Systemsが開発するオープンソースのウェブ制作用テキストエディタである。 MITライセンスで提供され、GitHubで管理されているとの事。

 

Bracketsの凄いところはなんと無料(2018年2月現在)で提供されているという事です。

インストール方法は…と記載する前に素晴らしい先人方がまとめを作ってくださってますので、そちらをペタっと...

 

参考サイト

■Bracketsを初心者がインストールする方法　Windows編

creating-homepage.com

 

Bracketsの凄いところその２！

プラグイン、または拡張機能を入れることでさらに使いやすくできてしまう！という所です！

参考サイト

■Bracketsでおすすめのプラグインまとめ【初心者編】

creating-homepage.com

HTMLの先っぽしかまだ触れていませんが、これは…凄すぎるエディターだなぁと！これからのWeb制作、わくわくしてきました！皆さん本当に色々便利なものをわかりやすくまとめていてすごいなぁ...と日々感動してます。本日はここまで！

 

 

05：Googlebotはマルっとお見通し！

HTML2日目です。

基礎的なお話から丁寧にかみ砕いて勉強させてもらっています。

Web業界に入って思ったこと...専門用語の多さです。横文字が多く、意味より読み方から学ぶことがとても多いです。英語をもっと頑張っておけば...と開始早々に反省(泣)

 

■URL(ユーアールエル)...インターネット上のホームページの場所をお知らせする住所みたいなもの。

■W3C(ダブリュースリーシー)...World Wide Web Consortium (ワールド・ワイド・ウェブ・コンソーシアム)。HTMLやCSSなどの技術を標準化を推進する団体。

■HTMLのファイル拡張子...「.html」「.htm」

現在HTML5は「.html」が中心。「.htm」でも可能とのことですが…これは昔のPCの拡張子が3文字までしか使用できなかった為といわれてます。あと、現在「.htm」では認識しない事もあるようなので「.html」を使用していれば間違いない！らしいです！

■ブラウザの種類...検証は「IE」「Chrome」「Firefox」の3大ブラウザを使用

■Googlebot...インターネット上に存在する無数のホームページを巡回(スクロール)し、文書や画像などを定期的に読み取りデータベース化するGoogleのロボットの事。「クローラー」あるいは「スパイダー」と呼ばれる事があるそうです。

Webサイトは..HTMLを使用しますが、誤った文法・表記のままインターネット上にあげてしまうと、検索結果にペナルティがついてしまうそうです。わお！

 

2018年初めの月が終わりました、早い！

このブログはWebに入りたてのヒヨッコが基礎的な事をまとめたり、復習したりする場所なので生暖かく見守ってもらえたらと思います(笑)

 

参考サイト

■ファイル拡張子.htmlと.htmの差はどこにあるか

www.attend.jp

 

■Googlebot：Search Console ヘルプ

support.google.com

■Googlebotとは

ferret-plus.com

04：はじめましてHTML！

■HTMLってなんだろう？

Web関連書籍コーナーを見るとHTMLとCSSというワードを見ます。Webサイトを作るために必要なものなんだろうな～…くらいの曖昧なイメージしかありませんでした。

  

■HTML(エイチティーエムエル)

HTML...HyperText Markup Language(ハイパーテキストマークアップランゲージ)

・ハイパーテキスト…複数の文書を相互に関連付け、結び付ける仕組みの事。「テキストを超える」という意味から「hyper-（～を超えた）」 「text（文書）」とつけられたそうです。

 ・マークアップ...マークを付ける事。プレーンテキストにタグと呼ばれるで囲まれたマークを付加することによって、書体や修飾などの情報を表現している。インターネットのWebページで使われているHTMLはマークアップ言語。

・ランゲージ...プログラミング言語などの「言語」というよりも、このマークアップをどんなルールで行うかをきちんと決めておくための約束、つまり文法という程度の意味...らしいです。

※ネットで検索した情報なので、気になった方は個人で調べてみてくださいね！

 

はい、今も全くわからないです(苦笑)

何気なくPCやスマホから見ているサイトはほぼ、このHTMLから作られている。HTMLはホームページの骨格のようなもの。らしいです...うーん！わからない(大切の事なので二回言いました　笑)

 

これから色々教えていただいて、学ぶんだろうな！とポジティブな気持ちでいきたいと思います！

 

参考サイト

■HTMLクイックリファレンス

www.htmq.com■今さら聞けない！HTMLとは【初心者向け】 

techacademy.jp

 

 

 

03：Webディレクター

■Webディレクター…ってなにをする仕事なのだろう？

 

ディレクターとは、ディレクション業務をする人のことで「監督」や「指揮する人」を意味しています。クライアントの要望と制作スタッフ（デザイナー、ライター、コーダー、プログラマーなど）をまとめ、進行管理、品質管理などをする仕事です。(エン転職より)

 

Webデザイナー、コーダーがWeb作品に直接かかわる職種なら、Webディレクターは管理者に近い職業なのかもしれません。人の上に立ったり、動かしたりする事にやりがいを感じる方は向いているのかもしれないですね！

 

とは言いつつ、自分が業種名を初めて聞いた印象は…え、とても難しい職業な気がする…Web未経験の自分にはナンノコトヤラ状態！でしたが…先に、講師の先生のお話を聞いた結果だけお伝えします。今後Webで生きる為にめちゃくちゃ必要なスキル！少しだけでも知ればWeb業界の展開幅が広がる！ということです。

 

■現場でバリバリ！オーラが違う！Webディレクター講師O先生の話

～ディレクタースキルこそこれからのWeb業界に必要！～

講師のO先生は様々な広報代理活動を経て、不動産業界・飲食業界・旅行業界・出版業界等の様々な業界のWebアクセス解析の世界へ…という広く業界を知る方です。

 

現在、企業でWebディレクターを求める事が多いらしく…Webデザイナー職は多いが、Webディレクター職の数は少なく、企業募集もWebデザイナーと求人をかけてそこからディレクター業もできそうな人材を見つけているそうです（ここだけの話、WebのHTMLなどはディレクターはそこまで知らなくても(略)でも知っておくとなおよいです！と場を和ますお話もされていました)

 

■Webデザイナー、Webサイトに求められる成果・コンバージョン

今の時代、ただWebサイトを制作できる知識だけではダメ！

もっと先を見た何かが必要とのこと。

 

※もっと書きたいところですが、今日はここまで！

02：初心者村人、Web村に転職する？

■Web転職のすゝめ！

よーし！お父さん転職しちゃうぞー！

 

ちょっと待つんじゃパトラッシュ。

Web業界も色々な畑があるんじゃよ…！

  • Webデザイナー
  • Webディレクター
  • Webプロデューサー
  • Webプランナー
  • Webライター
  • Webプログラマー
  • フロントエンドエンジニア
  • コーダー
  • マーケッター
  • アナリスト
  • その他(SNS運用スタッフなど)

Webといっても沢山の職種があるんですね！

 

参考に…

■WEB業界を目指すあなたへ！WEBサイト制作に関わる職種一覧 | Web制作会社スタイル http://www.hp-stylelink.com/news/2014/03/20140310.php

■どんなスキルが必要？Web業界の職種をスキル別に解説！ [Tech2GO] https://blog.codecamp.jp/web_job_skill

 

ざっくりWeb系の仕事に就きたい！からはじめてしまうと、何もない宙をふわふわ浮いているような気持になります。Webデザイナー志望ですが、まさにこの状態です。

 

これから色々とWeb知識を勉強していきますが、しっかり自分に合った職業を見つけてスキルアップしていけるようマイペースに継続したいです。ブログもこれでいいのか不安ですが(苦笑)Webの先輩方のやっておくといいよ！を、ばたばたしながらチャレンジしていきたいです。

01：はじめましてのアイスブレイク

■アイスブレイク

皆さんご存知でしょうか？

私ははじめて聞いたワードです。

 

初対面の人同士が出会う時、その緊張をときほぐすための手法。集まった人を和ませ、コミュニケーションをとりやすい雰囲気を作り、そこに集まった目的の達成に積極的に関わってもらえるよう働きかける技術を指す。 アイスブレイクは自己紹介をしたり、簡単なゲームをしたりすることが多く、いくつかのワークやゲームの活動時間全体を指すこともある。「コミュニティビルディング（community building）」や「アイスブレイキング（ice breaking）」とも呼ばれている(wikiより)

 

意味を聞くと、なるほど！となります。

何を話したら良いのか、どういう人なのか、社会人も学生も初対面の人には緊張しますよね。自分は人好きですが、怖がり、という矛盾(笑)ハートを持っているので、初対面の方には失礼をしては…と、いつも以上にドキドキします。

 

Webデザイナーになった時、サイトを依頼してくれる新規クライアントは100％初対面の方になるんだろうな…と思うと、この「アイスブレイク」！良いな！と思いました。

 

参考に…

■硬～い雰囲気の会議の前に…絶対盛り上がる アイスブレイク集7連発！｜CANVAS - 第二新卒のこれからを描く https://mynavi-agent.jp/dainishinsotsu/canvas/2016/11/7.html

■「アイスブレイクとは」とは | BizHint HR（人事の悩みにヒントを届けるニュースサイト） https://bizhint.jp/keyword/78480?trcd=brw_tw_keyword_78480

 

ネットサーフィンが趣味なので、素敵を発見したら貼らせてもらおうかなと思います🐧✨