SESのWebデザイナーに必要な基礎知識

未経験からWebデザイナーを始める際の学習環境

Webデザインを独学で習得するにあたり、さまざまな学習ツールにアクセスしやすくなり、いい時代になったと言われます。インターネット上の学習サイトでは、ドットインストール、Progate、Udemy が有名所でしょうか。一方で、「ゼロからWebデザイナーを目指す人」にとっては、学習サイトだけではカバーしきれない範囲の知識があります。

 

未経験採用でSESに当たる率の高さ

今の時代、Webデザイナーも未経験OKの採用情報を探していると、SES がかなり含まれるのではないでしょうか？（SESという単語を避けていることも）未経験でSESがダメというわけではありません。学習支援があると謳っていても、メンター制度があるところは稀で、上記のような学習サイトが使えるだけだったりします。

その場合、身につくのはコーディングとグラフィックソフトのスキルに偏ります。出向先でその先の知識を仕入れることはできると思います（出向先ガチャとも言われますが）。

たまたま 出向先 が 制作会社 だったり、先輩デザイナーに教えを請える環境なら、それ以外の基礎知識は出向先で教わるのでも問題ありません。しかし、例えば Vue.js が少し使えるから 小規模の上流開発にアサイン されて、デザインの基礎的なことを 気軽に教われない状況になる ことも全然あり得ます。

新人の自走力の問題にされがちですが、IT人材不足の時代において、人材管理側がWebデザイナーのスコープを把握していないことも問題あると思います。なので、SES企業へ新卒入社したデザイナーの方は、あまり自責せずに、「管理側はなんでも知ってるわけじゃないな！」くらいの認識で、ご自身で情報収集することを心がけてくださいね。

 

一人一人のロードマップが必要

Webデザイナーに必要な知識は、その人の今いるチームによってかなり違います。（目標によってもですが）その人に最適化したロードマップというものがあるはずですので、ぜひ色々調べてご自身の学習ロードマップを立ててみてください。

 

Webデザイナーに必要な基礎知識

Webデザイナーに必要な基礎知識は、以下のように分類できるかと思います。☆で示しているものは最低限どんなチームでも把握していて間違いないという意味です。

• グラフィックソフトの知識　☆☆★★★
• コーディングの知識　☆☆☆★★

• デザインそのものの知識　☆☆☆★★
• Webサーバーとアクセスの仕組み　☆☆☆★★
• ユーザーが見る端末と環境　☆☆☆★★

• Webサービスとネイティブアプリの違い（開発側） ☆☆★★★
• セマンティックな記述、SEO、Sass等の実務的なコーディング　☆☆☆☆★
• Gitの知識　☆★★★★
• サーバーサイドの知識　☆★★★★
• CMSの知識（WrodPressカスタマイズ）　☆☆★★★

グラフィックソフトの知識　☆☆★★★

言わずと知れた Adobe の Photoshop、Illustrator、XD や、Figma、Sketch 等、グラフィックデザインやワイヤーフレームを作成するソフトウェアを”使う”知識です。「脱Adobe」と言われている記事を目にすることもあるかと思います。だからといって勉強しなくていい知識というわけではありません。最低でも Photoshop はマストです。ただ、これらは道具に過ぎないので、「デザイン力 = グラフィックソフトを使う力」ではありません。

▼▼▼ 下記はグラフィックソフトを使い分ける一例です ▼▼▼

Illustrator は Webカンプ に合わないのか？と聞かれますが、正確にはデータの”作り手”と”受け取り手”のコミュニケーションコスト（＋学習コスト）がかかるため、これまでは Photoshop がご指名になりがちでした。

Web制作は概ね分業になるので、コミュニケーションコストは馬鹿にできません。もっといえば、上流開発 の場合はサイクルが早いので、Photoshop だけだと心許ない時もあります。

できれば、XD や Figma もお勧めしておきたいです。カンプ制作やチームへの共有にも適しており、Illustratorの使用感に似ているところもあります。Figma は無料で始められます。もし XD のために自費で AdobeCC に入るか迷っているのであれば断然 Figma がいいと思います。

