• コーディング初心者の方
• 案件を対応してくれる人を探している方
• フロントエンドエンジニアに興味のある方

エンジニアスタートというブログを運営して半年くらい経ちますが、

そういえば、僕が作ったサイトって全然紹介してなかったな〜と思い、

突然ですがデモサイト作ったので紹介します。

デモサイトのご紹介

demo01

Just another WordPress site…

www.engineer-start.com

こちらです。

デザイン簡素で申し訳ないんですが、「こういうことが実装できるよ！」程度で作りました。

CSSやJSはよく使うものを予めアセットとして組んでるので、

ざっと1時間（もかかってない）くらいで制作しました。

このサイトで実装している要件としては下記の通り。

• HTML、CSSによるデザインのコーディング、レスポンシブ化
• JSによるフェードインやスライダの実装
• WordPressプラグインによるお問い合わせフォームの実装、サイトスピードの向上

こんな感じです。

もちろん、これ以外にもまだまだできることあるんですが、

よく使うものを選定して組んでみました。

やはり工数は大事

制作は、ただ質が良く作れればゴール、というわけではなく、

やはり、どれだけ早く、楽に作れるかというところは大事になってくるかなと思います。

もちろん質は大事なので、まずはそこをゴールとして作業したほうが、

結果的に「状況によっていろんなコーディング手法が使える」ようになるし、

質を高めていくことは初心者のうちはモチベーションにもなるので、良いのかなと思います。

追々こういったサイトを量産できるような仕組みを作っておくと、生産性もあがるかと。

2年半前の僕はというと…

今でこそ、こんなサイトが1時間くらいで作れてますが、

Web業界に入る前は、レイアウト整えるとか、レスポンシブ化するとか、全然できてませんでした。

最初のポートフォリオはBootstrapを使ってましたが、

そういったライブラリを使っても、全然きれいなサイトを組めてませんでしたね。。。

業務経験半年くらいでやっと一つのサイトを組めるようになり、

今は要件に対するベストな方法とか、サイトスピードとか、色々なことを意識してサイト制作しております。

ちなみに最初に一つのサイトを組んだときは、ポータルサイトでした。

特に「コーディング初心者」の方は、2年くらいでこんなことができる、という指標になればよいなと思います。

ただ先程も申し上げたとおり、今回のデモについては「こんな機能実装できるよ！」くらいで作ってるので、

もっとデザイン性の高いサイトを作ることも可能です。

案件の対応をしてほしい方はtwitterからDMください！

デモサイト紹介しましたが、他にもいろいろなことが実装できます。

• ピクセルパーフェクトのサイト（工数はちょっとかかります。）
• メディアなどの回遊性を持ったサイト
• カスタムフィールドを使ったサイト
• その他アコーディオンだったり、ブラウザによる不具合の対応だったり

土日は副業してますので、ぜひ案件を紹介してください！

LPも得意ですし、HPも制作できます。

基本的にはデザインを見てコーディングの設計方法を決定（だいたいBEMとFLOCSS）して、

案件によってやり方を変える（ベストな方法を選定する）こともできます。

費用などはその都度ご相談させていただければと思います。

スキルセットは簡潔にいうと下記の通り

• HTML
• CSS
• jQuery・JavaScript
• PHP・Wordpress

WordPress案件は得意としてます！

また動きのあるサイトだったり、お客さん側で動かしやすいサイト、

お問合せフォームやブログ機能のあるサイトもカスタマイズも可能です。

レスポンシブも可能です。

デザインはできれば手配いただきたいなと。笑

ご連絡お待ちしてます〜。

投稿 デモサイトのご紹介【実務経験2年半のコーダーがどんなWebサイトを作れるのか】 は エンジニアスタート に最初に表示されました。

• プログラミングやコーディング初心者の方
• Web業界へ転職をしたい方、Web業界でよく使われる言葉を知りたい方
• コーディング学習中だけど、用語がわからなくて作業進まない方

コーダーに転職をしたい方、もしくは転職したばかりの方は、

仕事でよく使われる用語につまづくことも多々あるかと思います。

何年か働いていれば、自然と分かるようになってくるものかと思いますが、

コーディング学習中の方や、特に独学中の方は、

「そもそもあまりWeb上でコーディングのことを調べたときになかなか出てこないけど実はWeb業界で結構使われている用語」

などにつまづきやすいかなと。

コーディングのみを独学されている方に関しては、ディレクターやデザイナーと連携をとるために

ディレクション・デザインの用語を知らないまま転職、といったパターンも考えられます。

そこで今回は、主にコーディングをしている方に向けた、Web業界でよく使われる用語を

ざっと紹介していこうと思います！

コーディング初心者に知っていただきたい、よく使う用語をざっと解説！

ツール

• エディタ → コード書くためのツールです。コーディングを効率的に行う機能ありです。
• CMS → コンテンツ管理システム。ページ内にコンテンツを増やすとかを簡単に実装する仕組み。WordpressもCMSです。
• FTP → PC内のデータをサーバーに送るためのツールです。
• サーバー → Webサイトなどを公開するためのコンピュータ。データ保管庫という意味でも使われる。（その他に色々定義あるんですが、主に使われるとしたらこんな漢字。）
• GUI → コードでコンピューターに指示を出す作業を、視覚化してくれる。例えば、コードで出す指示をボタンで出せるように視覚化など。
• git → コードを管理してくれるツール。複数人作業の場合は特に必要。
• タスク管理ツール → 案件管理や業務効率化する為のツール。企業によって使い方いろいろ。notionとかよく聞く。
• 検証機 → 制作したWebサイトを検証するためのPCやスマホ。Webサイトはコーディングしたあと、OSやブラウザ、デバイスによって見え方が変わったり、表示崩れがあったりするので、それを確認、対処するための確認用PCやスマホのこと。

データ系

• 素材 → コーディング用に加工する前の画像です。
• アセット → 画像やcssファイルなどが一式入ったフォルダ。（※場合によって定義は結構異なります。）
• PSDデータ → photoshopで作られるデザインデータ。
• AIデータ → illustratorで作られるデザインデータ。
• XDデータ → XDで作られるデザインデータ。
• スプレッドシート → googleが提供する表計算ツール。エクセルと同じような機能が使えて、なおかつ社内共有とかがエクセルと比較すると楽。スプシとかに略されることあり。
• ドキュメント → googleが提供するテキストツール。ワードと同じような機能が使えて、社内共有とかが楽。
• スライド → googleが提供するプレゼンテーションツール。パワーポイントと同じような機能が使えて、社内共有とかが楽。

Webサイト系

• ブラウザ → Webサイトを閲覧したり、コーディングの際に表示を確認するソフト。コーディングの際に使うブラウザは、Google Chromeがおすすめ。
• 検証ツール（デベロッパーツール）→ サイトのあれこれを検証・調査するためのツール。コーディングの際にめっちゃ必須。
• LP → ランディングページ。ある特定の商品を紹介したり、広告として使われるような1ページのサイト。
• SEO → 検索エンジン（googleとか）に上位表示されるための仕組み。SEO対策とか言ったりします。
• コーポレートサイト → 企業の情報が入ったホームページ。
• ECサイト → 商品を購入するためのサイト。例でいうとzozotownとか。

制作系

