近年、スマホやパソコンを多くの人が持つようになり、皆さんもwebサイトを目にする機会が増えていると思います。
そんな中で「webサイトってどうやって作られているの？」「このwebサイトは誰が作っているんだろう」といった疑問を感じたことはありませんか。
実は、webサイト作りには色々な作業が必要で、それらを多くの人で分担しています。
この記事では、webサイト作りの中でも、土台になる作業であるwebデザインについて詳しく説明していきます。
最後までお読みいただければ、webデザインのみならず、webサイトの仕組みやwebデザイナーという仕事についても知ることができます。
webデザインとは
webサイトを見ていて「派手な色ばっかりで目が痛い」「自分の見たい商品のページがどこにあるのか全然分からない」というような経験はありませんか。
webサイトは誰かに見てもらうために作っているのに、画像や色、サイトの構成によって見づらくなっているwebサイトをよく見かけます。見る人がよく使う機能はそのサイトの分かりやすいところに配置すべきですし、見る人が飽きないようなサイトのレイアウトを考えなければなりません。
このようにwebサイトを使う人のことを考え、webサイトのレイアウトや情報の整理を行う作業をwebデザインと呼びます。
例えば、上記のサイトでは一番伝えたい情報を中心におくことでサイトを訪れた人に分かりやすく伝えています。また、見る人が気になるであろう情報をすぐに見れるように、サイトの上部にボタンを設置することで指定されたページにジャンプできるようになっています。
もしこのサイトが伝えたい情報を詰め込みすぎたために文字で埋まってしまったり、ボタンがあちこちに配置されていたら、またこのサイトを見たいとは思いませんよね。
優れたwebサイトを作ることは、そのwebサイトのファンを作ることにつながります。多くのファンを作ることで、多くの人に自分たちの伝えたいこと・知ってほしいことを見てもらえます。
そのため、webデザインはwebサイト作りの中でも重要な作業となります。
webデザイナーについて
webデザインを専門に行う職業のことをwebデザイナーといいます。
webデザインを学ぶ人の多くはwebデザイナーを目指しており、人気も年々増しています。
そこで、webデザインがどのように社会で使われているのかを知ってもらう意味も含めて、webデザイナーについて紹介していきます。
webデザイナーの仕事内容
webデザイナーの仕事の流れを紹介します。
ヒアリング
webデザイナーはクライアントからの依頼を受けて、webデザインの作業を開始します。
webデザイナーはwebデザインの仕事さえできればいいと考えられがちですが、クライアントとのコミュニケーションが重要になります。最初にクライアントの要望をヒアリングし、それに合わせてwebサイトの構成やレイアウトを考えていかなければなりません。
クライアントが納得するものを作るためにも、このヒアリングという作業はとても大切です。
webサイトの構成・レイアウトを決定する
クライアントとのヒアリングを終えたら、次にwebサイトの構成やレイアウトを考えていきます。
この段階で細かい部分まですべて決めるというよりは、どこに何を配置するかやどういう導線を作るかといった見た目や機能性などの大きな部分を決めていきます。webサイトの使いやすさはwebサイトを長い時間見てもらえるか、繰り返し見てもらえるかが重要です。
このwebサイトの構成・レイアウトを決定する作業は、デザインや機能性についての知識が必要になるwebサイトの土台を作る作業です。
webサイトのデザインを決定する
webサイトの構成やレイアウトを決めた後は、webサイトの装飾部分を決めていきます。
この際に「Illustrator」「Photoshop」や最近使われだしている「XD」や「Figma」などのソフトを用いて、Webサイトの文字の色や大きさ、画像の配置などを考えていきます。こうして、webサイトの見本を作ります。
ここでもう一度、クライアントとの会議が入ることが多いです。webサイトの見本を見せて、クライアントの意見を聞きながら、細かいところを修正していきます。
コーディングする
webサイトのデザインまで決定したら、コーディングを行います。
コーディングとは、デザイン案に従ってプログラミングをすることです。webサイトを作る時に使われるプログラミング言語は主にHTML・CSS・JavaScriptです。
HTMLとCSSは厳密にはプログラミング言語ではなく、マークアップ言語とスタイルシート言語と呼ばれます。しかし、プログラミング言語として扱われることも多いので、プログラミング言語として紹介しました。
HTMLとCSSで画像の配置や文字の大きさ、色などを細かく決めていきます。そして、JavaScriptで動きを付けていきます。
コーディング専門の方がいる場合は、webデザイナーはコーディングをしないこともあります。しかし、webデザインを考える上でもコーディングの知識が必要となる場合があるので、コーディングはwebデザイナーには必須のスキルといえるでしょう。
webデザイナーの働き方
webデザイナーといっても、その働き方は様々です。そこで、主なwebデザイナーとしての働き方を紹介します。
制作会社
社内にwebデザイナーがいない場合、多くの企業はwebサイト制作を外注します。そして、その外注を受けるのが制作会社です。
そのため、制作会社のwebデザイナーは様々なwebサイト作りに関わることができます。多くのwebサイトを作る中で得られる知識や経験は、webデザイナーとして他の働き方を選択する時に大きな助けになるでしょう。
また、制作会社によってはコーディング専門の方がいるので、デザインに集中したいという方には制作会社は合っているかもしれません。
社内webデザイナー
社内webデザイナーとは、どこかの企業に所属し、その企業が持つwebサイトのデザインや制作を担当します。
webサイトを活発に更新している企業などは、それを外注して行うよりも社内にデザイナーを雇った方が費用が抑えられます。また社内のwebサイトなので、webサイトの制作に関する裁量権が大きかったり、打ち合わせを頻繁に行えるのでより良いものを作れたりします。
webサイトのコンセプトを考えるところからとことんこだわりたいという方は社内webデザイナーが向いているかもしれません。
フリーランス
webデザイナーはフリーランスという選択肢も取ることができます。
フリーランスとは、企業が出しているwebデザインの案件を個人で引き受けて、報酬を得るという働き方です。
フリーランスとして働くと、時間や場所にとらわれることはありません。また、仕事の量を減らしたい時は自分が受ける案件を減らしたり、稼ぎたいときは案件を多く受けたりと比較的自由に仕事の量をコントロールできます。
しかし、個人で案件を受けている以上実力主義的な部分があります。始めは小さなお仕事ばかりを受けていくことになるかもしれませんが、実力を付けていけばかなり稼げる働き方です。
年収
求人ボックス 給料ナビによると正社員としてwebデザイナーとして働いている人の平均年収は約449万円となっています。日本の平均年収が約400万円とされているので、それよりは高い年収を受け取ることができていることになります。
また、webデザイナーはまだ新しい職業で、webデザイナーには比較的若い人が多いです。そのため、他の職業に比べて平均年収が低く出ているとも考えられます。
webデザイナーは、これから平均年収が高くなっていくことも考えられる将来性のある職業です。
webデザインの勉強方法
「webデザインについて興味があるけど、何から始めればいいのか分からない。」という方もいるかと思います。
そこで、webデザインの勉強方法をいくつか紹介します。
独学
皆さんが独学と聞いて一番始めに思いつくのが参考書ではないでしょうか。
どの企業もwebサイトを持つようになり、webデザイナーの需要が高まったことでwebデザインを学ぼうとする人が増えています。そのため、デザインやコーディングに関する参考書も多数販売されています。
参考書で学ぶ場合、分からない箇所を聞く相手がいないので自分で解決しなければなりません。また、実際に手を動かさずに読むだけで終わってしまうという人もいます。しかし、webデザイナーは成果物が重視されます。よって、自分で手を動かし、実際にwebサイトなどを作るという経験をすべきです。
このような点に注意していれば、参考書は安価で確実に知識を得ることができるのでおすすめです。
また、webデザインに関する情報発信を行っているwebサイトにサルワカがあります。無料で分かりやすくweb制作についてまとまっています。興味のある方はぜひご覧になってください。
スクール
webデザインを集中的に教えているスクールは多数あります。
多くのスクールが独自のカリキュラムを持ち、個人の学習状況やスケジュール、目標に合わせて学習をサポートしてくれます。また、ほとんどのスクールが分からないところはwebディレクターやwebデザイナーに質問できるという特典を設けているので、独学でありがちな分からない箇所が放置されるということはありません。
スクールによってはwebデザイナーやwebディレクターがカウンセリングをしてくれるので、実務的な部分の話も聞くことができ、自分の目標をより身近に感じられるでしょう。
無料カウンセリングを行っているスクールもあるので、参加してみるとスクールに関する情報だけでなく、webデザインやwebデザイナーについての質問にも答えてくれるはずです。一度参加してみましょう。
専門学校
近年、webデザインを学べる専門学校も増えてきています。
専門学校は時間や費用を考えると気軽に始められるものではありません。
しかし、基礎から丁寧に学ぶことができますし、より実践的な内容も教えてくれます。また、就職のサポートが手厚いところも多く、大手の企業に就職したという方もいます。そのため、webデザイナーになって活躍したいという強い意思のある人にはおすすめです。
都内だけでなく、各地にwebデザインを学べる専門学校は増えてきているので、一度お近くの専門学校について調べてみてはいかがでしょうか。
webデザインをするのに必要なもの・こと
webデザインを学び、実践していく中で何が必要になるのでしょうか。
それらを具体的にイメージしていただくために、いくつかwebデザインに必要なスキルや知識を紹介します。
「XD」「Figma」などのソフトウェアの知識・スキル
webデザイナーの仕事の流れを紹介した際に、webサイトのデザインを決定する段階で使うのが「XD」や「Figma」でした。これらのソフトは、画像の編集やイラストの作成の際に使われます。
また、web制作の場面ではデザインカンプと呼ばれるwebサイトの見本を作るのに使われます。
webサイトの画像や文字の位置、余白の大きさなどはデザインカンプの段階で全て決められます。そして、それに従って、クライアントとの打ち合わせやコーディングがなされていきます。
そのため、すべてのwebデザイナーはこれらのソフトの知識やスキルが無ければなりません。以前は、ほとんどのwebデザイナーがadobe社の「Photoshop」や「Illustrator」を使っていましたが、最近では「XD」「Figma」を使うことが増えています。従って、これからWebデザイナーを目指す方は「XD」「Figma」の勉強をするべきでしょう。
これらの知識は参考書やスクールなどで学ぶことができます。また、実際に企業に入ってから研修で学ぶこともあるようです。
どのようなソフトかを知りたい方はぜひXD ホームページやFigma ホームページをご確認ください。
コーディングで使用するHTML・CSS・JavaScriptの知識
webデザイナーの仕事の流れを紹介した際に、コーディングを紹介しました。また、webデザイナーの中には実際にコーディングを行わないという人がいることもお伝えしたと思います。
webサイトの構成やレイアウトを考える時に、コーディングの知識は必要で、そのコーディングで使用するのがプログラミング言語であるHTML・CSS・JavaScriptでした。
これらのプログラミング言語を学習するのに一番おすすめなのが、プログラミング学習ができるwebサイトです。これらのwebサイトは質の高い講座がやすく受講できるのが特徴です。また、時間に縛られることがないので、好きな時間に学習できます。
数あるwebサイトの中でもおすすめなのが、Progateとドットインストールです。
Progateはスライド方式の講座です。スライドは図や会話形式を用いていてとても分かりやすく、丁寧に作られているため、初心者の方でも不安なく続けていくことができます。また、章ごとにプログラミングテストがあるので、自分の知識の定着も確認しながら進められます。
ドットインストールは3分程度の動画をみて学習していくサイトです。短時間で学ぶことができるので、休憩中や通勤時間に手軽に学習できます。また、始め方から丁寧に教えてくれるので、初心者でも安心です。
Progateもドットインストールも無料で受けられる講座がいくつかあるので、興味があればぜひ体験してみてください。
デザインの知識
webデザイナーにはデザインの知識が必要です。
使いやすいwebサイトには、どこにどのボタンや文字を配置すべきかというある程度決まった型があります。
そのため、デザインの知識があれば、使いやすいwebサイトのデザインが思いつきやすくなるはずです。また、自分が使いやすいと思うwebサイトのつくりを真似して見るというのも有効な手段です。
デザインの知識は参考書やスクールで学ぶことができます。この他にもSANKOUや81-web.comというようなwebサイトのデザインを集めたサイトを見ることでアイディアを得るのもおすすめです。
まとめ
この記事ではwebデザインについて説明してきました。
webデザインはwebサイトを作るうえで欠かせないもので、webデザイナーの需要も増してきています。そのため、今はまだ未経験だという方もwebデザイナーとして活躍できる可能性を十分に秘めているでしょう。
もしwebデザインやwebデザイナーに興味が湧いたという方がいれば、ぜひwebデザインの勉強を初めてみてください。
この記事がみなさんにとってwebデザインに興味を持ったきっかけとなれれば嬉しいです。