(出典:Free Resources | Delesign)
マークアップエンジニアとの違い
マークアップエンジニアはHTMLやCSSの仕様に詳しく、適切な構造化、SEO、リッチなコンテンツの製作など、コーダーよりもよりコーディングスキルが高い傾向がある。ただし、JavaScriptに関しては基本レベルに留まっている人も多い傾向にある
基本はこの3つ
※JavaScriptの公式ロゴはないとのことです。
以下の文章に出てくるライブラリやフレームワークはあくまで抜粋(一例)です。
HTML(HTML5)
SEOを意識したマークアップスキル
CSS(CSS3)
膨大なCSSを整理してコーディングするスキル
- CSSフレームワーク
- Bootstrap
- Laravel 7.xまで採用
- Tailwind CSS
- Laravel 8.xから採用
- Bulma
- Foundation
- Amazonやdisney、hpで使用
- UIkit
- グループ分けに重要なclass名すべてにuk-がついているので複雑になりがちなHTMLが見やすい
- Base
- Skeleton
- Bootstrap
JavaScript
アニメーション制作におけるCSSとJavaScriptの切り分けるスキル
-
静的型付け言語
- TypeScript
- JavaScriptを基にMicroSoftが開発
- TypeScript
-
JavaScriptライブラリ
- React
- Facebookが開発
- クライアントサイドレンダリング(CSR：Client Side Rendering)に対応
- jQuery
- JavaScriptを簡易に記述できる
- 近年は機能の追加により動作が遅くなっている
- React
-
JavaScriptフレームワーク
- Vue.js
- AngularJSの良いとこ取り＆軽量化
- Next.js(Reactベース)
- レンダリングの個別設定が可能
- シングルページアプリケーション(SPA)
- サーバーサイドレンダリング(SSR)
- 静的サイトジェネレーター(SSG)
- Nuxt.js(Vue.jsベース)
- AngularJS
- Googleが開発
- Vue.js
-
その他
- Vue.js、Next.js、Nuxt.jsのようなフレームワークやライブラリ
- アニメーション制作におけるCSSとJavaScriptの切り分け
プラスα
CMS(コンテンツマネジメントシステム)構築
誰でも好きなようにWebコンテンツを作ることができるシステム
- WordPress
- MovableType
- microCMS
など
UI/UX設計
CVR※1(コンバージョン率)や利用回数、滞在時間などのKPI*2達成を考慮
UI（ユーザーインターフェース）
- Webサイトのデザインやフォント、パソコン自体の外観など、ユーザーの視覚に触れるすべての情報
- キャラクターユーザーインターフェース（CUI）
- グラフィカルユーザーインターフェース（GUI）
- UIはUXを高めるための重要な要素
UX（ユーザーエクスペリエンス）
- ユーザーが製品やサービスを通して得られる体験や経験
UXを向上させるためには
-
ゴールを明確にする
ユーザーにどのような行動をして欲しいのかを設定(ゴールを決める)※ゴールが不明確であれば、最終的にできあがるサイトもあいまいなものになってしまいかねない
-
ユーザーの気持ちになりきる(ユーザーのペルソナを設定)
ターゲットへのイメージが明確になる現在置かれている状況や悩み、関心、要求を想像してユーザーになりきることで自然とデザインや機能などが絞られる
-
ユーザーの使いやすさについて考える
常に斬新なデザインで勝負するのではなく、ユーザーがストレスなく使用できるにはどうしたら良いかも併せて考える
※1 Webサイトや特定のページに訪れたユーザーの内、どの程度CV(最終的な成果)に至ったかを表す数値
CVR＝CV数（コンバージョン数）÷セッション数（サイト訪問者数）×100
※2 組織の目標を達成するための重要な業績評価の指標
サーバーサイド言語
PHP
- PHPフレームワーク
- Laravel
- CakePHP
Ruby
- Rubyフレームワーク
- Ruby on Rails
さらにプラスα
チームマネジメント
滞りなくプロジェクトを成功させるため
- どこにだれを配置して、どのような手順ですすめていくかを明確にする
- 全体のスケジュール管理
- それぞれの工程におけるタスク管理
チームのメンバーそれぞれがポテンシャルを発揮できるように、 - モチベーションをコントロール(コミュニケーションスキル)
- リーダーとメンバーのみならず、ときにはメンバー同士での交流を自然的に促すことができる
その他 - プレゼン力
- マーケティング力
- デザイナーも兼務したコピーライティング力
なりたい自分を想像したうえで、必要なスキルを取捨選択していくことが結果的にキャリアアップにつながる