• ワイヤーフレーム → Webサイトを制作する前に作る、サイトの骨組み。一般的にはデザインや装飾がないレイアウトに、テキスト情報や、どこに画像が入るか、などの情報を可視化する。ディレクターが作成することが多いかと。
• 要件定義 → Webサイトで実装する機能などを定義する。ワイヤーフレームとセットで使われることあり。ディレクターが作成することが多いかと。
• フィードバック → デザインやコーディングなどで制作されたものに対して、改善点や修正点を出して再度デザイン・コーディングを行う流れ。FBって言われたりします。
• トンマナ → トーンアンドマナー。デザインの全体を通して一貫性をもたせること。デザインなしでコーディングでボタンを追加してほしい、とかなった場合は、ボタンのデザインはトンマナを合わせつつ追加する、とかよくあるかなと。

あえてざっと書いた理由

他にも色々な言葉が飛び交うWeb業界なんですが、よく使われるな〜と思った用語をざっと記事にしてみました！

この記事、あえてざっくり書いたんですが、

その理由は、「Web業界で使われている言葉は、ネットで検索すれば詳細を調べることができる」からですね。

以前、「検索力」についての記事を書きました。

【PC業務に全般に使える】検索力の鍛え方

この記事を読んでほしい方パソコン作業を効率化させていきたい方プログラミング・コーディングでの課題を解決する最適な方法が知りたい方。web制作やwebサービスの開発に携わっている方、またはその初学者パソコンに携わって業務をし...

engineer-start.com

2022.03.26

Web業界に限らずなんですが、使われる用語はめっちゃたくさんあったりします。

実務経験を積みつつでないと、聞かない用語もあったりするので、

常日頃から、聞いた言葉は詳細を調べて、インプットしていくことがおすすめです。

今回書いた用語について、興味があるところだけでも良いので調べてみてください！

さらに言えることは、用語を調べつつ、コーダーとしてどんな動き方をすればよいのかまで分かるとベストですね。

それでは、初心者コーダーの方、応援してます！

投稿 コーディング初心者に知っていただきたい、よく使う用語をざっと解説！【あえてざっと書きます。】 は エンジニアスタート に最初に表示されました。

• エンジニア転職を目指してる方
• どうすればエンジニアになれるか知りたい方
• 転職までの行動で、失敗したくない方

こんにちは、Joeです。

今の業務をやっていて、楽しさを感じることができていない方、ぜひWeb業界へのエンジニア転職がおすすめです。

僕はWeb業界に入って、仕事が楽しいと思えるようになりました。

プログラミング、コーディングの楽しさについて、具体的に書いてる記事があるので、見てみてください。

【プログラミングが続かない人に見てほしい】プログラミング・コーディングの楽しさとは？

この記事を読んでほしい方コーディングやプログラミング独学中で、挫折しかけている人プログラミングに楽しさが見いだせず、学習をやめてしまっている人プログラミングやコーディングは、PCとひたすら向き合う作業です。ずっと続...

engineer-start.com

2022.04.09

Web業界で働くメリットはなにかというと、

• 色々な業界から必要とされるスキルが身につくので無駄にならない
• 無料からはじめられる
• 作業はハマると楽しいし、割とすぐ結果が出やすいので自己肯定感が上がる
• やり方次第でガッツリお金が稼げる
• リモート業務が可能なので、色んな場所で働ける
• コーディングにおいては、コミュニケーション能力に左右されずに業務できる
• ゆくゆくはフリーランスになることも可能

などなど様々なメリットがあります。

デメリットももちろんありまして、

• 効率よく勉強しないと、すぐに結果が出なかったりする
• 一時期、ガンガン作業する期間が必要
• コツコツが苦手な方には合わないかも

個人的にこんなイメージです。

なので、エンジニア転職には、性に合えば「楽しく仕事しながらお金を稼ぐ」ことができる可能性があると思います。

ただ、自分の性に合っているかが分からないままお金を使ってエンジニア転職を目指すよりも、

無料から始めつつ、自分に合っているかを見極めて、転職を目指すのがおすすめです。

web業界の完全未経験者におすすめしたい、エンジニア転職の方法

流れとしては、

1. プログラミングスクールを利用する
2. ポートフォリオを作る
3. 転職エージェントを使ってエンジニア転職する

こんな感じです。

プログラミングスクールを利用する

プログラミングスクールはおすすめです。

なぜかと言いますと、下記のとおりです。

• プログラミングの1分野について網羅的に学べて、分からないところをメンター（先生）に聞ける
• 期限を設けて作業ができる
• 最終的に転職活動がスムーズになる
• 面接の際に話がしやすい

ただ、大半のプログラミングスクールは高額です。

高額だけど、「楽しく仕事しながらお金を稼ぐ」つまり、転職してお給料をいただくか、

フリーランスになる、までいけたら、すぐに元が取れると思います。

転職するつもりはないけど副業でプログラミングしたい、という方も同じくですね。

とはいえ、性に合うかどうか判断するために無料から始めることがおすすめです。

無料体験できるプログラミングスクールはこちら。

テックアカデミー無料体験

受講者満足度も90%以上！【WEBCAMP】

あとは、無料でもスクールでもないんですが、オンラインの学習サイトのUdemyも、安くで学習できるのでおすすめです。

世界最大級のオンライン学習サイトUdemy

ポートフォリオを作る

学習が終わったら、ポートフォリオは作りましょう。

エンジニア転職であれば、企業側としてどのくらいのスキルがあるか、見たいと思うので。

ポートフォリオの作り方の詳細は、また別記事にまとめてます〜

Web制作のフロントエンド転職で使うポートフォリオの作り方とは？【おすすめは1から制作です】

Web制作のフロントエンドエンジニアとして転職したい方向けに、ポートフォリオサイトの制作についての内容を書いてます。結論としては「1からサイト制作」することをおすすめしてまして、その理由などを含めて概要をお伝えします。

engineer-start.com

2022.04.23

転職エージェントを使ってエンジニア転職する

エンジニア転職であれば、転職エージェントを利用するのが良いと思います！

僕も一度利用したことがありまして、履歴書の添削をしてくれたり、

複数の企業さんと繋げていただいたりしまして、

現在はありがたいことに、レバテックキャリアにご紹介いただいた企業に務めてます。

ただ、業務未経験だと、なかなかマッチする企業が見つからない可能性もありますので、

レバテックルーキーに登録がいいかもしれませんね。

どちらも無料で登録できます。

ITエンジニアになりたい就活生のための就活エージェント【レバテックルーキー】

Webエンジニアの転職なら【レバテックキャリア】

エンジニア転職は、より豊かに生きていく可能性を秘めている

こんな感じで、エンジニア転職を目指す、もしくはエンジニアの仕事を知りたい場合、

無料で試しながら、エンジニアとしての能力を身に着けたり、知見をつけることができます。

もちろん、エンジニア転職にもメリット・デメリットがあるのですが、

人によってはエンジニアになることで、今までよりも豊かに生きていくことができる可能性があります。

たとえば僕の場合だと、

• リモート勤務が可能になった
• エンジニアの業務が楽しいので、興味を持って仕事ができるからストレスがない
• コーディングの話ができる人同士の会話が面白く、人脈が増えてきた
• WordPressを主に使うエンジニアなので、ブログを書くなどエンジニア以外の仕事ができる
• 初心者を抜け出したあとも、無料で色々試しつつ勉強しているのでコスパが良い

こんなメリットがありました！

個人的に、「自分はコツコツ作業することができそう」とか「PC技術に興味がある！」と思う人には

ぜひぜひ試してみてほしいなと思います！

それでは〜

投稿 web業界の完全未経験者向け：エンジニア転職の方法を解説【失敗しない為のおすすめは、「無料から始める」です。】 は エンジニアスタート に最初に表示されました。

• フロントエンドエンジニアとして転職をしたい方
• Web制作の業務がつらいのかを知りたい方

フロントエンドエンジニアの業務はひたすらPCと向かい合う作業です。

これからフロントエンドエンジニアとしての転職を考えている方は、

