webデザイナーの仕事内容について、みなさんはどのようなイメージをお持ちですか？
Photoshopなどグラフィックソフトを用いてデザインをする人？HTMLコーディングをする人？ざっくり大枠でこのようなイメージをお持ちの方も多いかと思いますが、webデザイナーの仕事内容は会社により求められるスキルが多岐にわたります。
まずは基本的な仕事内容から確認してみましょう
目次
webデザイナーとは？
一般的なwebデザイナーの定義としてWikipediaではこう書かれています。
ウェブデザイナー – Wikipediaより引用Webデザイナーとは？ウェブデザイナー (web designer) とは、インターネット上のウェブサイトのデザインを行うデザイナーのことである。どちらかと言えばビジュアルな要素の設計を担当するが、近年では画像素材の制作からCSSコーディングまで、その作業範囲が広がっており、分業化が進むにつれ十把一絡げに「ウェブデザイナー」と扱うことを疑問視する声もある。よく似た呼び方にウェブクリエイターがある。
サイトのデザインをする人を「デザイナー」、HTMLコーディングをする人を「コーダー」と呼ぶのですが、基本的に両方のスキルを持ち合わせて「webデザイナー」と呼ばれています。
もう少し具体的に説明していきます。
webデザインについて
インターネット上など（パソコンやスマートフォン）で表示されるwebサイトのデザインを行うことを指します。主にPhotoshopといったグラフィックソフトを利用し、レイアウトからカラーやフォントの選定、ロゴ作成やバナーの作成、写真加工などを行いwebサイトを作成します。
ものすごく簡単に言うとグラフィックソフトを使用してwebサイトの見た目（画像）を作成することですね。
HTMLコーディングについて
読み方は「エイチティーエムエル」とそのままです。HTMLコーディングとは一体…！？と思われる方もいらっしゃるかもしれませんが、webデザイナーを目指す上で必要になってくるスキルとなります。
HTMLコーディングとはwebデザインで見た目（画像）を作成した後、その画像をwebページ上で表示するために行う作業のことを指します。
具体的にはHTMLという言語でコードを書いていくことです。
<h1>HTMLコーディング</h1>
<p>まずはHTMLを理解してみよう。</p>
このようにHTMLタグと呼ばれるコードを書いてwebサイトを作成していきます。
HTMLコーディングに必要なcssとは
ここで急に「css」といった言葉が出てきましたが、HTMLコーディングを行う上で必ず使用する言語です。
読み方は「シーエスエス」と、こちらもそのままです。正式名称はカスケーディングスタイルシートですが「css」もしくは「スタイルシート」と呼ばれるのが一般的です。
HTMLタグは「<h1>＝大見出し要素」ですよー、といった要素の記述がメインであり、cssはHTML要素を装飾するためのコードとなります。
レイアウトの設定や文字の色に画像の大きさなど様々な装飾を行うことが可能です。
<h1>HTMLコーディング</h1>
<p class="text-red">まずはHTMLを理解してみよう。</p>
.text-red {color: #FF0000;}
これでclass="text-red"＝赤文字で表示されます。
ちょっと難しそう…と思われがちですが、基本さえしっかり覚えればそんなに難しいものではありません。
ここはめげずにwebデザイナーを目指す以上、しっかり習得しましょう！
こちらは別途また記事を作成する予定ですが、最近ではフロントエンドエンジニアという職種でサイトの表側を広く担当することも多くなってきています
webデザイナーの基本的な業務の流れ
webデザイナーの仕事として大まかにグラフィックデザインとHTMLコーディングを説明しましたが、実際の制作では様々なスキルが求められることになります。
一般的なwebサイト制作の流れ
- クライアント（発注者）にヒアリングとスケジュール設定
- 目的やテーマ、コンセプトなどの擦り合わせ
- webサイトの設計図、サイトマップ作成
- 素材作成/収集
- ビジュアルデザイン
- HTMLコーディング
- webサイトをサーバーへアップロード
大体このような流れでweb制作を進めていきます。
いきなりビジュアルデザインを起こすのではなく、テーマやコンセプトにサービス設計など細かい部分を確定したあとにビジュアルデザインを行っていきます。
クライアント（発注者）と制作側がお互いのイメージすり合わせながらデザインをかたちにしていく必要があります。
webデザイナーとして求められる可能性のあるスキル
すべてを求められることは基本ないかもしれませんが、会社により下記内容に携わる可能性もあるかもしれません。
それほど現在のwebデザイナーのスキル範囲は広く、幅広い活躍が期待されます。
「これは大変だ～・・・」と思うかもしれませんが、逆に言うとスキルアップやステップアップのチャンスにもなりえるということです。
- 競合サイトのデザインリサーチ
- 企画・仕様決め
- サービス・UX設計
- デザインコンセプト確定
- 導線・サイトマップ作成
- ワイヤーフレーム・UI設計
- ビジュアルデザイン
- ロゴ作成・バナー作成
- HTMLコーディング
- javaScript
- CMSなどデザイン組み込み
- 見出し・文章などのライティング
- SEO・MEO・広告などの運用
このようにサイト制作を行う上で求められるwebデザイナーのスキルは様々です。
まずはビジュアルデザインとHTMLコーディングを最低限のレベルまでスキルアップすることが大事です。
webデザイナーの仕事内容まとめ
まずはグラフィックソフトを使用したデザインの作成とHTMLコーディングの理解が必要ということですね。
「みけ×デザ」ではステップごとに記事を用意していますので今の段階では「webデザイナーを目指すにはデザインとコーディングなんだな…」と、だけ理解していただければ十分です！
所属する会社にもよりますが、デザイン/コーディング/マーケティング/ディレクションなど会社規模によって分業化されている事も多いので、すべてを完全に習得する必要はありませんが全体の流れや知識は知っておくと便利です。
「みけ×デザ」STEP!!