駆け出しWebデザイナーの日常

駆け出しWebデザイナーの日常

駆け出しWebデザイナー兼コーダーの日常ブログ。

ブログ移行します

別のところにブログ移行します!

今後の記事は下記リンクのブログで公開していくのでよろしくお願いします!

 

kakedashiweb.site

 

転職後の初出勤!

Webデザイナーに転職して初出勤してきました!
どんな仕事をするのか気になると思うので簡単に書こうと思います。

 

ではさっそく!
どんな仕事かというと基本的にサイトの更新作業です。

 

 

職業訓練でも聞いていましたが、はじめは基本的に既存のサイトの更新作業になります。
ある程度更新や画像可能(バナー作成)等ができれば問題なく作業することができます。

いまサイト制作系の会社やECサイト運営・更新等の仕事を目指している方はとりあえず基本的なコーディング+Photoshopの使い方をしっかり勉強しておくことをオススメします!

もちろん会社によるとは思いますが、制作会社に入社しても当分は更新業務がメインになるのではないかと思います。

 

 

私もまだ仕事を始めたばかりなので、更新を行っている際に先輩方のコーディングのソースの書き方などをみて実践で使えるように日々勉強していこうと思います。

 

 

 

コーディングのオススメの本も紹介しているので是非参考にしてみてください!

kakedashiweb.hatenablog.jp

Webデザイナーに転職までに身につけておきたいスキル

転職に必要なスキル

先日までWebデザイナーになるために職業訓練や個人で勉強していました。
Webデザイナーやコーダーになるためにはある程度スキルが必要です。

私が転職までに身に着けたスキルを紹介します。

PCの操作

この業界に入りたいなら当たり前ですが、PCのスキルは必ず必要です。
Webデザイナー志望であればwindowsの可能性もMacの可能性もあります。
特にデザイン面に強い会社ならMacが多い印象です。

私は奇跡的にも普段からwindowsMacの両方を使っているのでどこでも受けることができました。
10万もするMacを買って慣れておけとはいいませんが2つで共通部分ブラインドタッチ(タッチタイピング)なんかはできるようになっておいたほうが入社してからも役に立ちます。

 

Photoshop

Web業界ならもう必須。
どの求人情報をみても書いてあります。
デザインやバナーはほとんどPhotoshopで作られているので当然といえば当然。
ECサイトやWeb制作会社を目指している方は最低でも基本操作はできるようになっておきましょう。
そのための勉強法は、ネット検索すればいくらでも出てきますし、本もたくさん販売されています。
販売元のadobe社もYouTubeに公式動画を出しているので見てみてもいいかもしれません。

 

Illustrator

こちらのIllustratorも使われることが多いです。
PhotoshopIllustratorであればPhotoshopのスキルを求められることのほうが多いので先にPhotoshopを勉強することをオススメします。

ですが、両方できるようになっておくことをオススメします。
Illustratorではロゴやアイコンなどを作る場合が多かと思います。
私はみたことありませんが、会社によってはサイトのデザインもしているようです。

 

HTML/CSS

サイトを作るには必須のスキルです。
デザインのみで募集されている会社以外はこれができないとほぼ転職できません。

勉強方法については先日書いた

kakedashiweb.hatenablog.jp

などが書籍としてオススメです。

またドットインストールやProgateもオススメできます。

 

http://dotinstall.com/

 

prog-8.com

 

 HTMLとCSSがある程度できるようになれば、世に公開されている(ネット上にある)サイトをみながら1から再現してみると勉強になります。
わからない部分はChromeの要素検証などをしながら同じものを作れるように練習していきましょう。

学生時代にやった勉強のようにただ暗記するだけでは意味がありません。
実践でどれだけ使っていけるか自分の手で書いて覚えていくしかないと思います。
自分でコードを書いていくと誰もできるようになるのでぜひ諦めず続けてください。

 

職業訓練や学校に通うのも手

上記でも紹介したとおり覚えることはかなり多いです。
なので、現在転職活動中の方は職業訓練を受けてみたり、制作について教えてくれる専門学校などに通うのも1つだと思います。

私も職業訓練を受けましたが、あまり深くはないですが最低限のスキルを浅く広く教えてもらえます。
期間的には3ヶ月~4ヶ月程度になるのでかなり詰め込みになるので自分で知識をどんどん取り込んでいく意欲がないとなかなか難しいとは思いますが、できるなら業界に入ることもできます。

 

私が紹介した以外にも様々な勉強方法があると思うのでいろいろなところから情報を拾って自分にあう勉強方法でスキルを身につけていってください!

Webデザイナーでもブラインドタッチ(タッチタイピング)は重要

ブラインドタッチ(タッチタイピング)は重要

みなさんはブラインドタッチ(タッチタイピング)はできますか?
私はできません\(^o^)/
独自の両手指2本ずつ+親指でスペースと言った感じ今までやってきてます。
といっても速度的にはe-typingでGood!からもう少しいったぐらいのぐらいのスコアは出ます。

なんでそんなタッチタイピングもできないやつがこんな記事書いてんねん!って話ですが現状少し困っているからです(苦笑)

 

