Share on facebook
Share on twitter
Share on linkedin

Blog

具体的に何をするの?Web制作におけるWebデザイナーの仕事とは

ホームページ管理
Uncategorized

具体的に何をするの?Web制作におけるWebデザイナーの仕事とは

具体的に何をするの?Web制作におけるWebデザイナーの仕事とは

Web制作に関わるひとたち
Webデザイナーの仕事についてお話する前に、デザイナーの他にどんな人がWeb制作に関わっているのか見てみましょう。

Web制作には、ざっくり分けると4つの職種の人間が携わります。

Web制作に関わる職種
Webディレクター
Webデザイナー
フロントエンドエンジニア
バックエンドエンジニア
プロジェクトの規模によっては仕事を細分化・専業化させるために、「プロジェクトマネージャー」「プランナー」「アートディレクター」など職種が増えることがあります。

逆に「WebディレクターとWebデザイナーを兼任」「フロントエンドエンジニアとバックエンドエンジニアを兼任」というケースもあります。
Webディレクター
Webディレクターはdirectionという言葉の通り、Web制作全体の指揮進行・マネジメントをする人を指します。小規模なプロジェクトであれば、お客さんとのやり取りから、全体のスケジュール管理もすべて行います。

仕事の内容がもっとも多岐にわたる職種です。
フロントエンドエンジニア
主にHTML/CSS/JavaScriptを記述し、デザイナーが作った画面をWebブラウザ上で表示できる形に作り上げる人です。

マウスを動かしたときのアニメーションや、プルダウン、モーダルウィンドウなどを実装したり、画面をダイナミックに動かしてインタラクティブなものにしたりするのもフロントエンドエンジニアのお仕事。

frontとは英語で「正面、前面」「受付」などの意味を持ちますが、Webサイトではサイトを使うユーザーが触れるところ全般を指します。

バックエンドエンジニア
backという言葉が指すとおり、Webサイトの裏側で動く仕組みを作る人です。

例えば、メールフォームに内容を書いて送信した後、メールを記載されたメールアドレスに送信する部分を実装するのがバックエンドエンジニアのお仕事になります。

そのため「マイページを持つ会員制サイト」や「新しいWebサービス」を作ることになったら、たくさん稼働することになります。またそういったシステムの設計やサーバーサイドを含めた要件定義を考えてくれるのもバックエンドエンジニアです。

Web制作のフロー
flow-01

ヒアリング
check

クライアント(お客様)の希望を把握・理解するために詳しく話を聞きます。

そしてなんのためにサイトを作るのかという目的と、サイトを作って達成したいゴールとはなにかを明確にします。

この工程に参加する職種
▼必須
Webディレクター
▼参加が望ましい

webデザイナー
▼状況に応じて参加

フロントエンドエンジニア
バックエンドエンジニア
市場調査・分析
graph

クライアントの目的を達成するためには、競合とどのように差別化すべきなのか、何をもっともアピールすべきなのかを検討するために、様々な角度から市場調査・分析を行います。

ツールを使った調査・分析も行いつつ、プロジェクトメンバーが集まってクライアントから得た情報を元に検討を重ねます。

この工程に参加する職種
▼必須
Webディレクター
▼状況に応じて参加

Webデザイナー
フロントエンドエンジニア
バックエンドエンジニア
提案
screen

ヒアリングと市場調査・分析の情報を元に、サイトのコンセプトを決定します。

コンセプトについてはディレクターあらかさんの記事に詳しく書かれているので、こちらを御覧ください。

コンセプトを意識した“伝わる”Webサイトづくり

2016.02.24
コンセプトに従って具体的なサイトの形を考え、クライアントに提案していきます。提案する内容にはおおまかに要件定義と画面設計の2つがあります。

要件定義
サイトにどんな機能を持たせ、どこまで作るかを決めることです。
例えば以下の内容はすべて要件定義に含まれます。

