フリーランスとセルフマネジメントby アキユキ

フリーランスのお役立ちブログ+モチベーションを高く維持するためのセルフマネジメント術

Webデザイナー初心者が勉強すべきこと、しなくてよいこと

Webデザイナーを目指す人にとって何をどこまで勉強すべきで、何はやらなくていいのか、その辺の判断って難しいですよね。例えばHTMLはどこまで勉強したらいいのか、Bootstrapはそもそもやるべきなのか、他にも色々あります。

とりあえず勉強してみたけど使わなかったとか、後回しで良かったなど、非効率な学習を予防するためにも、この記事ではまだ実務経験がゼロのWebデザイナー初心者が勉強すべきことと、しなくてよいことを解説します。

これからWebデザイナーに向けて勉強する人にとって効率的な学習の道筋になれば幸いです。

Webデザイナー初心者が勉強すべきこと

まずWebデザイナーになるために必ず勉強しなければならないことは次の4つです。

  • ドメイン、サーバーについての理解
  • HTML / CSS
  • JavaScript(jQuery)
  • Webデザイン(Photoshop)

ここではWebデザイナーをコーディングまでする人という定義で話を進めていきます。

中にはコーディングは行わず本当にデザインのみという人もいます。デザインのみの場合はPhotoshopだけ使えれば後はWebデザインスキルがあればとりあえず問題ないでしょう。(とはいえHTMLやCSSの概念を知っておかないとWebデザインの制約がわからないと思います。概念ぐらいは勉強しておきましょう。)

ではコーディングまでやることを前提にこの先話を進めていきます。

先に紹介した4つのことですが、ではどこまで学習したら良いのでしょうか。HTML1つとってもやろうと思えばキリがないぐらい膨大な覚えることがあります。1つ1つピックアップして解説していきます。

ドメインやサーバーについて

会社によってWebデザイナーがどこまで業務をするか異なると思いますが、ドメインやサーバーについて理解することはWebの仕組みを理解するために必要なことです。

ドメインとは何か、サーバーとは何か、ドメインとサーバーの関係性(Webサイトが表示される仕組み)この辺の概念理解は必須です。

実務で公開作業までする場合は、それに絡んでDNS変更やSSL設定、メール送受信の仕組みを理解した上でメール設定変更、ここまで理解する必要がありますが、最低限、ドメインとサーバーの関係性を理解してWebサイトが表示される仕組みがどうなっているのかまでは説明できるぐらいになっておきましょう。

HTML/CSSはどこまでやるべきか

簡単な企業のコーポレートサイトを難なくコーディングできるレベルを目指した場合、次の挙げるところまでは理解しておきましょう。

HTML

  • HTMLのhead内に書くべきことが理解できている(title、meta、link、script)
  • デザインやワイヤーフレームを見て、body内をどういう構造で作ったらいいか分かる
  • HTML5のタグの使い方を理解している(header、footer、section、article、asideタグなど)
  • div、span、p、img、a、table、ul、ol、h1、あたりの頻出タグを使える

CSS

  • フォントを指定できる(フォントの種類を知っている)
  • 一般的な文字装飾ができる(色、下線、センター寄せ、フォントサイズ、行間設定など)
  • アクションの設定ができる(ホバー時に色が変わるなど)
  • 疑似要素を使うことができる
  • 背景色や背景画像を設定できる
  • min-width、max-widthについて理解して使える
  • paddingとmarginの違いを理解して余白を作れる
  • borderを使って線を引くことができる
  • floatやflexを使ってボックスを横並びにできる
  • メディアクエリを使ってレスポンシブ対応ができる

HTMLもCSSも挙げるとキリがありませんが、上記のリストをぱっと見て「あぁ、それね」という感じであれば、とりあえず簡単なサイトは作れるレベルなのではないかと思います。

「逆にそれって何だっけ?」と思うことがあれば復習してみて下さい。基本的にはHTMLもCSSも基本だけ押さえておけば、後は調べればすぐにわかることばかりなので、案件の中で対応していくという方法で問題ありません。

JavaScript(jQuery)はどこまでやるべきか

まず、JavaScriptをゼロから書けるようになる必要はありません。jQueryが使うことができれば全く問題ないです。

jQueryはJavaScriptのライブラリで、特定の動きを付けるためのJavaScriptがパッケージ化されたものです。jQueryの読み込みをhead内でした上で、jQueryのコードを数行入れるだけで、Webサイトに動きをつけることができます。

例えばよくあるのが、スクロールしていくと「ページトップに戻る」ボタンが現れて、それをクリックするとスルスルっとページトップに戻る動きです。ボタン自体はもちろんHTMLやCSSで実装しますが、ボタンをクリックした時のイベントを拾って、特定の動きを出す(ページトップにスルスルっと戻る)部分をjQueryが担当します(正確にいうとjQueryの組み合わせて実装したりします)。

JavaScriptですべて実装しようと思うとすごく大変ですが、jQueryだと比較的楽に実装できます。

そしてjQueryも様々な動きを実装できるコードがありますが、これはすべて覚える必要はありません。皆さんが学習すべきことは、jQueryの概念を学習することです。

jQueryを動かすためにはhead内でjQueryを読む込む必要がありますが、そういったjQuery自体の使い方とjQueryでどんなことができるのかといったjQueryの用途です。

