Webデザイナーになるには何が必要?
学生や異業種の方は「Webデザイナー」という仕事にどのようなイメージを持っているでしょうか。ひとりでできそう? 未経験だと難しい? デザインセンスがないとだめ?
この記事では、Webデザイナーという仕事に就くために必要なスキルや考え方について紹介します。
Webデザイナーってどんな仕事?
ひとつのWebサイトを表示するためにはさまざまな技術が必要です。
このうちWebデザイナーはWebサイトの「見た目」を作る仕事です。
Webサイトをお店だとすると、お店を建てるための土地にあたる「サーバー」や、住所にあたる「IPアドレス」、お店の名前にあたる「ドメイン」などが必要になります。
「Webデザイン」はお店の外観や内装だと言えそうです。
お店をアピールするには、素敵な外観のほかにも店内を歩きやすい動線設計、探しやすい商品の並べ方など工夫すべきポイントが沢山あります。人を呼び込むための広告も必要です。
Webデザイナーは、お店(Webサイト)を作ったり繁盛させていく中で、外観や世界観を作ったり、探しやすさや使いやすさの日々の細かな改善や、集客のための広告制作など、さまざまな場で活躍しています。
変化とインターネットを楽しめる人が向いている仕事
デザイナーという仕事は生まれ持ったセンスが重要だと思われがちですが、「センス」は多くの場合、学習による後天的なもので、学習を続けていくことが大事です。学習のモチベーション維持のためには、「自分に向いているかも」と思えるのが理想的です。
Webデザイナーに向いているのは「変化を楽しめる人」です。Webデザイナーが職業として確立したのはここ約20年ほどのことで、世の中の仕事の中では新しい職業です。つまり成長や変化の激しい業界なのです。たとえば近年では、Webデザイナーから派生して「UIデザイナー」という仕事が生まれました。UIデザイナーはWebやアプリにおけるユーザーが使いやすい画面設計を専門とする職種です。こういった仕事の細分化は今後も進むことが予想されます。
職種の変化の背景には、技術の変化があります。Webサイトを作るために必要な言語や、デザインを作るためのアプリケーションなどは日々アップデートが続くので、仕事内容の変化や技術の進化が苦にならない人、楽しめる人が向いている仕事といえます。
一方で最新技術だけを追求すればよいというものではありません。たとえば古いサイトを更新して運用する場合には、そのサイトで使われている技術に応じた改修をしなくてはいけません。
こうした意味でも、環境の変化に対して柔軟であることが求められる仕事です。
もうひとつ重要なのは、インターネットが好きであるということです。Webデザインを仕事として続けていく上では、たとえば気になった企業のWebサイトをこまめにチェックしたり、好きなサイトがすぐに浮かんでくるかは大事なポイントです。また、現在のWebサイトはスマートフォンからの閲覧が増えていますが、作り手になるのであればパソコンの操作に抵抗がないことは必須です。
未経験でもWebデザイナーになれる?
誰でもはじめは未経験です。
ところが中途採用の求人票などの「未経験可」には注意が必要です。
これは多くの場合「実務未経験可」という意味であって、Webデザインを全くやったことがなくてもよいという意味ではありません。少なくとも、なにかWebサイトを作った経験がないとWebデザイナーとして採用されることは難しいと言えます。
Webデザイナーに資格やスクールは必要?
そこで検討されるのが資格やスクールです。一方で、独学でもWebサイトを作ることはできるので、Webデザイナーになるには資格や学歴は不要だという話も聞きます。
スクールや資格は、プロになるために勉強するべき一般的な知識を、効率的に網羅できるという点が大きなメリットです。通学型のスクールでは講師に直接質問ができたり、就職の相談にも乗ってくれるでしょう。「Webサイトを作った経験」「面接のチャンス」をまず得るにはよい手段だと言えます。
Webデザイナーに関する資格には「Webデザイナー検定」「ウェブデザイン能力検定」「Webクリエイター能力認定試験」などがあります。こうした資格は自分の知識を試すよい機会となります。これに加えて、各言語やアプリケーション、色彩などの資格もあるので、出題範囲などを見て自分が目指す仕事にあった資格を受験するとよいでしょう。
一方でWebデザイナーの就職では、資格や出身校そのものよりも経歴やポートフォリオ(作品集)の中身が重視される傾向にあります。スクールや資格にお金を払ったから安心というものではなく、自分で作品を作らないと直接的な評価には結びつかないのです。資格やスクールが不要と言われるのはこのためです。
スクールや資格の受験の有無についてはこれが正解というものはありませんが、Webデザイナーは技術職ですから、与えられた課題をこなすだけでは技術もなかなか上達しません。
たとえば自分で架空のサイトを作ってみたり、友人のお店や企業のサイトを作るなどの自主的な取り組みがポートフォリオから見えると、実務未経験者であっても好感触を得られるでしょう。
Webデザイナーになるために必要なスキル
それでは次に具体的に必要なスキルを紹介します。
まず、Webサイトを表示するためにもっとも欠かせない技術がHTMLとCSSです。HTMLはHyper Text Markup Languageの頭文字です。文字(Text)の言語(Language)ですから、デザインの飾りではなく、ページの文章構造です。
これに対してCSSはCascading Style Sheetsの頭文字をとったもので、Style Sheetsの名の通り、レイアウトや装飾などのスタイリングに利用されます。HTMLにCSSを結びつけて表示することで、文章構造に装飾性が生まれ、「読みやすい」「かわいい」などといった印象に繋がります。
Webデザイナーは、ページを見た人にどういった印象を与えたいのかを考えながら、HTMLとCSSで表示するためのデータを作る仕事だと言えます。
この「HTMLとCSSで表示するデータ=Webサイト」のバリエーションは多岐にわたります。
写真やイラストなど、画像をふんだんに使った視覚表現に富んだものや、動画や反応を伴うアニメーション(インタラクション)がついたもの、ブログやショッピングサイトなどユーザーの登録データに応じて表示が変わるものなど、作りたいWebサイトやプロジェクトの規模に応じて使う技術も変わってきます。
多くの機能を持ったサイトを作るには、たとえばJavaScriptやPHPといった別の言語やサーバーやデータベースの知識なども必要になりますが、ゼロからいきなりすべてを習得する必要はありません。どのようなサイトであってもHTMLとCSSが見た目のベースになっていることに違いはないので、Webデザイナーになる第一歩として、まずはHTMLとCSSの勉強から始めましょう。
ところが、いきなりHTMLとCSSを書いてWebサイトを作っていくのは、実は経験者でも大変な作業です。絵を細かい部分から描きだすのと同じようなもので、先に全体の画面構成を決めておいたほうが最終的には破綻なく仕上がります。
そこで、HTMLやCSSなどの知識と並行して、画面のデザインを作るためのアプリケーションの習得やデザインに対する知識が必要になります。
こうした画面のデザインを作るには、Adobe Photoshop、Adobe IllustratorそしてAdobe XDといったアプリケーションを利用します。
Photoshop
Illustrator
Adobe XD
中でもAdobe XDは多くのWebデザイナーに利用されています。
Adobe XDはAdobe IDがあれば無料で使えるので、思い立ったら気軽にはじめられるのも大きな魅力です(無料版は機能に一部制限があります)。
Adobe XDの「デザイン」ビューでデザインを作る
Adobe XDは「デザイン」「プロトタイプ」「共有」の3つのビュー(編集画面)から構成されている点がPhotoshopやIllustratorと大きく異なるポイントです。こうしたビューは多くのWebデザイナーから歓迎されています。
そのうちのひとつがWebサイトの画面遷移やページ構成を視覚的にチェックできる「プロトタイプ」です。「プロトタイプ」ビューでは「デザイン」ビューで作ったページ同士を繋ぐことができます。たとえばトップページのボタンと会社概要のページを繋ぐことができるので、HTMLやCSSなどのコードを書かずに素早くWebサイトの構造を確認できます。作ったプロトタイプはPC上で確認できるだけでなく、Adobe XDのアプリを通してスマートフォンでもチェックできるので、実際の使い心地を素早く試せます。
デスクトッププレビューでボタンのリンクをチェック。ヘッダー(上部)などの固定も可能
こうしたプロトタイプはAdobe XDの機能を使ってリンクを貼ったり動かしたりしているので(一見サイトが完成しているように見えますが)、Adobe XD専用のサーバー以外では動きません。
きちんとしたWebサイトを完成させるためには、画像を書き出しHTMLとCSSなどのコードを書いて、改めてWebサイトを構築する必要があります。こうした工程のことをコーディングと言います。
Adobe XDの「共有」ビューで発行したURL(アドレス)からコーディングのための情報を抽出・確認できる
コーディングにはテキストエディタやDreamweaverなどを使います。Dreamweaverは視覚的にデザインを確認しながらサイトを構築できるので、これからWebデザインをはじめようと考えているCreative Cloudユーザーにはおすすめのアプリケーションです。
こして完成したデータをサーバーに公開することでひとつのWebサイトが完成します。
Adobe XD単体だけではなく、Photoshopで写真の加工をしたり、Illustratorでロゴやイラストを作ることでデザイン表現の幅はますます広がります。ほとんどのWeb制作会社では、複数のアプリケーションが使えることが就職の必要条件となっています。
まずはAdobe XDを最初の入り口にして、表現の幅を広げることに挑戦してみましょう。
Web業界とこれからのWebデザイナー像
ひとりでもWebサイトの制作は可能です。一方でWeb業界全体を見ると、大規模なサイトほどチームで製作をおこなうことが多くなっています。仮にひとりで制作する場合であっても上司やクライアントがいます。
こうしたほかのメンバーとコミュニケーションをとりながら制作を進めていく上では、Adobe XDの「共有」などの、コラボレーションの機能が活躍します。
Adobe XDの「共有」ビューで発行したURL(アドレス)から、デザインに複数人がコメントを入れられる
Webデザイナーは場所を選ばず(独立して)働けるイメージを持たれる職業です。
確かにそういった側面もありますが、ひとりでスケールの大きな仕事はなかなかできません。技術が常に進化し職域が細分化しているWeb業界において、これからのWebデザイナーには、チームメンバーとコラボレーションしながら、時代や技術の変化を楽しむことがますます求められていくことでしょう。
その他のおすすめ
製作者が無償で提供して自由に使うことのできるフリーフォントにも、多彩なデザインのフォントがラインナップされていて、上手に使いこなせば、より一層デザインの幅を広げることができます。
日本語の表情を豊にし、特徴づけているのは、ひらがなやカタカナといった日本独自の文字を漢字と組み合せて使用している点にあります。ここではあらためて、かなフォントやカタカナフォントの特徴と魅力を見てみましょう。
フォントには書籍のように長文に向くものもあれば、パッと見のインパクトを重視したディスプレイ用の書体など、実に多種多様なものが用意されています。ここではタイトルや見出しに向く、視認性の高いフォントの選び方、考え方について紹介します。
文字要素の多いWebサイトを作るときには、フォントがサイト全体の印象を決めると言っても過言ではありません。Webサイトにおけるフォント選びについて考えてみましょう。