ページ数と内容
原稿をクライアント側から提供してもらう
制作メンバーが原稿を書く
現行サイトの内容を再編集する
SNSとの連携
シェアボタンをつける
SNSのタイムラインを埋め込む
SNSに投稿した画像をサイト上に表示する
サイト内に使用する写真
素材サイトから買う
デザイナーがカメラマンとして出向いて撮影する
プロカメラマンにお願いして撮影する
システムの組み込み
システムを組み込むことでなにができるようになるか
システムで動的に出力する情報はなにか
決めることがいっぱいありますね!
これでもまだ一例です。サイトを作る前に決めておかないといけないことはまだまだたくさんあります。

この工程に参加する職種
▼必須
Webディレクター
バックエンドエンジニア
▼参加が望ましい

Webデザイナー
フロントエンドエンジニア
画面設計
ワイヤーフレームとも呼ばれることがあります。
デザイン前の設計図に当たるもので、画面内に配置する要素やそれらの動き(ユーザーがアクションしたときの反応)をここで考えます。

例えばニュースサイトの記事一覧の下に「もっと見る」と書かれたボタンがあったとして、このボタンを押した次のアクションにはいくつか可能性が考えられます。

別のページに遷移する
同じページで読み込ませる(ページが下に伸びる)
ログインが求められる
モーダルウィンドウでログインを促す
ログインページへ遷移する
「ボタンを押したら何が起きるのか」をユーザーが理解できる画面にするには、それぞれ適したテキストやボタンの数、記事一覧の並べ方があります。逆にサイトのコンセプトに従うと、ボタン押すとどうなるのかわかりづらくした方がいいというケースもあります。

それらを考えるのが画面設計です。

prottなどのプロトタイピングツールで実際の動きまで想定したものを作ることもありますが、ワイヤーフレームと呼んだ場合もっと簡易的なものを指すことが多いです。

この工程に参加する職種
▼必須
Webディレクター
▼参加が望ましい

Webデザイナー
フロントエンドエンジニア
デザイン制作
design

基本は、画面設計(ワイヤーフレーム)をもとに、デザイン制作を進めていきます。
サイトのコンセプトから、デザインのコンセプトを決定。トップページを制作して全体のトーン&マナーを形にします。

これはデザイナーが制作するものの一例です。

ベース(トップ)デザイン
下層デザイン
ロゴ
アイコン
イラスト
詳しい内容については次々回でご紹介する予定ですので、ぜひご覧ください。

この工程に参加する職種
▼必須
Webデザイナー
▼参加が望ましい

フロントエンドエンジニア
システム開発
engineer

システム開発には大きく分けて、下記に大別されます。

フロントエンド開発
バックエンド開発
フロントエンド
フロントエンド開発では、設計はもちろんマークアップ制作(HTML/CSS)やJavaScript実装など、ユーザーの目に見える機能を実装していきます。
特にWebサイトの演出に欠かせないアニメーションは、フロントエンドエンジニアとデザイナーが協力して考えます。

近年デザイナーとフロントエンドエンジニアの専業化が進みましたが、小規模なプロジェクトや会社によってはデザイナーがフロントエンドエンジニアを兼任します。
「WebデザイナーはHTMLとCSSが書けないとダメ」と言われることがあるのはそのためです。

専業のフロントエンドエンジニアがいるならば「絶対にデザイナーがゼロから書けないといけない!」ということはありません。
それでも情報設計や、ブログの記事などシステムで出力されるテキストのデザインを行う際に、マークアップの知識があったほうが、より精度の高い制作ができると思います。

この工程に参加する職種
▼必須
フロントエンドエンジニア
▼参加が望ましい

Webデザイナー
バックエンド
バックエンド開発では、目に見えない土台となるシステムの開発をおこなっていきます。

デザイナーにとっては縁遠い領域ですが、システムを使って情報の入力・出力を行うサイトをデザインするならデザインの提案によってはバックエンド開発の作業量が変わってしまうことを覚えておかないといけません。