この仕事がどのくらいの業務量なのか、精神的につらいのか、気になりますよね。

今回は、僕がWeb制作の現場で働いてきた中で見てきた、フロントエンドエンジニアの実情を書いていきますので、

転職する際の判断基準として、参考にしてみてください！

フロントエンドエンジニア・Web制作の業務はつらいのか？

結論、状況や人によるんですが、

「業務量・作業量は多いけど、つらくならないように仕組みをつくることができる」

というのが僕の回答になります。

フロントエンドエンジニアは、Webサイトなどの見た目を、ブラウザ上で見ることができるように整えていくことが仕事になりますが、

その作業を効率的に回すには、どうすべきか？も考える必要がある業務です。

たとえば、よく使うコードはいつでもすぐに記述できるように「スニペット」を使うとか、

運用がしやすいように、他の人が見ても分かるように、自分なりでも良いのでコーディングルールに則って作業をするなどですね。

スニペットとは？

「スニペット」は、特定のコマンドを打つと、コードが自動的に出てきてくれる仕組みです。

わざわざコードを書き直す手間を省いてくれます。

最初のころは、コードに慣れるためにあまりスニペットを使わないことをおすすめします。

コードを書いているうちに、「このコードよく使う」とか「この長いコードを一瞬で出したい」とか

考えることが出てくると思うので、そのときにスニペット化すると良いかと思います。

おそらく、慣れないうちからスニペットを使おうと思うと、

改良を加えるために何度もスニペット登録を繰り返すことになると思います。。。

スニペットは、コードエディタごとに登録するための記述が違うので、

「ジェネレータ」を使うのが良いでしょう。

ジェネレータを使えば、コードをそのエディタのスニペット記述に自動で置き換えてくれます。

ググったら、出てくると思うので、試してみてください！

コーディングルールに則って作業すべき理由

これは、「修正や運用がしやすいようにしておくため」、「チームで作業できるようにするため」ですね。

例えば、HTMLやCSSでレイアウトを組んでいくとき、

CSSのクラス命名ルールがないと、意図しないスタイルが当たって、

レイアウト崩れが発生したりします。

そうなると、レイアウトを組んだ場所のみならず、

全体を見てレイアウト崩れがないか確認しないといけません。

これが「修正や運用がしにくい」コードの一例です。

クラス名のルールがあれば、上記のような「CSSの干渉」は未然に防げますし、

確認の手間を取らず修正や運用ができます。

また、コーディングルールが一貫していれば、CSSの命名を考える必要がなく、レイアウトを整えたり、スタイルを当てたりすることができます。

これは、チームで制作する上で、大事な考え方だと思います。

ルールを展開すれば、「制作者に問わず、質や工数をある程度一定に保つ」ことができるからですね。

「コーディングルール」という考え方を持っておけば、サイトによって「どのくらい工数がかかりそうか？」を事前に把握できますし、

事前にどのくらいの業務量になりそうかを逆算できますので、

業務がつらくならないための仕組みとしておすすめです。

チームのコーディングルールと、自分のコーディング手法との相性にもよる

とはいえ、すでに所属するチーム用のコーディングルールができていて、自分のコーディング手法と違った場合は、

チーム用のコーディングルールに慣れるまで時間がかかるでしょう。

もちろん、チーム用のコーディングルールは、その案件の特性に対して作られていることが多いと思うので、そのルールに則ったほうが後々問題が出にくいと思います。

なので特に初学者のうちは、色々なコーディングルールに触れておいたほうがいいかなと。

意識しておいたほうが良いと思うのは、

• 案件の修正や運用を任されたときは、一通りコードを見て規則性を確認する。
• コーディング設計を学ぶ。（BEMがおすすめ。）

このあたりですね。

色々なコーディングルールに触れて、それらを修正や運用できるようになれば、

様々な案件を作業することができるので、おすすめです。

また、すでに提唱されている「コーディング設計」は存在するので、

コーディングルールに触れながら設計方法を探してみてください。

BEM設計をざっくり説明

ちなみに、僕がおすすめしたいのは、BEM設計です。

BEMのメリットは、

• パーツやコードを流用・修正しやすい
• パーツをちょっとだけ変えたいときのクラス名ルールがあるので、CSSが破綻しづらい。

このあたりですね。

WordPressなどのCMSにも組みやすいです。

「ちょっとだけ変えたい」の範囲としては、色味を変えるとかの見た目の部分だったり、

ボタンを非活性（押せないようにする）にするなど状態を変えたり、の範囲です。

初心者のうちは、ガンガン作業に打ち込むのがおすすめ

コーディングの設計やルールを抑えることができれば、かなり仕事はしやすくなると思います。

ただ、設計やルールの概念にたどり着く前に、やはり作業に慣れる必要があると思いますので、

初心者のうちは作業に打ち込むことを個人的にはおすすめします。

追々、自分で設計ができるように、作業しつつルールを意識していくことが大切だと思います。

設計やルールが分かってくることも楽しさのひとつなので、

ぜひ意識しながらコーディング作業に取り組んでみてください！

投稿 フロントエンドエンジニア・Web制作の業務はつらいのか？実情は？ は エンジニアスタート に最初に表示されました。

• フロントエンドエンジニアとして転職をしたい方
• ポートフォリオの作り方を知りたい方

フロントエンドエンジニアとして転職活動を行う際、

ポートフォリオを作ることで、企業に対して自分のアピールに繋がります。

エンジニアであれば、エクセルやパワーポイントよりも、Webサイトで制作するのがいいでしょう。

僕自身、未経験だった頃に、ポートフォリオをサイトとして作って転職活動に取り組みました。

今現在では、僕が働いている会社で、コーダー・フロントエンドエンジニア採用の際に、応募者のポートフォリオを拝見することがあります。

もちろん、会社によって「どういったコーダー・エンジニアがほしいか」は変わってくるんですが、

作る際の参考になればいいなと思います！

Web制作のフロントエンド転職で使うポートフォリオの作り方とは？

結論だけ言うと、おすすめは「自身で1から制作した」ということが伝わるポートフォリオですね。

企業として、業務未経験者のポートフォリオを見て知りたいことは、

• その人の現状のスキルや特徴、どんな人柄なのか
• これからスキルの向上が見込めるかどうか、独学でどのくらいやってきたか

このあたりは特に重点的に見られているかと思います。

Web制作で大事なことは色々あって、

• ユーザーから見たサイトの使いやすさ、見やすさ
• サイトの修正・運用のしやすさ
• デザイン・トンマナ

こういったことが重要になります。

この中で個人的に、まずはコーダー初心者としてこだわってほしいのは、「サイトの修正・運用のしやすさ」ですね。

このことを前提に記事を書いていきます。

テンプレートを使うのは、あまりおすすめしない。

実は、サイト制作のテンプレートのようなものは、世の中に出回っていることもありまして、

今まで自分が採用に携わった中で、サイトの見た目が、他の人のものとほぼ同じようなポートフォリオを見ることもありました。

この場合は、なにかしらのテンプレートを使ってポートフォリオを制作しているかと思います。

確かに、テンプレートを使うとサイトを綺麗に表示できるし、評価を受けやすいと感じるとは思います。

テンプレート自体は使っても問題ないとは思いますが、

自身でほとんどコードを触っていない、というのが分かってしまうので、

今後コードをしっかり書いていけるのか、

サイト修正・運用のしやすいコーディングを学んでいける方なのか、

などなど、疑問が残ってしまいます。

業務でもテンプレートを使っていく、といった考え方もありっちゃありなんですが、

その会社特有のデザインだったり、コード運用や修正のルールを踏まえると、