タッチタイピングではない独自のタイピングで早く打ててもたまにはキーボードを見ないと入力する事ができません。
私はずっと謎タイピングを8〜9年してきたので2本指でもキーボードを見ずにある程度打てますが、コーディングなんかで使う記号やアルファベットとなるとそうは行かなくなります。

今はホームポジションに手を置いて正しいタッチタイピングができるように練習している最中です。(まだ2本指の半分のスピードも出ません\(^o^)/)
正しいタイピングの仕方を覚えればキーボードと画面の目線移動の回数も減り、効率よくコーディングや文字入力ができるようになります。

 

そもそもそんなにタイピングが早くないということは、ぜひ今からでも一緒に練習しましょう!
タッチタイピングは練習すれば誰でもできるようになります。
私はコーディングの技術を覚えるのも大切だと思いますが、そもそものPCの操作の部分も改善していくことでより効率的に仕事や作業を行えるようになっていくと考えています。

 

ということでいくつかタイピングを練習できるサービスを紹介します!

 

タイピング練習ができるサイト

e-typing

www.e-typing.ne.jp

1つだけでなく色々なテーマの練習問題が用意されているので飽きずに練習することができます。

 

myTyping

typing.twi1.me

こちらもさまざまなテーマのものが用意されていますが、HTMLやCSSのタグなどが出てくる物があるのでタグを覚えながらタイピングができます。
わからないタグを見つけたら調べながら行うことで勉強になります。

 

 

技術を磨きつつ、タッチタイピングの練習やショートカットなんかもぜひ覚えてみてください!
そのうちよく使う便利なショートカットを集めた記事なども書ければと思っています。

HTML/CSSをこれから勉強したい人にオススメの本

オススメHTML/CSS入門書

HTML とCSSをこれから勉強したい人のためにオススメの書籍を紹介します。
サイトを作るのに最低限必要なHTMLとCSS

 

ゼロからわかるHTML&CSS超入門

様々な初心者向けの書籍が販売されていますが、その中でもHTML、CSSって何?って方にオススメの本はこちら。

少し古い書籍なので現在制作で使われるHTML5,CSSのついては書いていません。
しかし、HTMLとCSSのことを超初心者向けにわかりやすく書いているのでぜひ1度読んでみてください。

ゼロからわかる HTML&CSS超入門

ゼロからわかる HTML&CSS超入門

 

 

 作りながら学ぶHTML/CSSデザインの教科書

こちらの本は上のホントは違いHTML5を用いて説明されています。
個人的にこの本に書かれているコードが綺麗で説明も丁寧に書かれているのでオススメです。

完成データも付属しておりわからなくなったら完成コードと見比べてみてもいいかもしれません。

本のタイトルの通り作りながら学ぶ事ができるので実際にPCでコードを書きながら勉強してみてください。

作りながら学ぶ HTML/CSSデザインの教科書

作りながら学ぶ HTML/CSSデザインの教科書

 

 

私も今でも勉強中なのでオススメの本などがあればぜひ教えて下さい!

HTMLコーダーとフロントエンドエンジニアの違いについて調べてみた

Webデザイナー・HTMLコーダーという話でしたが、フロントエンジニアを!という話になったのでHTMLコーダーとフロントエンドエンジニアの違いについて調べてみました。

 

HTMLコーダーとフロントエンドエンジニアの違い

HTMLコーダー