Canva などの非デザイナー向けソフトですが、使えるならそれはそれで重宝されると思うので積極的にアピールしましょう。ただ、やはり最低限 Photoshop が使えて＋αのスキルとしての評価になると思います。

 

コーディングの知識　☆☆☆★★

HTML、CSS、javascriptの基礎で、１ページのサイトを作れるところまでは、学習サイトで最低限やっておいたほうが良いです。ですが、あまり座学を深掘りせず、基礎や応用ぐらいまでを学んだら実践しながら習得していきましょう。実務では使わないなという記述も必ずあるためです。

それと、「こんなにたくさんのことを実務でやるのか？」「やることが多すぎて続ける自身がない」と、先行きが心配になるかもしれません。実際は、プロジェクト単位ではWebデザインとコーディングを全部一人でやることはあまりないはずです。ちょっとくらい苦手があっても得意な人に任せたり、逆に引き受けたりします。また、コーディングを実務でやらないとしても、Webデザイナーがコーディングを知っていることに意味があるのです。

とはいえ、「コーディングばかりアサインされて、Webデザインが全く回ってこない」なんてこともありますよね。その場合ポートフォリオを充実させたり、SESのエージェントに相談したりといったことになると思います。下記のような、デザインそのものの知識に関して再確認してみるのもいいかもしれません。

 

デザインそのものの知識　☆☆★★★

デザインそのものとは、配色・フォント・写真・構図のセオリーや、目的や文脈においての優れたデザインとは？といった考え方を知ること（インプット）。さらには自分が作ったデザインの意図を非デザイナーに説明できる（アウトプット）ことです。

なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉 | 筒井 美希 |本 | 通販 | Amazon

Amazonで筒井 美希のなるほどデザイン〈目で見て楽しむ新しいデザインの本。〉。アマゾンならポイント還元本が多数。筒井 美希作品ほか、お急ぎ便対象商品は当日お届けも可能。またなるほどデザイン〈目で見て楽しむ新しいデザインの本。〉もアマゾン配送商品なら通常配送無料。

amzn.asia

『デザイン』は、一般的には美しく装飾することを指しますが、そもそも設計するような意味で、○○デザイナーという仕事はビジュアルデザインに限りません。「目的・課題」があり、「どう実現するか」というプロセスがデザインの本質です。デザインに意図をこめられていますか？また、それを言語化するとなると難しいものです。ちょっと怖そうなタイトルですが、下記の本は実際のフィードバックによってデザインの思考プロセスを知ることができる一冊です。

鬼フィードバック~デザイン力はダメ出しで育つ~ | 前田 高志, 染谷 昌利 |本 | 通販 | Amazon

Amazonで前田 高志, 染谷 昌利の鬼フィードバック~デザイン力はダメ出しで育つ~。アマゾンならポイント還元本が多数。前田 高志, 染谷 昌利作品ほか、お急ぎ便対象商品は当日お届けも可能。また鬼フィードバック~デザイン力はダメ出しで育つ~もアマゾン配送商品なら通常配送無料。

amzn.asia

 

Webデザインとして優れているということ

Webデザインとしては、実装可能か（コーディングで容易に実現できるか）を考慮したデザインを求められます。しかしだからと言って「実装の容易さ」を優先し過ぎて、「ユーザーの使いやすさ」が二の次になってもいけません。UX的な目線では、目的に対して「効果があるか」が判断の基準になったりもします。

UX的な話まで出てくると、基礎ではなくリードデザイナーレベルかもしれません。ですが、デザインは掘り下げるとまだまだあるのです。基礎を学んだ後、UX、UI、HCD … ＋αどれを学ぼうか、好奇心が広がりますね。

☆が少なめなのは、駆け出しの時はまだわからなくてもいいよという現場もあるからです。もちろん初めからグラフィックデザインに強いデザイナーがいたらそれだけで武器になります。前職でパワーポイントの装飾に凝っていたとか、カメラの趣味があるとか、売りになるエピソードを持っていればアピールに使ったほうが良いです。

 