テンプレートだと「汎用性」がなかったり、「コードの使い回しがしづらい」など、

色々と壁にぶち当たる可能性があります。

サイト運用・修正のしやすさなどを考えると、

「汎用性」や「コードの使い回しのしやすさ」など、

それを達成するための考え方は、コーダーとして大事になってくるので、

「コードを１から書こうとした」ということがアピールできるといいかなと思います！

まずはサイトの見た目よりも、人柄や特徴などを伝えたい。

とはいえ、サイトを1から作ろうとすると

特に初心者はやり方を調べたりで時間もかかるし、

時間を書けた分、見た目の良いものが作れるかといったらそうではないことが多いです。

サイトの見た目にこだわっていったり、スキルを身に着けていくことは、

業務を始めたあとに積み重ねていけば良いと思うので、

まずは、「現時点でどういう考えでフロントエンドになりたいか」や、

「1からコードを書いて、どんな部分にこだわったか」など

自分の考え方の部分をポートフォリオで表現できると良いと思います。

それは、ポートフォリオサイトに表示されるテキストでそのまま表現しても良いですし、

そのサイトを構築したコーディングデータで表すのもアリです。

（とはいえ、すごくデザインに凝った制作会社に入りたいとか、Webデザインに興味ある場合は、

ある程度デザインのこだわりも見せていった方がいいとは思います。）

僕がWeb業界未経験だったときに作ったポートフォリオについて

ちなみに、僕がフロントエンド未経験で、採用をもらったときに提出したポートフォリオには、

次のような事柄を書きました。

1. プロフィール（名前、年齢など）
2. 転職にいたった経緯（なぜ前職を辞めて、Web業界で働きたいのか、など）
3. その会社に入りたい理由
4. フロントエンドとしての現時点のスキル、どの程度できるか
5. 今後どういうふうに成長していきたいのか

このあたりが書けていれば、人柄や特徴が伝わると思います。

受ける会社によるんですが、あまり固く書かず、自分らしさを出すのもアリだと思います。

どんなサイトだったか？

サイトの見た目自体は結構ボロボロだったと思います。。

今では結構必要とされている「レスポンシブ化」にも対応していないのでPC表示しかできなかったり、

単純にグレー背景をサイト全体に敷いて、それぞれのブロックに白背景を乗っけたような

なんとも簡素なデザインでした。

それでも採用をもらえたのは、

「自分で１から作ったこと」で、自分の考え方をスムーズに伝えることができたからだと思います。

それ以前に応募した会社では、テンプレートに近いようなポートフォリオサイトでしたし、

「どこにこだわったか？」を全然答えられず、お見送りになることが多かったです。

結果として、会社に入ったあとはフロントエンドエンジニアとして活動できましたし、

Web制作に付随するワイヤー制作やデザインの一部を任せてもらうことができました。

「スキル面は入社したあとになんとかなるので、今後成長するためにどういった考え方を持っているかを伝える」くらいでポートフォリオを作ってみると良いかなと思います！

1から作ってみて「つまづいたところ」「改善策」などを伝えることができれば、ベター

ポートフォリオサイトを「1から作る」ことの付加価値として、

「1から作ったことでつまづいた点やその改善点」は言いやすくなるかなと。

ポートフォリオをサイトとして完璧に完成させるよりも

中途半端だったり抜けがあっても、サイトを作ってどうだったかなど、企業は興味あると思います。

コーディング設計はこう考えた、ユーザーのことを考えてこういった対応をした、デザインにこだわった、などですね。

実際にポートフォリオを作成しているときは、

一通り完了するまでに何かしら壁にぶち当たると思います。

そこに対する対処方法などが伝われば、今後同じような壁に当たったときに、

どんな対処をする人なのかが、ポートフォリオを見ている人に伝わるかと思います。

もちろん、そこを踏まえてフロントエンドエンジニアよりもディレクターの方が向いてるとか、企業側として色々な判断を下すと思いますが、

自分の向き不向きを企業から学び取ることも、転職活動をする上での大きな意味だと思います。

ポートフォリオを作って転職活動をするなら、エージェントがおすすめです。

ポートフォリオを作り終えたら、フロントエンドエンジニアとして転職をするために、

転職エージェントを使ってみるのがおすすめです。

レバテックさんは結構、僕も転職活動の際にお世話になってます。

レバテックルーキーに無料相談してみる

Webエンジニアの転職なら【レバテックキャリア】

まずはカウンセリングを受けてみることがおすすめです！

それでは〜。

投稿 Web制作のフロントエンド転職で使うポートフォリオの作り方とは？【おすすめは1から制作です】 は エンジニアスタート に最初に表示されました。

• 何をもとにコーディングするのか知らない人
• デザインツールについて知りたい人

XD・Photoshop・Illustratorは、Adobe社が提供しているデザインをするためのツールです。

デザインツールなので、Webデザインや、その他のデザインに使われます。

ただこれらのツールの使い方は、フロントエンドのエンジニアも知っておくべきかなと思います。

なぜかといいますと理由は単純で、コーディングするときに必要な情報を抜き取るためですね。

その他にも、ちょっとした画像加工ができると、デザイナーに頼らず作業できます。

ある程度画像加工ができるようになって、UI/UXにある程度詳しくなることができれば、

デザイン・コーディングを一貫して担うこともできるかと思います。

それぞれ何ができるか、書いていきますね。

XDの特筆すべき点

XDは主にWebサイトやアプリデザインに特化してます。

細かい写真の加工や文字の調整などは、Photoshop・Illustratorの方が向いている印象です。

XDの特筆すべき点は、

• 操作が簡単・直感的で扱いやすい
• 「PCやスマホで見たときのざっくりした見た目」を確認することができる
• Webサイトやアプリによく用いられるレイアウトを簡単に実装できる

このあたりになります。

操作が簡単・直感的で扱いやすい

XDの操作パネルは、Photoshop・Illustratorで見るよりも簡易的です。

初心者でも直感的に扱うことができるでしょう。

ただその分、画像やテキストの細かい調整をすることにはあまり向いておらず、

「CSSで調整できる部分」は、XDの機能を使って実装できる感じです。

ちょっと深堀りすると、

Webサイトは画像を多用するより、基本的にはCSSを使って実装した方がより良いです。

画像に比べてCSSは軽いのでサイトスピードに影響しづらいですし、

テキストなんかも画像でつくってしまうと、

デザインツールを挟んで、コーディングに反映させないといけないです。

テキストをコーディング側だけで書き換えるのみで修正できたほうが、即座に対応できます。

「PCやスマホで見たときのざっくりした見た目」を確認することができる

また、「PCやスマホで見たときのざっくりした見た目」を確認することができます。

具体的に言いますと、Webデザインを制作するときには、

サイト1ページ分全体が見えるようにデザインすることが一般的です。

そのサイト1ページ分に対して、PCで見える範囲、スマホで見える範囲を設定できます。

その後、確認する機能を使うとPC画面やスマホ画面で見たときの見た目を確認できて、

スクロールしてサイト全体を見る、みたいなことができます。

また、ボタンをホバー、つまりマウスをボタンに乗っけたときに

どんな変化をするのか、表すことができます。

さらに、どのボタンがどのページに遷移するのか、まとめることができます。

総じて言えることは、

「デザイナーからコーダー・フロントエンドエンジニアに意図を直感的に伝えることができる」

ということがかなりの強みです。

Webサイトやアプリによく用いられるレイアウトを簡単に実装できる

レイアウトを実装する機能が多数あります。

たとえば、よく使われる「2カラム、3カラムレイアウト」が、簡単に実装できます。

具体的には同じパーツを、同じ余白を保って並べる機能ですね。

