ノウハウをいつでも。ウェブマーケティングのポータルサイト

制作日誌

こうして僕はWeb制作者になっていった!パソコン超ド素人からWeb制作者へなるためにやってきたこと

このエントリーをはてなブックマークに追加
      
follow us in feedly
友だち追加数
僕がWeb業界に入ったのは今から約2年前。当時カナダに留学していたのですが、たまたま知り合った日本人の方の紹介で、とある日系のマーケティング会社に入ることになりました。すると「他に誰もいなかったから」という理由でWeb制作の仕事に関わることになりました。

しかし、「ん?HTMLってなんですか?」という感じでWebは全く無知の領域。それどころかパソコン電源の入れ方すらわからなかった超ド素人でした。今回は僕がこの状態から、いかにしてWeb制作者としてステップアップしていったのかをご紹介したいと思います。







1. Mac Book Airを購入した

mac.jpg マーケティング会社で働くことになって、まず初日に言われたのが、
「パソコンを変えろ!」
でした。

当時僕が持っていたのはかなり古くて重いWindowsのPC。これではWebの仕事はできないとのことで、すぐに近所のバソコン店に行き一番高かったMacBookAirを購入しました。お金はほとんどありませんでしたが、貯金を全部使い果たして何とか買うことができました。

振り返ってみると、これがその後Web屋としてやっていくために一番良かった決断だったと思います。というのもこれまでのWeb制作において、Macにかなり助けられることがかなり多かったからです。

シンプルな画面で1つ1つの動作が早く、トラックパッドが快適でかなり便利!さらにはフォントの美しさ、Web制作に便利なアプリが多く揃っているというのも良かったです。Web屋にMacユーザーが多いのもうなずけます。

参考記事

2. Photoshop、Dreamerwear、Illustratorを入れた

photoshop.jpg Web屋には不可欠と言われるPhotoshop、Dreamerwear、Illustratorを入れました。(これらも高かった。。)Illustratorは結局いまだに全然触っていませんが、Photoshop、Dreamerwearはよく勉強しました。

特にPhotoshopに関しては毎日よく触っていました。ツールパレットを順に触っていって「あっ、これはこういう機能か!」ということを確かめていき、最初は丸や三角など単純な形を作っていきました。

すると徐々にパンフレットやサイトで使われている簡単なデザインなどを見よう見まねで作れるようになっていき、3週間ほどずっと触っていると、だいぶ使いこなせるようになっていきました。

参考記事
Adobe製品の他にも、Web制作に必要なアプリも随時どんどんMacに入れていきました。
参考記事

3. Webレッスンを受けた

study.jpg カナダでWebディレクターとして活動していたバンクーバーのうぇぶ屋で有名なセナさんという方にWebレッスンをお願いしました。何かを教わるなら上達者から習うのが一番早いと思いましたし、同じ日本人ということもあり教わりやすいと思ったからです。

とても忙しい方だったのでダメかなと思ったのですが、運良くOKしていただき、週に2、3回Webの基礎的なことを教えていただくことになりました。

このとき経験豊富なWebのプロから教わることができたのは、自分にとってかなり大きかったと思います。主にコーディング部分を教えていただきましたが、それまでチンプンカンプンだったHTML、CSSの意味をしっかり理解することができ、その後のステップアップに役立ちました。


4. HTMLとCSS教科書を見ながらコードを書いていった

coding.jpg WebレッスンでHTMLとCSSの意味と基礎がわかったところで、次は図書館で借りた教材を見ながらコードを書いていきました。最初は教材に書かれていることをそのまま丸写し。2回目、3回目は意味を理解しながら書いていきました。

そうやって徐々に正確にかけるようになったら今度は「速さ」を意識して書いていきました。

コーディング練習を習慣にして2ヶ月ほど毎日コードを書いていたら、いつの間にか教材を見なくてもリストタグや表組みがスラスラ書けるようになっていきました。

コーディングの速さは練習量に比例して、どんどん上がっていくと実感しています。

参考記事

5. WordPressでサイト構築

wordpress.jpg デザイン、コーディングがある程度できるようになったところで、WordPressによるサイト構築にチャレンジです。会社で運営していた地域ポータルサイトのリニューアルをやらせていただくことになり、WordPressについて学ぶことになりました。

まずはアマゾンで購入した教材を最後までじっくりと一読。それを見ながら自分のPCにWordPressをインストールし、練習としていろいろ触っていきました。ここでWordPressのテンプレートタグを1つずつ書いていき、「あっ、このタグはこういうふうに表示されるのか!」ということを理解していきました。

当時会社にはWebについて知っている人は誰もいなかったので、地域ポータルサイトのリニューアルは基本的に全部僕1人で行いました。当然ながらつまずくところがかなり多かったですが、教材やGoogle検索で調べたことをもとにゆっくりながらも1つ1つ解決していきました。

開始から約2ヶ月を経て、生まれて初めての作ったサイトが完成しました。その時の喜びはかなり大きいものでした。このとき完成までの一連の流れを全てをできたことで、WordPressに関する知識がかなり高まったと実感しています。


6. いろんなWebサイトを見まくるようにした

sitegallery.jpg なんとかWebサイトをイチから1人で作れるようになったものの、他のサイトに比べ明らかにかっこ悪いものでした。。

「何が違うのかなぁ?」を知るために、サイトギャラリーを毎日見まくりました。

様々なジャンルのたくさんのサイトを見ていく中で、「良いと思うところ」「真似したいところ」を意識しました。多くの良質なサイトを見ていく中で、良いデザインに共通するものが徐々にわかっていったと思います。