「これは難しそうかな?」と思ったらすぐにバックエンドエンジニアと相談します。

この工程に参加する職種
▼必須
バックエンドエンジニア
▼状況によって参加

フロントエンドエンジニア
検証
device

納品前に必ず検証を行います。
要件定義通りの動きしているかどうか、複数のブラウザ見ても問題なくサイトを利用できるかどうかなどを、複数人でチェックします。

検証について詳しくはディレクターともぞうさんの記事がわかりやすいです。こちらもご覧ください。

リリース目前!その前に重要なブラウザチェック

2016.03.17
この工程に参加する職種
▼必須
バックエンドエンジニア
フロントエンドエンジニア
▼参加が望ましい

Webディレクター
webデザイナー
Web制作におけるWebデザイナーの役割
各項目に設けた「この工程に参加する職種」にたびたびWebデザイナーの名前が出てきて「デザイナーってこんな仕事もするの?」と思ったかもしれません。

こんな仕事もするんです。

flow-02

デザイナーの仕事は問題解決。Webに表示される画面・画像・テキスト、要素の配置や動きなど目に見えるビジュアル要素を使って、クライアントがWebサイトを使って解決したいと思っている問題について考えます。

Leave your thought here

メールアドレスが公開されることはありません。

Popular tags

1つのWEBサイトを作るのには、どれだけの時間がかかるもの? alt属性とは?画像検索の対策 business DTPデザイナーが陥りがちな残念なWebデザイン IT Security IT services ITで働き方改革!クラウド、テレワークの新しい仕事の形とは LP(ランディングページ)って何? Pythonでできることって何だろう? Pythonとは?大人気プログラミング言語のメリット Webサイトの制作って、なぜこんなに高いの?! Webサイトを更新したのに反映されない?それ、キャッシュが原因 Webサイトを更新したのに反映されない?それ、キャッシュが原因かも…【PC編】 Webデザイナーの1日・生活スタイル WEB制作の現場で使われる用語をご紹介 WordPress(ワードプレス)でのホームページ制作・ウェブサイト制作 WordPressのメリットとデメリット WordPressを使ったホームページ作成のメリットデメリット 「デザインお願いします」と言われてデザイナーは何を考えてデザインしているの? この修正、お金かかるんですか? なんて名前? WEBサイトの基本パーツ名と導入時の注意点! イメージコピーとセールスコピーの違い クリック率とCV数をUP!サイトの入り口を飾る「titleタグ」「meta description」とは? コロナ対策のためにネットショップを素早く開設しよう!ECサイト構築 ネットワークエンジニアとは?ネットワークエンジニアの仕事内容と将来性 ネットワークエンジニアになるには資格が必要?おすすめの資格 フリーランスのWebデザイナーが仕事を効率良くする方法とは? ブログで使っているその画像は本当に大丈夫? プログラマーとは?プログラマーの種類と将来性 ペルソナってなに? 〜WEBサイトのターゲット ホームページとウェブサイトの違い! ホームページを制作する目的の重要性 ホームページ作成に失敗しないための、制作料⾦の費⽤相場と Web制作ツール・制作業者選定のポイント ホームページ制作で起きるトラブル事例と対策 ホームページ制作と動画や写真撮影などを一社でまとめるメリット ホームページ制作に関する著作権 ホームページ制作の注意点 企業にとってのホームページの役割と運用目的を再確認 働きながらWebプログラミングスクールに通う方法 初心者でも簡単!無料でホームページ作成ができるソフト 危険!Wordpressの更新は制作会社にご依頼ください。 古いサイトは何故ダメなのか 在宅でできるWebデザインを副業にしよう♪初心者におすすめの仕事は? 画像はリサイズして使いましょう! 〜重いサイトにしないために 結果が出ないホームページの初歩的なミス
Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Click outside to hide the compare bar
Compare
Compare ×
Let's Compare! Continue shopping