並べたパーツは一つの大きさを変えるだけで、他の並べたパーツも同じように変化してくれます。

要はコーディングの特性に合わせた動きになってくれます。

コーディングだと、同じCSSのクラス名がついているパーツに対して、CSSの記述を変えると、全て同じように変わってくれますよね。それに近い感覚です。

また、パーツをコンポーネント化といって、部品化してくれる機能があります。

これも同じように、一つのパーツのデザインを変えると、コンポーネントで作られたデザインは一気に同じデザインに変化します。

デザイナーからコーダー・フロントエンドエンジニアに意図を伝えるときは、

サイト1ページ分だけでなく、コンポーネントの部品も明確に示しておくと丁寧ですね。

Photoshopの特筆すべき点

Photoshopは主に画像加工に特化してます。

特筆すべき点は、

• 画像の切り抜きや透過、色の調整など細かい設定ができる
• 画像を組み合わせてデザインできる

このあたりになります。

画像の切り抜きや透過、色の調整など細かい設定ができる

画像の切り抜きや透過ができます。

たとえば、人が写っている写真の「人だけ」を切り取ることができます。

この作業を「パス抜き」と言ったりします。

昔はできなかったみたいなんですが、最近ではある程度コンピュータが色の違いを認識して、

自動で人の周りをパス抜きしてくれる機能とかあります。（めっちゃすごい。）

また、背景にある物体をなくして、背景をなじませる（もとから物体がなかったように加工する）

といったこともできます。（これもすごい。）

この機能は「コンテンツに応じた塗りつぶし」などの機能で実装できます。「コンじる」と呼んでいる記事をよく見かけますね。

あとは、背景を透過したり、色の調整ができます。

色の調整は、明度、彩度などを調整して、より鮮やかにしたり、逆にシックにしたりできます。

画像を組み合わせてデザインできる

「画像の切り抜きや透過」に関連するんですが、

加工した画像同士を組み合わせて、一つの画像にできます。

透過した画像同士をきれいに繋げて、一つの画像にしたり、といったことですね。

あとは自分が経験してきた中で、ある企業の商品リニューアルがあったんですが、

「旧商品を新商品の画像と入れ替える」という作業を100枚近く行なったことがあります。

やり方としては基本的に、

新商品画像のpsdデータ（Photoshopのデータ形式です。）を

旧商品が載っている画像の上に乗っけて、背景とかは変えずに商品だけ変える

といった作業です。

場合によっては、背景と商品画像をうまく繋がらなかったりしたので、

きれいに繋げるために微調整したりだとか、色々やりましたが、Photoshopの機能を使って

すべて対応しました。

むっちゃ余談ですが、どちらかといえば管理が大変で、専用のスプレッドシートを作ったりとかやりましたね。

効率よく作っていく上ではツールをうまく活用することがおすすめです。

Illustratorの特筆すべき点

Illustratorは主に画像加工に特化してます。

特筆すべき点は、

• パスデータに強い

これですね。

パスデータに強い

パスデータは、他の画像データと比較して、「画像を綺麗に見せることができる」という特徴があります。

人の目で見たら、同じ画像をパスデータで作っても、その他の画像データで作っても、同じように見えるんですが、

コンピュータ上では、パスデータは「画像の外形をくり抜いた外形」のような形で認識されます。（ざっくりした説明ですみません。）

このパスデータ、Web上で反映させたいときは、svgとして書き出すことをおすすめします。

svgで書き出してWeb上に反映させると、画像を拡大縮小しても綺麗に見えます。

画像の拡大縮小は、レスポンシブデザインが一般的になってきた現在では気をつけたいところです。

デバイスの幅によって画像の大きさが変わることも多いので、svgは使えるところで使った方が良いと思います。（写真とかでは使えないです。。）

このパスデータは、コードで色を容易に変えることができる、というところも特筆すべき点です。

デザインツールが使えればフロントエンド業務も楽しくなる話

僕の個人的な意見ですが、

デザインツールが使えれば、幅も広がってフロントエンド業務は楽しくなります。

コーディングだけをやっていると、「画像が綺麗に反映できない。。」とか

「レスポンシブデザインに特化した画像を作りたい。。」とか

色々疑問ややりたいことが出てくると思います。

フロントエンド初学者のうちは、まずコーディングをできるようになった方がいいと思いますが、

ぜひデザインツールも使いこなせるようになって作業を楽しみましょう！それでは〜。

投稿 【デザインの話】フロントエンドが知っておくべきデザインツール、XD・Photoshop・Illustratorの話 は エンジニアスタート に最初に表示されました。

• Web制作業務で、どの業務に興味があるかを知りたい方
• デザインとコーディングの違いを知りたい方

以前、この記事に「制作の流れ」を書きました。

【webサイト制作】フロントエンドエンジニアとは？

この記事を読んでほしい方フロントエンドエンジニアとは何か知りたい方。フロントエンドエンジニアに興味があるが、自分に向いているかを知りたい方。web制作の業務に興味がある方。サイト制作を行う場合、工程ごとに担当する人が変わる...

engineer-start.com

2022.03.26

この「制作の流れ」に、デザイン、コーディングという作業がありますが、

「デザインとコーディングって一緒じゃないの？」という疑問をたまに耳にします。

答えとしては、違った作業です。

作業する上で使うツールも違いますし、何をやるか？も違います。

どういう部分が違うのか、なぜ作業が別れているのか、記事を書いていこうと思います。

今、就職・転職でWeb制作をやってみたい方は、

自分の向き不向きややってみたいことを探す上での参考になると思いますので、ぜひ読んでいただきたいです！

デザインは「見た目を1から作っていく作業」

デザインの概要

そのまんまですみません。デザインは見た目を作っていく作業です。

作業内容を具体的にすると

• 写真や画像の加工、バナー作成
• 一サイトの全体の見た目を作成

他にもあるんですが、主に上記の作業を行うことが多いかと思います。

使うツールはAdobeのツールが多いかなと。代表的なものだと

• XD
• Photoshop
• Illustrator

こんな感じです。（他にもツールはありますが。）

具体的には

（写真の加工だったり、フォントの調整だったり）それぞれのツールで向き不向きがあって、

それぞれ目的にあったツールを使っていくイメージですね。

複数のツールを使って作業して、一つのサイトデザインを作り上げることもあります。

ちなみに、加工前の写真や画像のことを「素材」と言ったりします。

この「素材」は、Webサイトの発注があったお客さんから頂くこともあれば、

Webサイト上からダウンロードすることもあります。（pixtaやAdobe Stockなど）

ディレクターが素材を手配して、デザイナーが素材を加工していく流れが多いかなと。

そして、加工した画像やディレクターが手配したテキスト情報をもとに、

一サイト全体の見た目を整えていきます。

フォントの大きさや見た目で差をつけたり、サイトに色味をつけたりします。

また、「ボタンにカーソルを置いたときの動き」とかもデザインとして落とし込むこともします。

コーディングは「Webサイトとして反映させていく作業」

コーディングの概要

デザインをもとに、Webサイトとして作りあげるのが、コーディングの作業になります。

作業内容を具体的にすると

• デザインをコードに置き換えて、制作
• サーバーにアップロードして、サイトとして反映
• 機能の実装

主に上記の作業を行うことが多いかと思います。

使うツールは色々ありますが、主に

• コードエディタ
• FTPツール
• コードの管理ツール

こんな感じです。

具体的には

コードエディタでHTMLやCSSを書いていきます。

デザイン要素以外のところで言えば、SEOを意識したHTMLの組み方があったりしますね。

また、「今後の修正にそなえたCSS」を組むことも大事です。

