高品質なランディングページ開発ができるエンジニアになるまで

 

今回は、高品質なランディングページを開発できるエンジニア（コーダー）になるまでどのような手順で何を学習するのが良いのかを考察していきたいと思います。

 

なぜ、あえてこのような主旨の逸れた内容をレポートにまとめようと思ったのか、その理由を述べることからはじめます。

 

まず、近年Web系エンジニアを取り巻く環境は非常に複雑化しており、学習内容が非常に広くなっています。技術の進化もはやく、全てを学習するのに一体どれほどの時間がかかるのだろうと混乱してしまうほどです。

 

一言にフロントエンドエンジニア（見た目を専門に取り扱う技術者）と言っても、WordPressの操作やカスタマイズ、CanvasやSVG、WebGL（ブラウザの3D描画技術）まで扱う人までいます。

 

また、一言でJavaScriptと言っても数多くのライブラリー、フレームワークが存在し、その一つ一つの学習コストは非常に高いと言わざるを得ません。現在主流のフレームワーク、ライブラリーを挙げると、

 

・JQuery
・React+Redux
・Angular.js
・Vue.js
・three.js
・Creat.js

 

と非常に多いですね。挙げたのはほんの一部です。

 

エンジニアに限った話ではありませんが、求められるスキル水準が昔と比べてはるかに上がっているのは事実でしょう。これからWeb業界に就職・転職しようと考えている方は何をどう学習すれば良いのかおそらく悩むでしょう。何が具体的にどう実務に役立つのかもイメージがつきづらいことこの上ありません。弊社もエンジニアを教育する上でもだいぶ苦労しています。

 

ここまで選択肢が多いとなると、何をやるかではなく、何をやらないかを選択することのほうが重要であると弊社は考えています。時間は有限です。全てのことを平均的にできたとしてもそれは器用貧乏であり、結局は現場では必要とされなかったりします。全ての業務をオールBでこなせる人よりも、たとえば、事務作業が全くできないけど、営業がずば抜けて上手い人のほうが人材の価値が高いと言えるかもしれません。

 

そこで、今回はこれからWeb業界に入ろうと勉強中の方やディレクターのために、弊社が試行錯誤した上で考え出した習熟効率の良い学習内容と手順について書いていきます。まずは弊社の品質でランディングページやWebサイトが納品できるレベルになるまでの手順です。

 

もちろん、会社や業務体系によって何が専門的に求められるかは異なります。かなりの主観が混じった内容になっていると思いますが、その点はご了承ください。

 

 

学習する前の下準備

 

どんなWebサイトを作れるようになりたいのかを決める

 

ある程度Webに親しんだ方であれば「このサイトかっこいいな・かわいいな」と思えるようなお気に入りのサイトをいくつかブックマークしていると思います。まずは、技術を身につけて「自分は何をしたいか、どんなサイトを作りたいか」を決めることをお勧めしています。

 

なぜなら、プログラミング学習は思った以上に地味です。覚えることも膨大にあります。分かりやすく言うと中学校、高校で勉強させられた英語みたいなものです。実際の会話でどう使うかも分からないような文法や構文の暗記&和訳をひたすら行うようなものです。これではモチベーションの管理に苦しみます。

 

英語が話せるようになって海外旅行を楽しみたいというような具体的な目標を持つと英語学習が楽しくなるように、プログラミングも「こんなサイトやツールを作りたい」と具体的な目標を作るのが良いと思います。

 

実務として仕事をするのにしても「面白い、楽しい、好き、興味がある」状態とそうでない状態とでは劇的に生産性が変わってきますし、学習のモチベーションにも大きな違いが生まれることでしょう。せっかくのキャリアですので自分の興味が向く方向に進むのが良いと思います。

 

 

作りながら学ぶこと（チュートリアルで学ぶ）を意識する

 

こちらもモチベーション管理をする上で大切なことだと考えています。本屋やオンライン講座には一つの見本となる完成物をチュートリアル形式で作りながら教えてくれる優れたコンテンツが多く存在しています。

 

ガッツリ厳密に技術書から学ぶことも大切ですが、作りながら学ぶことは具体的なイメージと知識を関連付けながら学習ができるため、効率がとても良いと言えます。

 

お勧めなのはオンライン講座です。実際に使ってみておすすめだと感じたのがProgate とUdemyです。

 