用途だけここで例を上げておくと、次のようなことをjQueryでよく実装します。

  • ヘッダー画像を数枚用意しておき、それを自動or手動でスライドさせる
  • メニューをクリックした時に、ドロップダウンメニューを表示させる
  • 内部リンクをクリックしたら特定の位置までスルスルっと移動させる

jQueryでできることは何か、jQueryを使うための準備に必要なことは何か、この辺を理解しておき、後は実際にヘッダー画像をスライドさせたいのであれば、「ヘッダー画像 スライド jQuery」などで検索すると具体的な実装方法が出てきますので、それを参考にしながら実装していきましょう。

Webデザイン(Photoshop)はどこまでやるべきか

Webデザイン自体の勉強はもちろん必要ですが、Webデザインを作るためにはPhotoshopが使える必要があります。

Photoshopといっても多機能ですので、色んなことができます。

最初にPhotoshopを開いてみると機能が多すぎてビックリすると思いますが、Webデザインで使うPhotoshopの機能は本当に少なくて、全機能の1割にも満たないと思います。

基本的にWebデザインは次の作業がメインです。

  • 画像などの素材を加工してパーツを作る
  • パーツをレイアウトをする

パーツを制作する際に色々細かいことをやることがありますが、だいたいPhotoshopでよくやる作業は次のようなことです。

  • 文字の装飾
  • 写真・画像の色調整(色相変換や明るさ調整など)
  • 写真・画像の切り抜き
  • マスク機能の活用(トリミングしたり、部分的に装飾をいれたり)

バナーを作ったりヘッダー画像を細かい装飾を入れたりするようなグラフィックデザインをやる場合、ちょっと応用的な使い方が必要になるので他にも色んな機能を使いますが、そういった機能を含めても、Photoshopの基本的な使い方の書籍を1冊やっていれば問題ありません

Webデザイナー初心者が勉強しなくてもいいこと

Webデザイナー初心者が勉強しなくてもいいことの考え方を先に説明します。

  • 応用でしか使わない技術
  • クライアントにとっては意味のない技術(制作サイドの都合で使いたいだけの技術)

これらは優先的に勉強する必要がありません。

まずは基礎を固めるために基本的なことに集中して勉強すべきですし、クライアントにとって意味のない技術も優先して学ぶ必要はありませんね。

では具体的にWebデザイナー初心者が勉強しなくてもいいことを整理していきます。

Bootstrap

Bootstrapは制作者がWebサイトをコーディングする際に作業効率化することができるので便利だと言われています。

僕も案件で何度か使ったことはあります。ただそもそもコーポレートサイトのような柔軟なデザインが必要なものには向きません。

用途としては、例えばECサイトの裏側の管理画面など割と業務画面のデザインのようなグリッドデザインで済むような簡易なもの向けです。なのでそもそもWebデザイナーとしてBootstrapを使うことは作業効率化でも何でもない(むしろやり辛い…個人的な意見ですが、そういう意見もちらほら見受けられます)ですし、仮に作業効率化できたとしても、クライアントにとって何の意味もないので、まずは後回しでいいでしょう。

ちなみに僕はずっとやっていませんでしたが、案件でBootstrap指定が入ったため、仕方がなくやったという流れです。

Sass

Sassを使うとCSSを効率的に記述することができるので便利です。コーダーの6割がSassを使っていると言われていますが、クライアントにとっては意味のない技術なので、Webデザイナー初心者が優先的にやることではありません。ただそういうものがあるということが覚えておくとよい技術です。

時間ができた時に学習しましょう。CSSに慣れている人であればすぐに身につけることができます。(コンパイルしなければならなかったり、初心者には頭が痛くなりそうな手順があるので、優先順位的にも低いですし一旦置いておきましょう)

SVG

わからない方は飛ばしていただいて構いませんが、SVGというのはベクター形式の画像フォーマットです。ベクター形式なので拡大しても粗くなりませんし、CSSと絡めてアニメーション画像のようなものを作ることもできます。

ほとんど使わないので、優先的に覚える必要はありませんが、模写コーディングをしているとたまに出てくると思います。飛ばしていきましょう。

やるべきことに集中しよう

色んなWebサイトを見ていると、いろんな技術を使っていてどうしても気になると思いますが、まずは基本的なことができていれば、それだけでも多くのWebサイトを作ることができるようになります。

Webデザイン集のようなギャラリーサイトに掲載されているものは、奇抜なものだったり高度な技術を必要とするサイトも多いのですが、世の中の案件のほとんどがそういった技術を必要としないものです。

また初心者がやるべきことでもないので、まずは自分自身がやらなければならないことを整理して、そこに集中していくことが、Webデザイナーとしてスキルアップする近道だと思います。



プロフィール

田中亮行
アキユキ

フリーランスWebデザイナー・エンジニア歴6年。主に企業のホームページの企画・デザイン・開発をしています。

ここでは自分の経験から感じたフリーランスにとって役立つ情報を発信しています。また、「やりたいことをやれる自分になりたい」そのために必要な“セルフマネジメント”についても執筆しています。フリーランスとしての生き方にも関係してくることが多いので参考にしてもらえたら嬉しすです(´ε` )

おすすめ書籍紹介