• Webサイト制作のエンジニアの方で、セキュリティにあまり詳しくない方
• これからWordpressやサーバーを使いたい方
• サイト制作において、最低限のセキュリティ対策をして安心したい方

最近はサイバー攻撃など、よく耳にしますよね。

今からエンジニアを始めたい方は特に、不安になられている方もいるかと思います。

セキュリティに詳しく、対策のできるエンジニアは、

Webサービスを展開している企業だと、必須で必要になるかと思います。

とはいえ、個人でブログをやっている方や、メディアを作っている方は、

セキュリティに強いサーバー構築から制作・開発までをこなすのは至難の業ですよね。

そこで今回は、そういった制作や開発において、セキュリティ面で最低限やるべきことや、

サイバー攻撃にやられないための知識を、初心者向けに紹介していきます。

レンタルサーバーの最初にやるべきセキュリティ対策

まとめると、下記の対策をしましょう。

• WAFの設定
• IP制限
• パーミッションの設定

WAF

WAFとは、「Web Application Firewall」のことで、

Webアプリケーションへの攻撃を守るための機能です。

レンタルサーバーの多くは、このWAFの設定が「レンタルサーバーのコントロールパネル上」でできまして、

WordPressなどへの「脆弱性をついた攻撃」からサイトを守ることができます。

特にWordpressに関しては、多くのWebサイトがWordpressで構築されていることもあり、

WordPressを狙うハッカーは多いそうです。

理由は、「多く使われているツールを狙ったほうが、多くの情報を搾取できる」からだとか。

なので狙われる可能性は結構高いです。

お問い合わせフォームやログイン機能を持ったサイトを構築するときは、個人情報・機密にすべき情報を取り扱うことになるので、

情報漏えいを防ぐために、ぜひ設定しておきましょう。

IP制限

IP制限とは、ざっくりいうと「あるネットワークのIPアドレスからアクセスできないようにする」制限です。

レンタルサーバーだと「国外IP制限」という設定があったりします。

「国外IP制限」は海外からアクセスできないようにする設定です。

国外には、なんとなくイメージつくかと思うんですが、凄腕のハッカーがいます。

そこからの攻撃をさせないための設定ですね。

これは（海外向けのサイトを構築するわけでなければ、）設定しておいたほうがいいかと。

IP制限の設定方法は他にも色々ありまして、

「あるサイトは、自分が使っているIPのみアクセス可能にする」だったりの設定もできます。

この方法は、例えば、他会社の案件をコーディングしているときに役立つかもしれません。

テスト用のサーバーで他会社の案件のWordpressサイトを構築するときは、なるべく他の人が閲覧できないようにしておくべきですよね。

なぜかというと、リリース前の知られたくない情報が載っていたりするので、サイトを見られてはいけない場合があったり、

そもそもコーディング途中の表示崩れが起こっているサイトを見ることができる状態が好ましくないです。

こちらも設定方法を知っておくと、良いかもしれません。

パーミッションの設定

パーミッションとは、「ファイルに対する制限」になります。

レンタルサーバーにファイルを上げたあと、そのファイルに対して、設定することができます。

具体的には、「読み」「書き」「実行」の制限が、ユーザーの種類ごとにできます。

「読み」とはファイルの内容などを表示する権限

「書き」とはファイルを上書き削除したりする権限

「実行」とはファイルのプログラムを実行する権限

になります。

ユーザーの種類によって分けることができて、

「自分」「他者」「グループ」といったユーザーの種類に対して、どこまでの権限を与えるか？

みたいな感じで設定できます。

FTPソフトを使うと、より簡単に設定できるかと思いますので、ぜひやってみてください！

WordPressの最初にやるべきセキュリティ対策

プラグイン

セキュリティのプラグインを入れてください。

個人的によく使っているのは、Siteguardというプラグインです。

ざっくりなにができるのか、といいますと、

• 不正アクセスの防止
• 不正ログインの防止

ですね。（それ以外もあるけど主な目的はこれ。）

WordPressのURLを変更できる機能がありまして、

第三者がWordpressの管理画面に不正にアクセスすることを防ぎます。

具体的には、Wordpressの管理画面にアクセスするとき、デフォルトの状態だと、

【サイトのURL】/wp-admin/

になります。これだと、サイトのURLが分かる時点で、第三者がアクセスできてしまいますよね。