■ Progate

 

https://prog-8.com/

とにかく説明がわかりやすく、書きながらゲーム感覚で進めていくスタイルです。楽しく学習したい初心者におすすめで、フロントエンド、バックエンド両方の言語に対応しています。最も挫折しづらい講座とも言えます。

 

■ Udemy

 

https://www.udemy.com/jp/

一講座あたりの金額もリーズナブルで、かなりマニアックなことを学べるのが特徴です。Angular.js、react、Ruby on rail、機械学習などに特化した講座があり、本格的な実務で使う技術を身につけるのに適しています。基礎が身についたら、Udemyでいくつか自分にあった講座を探してみるのがいいでしょう。一線で活躍する技術者達の動画解説なのでより現場に近いと言えます。

 

 

HTML、CSSの学習と理解

 

まずはHTML、CSSです。これはJavaScriptエンジニアでも、PHPエンジニアでも、railsエンジニアでも、WordPressエンジニアでも、必ず学習しなければなりません。

 

JavaScriptもPHPもRuby on railsもHTMLにプログラムを埋め込む関係から、全てのWeb開発の基礎とも言えます。幸いにHTMLとCSSは非常にシンプルでよほど文字列を眺めるのが苦手という方でなければ短期間で（それこそ一週間程度で）簡単なサイトが作れるほどに技術を習得することができるでしょう。

 

習得するのは簡単な言語ですが、深く理解し、クオリティの高いコードを打つためには多くの練習が必要になることだけは頭の片隅に置いておく必要があります。ここで言うクオリティとはSEOに強く、表示速度がはやく、改善運用に強く、使い回しがしやすいという意味です。

 

 

Photoshopの操作方法を学ぶ

 

現場によってSketchを採用する場合もありますが、多くの現場ではデザイナーがPhotoshopを使用してサイトをデザインし、そのデザインをコーダーが再現するという流れが一般的だと思います。

 

そこでコーダーがデザインPSDデータを元に画像をスライス分解するといった作業が必要になるので、Photoshopの操作は一通り知っておく必要があります。どこまで使いこなせるようになるかはそれぞれ必要に応じてだと思いますが、

 

・各種ショートカットキー

・ブラシツール

・選択ツール

・レイヤーマスク

・クリッピングマスク

・レイヤーの操作

・文字ツール

・グラデーションツール

・カンバスサイズの調整

・レイヤースタイル

 

これらをスムーズに使いこなせるほどに練習を積んでおくとデザイナーのサポート作業ができるようになるのでお勧めです。Photoshopは膨大に機能があります。しかし、コーダーが実務で使用する機能はさほど多くないため、必要以上に学習に時間をかけないことも大切です。

 

Photoshopとなると、同じくデザイン制作に使われるIllustratorはどうなのか？と言った疑問も出てくると思います。近年はサイト画像にベクター画像、SVGを使用するケースが一般的で、デザイナーからIllustratorで作成されたファイルを受け取ることも頻繁にあるでしょう。よって、「Web用に書き出す方法」程度は知っておく必要はあります。

 

 

レスポンシブWebデザインを学ぶ

 

こちらは必須の技術と言っても過言ではありません。Googleがスマホサイトを用意しているかどうかで検索の順位に影響がでるように検索アルゴリズムを変更した影響も大きく、「レスポンシブWebデザインでなければならない」と言った一種の思い込みもWeb業界に蔓延しているためです。需要はとても大きいです。

 

弊社もランディングページをレスポンシブで作りたいと言った希望を聞くことは非常に多いです。

 

現実問題、コーダーはスマホサイトの制作技術に精通していなければならないため、レスポンシブを勉強することはスマホサイトを学ぶ上でとても役立ちます。ここも一つの挫折ポイントになりやすいので、チュートリアル動画などを使って作りながら学ぶことを意識することが良いと思います。

 

 

JavaScriptの学習手順

 

HTMLとCSS、Photoshopの操作方法を理解し、レスポンシブWebデザインでサイト構築ができるようになれば、もうこの時点でマークアップエンジニアとして仕事をすることができるようになります。クラウドソーシングなどで仕事を受注できるようになるのもこのタイミングだと思います。

 

一般的に

・HTMLとCSSでデザインを再現する人→マークアップエンジニア