ユーザーが見る端末と環境　☆☆☆★★

Webサービスやネイティブアプリの開発・運用に携わる際、「ユーザーにどう見えているか」を気にする必要があります。色々ありますが、「通信環境」と「端末（デバイス）」「ブラウザ」をどこまでカバーするのかは重要ですよね。

「今は5G環境が整いつつあるので、外でスマホでも動画広告が止まらず十分機能するだろう（通信環境）」とか。「レガシーブラウザにどこまで対応するか」。「社内システムでWindows環境が圧倒的多数だからSafariはサポート外にしませんか？」とか。「デザインカンプより小型のスマホだったときにカラムを落とすのか？」とか。

要件定義書に指示がなくても、デザイナーも考えるべきところです。時には臨機応変に対処しなくてはなりません。制作側にとって、ブラウザのサポート範囲を後で変えられると大ごとですが、ビジネスサイドはそれなりの理由をもって変更指示をしているかもしれません。ヒアリングして落とし所を一緒に考えることもあるでしょう。

例えば、Google検索で「ブラウザ シェア率」と検索した際に記事が出てくると思います。（ツールの期間指定で検索するとより直近に絞れます）さらに記事の出展元サイトで2022年12月を表示して見ました。

Browser Market Share Japan | Statcounter Global Stats

• Chrome　49.15%
• Safari　28.12%
• Edge　13.97%
• FireFox　4.57%
• Samsung INternet　1%
• IE　0.83%
• Opera　0.65%
• Android　0.63%
• UC Browser　0.2%

やっとIEが１%以下になってコーダー歓喜ですね。こういった情報には、時代が変わってもご自身でアンテナを貼っておくべきこととして認識しておいてくださいね。

Webサービスとネイティブアプリの違い（開発側） ☆☆★★★

フリーランス向けの求人を見ていると、「Webサービス」、「Webアプリケーション」、「ネイティブアプリ」などの表記を見かけます。これは必ずしも表記揺れというわけではありません。

インターネットは”ブラウザ”というソフトウェア（EdgeやSafariやChrome）を介して、Webページを表示しています。

LINE などのアプリは、スマホまたはPCにアプリをインストールすることによってサービスを利用できます。端末に直接インストールするのが ネイティブアプリ です。（2023年1月現在Chrome拡張を使えばブラウザ版LINEもあるそうです）

一方、ブラウザ上で閲覧したり利用できるサービス全般をWebサービスと言い、中でもユーザー側が起こしたアクションによって、何らかのプログラムが動作して帰ってくるものをWebアプリケーションと呼びます。簡単な企業紹介サイトのような、ユーザーが置いてある情報を読むだけのサービスに対して、あまり「Webアプリケーション」とは呼びません。「Webアプリケーション」とわざわざ表記していたら、「SNSとかチャットとか物件検索のような機能がついてるんだな」という理解でいいと思います。

ネイティブアプリ と Webアプリケーション は、企画サイドに混同されると、非常にやっかいです。

制作側の視点だと言語が違いますし、デザイナー視点だと適用フォントや素材の規約事情が変わるかもしれない。UX視点では、カスタマージャーニーマップやユーザーストーリーが変わるでしょう（プログラムの設計も変わる）。Webサービスができあがっていても、それをネイティブアプリに展開するにはそれなりに予算がかかるのです。上流工程でWebアプリケーション制作の際、後からネイティブアプリに展開しそうかを要確認です。

下記記事だとAmazonのアプリが、部分的にWebビューを使ってうまくやっていますね。商品詳細画面がWebビューで読み込んでおり、それ以外がネイティブアプリの機能のようです。

Webview(ウェブビュー)とは？Androidシステムの不具合・ネイティブアプリとの違いも解説【2023年最新】 | 集客DX相談室 byGMO

スマートフォンアプリの主な形式であるWebview(ウェブビュー)とネイティブアプリ2つのアプリ形式について分かりやすく解説します。 結論として、Webviewアプリは低予算で作成可能ですが、利用できる機能に制限があります。 ネイティブアプ