HTMLコーダーとは、分業化されたウェブサイトの制作過程において、HTMLおよびCSSを使用してウェブページを作成する作業を行なう者の呼称である。
(引用元:HTMLコーダー - Wikipedia

Webデザイナーがデザインしたものをブラウザで同じようにみえるようにHTML、CSSを使って再現していく人の事を言います。

 

使用言語

・HTML
CSS
javaScript(初歩的)
jQuery(初歩的)

 

フロントエンドエンジニア

HTML5・CSS3・JavaScriptPHPといったプログラム言語などを使って高度なWeb制作スキルを持った人のことです。

会社によってもフロントエンドエンジニアの定義が違っている事があるようです。

 

使用言語

・HTML
CSS
javaScript
jQuery
APIを利用したWebサービスの構築
CMSでのサイト制作・機能拡張
など

 

HTMLコーダーよりも高度なスキルを要求されます。
フロントエンドエンジニアの需要が増えてきているのでどんどんいろいろな言語やAPIを扱えるように勉強しておく必要がありそうです。

 

ということで、フロントエンドエンジニアを目指してと言われたので軽くHTMLコーダーとフロントエンドエンジニアの違いについて調べてみました。
今後HTML,CSS以外の勉強を進めていこうと思います!

Webデザイナーになるまでの経歴となるまでにやったこと

今回はWebデザイナーになるまでの経歴とどうやってスキルを身に付けたのかについて書こうと思います。

 

経歴

専門学校卒業後の生活

元々ゲーム系の業界を目指していたので、イラストの専門学校を卒業しています。

卒業しても就職先が見つからずコンビニなどでアルバイトをしながらたまにイラスト・関係の仕事を外注で受けながら生活していました。
その期間もぼちぼち就職活動はしていたので、アルバイトをしつつ就活をしつつ安定しない生活を送っていました。

 

Web業界との出会い

その期間中に友人から仕事の話が舞い込んできました。
仕事と言っても同じくアルバイトで自社で運営しているサイトの更新業務です。
そのバイトはフルタイムで入ることができたので今まで生活よりも安定した給料が発生し、生活の質を上げることができると思ったのでアルバイトとしてやってみることにしました。

業務ではサイト更新をメインにずっと行い、社内で自由参加のサイトを作るための講習会が行われていたのでスキルアップのため参加していました。
この講習会でHTMLとCSSの基礎知識を身に付けました。
なんだかんだ半年程度でアルバイトから正社員登用され、2年ほど似たような業務をずっと行っていました。

 

退職

アルバイトから初めて2年ちょっと過ぎた頃担当部署の廃止。
深くは書きませんがいろいろあり担当していた部署が廃止。無くなってしまいました。

会社からも別の部署に移動するかと話をいただきましたが、「これを気に別の仕事をやってみよう」「違うスキルを身に付けよう」と思い退職という選択を選びました。

 

退職後

さて2年ちょっとなんだかんだ働いてきましたが会社をやめ次の仕事は何をしようかと悩みました。

前職でWeb系の仕事をしていたこともあり、学校卒業時よりもWeb業界への興味が出てきていました。

今まで更新業務ばかりで自分で一からサイトを作るという機会もほぼなかったのですが、次の仕事では更新側(管理)ではなく、作る側の仕事がしたいと思いました。
ですが、前職の講習会に参加していたものの踏み込んだところまではやっていなかったので、今以上にスキルを身につける必要があると感じていました。

 

職業訓練

 ハローワーク職業訓練というのがあったのを知っていたので、職業訓練はどのような内容なのか確認しました。

サイト制作以外にもプログラミングなど様々な職種の訓練があることを知りました。
もちろん次の仕事はサイト制作関係の会社に入りたいと思っていたので開始期間や内容を見て1つ選んで受講することにしました。

職業訓練といっても誰でも受講できるわけではありません。
人数も決まっているので最初に試験と面接を受け合格すれば入学できる形です。
私が受けた学科もインターネットで調べたところ人気の学科だったので受かるか心配でしたが、無事入学することができました。

職業訓練の内容としては、ビジネスマナーから始まり、サイト制作に必要なソフトの操作方法やHTML、CSSjQueryjavaScriptといった基本的な言語のスキルを教えていただきます。

HTMLとCSSはもともとある程度できてはいましたがちゃんとしたところで教わることでより深く広く知識を身につけることができたと思います。

 

転職活動

職業訓練を受けつつ就職活動をはじめました。
サイト制作もクリエイティブな業界なのでポートフォリオは必須。
ポートフォリオをある程度完成のところまで作り、日々改善しながら就職活動を行いました。
主にサイト制作会社とECサイトの運営や作成をしている会社を受けていたので、バナーが作れるかやコーディングの知識を求められます。
ポートフォリオ職業訓練で作成した作品や個人的に作ったものを入れていましたが、それだけではどうしても作品数が少なく日々の作品制作は欠かせません。

現在職業訓練を受けてWeb制作やECサイトの運営等を行っている会社に転職を目指している方は、職業訓練で作成する作品以外の作品を多く用意した方がいいです。
職業訓練で作成する作品数だけでは会社側に1人でどれだけのスキルを持っているのか、1人でも作ることができるのかという部分でわかりにくく内定はなかなか難しいと感じました。
また、作品数の多さはどれだけその仕事をやりたいのかのやる気度のアピールにも繋がります。
職業訓練は3~4ヶ月程度(学科による)のでその中でどれだけの作品を作れるのかが鍵になるのではないでしょうか。

いくつか会社を受けているとポートフォリオだけでなく実技試験としてコーディングやバナー制作を行わないといけないところもあり、とくにコーディングの基礎はしっかりやっておかないダメだと感じました。

コーディングメインで転職や就職を考えている方はなにも見ずともある程度のサイトを作れるスキルを身に着けておくことが必要だと思います。

私もポートフォリオの他にコーディング、バナー制作の実技試験を行い内定をいただきました。

 

そして現在に至ります。

 

 

内定までにやったこと

制作会社に内定をいただくまでに自分のスキルを磨くためにやったことを紹介します。

 

ドットインストール

短い時間で動画でいろいろな言語の説明をしてくれます。
HTML入門 (全24回) 、 CSS入門 (全23回)、 CSS3入門 (全19回)の3つをすべて行いました。

 

http://dotinstall.com/

 

サイト作成の入門書

サイトを作成するために最低限必要なスキルHTMLとCSSを身につけるため入門書を読みながらその通りにサイトを作成し、自分でキーボードを叩いて基礎知識を身につけました。

 

Progate

Web上でいろいろな言語の勉強ができるサービスです。
無料版と有料版がありますが、基本的なところまでなら無料で行うことができます。
「HTML & CSS- 学習コース 初級編 -」と有料になるところまでの中級編をすべて行いました。

 

prog-8.com

 

 

以上になります。
ほかにも無料で学習できるサイトも多いのでぜひ探してみてください。