これからWeb業界で働く人向けのナレッジ集
初めまして、神戸でコードを書いてるフロントエンドエンジニアです。
もうすぐ4月になりますね。
4月といえば、入学式や入社式など、新しい生活が始まるタイミングです。そこで今回は、来月からWeb業界に入る方向けに現役のエンジニア、デザイナー、ディレクターがおすすめのツールやTipsを紹介させていただきます。
フロントエンドエンジニア/コーダー向け
フロントエンドエンジニアは、Webサイトやアプリで、ユーザーが実際に目にするフロント部分を実装するエンジニアです。
HTMLやCSS、JS、各種フレームワークなど必要な知識は多岐に渡りますが、今回は実際の制作に利用するVSCodeというエディターの拡張機能について紹介していきます。
Code Spell Checker
普段コードを書いている方ですと、変数名やclass名など、英語を用いる機会は多いかと思います。
しかし、英単語のスペルミスなどはエラーとして検知されないので、スペルミスをしたままデプロイしてしまったという経験を持つ方もいるでしょう。
こちらの拡張機能を使えば、変数名などに利用されている英単語のスペルミスを洗い出してくれます。
また、プロジェクト固有の単語があり、いちいち指摘されたくない場合は、検知する範囲から除外するように設定することも可能です。
indent-rainbow
コードを書く際、インデントが整っていると、コードのネストが分かりやすく、編集がしやすいです。
特にPythonなどを書く際は、インデントが重要になってきます。
こちらの拡張機能を使えば、下記画像のようにインデントの深さに応じて色分けがされるので、重宝しています。
Live Server
こちらはVSCode上で開いてるフォルダを元に、簡易的なローカルサーバをワンクリックで立ててくれる拡張機能です。
ライブリロードにも対応しており、複雑な設定も必要ないため、静的なコンテンツの制作には重宝しています。
Error Lens
VSCodeは非常に優秀なエディターなので、構文エラーなどがある場合は、その部分に波線を引いて知らせてくれます。
この部分にカーソルを合わせれば、エラーの詳細が表示されるのですが、若干見づらいと思います。
こちらの拡張機能を使えば、エディター内に直接エラー内容が表示されるので、一目でエラー箇所が分かります。
デザイナー向け
Webデザイナーはその名の通り、Webサイトのデザイン、制作を行います。
現在はデザインからコーディングまで、Webデザイナーが一貫して行う場合が多いですが、今回はデザインという部分に着目して、LP（ランディングページ）のWF（ワイヤーフレーム）を考えるときのコツを紹介します。
1. まずは参考サイトを探す
そのまま着手しても問題ないのですが、参考サイトを探してイメージを明確化したほうが構成は作りやすくなります！
初めての方はギャラリーサイトやピンタレストなどのサイトがおすすめです！また、検索するときはあらかじめ検索キーワードを選定しておくとLPの目的に対してブレが少なくなります。
例えば、若手も活躍できることを訴求したい新卒採用LPであれば、【躍動感】【成長】【チャレンジ】などの目的から考えたキーワードをもとに検索をすると探しやすくなります。
▼ギャラリーサイト例
http://lp-web.com/
https://site-advance.info/
https://lp.webdesignclip.com/
https://rdlp.jp/lp-archive/
2. デザインと構成は別々に考える
デザインと構成の参考は別々に探したほうが、伝わりやすいWFになります！
＜構成の考え方＞
【ポイント】
LP内のストーリーをもとに考えよう！
例えば、化粧品系の構成を考えるとき、単に化粧品のLPを探していくのではなく誰に何を伝えてどうしてもらいたいのか（目的）に沿って探そう！
新商品の化粧品の周知のためのLPだとしたら
1、概要
2、商品の強み
3、商品詳細説明
4、CV
など商品に興味を持ってもらう目的として訴求優先度を概要、商品の強み、商品説明の順に構成を考えるなど目的によって訴求内容と訴求順は異なりますので目的を理解したうえで考えることが重要です。
＜デザインイメージの探し方＞
【ポイント】
WEBサイトだけにこだわらない！
デザインイメージは必ずしもLPだけじゃなくてもよいです！
例えば、採用LPの構成を作成する際、ページで躍動感やわくわく感をデザインで伝えたいとします！
そうした場合、サイト検索をするのも必要ですが、チラシやポスターなどでイメージが伝わるのであればそれらをピックアップしても問題ありません！
大事なのはイメージが伝わることです！
以上が、LPのWFを作る際に私が意識しているポイントです。
初めてLPのWFを作る方は上に挙げたポイントを抑えつつ作成してみてください。
ディレクター向け
Webディレクターは、Webサイトを制作する際の全体の進行管理を行う職業です。
お客さまとコミュニケーションを取りながら、デザイナーやエンジニアの制作したもののチェックを行うなど、業務内容は多岐にわたります。
今回は大量のURL一覧から、どのページがどのページにリダイレクトしているのかを一括で調べる方法を紹介します。
前提条件
リダイレクト調査をしたいURLが一覧で用意できている
リダイレクト方法は不明でもOK
1.ブラウザで調べたいURLを全て開く
chromeの拡張機能である「Pasty」を利用します。クリップボードに貼り付けてあるURLを一括で開くことができる拡張機能です。
Pastyをインストールすると、拡張機能一覧の部分にpastyのアイコンが追加されます。
URL一覧をコピー（ctrl+C）した状態でアイコンをクリックすると、コピーしていた全てのURLをタブで開くことができます。
タブの開きすぎは処理落ちの懸念があるため、数十ページずつなどに分けて作業するようにしましょう。
2.開いているURLの一覧を取得する
chromeの拡張機能である「Copy All Urls」を利用します。タブで開いているURLの一覧をクリップボードに貼り付けることができる拡張機能です。
Pastyと同様、インストールすると拡張機能一覧の部分にCopy All Urlsのアイコンが追加されます。
ページが全て開ききった状態（読み込み中のタブがある場合は待機しましょう）でアイコンをクリック→「Copy」をクリックします。
すると開いているページのURLがクリップボードにコピーされるので、それをテキストエディタ等に貼り付けます。
3.開く前と開いた後のURL一覧の差分を比較する
フリーソフトの「WinMerge」を使用します。テキストなどを比較し、差分をハイライトで表示できるソフトです。（インストール方法は各自お調べください。）
「最初に用意したURL一覧」と「②でコピーしたURL一覧」を比較します。
以下いずれかの方法で比較すると見やすいと思います。
「最初に用意したURL一覧」→「②でコピーしたURL一覧」の順番でテキストファイルをWinMergeにドラッグ&ドロップ→「比較」をクリック
WinMergeでctrl+Nを押し、左側に「最初に用意したURL一覧」・右側に「②でコピーしたURL一覧」をコピー&ペースト→F5キーを押す
ページを開く前と後でリダイレクトしてURLが変わったものは差分となるため、ハイライトで表示されます。
これでリダイレクトされたページとそのリダイレクト先を調べることができます。
ぜひ活用してみてください。
まとめ
以上、現役のエンジニア、デザイナー、ディレクターの3名が普段業務で利用しているツールやTipsを紹介させていただきました。
4月からWeb業界に入る方、既に入っている方に参考になれば幸いです。
この記事が気に入ったらサポートをしてみませんか？