HTMLやCSSを使ったコーディングだと、デザインツールを扱うように、直感的に組むことが難しかったりします。

例えば、パーツの位置を入れ替えたい場合、

デザインツールだとパーツをそのまま動かすことで見た目の変更が容易だったりしますが、

コーディング上で入れ替えると、レイアウトの崩れだったりがでたりします。

また、Javascriptを用いてサイトに動きをつける際は、

動きをつけることができるようにHTMLやCSSを組む必要があります。

（ちなみに、レイアウト崩れをなるべく防いだり、動きをつけやすくするためにコーディング設計があります。）

そういった部分に対して、なるべく工数がかからないように、効率的にコードを組むことがコーダー・フロントエンドの役割の一つです。

あとはサーバーにアップロードして、全体的な崩れがないか、

ブラウザごとで見た目の違いがないかを確認して修正します。

また、チームでコーディング作業を行うときには、コードの管理ツールであるgitなどを用いて作業します。

gitとは、ざっくりいいますと、それぞれが書いたコードをまとめて最新版に保つためのツール、といったイメージです。

同じHTMLファイルを複数人で書いたときに、最新版に保つ、といった感じですね。

なぜ作業が分かれているのか

作業が分かれている理由

デザインとコーディング、それぞれの作業内容に違いについてまとめました。

それでは、なぜ作業が分かれているのか。

色々な見解があると思いますし、正直、必要な画像だけ揃えて、デザインを作成せずにコーディングすることも可能といえば可能です。

僕なりに、デザインとコーディングが分かれている理由を説明すると

• デザイン段階で共通パーツを作りつつ、サイト全体のデザインを固めておけばコーディングは効率的になる。
• コーディングはサイトに反映させるために作業として必須。
• デザインとコーディングでは、考え方が違うので、結果的に分けた方が作業しやすい。

このあたりになってくるかなと思います。

もう少し深堀りすると…

デザイン・コーディングの両方をやってみたことがありますが、

デザインはサイト全体のバランスが重要な要素の一つかと思います。

一つパーツが変わるだけで、全体の雰囲気に影響したりします。

そういったことがなるべく発生しないようにサイト全体の雰囲気を固めておけば、コーディング段階でわざわざ組み直す必要がなくなってきます。

場合によっては、一つのパーツに変更が入るとともに、他の要素を調整しないといけなくなってきます。

また、デザイン段階でサイト内の共通パーツをつくっておくことで、コードを効率的に組むことができます。

具体的にはCSSを組み直す必要がなくなったり、HTMLの流用がしやすくなったり。

コーディングは、デザインに対してどう組んでいくのが効率的なのか、

どういった設計を用いるべきなのかを考える必要があります。

また、今後修正や更新が入るとき、なるべく手間を取らないようにするにはどうすればよいのか、

コードの管理はどうするのか、などが重点的な要素になってくるかなと。

そんなところです。それでは！

投稿 【よくある疑問】デザインとコーディングの違いとは？ は エンジニアスタート に最初に表示されました。

• HTMLやCSSを学び始めた方
• フロントエンドエンジニアの初心者の方

HTMLやCSSの参考コードは、Webサイトの記事にあふれています。

中には、CSSのライブラリというものもあり、

このライブラリは、CSSをまとめたファイルでして、これを使えばある程度楽にフロントエンドコーディングができます。

有名どころだと、Bootstrapとかですね。

ものすごくざっくりな説明ですが

「HTML上でクラス名をつけるだけで、ある程度のレイアウトや見た目を整える」作業とかができます。

「これがあればCSS覚える必要ない！」と思っていた時期が、僕にはありました。

もちろん目的によって、

こういった「楽にフロントエンドコーディングするためのツール」を

選定することは良いことだと思います。

ただ、ライブラリを覚えたり、

参考コードをWebサイトの記事からそのまま真似るだけで、

業務がうまくいったかといえば、僕はそうではありませんでした。

（もちろん初学者のうちは、そういった行動も大事です。）

HTMLやCSSは1から書けた方が良いと思います。その理由について書いていきます。

1から書ければ、状況が変わってもコーディングできる

HTML、CSSを1から書ければ、目的によって手法を変えることができます。

CSSのライブラリなどは、ある目的によって作られたパターンが多いです。

たとえば、「Webサイトを効率的につくるために開発された」とか、

「Webアプリ開発用」とか「デザイン重視型」などなどあるかなと。

要は、その目的が外れる場合、ライブラリを使うことは逆に非効率になりかねないんですね。

もちろん、自分が作りたい目的だけ達成できれば良い（例えばポートフォリオを作るとか）であれば

ライブラリを使うことは問題ないです。

ただ、業務には基本的に、Webサイトを納品するお客さんがいて、

そのお客さんの目的を達成しないといけないわけです。

そこで、HTMLやCSSが1から書ければ、一番効率的な方法を考えつつ、

Webサイトを制作することができます。

また、サイト制作では、サイトの修正や改修が発生しますので、

「いかに修正しやすいサイトを作るか？」「今後起こりうる修正に備えて、どういうふうにコーディングすべきか」などを考えながらサイトを制作することができます。

Webサイトを構成する他の要素について学ぶとき、困らない

「他の要素」は、SEOやJavascript、Wordpressなどが当てはまります。

SEO

HTMLでは、タグを打ち込みますよね。H1タグとか、pタグとか。

このタグにはそれぞれ意味がありまして、H1だったら大見出し、pタグは段落といった感じです。

この「タグ」は、正直あまり気にしなくても、サイトデザインを組むことができます。

ですが、タグにはSEOに影響を与えます。

初学者のうちはSEOについて、細かく気にしてコーディングするよりも、

まずはサイトデザインをうまく組めるようになることをおすすめしますが、

追々SEOに特化したサイトを作るときに、

HTMLタグの意味についてざっくり知っておくだけでも、スムーズに頭に入ってくるかと。

Javascript

他にWebサイトを構成する要素といえば、サイトに動きをつけたいときに使用する、Javascriptですね。

Javascriptを実装するときには、HTML上にクラス名やidと呼ばれる属性を付与したり、

CSSと連携させて細かく動きを調整できたりします。

そういった、サイトデザインにこだわりをもって作業を進めたい方は特に、

HTML、CSSを1から書ける能力を身につけるべきだと考えます。

WordPress

WordPressを使うときも同じような感じですが、

既存テーマを使わずにコーディングする場合は、

まずHTML、CSSでコーディングしたあとにWordpressのPHPファイルと呼ばれるファイルに組み込んでいきます。

（もしくはそのままPHPファイルに組み込みつつHTML、CSSをコーディングしていきます。）

組み込んでいくときには、HTMLやCSSの構造を理解しておくことが結構大事になってきます。

構造が分からないと、どこに何を組み込むかが分からないからですね。

その他にも色々

ちょっとコーディングと外れますが、前工程である「ワイヤーフレーム」、「デザイン」を、もし作ることになったときに、

「何ができて何ができないか」「どうすればコーディングしやすいか」を、幅広く考えることができます。

ライブラリを使用した制作は、便利だし早くコーディングできるかもしれませんが、幅広い考え方でコーディングしたい場合は、

1からコーディング、もしくはライブラリと1からコーディングを組み合わせてみましょう。

自分の表現したいデザインを忠実に再現できる

これは言わずもがな、理解していただけるかと思いますが、

やはりHTMLやCSSを1から書けると、自分の表現したいデザインを忠実に再現できます。

CSSでは色んなことができます。

色をつける、グラデーションをつける、影をつける、テキストのフォントを変える、

レイアウトを整える、パソコン・スマホで見たときの見た目を変える、サイトの動きを調整するなどなど。