もちろんログイン情報を持っていないと管理画面の中身までみることはできませんが、あまり好ましくありません。

ですが、siteguardを使用すると、

【サイトのURL】/login_任意の5桁の数字/

にURLを変更してくれます。つまりURLを隠す機能があります。

不正ログインの防止については、ログイン画面の画像認証という機能がついてます。

「コンピュータからの攻撃を防ぐ」ための判別するための機能です。

コンピュータだと、ログイン情報を自動で打ち込んで管理画面に入ったりという動作も可能ですので、

画像認証があると、コンピュータからの攻撃を受けにくくなるそうです。

ログインのユーザー名、パスワード

これに関しては、それぞれ「24桁のランダムな文字列」がよいかなと。

少なくとも、簡単な意味のある文字列「admin」などは設定しない方が無難です。

WordPressを設置する際にユーザー名とパスワードを設定することになるので、その際に設定してください。

ちなみに、「パスワードを自動で生成してくれるツール」もあるので、

こういったツールを使ったほうが楽です。

もちろん、100%サイバー攻撃を防げるわけではない

今回は初心者向けに、セキュリティ対策を紹介してきました。

もちろんこれらの設定をおこなったからといって、100%サイバー攻撃を防げるわけではない、ということを忘れずにしておきましょう。

ただ、最低限の設定をしておくことで、防御力は確実に上がるかと思いますので、設定してみてください！

それでは〜

投稿 レンタルサーバーやWordPressの最初にやるべきセキュリティ対策を紹介【初学者向けです】 は エンジニアスタート に最初に表示されました。

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

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

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

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

デモサイトのご紹介

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制作業務で、どの業務に興味があるかを知りたい方デザインとコーディングの違いを知りたい方以前、この記事に「制作の流れ」を書きました。この「制作の流れ」に、デザイン、コーディン...

engineer-start.com

2022.04.15

バックエンドエンジニアは、データのやりとりなど、Webサイトやアプリケーションの「システムを構築する」ことが仕事です。

フロントエンドエンジニアとバックエンドエンジニアの違いとは？

フロントエンド

フロントエンドでよく使う言語は下記のとおりです。

• HTML
• CSS
• Javascript
• PHP

HTMLやCSSは厳密にはプログラミング言語ではなく、「マークアップ言語」と呼ばれます。

そして本来、JavascriptやPHPは、バックエンド言語となります。

これらを覚えておくと、

• ホームページやランディングページなど、Webサイトを制作できる。
• Javascriptを覚えておけば、動きのあるサイトや、データのやり取りの一部が実装できる。
• PHPを覚えておけば、Wordpressなどでの実装ができるようになる。

こんな感じです。

Web制作の場合、Wordpressを使うことが多いかと。

WordPressは本来はブログ向けに作られたツールなんですが、

ホームページ制作などにも使われており、PHPが使われています。

アプリ制作では、ReactやVueといったJSのフレームワークを使った開発があります。

バックエンド

バックエンドでよく使う言語は多岐に渡ります。

• PHP
• Javascript
• Go
• Python
• C言語

などなど、、、

フロントエンドよりも学習コストが高いな〜という印象です。。。

その代わり、平均年収はフロントエンドよりも高くなるイメージです。

バックエンドエンジニアがどんなことをやるかといいますと、

• ログイン機能の実装
• ECサイトの購入フローのシステム構築

などですね。

フロントエンドよりも、パズルのような頭の使い方をすることが多いと思うので、

ハマる人はハマるかなと思います！

どんな人が適正か？

フロントエンド

フロントエンドエンジニアは、下記のような人に適正があるかなと思います。

• Webサイトの見た目の部分に興味がある人
• Webデザイナーやディレクターもやってみたい人
• いち早くエンジニアとして独立したい人

やはり、Webサイトの見た目を構築するのがフロントエンドエンジニアなので、

見た目や動きを実装したい！という方におすすめです。

「見た目や動き」をもっと奥深く説明すると、作りたいサイトを実装する際、

どこに何のコンテンツを入れるか？今後運用する中で不都合がでないか？

などをWebデザイン視点で考えられるフロントエンドエンジニアは強いと思います。

例えば、あるホームページで、キャンペーン用の別サイトを作る、となった場合、

ホームページの中に別サイトの導線としてバナーを作りたい、となった場合に、

