Webデザイナーへの第一歩！知っておくべき基礎知識

【はじめに】

最近Webページを見ていると、スタイリッシュな企業サイトやわかりやすい通販サイトなど、一昔前だと考えられないくらい見やすく、綺麗になっていますよね。
ツールが整っていることはもちろんのこと、Webデザインには必要になるものが少なく、誰でもチャレンジしやすいことが、大きな変化につながっていると実感しています。
誰でも取り組みやすいWebデザイナーの仕事とは、どのようなものなのでしょうか。

1．Webデザイナーの仕事内容

Webデザイナーの主な仕事内容は、企業や個人などのクライアントから依頼されたWebサイトのデザインを担当することです。クライアントが思い描いているWebサイトを制作できるよう、全体の構成を考えながらデザインを構築していきます。
Webデザイナーは、単に見栄えがいいものをつくれば良いわけではなく、サイトの目的やコンセプトに合ったデザインを作成することが必要です。

2．具体的な業務の流れ

2-1．Webサイトの構成とレイアウトを決める

まずは、制作するWebサイトの大まかなレイアウトを決めます。基本的な構成や全体のボリュームなどを考慮し、キーとなるビジュアルやWebサイト全体のイメージを決定します。

2-2．Webサイトのデザインを作る

Webサイトの色合いや装飾決めをします。「Illustrator」や「Photoshop」などのグラフィックソフトを用いて、Webサイトの配色やロゴ、アイコンの配置を決めます。基本的に、ここまでの作業はクライアントと相談を重ねながら進めることが一般的です。

2-3．Webサイトのコーディングを行う

Webサイトの大まかなレイアウトにクライアントの合意が得られた後、Webサイトを構成する言語であるHTML、CSS、JavaScriptを使用してコーディングを行います。HTMLは文章や画像を表示し、CSSは配置、フォント、文字サイズ、色などを指定し、JavaScriptで動きを表現します。ユーザーの使いやすさや見た目の美しさも意識しつつ、事前に決めた大まかなレイアウトに沿ってロゴやアイコンなどのデザインを行います。
また、アニメーションや動きのあるアイコンなどを作成することもあります。

★主な業務リスト★

コンテンツ企画提案・実施
進行管理・調整
サイト制作（コーディング）
サイト更新（コーディング）
記事作成・校正
デザイン作成・編集（Photoshop）
デザイン作成・編集（Illustrator）
UI/UXの改善施策提案・実施
SEO施策提案・実施
リテンション施策提案・実施
外注選定・手配
テスト実施（受入・ABテスト等）
見積書・請求書作成
社内外資料作成（提案書・会議資料等）
イベント企画提案・実施
クオリティチェック

3．Webデザイナーになるには

冒頭で申し上げたように、Webデザイナーになるための特別な資格はなく、知識とスキルがあれば、未経験でも誰でもチャレンジできます。
もちろん、過去にWeb関係の業務経験があったり、あらかじめWebスクールに通い高度なスキルを身につけていたりする場合には、即戦力として歓迎されます。
具体的な業務をみても、Webデザイナーを志すならHTMLとCSSに関する基礎的な知識が最低限必要です。マークアップ言語に加えて「Illustrator」や「Photoshop」の使い方も学んでおきましょう。
また、過去の業務経験や能力を測るために「Github」の提出を求められることもあります。毎日積み重ねて自分の作品を投稿しておくことで、指名される可能性が上がります。

4．Webデザイナーに求める力

HTMLコーディングやCSSの知識など必要最小限のスキル
デザインのセンスやスキル
集中力と根気
最終的なデザインの調整はPX単位で行われるため。
コミュニケーション能力
Webサイトに対するクライアントの要望をしっかりとヒアリングする必要があるため。
大きな変化に柔軟に対応できるマインドセット
テクノロジーと世の中の流れに合わせて、常に新たな技術を磨きつづけなければならないため。

5．Webデザイナーを目指す方へおススメの教材

デザイン編

ノンデザイナーズ・デザインブック [第4版]
デザインの基礎の本。デザイナーが知っておくべき知識が網羅されています。

なるほどデザイン〈目で見て楽しむ新しいデザインの本。
「何か物足りない、何か違う」そんなデザインにヒントを与えてくれる本です。

デザインの学校これからはじめるPhotoshopの本 [CC対応版]
デザインの学校これからはじめるIllustratorの本 [CC対応版]
Photoshop逆引きデザイン事典[CC/CS6/CS5/CS4/CS3]
PhotoShopの基礎が学べます。

HTML・CSS基礎編

（無料電話サポート付）できるホームページ HTML＆CSS入門 Windows 8.1/8/7/Vista対応 (できるシリーズ)
できるポケット HTML5＆CSS3/2.1全事典
HTML5＆CSS3デザインブック (ステップバイステップ形式でマスターできる)
一からWebデザインを勉強するなら絶対読むべき参考書。色んなテクニックを身につけることができます。

HTML・CSS応用編

現場でかならず使われている CSSデザインのメソッド
この一冊があればCSSでかっこいいサイトが作れます。

現場のプロが教える Webデザイン新・スタンダードテクニック37
Webデザインの最新テクニックがたくさん紹介されています。

<番外編・時間がないという方へ>

オンラインスクール

『CodeCamp（コードキャンプ）』
Webデザインやプログラミングが学べます。朝早くから遅い時間まで受講できるのが魅力です。CodeCampは他の方もよくオススメしていて、評判が良いようです。無料体験もできるみたいです。

Q＆Aサイト

エンジニアのためのQ＆Aサイト【teratail】
HTMLやCSSなどで疑問点があれば質問ができ、無料で会員登録できます。

6．最後に

S-Collection株式会社のWebサイトは誰もが見たくなるような、わかりやすいWebサイトを目指しており、技術があるだけでなく、世の中の変化に対応した柔軟性のあるWebデザイナーを起用しております。今後もS-Collection株式会社のWebサイトをお楽しみ下さい。

S-Collection株式会社　システムについて

S-Collection株式会社のシステムサポート事業