特に良いと思ったサイトギャラリー

7. Web系ブログを毎日見るようにした

blog.jpg いろいろなWeb系ブログもRSS購読して毎日チェックするようにしました。この手のブログは日本でかなり多く、それらをしっかり読んでいくだけでかなりの勉強になると思います。以下の記事に載っているブログはぜひオススメです。 日本のだけでなく、海外のWeb系ブログもぜひオススメです。最先端の技術・トレンドが紹介させていてとても勉強になります。

8. 動画チュートリアルも見まくった






youtube.jpg ブログを読む飽きてきたら、今度は動画を利用してWebを学ぶようにしました。その際よく見たのが「ドットインストール」です。ドットインストールは、動画でプログラミングを学べる初心者向けのプログラミング学習サービスです。
dotinstall.jpg http://dotinstall.com/

HTMLやCSS、WordPressなど、言語や技術ごとにカリキュラムが別れており、1分〜3分程度の短い動画が1カリキュラムあたり10本〜30本程度のボリュームで構成されています。1本が短いので、毎日気軽に見ることができます。150以上のレッスン、2,200本以上の無料動画が公開されています。


9. デザイン模写を始めた

designpratice.jpg 先輩WebデザイナーさんのすすめでPhotoshopでのデザイン模写をやっていきました。駆け出しのWeb屋に効果的と言われる練習法です。

「学ぶ = まねぶ」と言われているように、どんな技術でもまずは真似することから始めます。模写することで、お手本サイトをじっくり観察し、細部においての工夫にまで気づくようになっていきます。また、自分のデザインの引き出しが増えたり、自分の問題点に気付くことができます。
  1. 気に入ったサイトのキャプチャをとる
  2. そのデザインのワイヤーを書き出す
  3. Photoshopで見本サイトを半画面表示させながら、トレースしていく
上記の手順でやっていきます。
トレースではマージン1pxにも気を遣い、デザインのポイントを考えながら丁寧に作っていきます。始めはかなりの時間がかかりますが、これを続けていくことでかなりのデザイン力向上につながるでしょう。

参考記事

10. 個人サイトをどんどん作っていった

privatesite.jpg 会社でWeb制作するだけでなく、自分のブログや学習メディアなどをWordPressで休日などを利用して作っていきました。この頃になると「もっともっと良いものを作りたい!」と思うようになり、プライベートでもWeb一筋という感じでした。フリーランスとして独立することを意識し始めたこともあり、ポートフォリオを1つでも多く作っておきたいという思いもありました。


Web制作は経験がかなり重要となってくる世界です。作ったサイトの数で決まると言っても過言ではありません。
だからこそレベルアップしたければ会社でだけでなく、プライベートでもどんどん自分のサイトを作っていくことが大事だと思います。


11. フレームワーク、Sassなどの拡張機能を覚えていった

frameworks.jpg Webサイトが徐々に苦なく作れるようになってきた頃に意識し始めたのが「スピード」です。どんなに良いサイトを作れたとしても長い時間がかかってしまったのではプロとは言えません。

時間短縮のためにフレームワークやSassなどの便利ツール・拡張機能をどんどん覚えていきました。 特にSassに関しては習得にかなり時間がかかりましたが、その後のコーディング作業を半分にするほど役立つものでした!

Web業界では新しい技術が次々と出てくるので、「またか...」と覚えるのが億劫になってしまう人も多いでしょう。しかし、いったん身につけてしまえばその後は何十、何百時間を節約できるかもしれません。

これはどの分野でも言えることですが、どんな初心者でも時間をかければそれなりのクオリティは出せます。質の高いものを『いち早く』、そして、『毎回同じようにできる』ことがプロとアマの違いです。だからこそ時間短縮のための技術は、ぜひどんどん学んでいきましょう!

参考記事

さいごに

いかがでしょうか?今回は僕がWeb屋としてステップアップしていく中でやっていったことをご紹介させていただきました。特に経験がまだ浅い方の参考になれば幸いです。

僕自身自分のレベルはまだまだ低いと感じている毎日です。。もっともっとスキルアップして自分の価値を高めていきたいと思っています。みなさん、ぜひこれから僕と一緒に頑張っていきましょう!

© MAKEPO

 
このエントリーをはてなブックマークに追加
   
follow us in feedly
友だち追加数

著者情報

ノビタ

のび太

Web制作会社「NOBITA」の社長をやっております、のび太と申します。大学卒業後、お金を貯めカナダに留学。バンクーバーのビジネス学校で好きな人に出会ってしまったため、日本に帰らず現地企業に就職。未経験ながらWeb制作、メディア運営、ライター業などの仕事に奮闘する。帰国後、フリーランスのWebデザイナーとして独立し、2014年5月、自身の会社を設立。「伸びていくWebサイトをお届けする!」がモットー。 ブログ:がんばれ!のび太!

他の参加者を見る

のび太

関連記事

マーケティングノウハウ足りてますか?

MAKEPOのメルマガ…購読してみませんか?
直近のピックアップ記事のほか、セミナー・ツール活用情報など不定期でお伝えしています。「サイトにアクセスするのは面倒だ!」「電車の中でざっくり読みたい」という方は是非ご登録ください。 リアルタイムで情報取得をしたい方は、RSSまたは公式Twitterをフォローしてご覧ください!

通勤中の情報収集に!

メルマガ登録

いますぐ新着情報を知るなら

LINE@で友だちに追加!