バナーを入れ込んでサイトの表示に崩れだったりデザインの不都合が出ないか？

といった感じですね。

またフロントエンドエンジニアは、いち早く独立するためには最適かなと思います。

フロントエンドエンジニアとして業務ができるレベルまでになれれば、

その後に色々なパターンのことに携われる可能性が出てきます。

• APIを使ってバックエンドが必要な機能を実装する
• SEOやマーケティングにこだわったサイトを制作して集客する
• 自らのブランディングのためにサイトを作る

などですね。

実は、バックエンドの機能は、「API」という連携機能のようなもので実装するという方法もあります。

フロントエンドのエンジニアでも使える機能になりまして、有名どころはFirebaseですかね。

フロントエンドにも「ノーコード」というツールがありますが、見た目の実装が何でもできるかといったら、そうではないので、フロントエンドエンジニア自体はまだ必要かと。

同じくバックエンドエンジニアもFirebaseのようなAPI機能があるからといって、まだ汎用性に欠けるかと。

バックエンド

バックエンドエンジニアは、下記のような人に適正があるかなと思います。

• Webサイトやアプリなどのシステムに興味がある人
• 一般の人が読めないコードをガンガン書いていきたい人
• パズルみたいな感覚が好きな人
• 一人で全部構築したい人
• コードを書くこと単体で年収を上げていきたい人

バックエンドエンジニアはフロントエンドエンジニアよりもコーディングスキルが必要、というのが一般的な意見かなと思います。

特にコーディングを数年後もガンガンやっていきたい人や、基本的に人とコミュニケーションをとらずに一人でサービスやサイトを構築していきたい人にはおすすめです。

スキルが求められるということは、やはり年収は高いイメージがありますね。

もちろん会社が求める人材にもよりけりでしょうが、需要はあるかと思います。

フロントエンドもそうなんですが、特にバックエンド言語はエラー対処能力や運用のしやすさはかなり求められるかなと思います。

また、そういった言語が使えると、

業務を効率化させるためのコードを書いたり、

単純作業を自動化させるなどの実装もできるようになってくるので、

Webサイトやアプリを構築する以外にも、色んな付加価値があるかな〜と思います！

システム側は個人情報やクレジット情報を扱ったりすることもあるので、フロントエンドもそうですが、責任感が強い人は向いているかと。

例えば、ECサイトではお支払いの画面で、クレジット情報を扱ったりしますね。

お問い合わせフォームでは、ユーザーに個人情報を打ち込んでもらうので

そういったものが外に漏れないようにしておく知識とかも必要になってきます。

将来性は？

フロントエンド、バックエンドと、それぞれのエンジニアについて紹介してきましたが将来性でいうとどうなのか、解説していきます。

といっても、未来予測みたいなことなので、確実ではないです。

ただ、今までWeb業界で働いてきた中で、こうなりそうだなというのを書いていきます。

結論としては、どちらのエンジニアの作業も、今後はより簡単になっていくかと。

一番の例としては、ノーコードツールの発展ですかね。

コーダーやプログラマーがいなくても、つまりコードを書かなくとも

Webサイトの見た目を作ったり、システムの構築ができたりします。

ではなぜ、まだまだエンジニアが必要なのか？といいますと、

それらのツールがまだ汎用的に使うことができず、思ったデザインを再現できなかったり、

使いたい機能が実装できなかったりするところかなと思います。

とはいえ、IT自体が需要が高まっている傾向にありますので、エンジニアになることで損はないかと！

リモートで働きやすいのも一つのメリットですね。

デメリットもあるけど、現状では夢のある仕事だと思います！

ちょっとだけ補足すると、フロントエンド、バックエンドどちらをやるにしても、別の付加価値のある人材は強いイメージです。

エンジニア × マーケティング能力
エンジニア × Webデザイン
エンジニア × 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業界に限らずなんですが、使われる用語はめっちゃたくさんあったりします。

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

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

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

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

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

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

• 自宅でのパソコン作業に集中できない方
• プログラミングやコーディングを勉強中の方
• コーヒーとか飲みながら作業したい方

コーディング学習をしている方、今集中的に取り組んで息抜きの最中にこの記事を読んでいる方、

ちょっと環境を変えて作業してみませんか？

自宅だと、