このあたりを細かく設定できると、理想的ですね。

前述しましたが、業務には基本的にWebサイトを納品するお客さんがいます。

Webサイトはコーディングする前に、デザインを行う作業が入るのですが、

デザイナーがデザインしたデータを忠実に再現できれば、

お客さんから修正依頼が来ることを最小限に防げると思います。（もちろん、完全に保証はできませんが）

なので、時間をかけて丁寧にコーディングしたほうが、実は一番ゴールに近かったりします。大きな修正が入ったら、コーディングを設計し直さないといけないこともありますしね。

その上で、HTMLやCSSを1から組めることは大事です。

とはいえ、初学者のうちは色々試したほうがいいかも

最終的にはHTML、CSSを1から書けたほうが良いのは良いんですが、

初学者のうちは、まず外観を掴みたい方もいらっしゃるかと思います。

その上で、ライブラリに手を出してみるのは全然アリです。

ライブラリを使って一サイト作れてしまえれば、達成感も出てくるでしょうし、間違いなく学習にはなります。

そういった過程を積みつつ、最終的には1から理解できるまで学習、もしくは業務してみてください！

それでは〜

投稿 【Web制作コーディング初心者向け】HTMLやCSSは1から書けた方が良いという話 は エンジニアスタート に最初に表示されました。

• フロントエンドエンジニア初学者の方
• Web制作をする上で、どのようにプログラミング学習していけばいいか迷っている方
• 学習中だけど、何もかも分からず困惑してる方。

以前、おすすめの勉強法として「目標設定の方法や、写経の実践」をおすすめしました。

【プログラミング初学者向け】おすすめの勉強方法

この記事を読んでほしい方コーディング・プログラミングを学びたいが、方法が分からない。独学中だが、最近手が止まっている。特にコーディングを学びたてで独学しているときは、どこにフォーカスして勉強するのが効率的なのか、目標に着実...

engineer-start.com

2022.01.06

この記事に書いたことを自分が実践しているときは、「この方法で本当にうまくいくだろうか。。」とか

「間違った方法なのでは？」と考えることが多かったです。（結果的にうまくいったので記事で紹介してます。）

なるべくそういった迷いをなくしたいので、今回はおすすめの学習手順の全体像を紹介します。

プログラミング（フロントエンド）の学習で迷ったときは、ぜひ思い出してください。

※今回はあくまでWeb制作のフロントエンドをしたい方に向けて書きます。

まずは迷いながらも模写サイトをつくってみる。コードをそのまま丸パクリするのもOK。

まずは一サイト写経しましょう。

目安としては

• 仕事をしている方 →「3ヶ月で一サイト完成させる。」
• 一日作業ができる方 → 「1ヶ月で一サイト完成させる。」

くらいを目標においておくといいかなと。

ここで学習しておきたいポイントは下記の通り。

• HTML、CSS、Javascriptをどのように連携させるかを学ぶ。
• 実際にHTMLやCSSを書いてみて、Webサイトに反映されるかを確認。
• HTMLとCSSの記述方法で、「ここは大事！」と思うところだけ重点的に使って慣れる。

以前書いた下記の記事に、もう少し具体的なやり方が書いてます。

【プログラミングの第一歩】書いたコードが反映されているかを確認する方法

この記事を読んでほしい方プログラミングで書いたコードが実際に反映されているか、動作しているかを確認したい方。HTMLの勉強を始めたばかりの方。プログラミング、コーディングは、「コンピューターに命令して、人が意図する動作をし...

engineer-start.com

2022.01.10

「HTMLとCSSの記述方法で、「ここは大事！」と思うところだけ重点的に使って慣れる。」についてですが、

「では大事と思わないところは飛ばして良いか？」というとそうではなく、

検索で調べて直ぐに反映できる状態にできていれば良い、

くらいの感覚で学習を進めていってください。

模写サイトが一つ作れてしまえば、正直、（非効率だけれども）Web制作のコーディング業務はできるようになると思います。

最悪調べればなんとかなる！くらいのレベルまで持っていきましょう。

なのでまずは、それぞれの言語の書き方があやふやだったり、

学習のやり方が闇雲に感じても、模写サイトを一つ作ってしまうことをおすすめします。

HTML、CSSを学習する。

学習概要

模写が終わったら、HTML、CSS、Javascriptと、「焦点を当てて勉強する」のがいいでしょう。

順番としては、一番基本となるHTML、CSSを最初に学習することがおすすめです！

目安としては

• 仕事をしている方 →「業務を行う中で学ぶ。（期間を設けない。）」
• 一日作業ができる方 → 「15日くらいで慣れつつ、コーディングしていく中で慣れていく。」

こんな感じの目標設定で良いと思います。

ここで学習しておきたいポイントは下記の通り。

• HTMLのタグにはどんな種類があって、それぞれどんなタイミングで使うかを学習。
• リセットCSSについて学ぶ。
• CSSはスタイルやレイアウトの組み方が色々あるので、それぞれ使っていく。（できれば検索無しで書けるようになる。）
• HTMLに使用する「クラス名」は、どのようなクラスを使うのがベストなのかを考慮してコーディングする。

このあたりになってくるかなと。

具体的には…

HTMLのタグについては、意外とつまづきポイントかもしれません。

タグによっては思ったとおりレイアウトを組めないことがありますので、意識してみてください。

リセットCSSは、「ブラウザ特有のスタイルを打ち消したり、元々のCSS設定を統一する」という目的があります。

ちなみにブラウザとは、Webサイトを閲覧するためのものですね。

Google Chrome、Firefox、Safari、Edgeとかあります。

ここまである程度理解できたら、作業する中でCSSに慣れていきましょう。

そして、HTMLに使用する「クラス名」について、どんなクラスを使うのが適切か、まで学べると良いかなと思います。

業務で実際にコーディングをしている方は、クラス名の意味合いをなるべく統一しましょう。

バラバラにしても組めるっちゃ組めるんですが、「他の人が見たときに分からない」ということをなるべく防ぐのが目的です。

ここ、コーダー、フロントエンドエンジニアとして差をつけるために結構重要です。

例えば、ページのセクションにあるテキストに「section01-text」というクラス名をつけた場合、次のセクションのテキストは「section02-text」とつけたり、

「これは何を表すクラス名なのか？」がひと目でわかるようなクラス名にすることから始めてみてください。

逆に他の方がコーディングしたHTML、CSSに手を加えるときは、その人がつけたクラス名に従って、コーディングするのがいいと思います。

最終的には…

最終的には「コーディング設計」を勉強できるとなお良いんですが、初学者を抜け出すという意味では、まだそこには触れなくてよいかと思います。

jQueryを勉強する。※Javascriptより先に学習することをおすすめします。

学習概要

HTML、CSSの学習が終わったら、jQueryを学習しましょう。

jQueryは、「Javascriptのライブラリ」でして、ざっくり言うと、Javascriptを簡単に書くためのものです。

このjQueryを使えば、Javascriptを使うよりも簡単に「Webサイトに動きをつけたり、UIを向上させる」ことができます。

目安としては

• 仕事をしている方 →「業務を行う中で学ぶ。（期間を設けない。）」
• 一日作業ができる方 → 「一ヶ月くらいで慣れつつ、コーディングしていく中で慣れていく。」

こんな感じの目標設定で良いと思います。

ここで学習しておきたいポイントは下記の通り。

• jQueryの実装を行うときに、身につけておく要点を知る。
• jQueryを使った動きの実装を、「サイトから真似るかたちでもよいので」できるようになる。

こんな感じです。

具体的には…

jQueryでサイトの動きを実装する際、「何故か動かない」ということが僕はよくありました。。