contents.digitallab.jp

 

セマンティックな記述、SEO、Sass等の実務的なコーディング　☆☆☆☆★

機械が読み取りやすいマークアップ

セマンティックな記述とは、コンピュータが読みやすいことです。セマンティックなコードを記述すると何がいいのか？見た目は変わらないからこそ、上流開発では緊急度が低く見逃されがちですが、運用フェーズでは重視されることかと思います。

例えばコンテンツレイアウトを全部 <div> で作っても見た目は変わらないですが、HTML5の <article> や <section> や <p> を使うと機械が意味を理解します。<img> タグにalt属性 をつけて読み上げ可能にすることも大事です。タグの入れ子ルール も調べて見てください。あとはスタイルシート（CSS）に学習サイトの手本のまま「h3」「h3.classname」とセレクタに要素を指定すると、リファクタリング（見た目を変えずコードを整理すること）で手間が増えるので「.classname」のようにクラスセレクタを使う（例外として<ul><li>などの親子関係が確立している時は要素を指定することもあります）。他にも、人が書いたコードをたくさん見ることで、共通していそうなことが見えてくると思います。（当記事はコードを打ってないので結構雑です）

 

Sassやフレームワークでコーディングを短縮する

CSS、JavaScriptを使用する際、実務では同じような記述をまとめた「ライブラリ」や「フレームワーク」、拡張言語の「Sass」などを使用して、人の手で打ち込む手間を省いたりするのが一般的です。

有名どころで、「CSSフレームワーク」で使うのがBootstrap。「JavaScriptライブラリ」で 開発系に多いのがVue.js、React、運用系ではまだ手軽に使える jQuery が多いのではないでしょうか。

 

Gitの知識　☆★★★★

Unsplash

 

Git とは「分散型バージョン管理システム」のことです。なんのこっちゃですね。ファイルを更新したりアップデートした際に、その履歴を管理できることが、バージョンを管理できるということらしいです。で、履歴を管理できるとは、間違って誰かがサーバー上で上書きしても、前の履歴のここの部分に戻せるということです。

複数人でデータを触っている際、いつ誰がどんな記述に直したのかを遡れます。分岐点を作れるので、他の人の作業と分岐したうえで作業を進められます。

出向先が開発系だとマストになってくるかと思いますが、Webデザイナーとして出向するなら誰かしらに教われると思います。ただ、世の中的にリモート中心になってきていることを思うと、早めに触ってみるほうがいいのかもしれません。とりあえず動画で流し見するだけでもいいかもしれませんね。

Gitを使ったバージョン管理｜サル先生のGit入門【プロジェクト管理ツールBacklog】

ようこそ、サル先生のGit入門へ。Gitをつかってバージョン管理ができるようになるために一緒に勉強していきましょう！

backlog.com

 

ローカル開発環境を用意する

ローカル開発環境（ローカルサーバー）とは、個人のPCに構築する開発環境です。すでに学習サイトでHTMLなどを学習済みであれば、PCブラウザ上でプログラミングできるサービスを利用しているのではないでしょうか？それでもいいのですが、一度ローカル開発環境を整えると勉強になると思います。まだ感覚的に理解できるのは、MAMP（Mac用）やXAMPP（Windows用）をインストールする方法かなと思いますが、出向先が Node の http-server だったりするならそのやり方を周りに聞くのもありかもしれません。（私は Node.js 未履修です）

ローカル開発環境の構築は、慣れるまでそれなりに時間がかかると思います。Macならターミナルを使ったり、ちょっと難しそうなのですが、Web制作でコーディングのほうにも軸足を置いていくには、必要な作業スペースとなるので、時間を設けてじっくり試してみてください。

 

というわけで、初学者の方は無理にWordPressの勉強を始めるより、デザインの基礎やコーディング知識に時間を割いた方が良いかと思います。

あるいは、Webデザインの勉強から入ったけど、マーケティングや運用のほうにすでに興味が傾いている方は、WordPressでご自身のブログを始められるのもいいかもしれません。