・JavaScriptやPHPをバリバリ書ける人→フロントエンドエンジニア

 

というように区別され、受けられる仕事の幅と表現の幅を広げるためにJavaScriptの学習をはじめます。もちろん、マークアップエンジニアに比べて上位互換であるフロントエンドエンジニアの方が需要はあり、報酬の面でも必然的に高くなります。可能であればステップアップはした方が良いでしょう。

 

ここではじめてプログラミングの概念がでてきます。HTLMやCSSはプログラミング言語に分類されることがありますが、正確にはマークアップ言語と呼ばれ、プログラミングとは違います。

 

一週間程度で理解できてしまうHTMLやCSSとは違い、JavaScriptの学習はすぐには終わりません。暗記すれば高得点が取れてしまう世界史や日本史がHTMLだとしたら、プログラミングは数学になります。公式を覚えた上で論理的に思考を働かせ、自分なりの答えを数式で証明しない限り、正しくプログラムが動かないためです。この時点でチンプンカンプンになって挫折してくる方も出てくるのではないでしょうか。

 

その上、ライブラリーやフレームワークという概念が出て来るのでさらにどう学習すべきなのか混乱してしまいます。そこで、弊社が考える効率の良いJavaScriptの学習方法について考察します。

 

 

JQueryとそのプラグインをまず使ってみる

 

JavaScriptを簡単でシンプルな記述で動作させることができるJQueryは入門用として適しているのではないかと考えています。プラグイン（拡張コード）をコードに追加すれば複雑なアニメーションも、スライダーもアコーディオンも、フォームバリデーションも案外簡単に実装できてしまいます。

 

最初はプラグインもライブラリーもガンガン使っても良いので何ができるようになるのかイメージを広げておくことをお勧めしています。質の高いプラグインはJavaScript中級者以上になったとしても実務で使い続けるため、知識は蓄えておくと便利です。

 

JQueryなどのライブラリーがどのような原理で動いているかは徐々に徐々に分かるようになります。

 

 

脱JQuery

 

JQueryやJQueryプラグインを使ってサイトに彩を加えられるようになったら、今度はJQueryから離れることが大切だと考えています。JQueryはとても便利で弊社の業務でもほぼ100%使用していますが、便利すぎる故にJavaScriptを使いこなし、深く理解するために必要な基礎の概念が身につきづらいという欠点があります。というより、基礎を知らなくてもかなりのことができてしまうと言った方が適切かもしれません。

 

便利なプラグインがネット上に無数に存在し、優秀なブロガーがサンプルコードを無数にネット上に公開してくれているので、それらをコピペするだけでもサイト制作の業務はある程度完結してしまうのです。

 

しかし、プラグインだけでは対応できないこと、クライアントのニーズに合わせて細かくカスタマイズしなければならないことも多々あります。そういった場合はフルスクラッチでJavaScriptを設計し、バグがないかまで検証しなければなりません。

 

こうなった時、プラグインに頼りきったエンジニアはとたんに弱くなってしまいます。ここで初めて技術書を厳密に読んで言語の仕様を理解していく作業が発生します。

 

今後どんなライブラリーやフレームワークを使うにしても根本に存在するのはJavaScriptです。言語を深く理解することでどういった仕組みでライブラリーが動いているのかも理解することができ、自分がライブラリーを開発する立場に回れます。

 

弊社はこのタイミングでJavaScriptプログラマーが読むテッパン書籍、通称「サイ本」を読むことをお勧めしています。

 

 

サイ本は名著ですが、いきなり読むには難しくてハードルが高いので読み始めるタイミングが大切です。

 

言語の基礎を学ぶと言っても具体的に何を学ぶのか？と思うでしょう。

フルスクラッチでJavaScriptを開発できるようになるためには以下は最低限おさえます。

 

・繰り返し処理

・配列

・関数と引数

・this

・真偽値

・if文

・演算子

・オブジェクト、プロパティ、メソッド

・オブジェクト指向

・正規表現

 

JQueryのeach文を使わずにfor文を使う、セレクター取得以外は全てネイティブのJavaScriptで書くという工夫を普段から心がけることで少しずつ力をつけると良いでしょう。この段階まで来ると、他人が書いた複雑な長いコードも解読できるようになり、少しずつ楽しくなってくると思います。

 