• まわりに誘惑が多い
• 人の目がないのでスローペースになってしまう
• ベッドで作業してたらいつの間にか寝てしまう

こんな感じで作業進まなかったりします。

僕自身もコーディング作業するときに、場所を変えたりすることが多いんですが、

今回は、パソコン作業に向いている環境を紹介します！

パソコン作業はどこでする？集中できる場所を紹介！

カフェ・喫茶店

カフェや喫茶店、めっちゃおすすめです。

僕はカフェのおかげでエンジニアとして成長できたといっても過言ではないです。

メリットは、

• コーヒーを飲みながら作業できる
• 周りに人がいるので、作業以外の行動を制限できる
• ソファーなど、座ってて疲れない椅子がある

このあたりですね。

ご存じの方もいらっしゃるとは思いますが、コーヒーに含まれるカフェインには、

頭がスッキリして作業に集中できる効果があるみたいなので、

特に集中力が切れている人や、どこかの作業が解決できない人には、

飲みながら作業できるのでおすすめです。

カフェだと周りに人がいるため、自宅で作業しているときとは違い、ある程度の緊張感を保つことができます。

緊張感を保てるので、作業中にうっかり寝てしまったり、別の作業をしてしまったりすることは減っていくかと。

あとは、家に作業用の椅子がない人にとっては、

ソファーが使えるのも大きなメリットですね。

ただ、カフェや喫茶店で作業する場合に気をつけておきたいこととしては、

「セキュリティが保たれたネット環境を使用できない」ことが一般的であることですね。

特に仕事で使う重要な資料とかはなるべく扱わないようにすることを推奨します。

ネットカフェ

カフェかぶりなんですが、ネットカフェもおすすめです！

メリットは、

• 個室の空間で作業できる
• パソコン作業に最適な環境が一通りそろっている
• 自分の好きなタイミングで飲食できて、息抜きもしやすい

ネットカフェであれば、個室で集中して作業ができます。

自宅以外で、個室の空間で作業できるところって意外とないんですよね。。

気分を変えたい人におすすめかなと思います！

あとは、パソコン作業に最適な環境が一通りそろっているかなと。

大きめのディスプレイやヘッドフォンが用意されていることも多いですし、

リクライニングソファとかも使えるところがあります。

それ以外ですと、自分の好きなタイミングで飲食ができるので、

ネットカフェに着いてしまえば、パソコン作業以外の事で時間を取られることがないかなと思います。

デメリットとしては、誘惑が多いことですかね。

漫画とかもそろっているし、パソコンから動画を見ることもできるので、そこに気を取られない方であればおすすめです。

ネットカフェの隠れたメリット

そして、これは隠れたメリットだと思うんですが、

「自分のものとは違うパソコンで作業する」ことができます。

コーディングやプログラミングのチーム開発でよく使われているgitや、

その他データのやり取りなど、

自分のパソコンで行っている作業を、他のパソコンでも試すことができるか

が実践できます。

この点は、試すことができる機会も少なく、実際に業務で意外と行き詰まるところだったりするんですよね。

コーディング初心者の方など、ネットカフェで作業する機会があれば、是非試してみてほしいです！

環境を変えての作業は、短期集中型のコーディング初心者、プログラミング初心者におすすめです。

パソコン作業に集中できる場所を紹介しました！

もちろん、自宅で集中できる方は、お金もかからないし自宅で作業するのがいいかなと思いますが、

今はいろんな環境でパソコン作業できるので、せっかくなら環境を変えて、気分を変えつつ作業するのもいいかなと！

是非試してみてください〜

投稿 パソコン作業はどこでする？集中できる場所を紹介！ は エンジニアスタート に最初に表示されました。

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

こんにちは、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アプリ開発のフロントエンドエンジニアが共通してよく使うのは、下記の言語です。

• HTML
• CSS
• Javascript
• PHP

このあたりの言語は、１から書けて損はないでしょう。

Web制作とWebアプリ開発で、使用するツールやフレームワークが異なる

Web制作とWebアプリ開発で違うところで言えば、

これらの言語を使って、より良くコーディングするために「使われるツールやフレームワークが違う」

というイメージです。

ちなみにフレームワークとは、

「開発に必要な機能をあらかじめ用意した枠組み」ですね。

Web制作でよく使われるのは、

• WordPress
• jQuery
• ノーコードツール

Webアプリ開発でよく使われるのは、