たとえば、他の人が作ったサイトを修正するときに、

すでにjQueryが読み込まれているのに、自分もそのサイトにjQueryを読み込ませて、二重に読み込まれていて動かない、とか

jQueryの書き方はHTMLやCSSに比べて、少しだけですが複雑なので、書き方が間違ってて動かない、とかですね。。

ここに関しては、コードを見て、書いて、実装してみて、慣れるしかないかなと。

ただ慣れたら実装できて、サイトに動きを付ける作業なので、結構達成感はあるかなと思います。

結構エラーが出やすかったりするので、「検証ツールでコンソール確認」の方法を知っておけば、

そのエラーをググって解決することができるので、コンソール確認の方法も合わせて学んでいってください！

（学習するかは人によるけど）Wordpressを学習する。

学習概要

WordPressを使うと、HTML、CSS、Javascriptで実装することが難しいこと（もしくは実装できないこと）を実装することができるようになってきます。

PHPというバックエンド寄りの言語が使われてます。

ちなみにこのサイトもWordpressを使って実装されています。

WordPressは、パターンが色々ありますが、HTMLの記述がPHPファイルに書いてあって、機能実装のために、そのHTMLの記述にPHPの記述が組み込まれているようなイメージです。

たとえば、Webサイトについている「お問い合わせフォームの実装」だったり、「共通しているパーツを一元化」だったりを実装できます。

学習目安としては

• 仕事をしている方 →「業務を行う中で学ぶ。（期間を設けない。）」
• 一日作業ができる方 → 「2ヶ月で一通り学ぶ。」

こんな感じの目標設定で良いと思います。

WordPressは、サイト制作を目的とするならば、HTML、CSS、jQueryを学んでから手をつけるのをおすすめします！

まとめ

いかがだったでしょうか？

学習手順を体系的に紹介しました。

今回はあくまで「Web制作をしたい方」に向けて書きましたので、

アプリ開発やバックエンド寄りのことを学びたい方に実践いただいても効果はあるかと思いますが、あまりおすすめはしないです。

今回紹介した方法と併用して、プログラミングスクールに通ったり、本で勉強すると、相乗効果が生まれてさらに網羅的に学習ができると思います！

プログラミングスクールは何社かありまして、値段感やそれぞれの強みが違うので、よく吟味してから申し込むことをおすすめします。

TechAcademy [テックアカデミー]

プログラミングのオンラインスクールCodeCamp

受講者満足度も90%以上！【WEBCAMP】

Freeks(フリークス)｜月額10,780円のサブスク型プログラミングスクール

本での学習を考えている方、今度おすすめの本を紹介しようと思うので、お待ち下さい！

それでは！

投稿 【学習フローの紹介】フロントエンドとして成長するためのおすすめ学習手順 は エンジニアスタート に最初に表示されました。

• Web業界への就職や転職を考えている方
• Web制作やプログラミングの業務未経験で、Web業界への就職・転職を考えている方

Web制作やフロントエンドエンジニアを業務としてやってみたい方、これからどういうふうに業務経験をつけていきたいと考えてますか？

最初から人脈がある方は、人脈を使って仕事をもらったりでも良いかと思いますが、おそらくはそういった人脈がない方のほうが多いのではと思います。

では、Web制作に関する人脈がない方はこれからどう動けばよいのか、おすすめの方法をお伝えします！

結論としては、「ベンチャー企業」への就職（転職）がおすすめです

これからWeb制作やフロントエンドの業務がしたい方、ベンチャー企業に就職するのがおすすめです。

僕も今まで2社のベンチャー企業で、 Web制作のフロントエンドエンジニアとして、コーディングを担当してきました。

フロントエンドエンジニアとして3年目ですが、本当に色々な知見や対応力などが身についたと思ってます。

おすすめする理由としては、下記です。

• ベンチャー企業は比較的ルールが決められていないことがあるため、都度自分でやり方を考える必要がある。つまり、課題解決力が高くなる。
• 分業化されていないこともあるので、いろいろな経験ができる。
• 業界未経験でも、やる気や人柄ですぐに就職できることがある。

社内ルールが決められていないことの長所

業務経験を積むにあたって、社内でルールが決められていないことは、フロントエンドエンジニアにとっては長所だと考えています。

例えば、コーディングルールが決められていない場合、自分でどんな方法があるのか、必然的に探さなければなりません。

以前記事にかいた「検索力」が身につきやすいです。

【PC業務に全般に使える】検索力の鍛え方

この記事を読んでほしい方パソコン作業を効率化させていきたい方プログラミング・コーディングでの課題を解決する最適な方法が知りたい方。web制作やwebサービスの開発に携わっている方、またはその初学者パソコンに携わって業務をし...

engineer-start.com

2022.03.26

この「検索力」があれば、色々なパターンの対応方法を身につけることができるので、フロントエンドエンジニアやコーダーにとって非常に大切だと思います。

ベンチャーだと色々な経験ができることが多いが、具体的にメリットは？

ベンチャーだと、Web制作において完全な分業化がされていないこともあり、コーダーだけどディレクターが担当するワイヤーフレームを作ったり、たまにデザインの一部分を担当したりと、いろいろな経験ができます。

いろいろな経験ができると、それぞれの担当分野でいい影響を与えることができます。

例えば、コーディングのことを知っていれば、ワイヤーフレームを作るときに「機能面をどうするか？どういうレイアウトだとデザインやコーディングがしやすいか？」が必然的に見えてきます。

デザインを組むときも、「ワイヤーの意図を組みつつ、コーディングしやすいような仕組み」を考えることができます。

コーディングするときは「ディレクター・デザイナーの意図を汲み取って、どういう機能や挙動にすべきか。」など考えることができます。

このように全体を見る目が養えるし、チームワークも生まれやすいのかなと。

また全体を知っていれば、最終的に一人でWeb制作ができるようになるかなと思っておりまして、もし何年後かにフリーランスを目指している方とかにもベンチャー企業はおすすめです。

業界未経験でも、やる気や人柄ですぐに就職できることがある。

これに関しては、もちろん必ずすぐに就職できるとは思いません。

ただ、特に会社立ち上げのタイミングでは、やる気や人柄を重視するベンチャーも多い印象です。

これは僕が実際に業務未経験だったときの話なんですが、

プログラミングスクールを受講して、ポートフォリオサイトを作成し、ベンチャー企業を受けました。

面接を受けた企業さんは、やはりどこもポートフォリオサイトの内容だったり、どこにこだわっているかは、よく聞かれた印象です。

プログラミングスクールは高額だったりもするので、あまり言い方はよくないですが、お金を払ってでもやりたい仕事である、ということを示すことができると思います。

（プログラミングスクールについて書いた記事があるので、こちらも読んでいただきたいです。）

【プログラミングを始めたい方向け】プログラミングスクール受講のススメ

この記事を読んでほしい方プログラミングを始めたいが、何からすればいいか分からない。独学中だけど、進み具合がよくない。作業中、解決方法が分からず、いつも放置してしまう。プログラミング未経験だが、エンジニアとして転職したい。そ...

engineer-start.com

2022.01.04

また、最近になって僕も社内で採用に徐々に携わるようになりまして、社内の採用メンバーと話していると、やはり人柄を重視している方が多いです。

まとめ

Web制作、Web業界未経験の方に向けて、ベンチャー企業のおすすめでした。

興味がある方はぜひベンチャー企業を探して、面接受けてみてください！それでは〜

投稿 【Web制作をやってみたい人未経験者必見】コーダー業務やWeb制作の業務経験は、どこで積むべきか は エンジニアスタート に最初に表示されました。