どのプログラミング言語も似たような概念で動いているので、ここで基礎をしっかりと身につけておくと後が楽になりますので、妥協は禁物です。

 

 

JavaScriptのオブジェクト指向を学ぶ前にPHP、またはRubyのオブジェクト指向を学んでみる

 

JavaScriptの基礎学習がある程度まで完了したら、今度はPHPの学習をはじめ、オブジェクト指向を理解することをお勧めしています（RubyでもOKです）。なぜ、この中途半端なタイミングで別の言語を？とお思いになられたと思います。

 

別の言語を学習すると結果的に以前学んでいた言語の理解が深まることがあり、結果的に合理的な判断となります。特にJavaScriptのオブジェクト指向は非常に難解でJavaScriptだけで理解しようとするとおそらくこんがらがる人が多いと思います。

 

prototype？

prototypeチェーン？

クラス？

コンストラクタ？

インスタンス？

new演算子ってどうして使う必要があるのか？

 

ネット上で情報を調べていても、他の言語が分かっていることを前提で書かれている記事もあり、分かりにくさに拍車をかけます。ここも一つの挫折ポイントと考えています。

 

その点、PHPやRubyのオブジェクト指向はとてもわかりやすくてすんなり頭に入ってきて、JavaScriptの理解を深めるサポートをしてくれると思います。企業側もWordPressのようなCMSでサイトを立ち上げることが多くなってきているように感じます。PHPを学んでおくことは無駄ではありません。

 

 

SEOの理解

 

よりクオリティの高いWeb開発を行うためにはSEOの知識は不可欠です。SEOの勉強をすると正しいHTMLタグの使い方を理解することができますし、デザインのどの部分をプレーンテキスト化するのか適切な判断ができるようになります。

 

「検索で上位表示するように組み立てて欲しい」というSEOに関する需要も非常に増えてきています。SEOに詳しいエンジニアはそれだけでも大きなアドバンテージを獲得していると言っても過言ではありません。

 

 

Sassの学習とモダンフロントエンド開発環境について学ぶ

 

昨今のフロントエンドにおいてはCSSの効率化のためにSassを使用することが一般的です。

 

そして、JavaScriptにおいてはECMAScript 6の記法で記述し、Webpackやbrowserifyでモジュールをまとめるといった開発環境が増えているように思います。ターミナルで司令を出し、効率的にコーディング作業を行うようになるのもこの頃だと思います。

 

 

Canvas、SVG、WebGL、各種フレームワークについて学ぶ

 

HTML、CSS、Sass、JavaScriptが高いレベルでコーディングできれば、プロとしてかなりの範囲の業務をこなせるようになると思います。あとはそれにプラスαとして表現の幅を広げるための学習を状況に合わせて行います。

 

Canvas、SVG、WebGL、そしてAngular.jsなどのフレームワークは現場によって使う、使わないがハッキリ別れているため、全てについて学ぶ必要がないことは知っておいてもらえたらと思います。

 

例えば、reactやAngular.jsを使ってWebアプリを複数管理しているような会社であれば、フレームワークを扱う技術が求められますが、弊社のようにコンバージョン、SEO、売上を主体に取り扱っている会社では不要のスキルとなります（自社サービスのサイトでは使っています）。

 

業務で使用しないスキルは忘れてしまったりして習熟効率の面で言ってもコストパフォーマンスが悪いので自分の専門とする業務に関係があり、なおかつ興味が持てる分野を選ぶと良いと思います。

 

弊社の場合はCanvasやSVGなど、インタラクティブなデザインがどのようにコンバージョンに作用するか研究するために習得するといった形です。

 

 

最後に

 

冒頭でお話ししました

 

「近年Web系エンジニアを取り巻く環境は非常に複雑化している」

 

の意味をお分かりいただけたと思います。質の高いWebサイトを構築するために、これだけのことを学ばなければならないと考えた時、いかに限られた時間で工夫して効率化して学ぶかが重要なテーマになります。

 

ここでご紹介した学習手順は弊社が試行錯誤して考えたものになります。人によっては合わない場合もありますので、もし自分に合わないと感じたらすぐに他の方法がないかを考えてみてください。

 

多くのことを学習するのはとても辛いですが、一度技術を身につけてしまえば、それこそ「手に職ついた」状態となります。努力してみる価値は十分にあると言えます。