• Javascriptのフレームワーク（Vue.jsやReact.jsなど）
• PHPのフレームワーク（LaravelとかCakephpなど）

例えば、Web制作でLaravelやVue.jsを使うこともありますが、あまり一般的ではないです。

今後もしかしたら流行る可能性はありますが、

現在ではWordpress、jQueryが使われることが多いかなと。

なぜツールやフレームワークが違うかといいますと、

作ることにおいて、「重点とする部分が違う」というのが一般的な考え方かなと思います。

• Web制作ではSEOやCSSでのスタイル調整、サイトの動き実装が重点的
• Webアプリ開発では、アプリのUI/UXなど使い方が重点的

たとえば、フレームワークを使ってサイトを構築すると、

SEOにこだわった制作をする上で効率的でなかったり、

WordPressでアプリ開発をするのが一般的でない、みたいなイメージです。

※あくまで「重点的」に考えることが多い、ということなので、Web制作でもUI/UXにこだわることはありますし、アプリ開発でスタイルにこだわることもあります。

Web制作寄りフロントエンドの場合、SEOやデザインにも興味を持ったほうが良い

Web制作をやりたい場合、

SEOやデザインに興味を持ったほうが良いと思います。

理由は単純で、作れるだけだと良いものができないからですね。

SEOを知っておけば、そのルールにある程度従ってコーディングできますし、

デザインについて知っておけば、どういうコーディング設計にすればよいか、スムーズに答えが出てきます。

あとは、Web制作のコーディング作業は、比較的難易度は低いです。

本気で頑張れば3ヶ月くらいで一通りHTMLやCSSで最低限コーディングできるようになるでしょう。

その分競合が多いため、その他のSEOやデザインに興味を持てれば、

フロントエンドエンジニアの人材として重宝されるんじゃないかなと思います。

またデザインやSEOなど、コーディング以外の作業を一人でできるようになれば、

フリーランスになる道も見えてきます。

ちなみにWordpressがWeb制作でよく使われるのは、

SEOに強い制作ができること、が一つの理由として挙げられます。

他にも制作をより効率よくするための機能がついてます。

また、最近ではノーコードツールも流行ってきていまして、制作する時間だけで考えると、ノーコードツールを使って制作するのもアリだと思いますが、

より細かくデザインを整えたり、SEOにこだわっていくには、

基本的なHTMLやCSS、Javascriptの使い方を覚えておくべきでしょう。

Webアプリ開発寄りフロントエンドの場合、UI/UXやコードそのものに興味を持てたほうが良い

Webアプリ開発をやりたい場合、

UI/UXには興味を持てたほうが良いかなと思います。

使いやすいアプリやツールを開発することが目的なので、

「ここはどういった機能で実装すれば、ユーザーが使いやすいか」を

知っておいたほうが良いかなと思います。

またアプリ開発では、より複雑なコーディングを行います。

JavascriptやPHPのフレームワークを使うとき、

それぞれのマークアップ言語・プログラミング言語を応用させて使うイメージです。

なので、JavascriptやPHPを１から書けておいたほうが良い、というのはもちろん、

HTMLやCSSの使い方もフレームワーク上で書くときは、基本の書き方と若干異なりますので、各言語の基礎力は身につけていった方が良いと思います。

面白み自体は共通

フロントエンドの面白みは、実装した見た目や機能が、ブラウザ上で直ぐに反映されてくれるので、

達成感を味わいやすいことが一つの醍醐味でしょう。

また、お客さんがサイトやアプリを見て、使いやすさを認めていただいたり、

デザイン面を評価していただいたときは嬉しいです。

僕はWeb制作寄りのフロントエンドでして、

以前勤めていた会社で、

結構動きがついていて、短納期のサイトをコーディングする案件があったんですが、

お客さんから「モーダルの動きがいい」というお言葉をいただいて、

「頑張って作ってよかったな〜」と思った経験があります。

（もちろん、上流工程を担当するディレクターやデザイナーにも感謝しました。）

そういった、「他の人からデザインや使いやすさの共感を得る」という経験を積み重ねていくと、

いいものが作れるフロントエンドエンジニアになれるのではないかなと思います！

投稿 【Webサイトやアプリの表側】フロントエンドにも色々な種類があるよ、という話 は エンジニアスタート に最初に表示されました。