Webデザイナーに依頼する時に知っておきたい!Webデザイナーの仕事内容とは?

Webデザイン
ユキックス
ユキックス


こんにちは!ユキックス(@MILKIT_DESIGN)です!

デザインだけじゃない!Webデザイナーの仕事内容、知っていますか?

ユキックス

Webデザイナーは実際のところ、デザインを作っているだけではありません。

この記事では、Webデザイナーの仕事内容は実際にどんなことをしているの?Webデザイナーの仕事内容や全貌がよくわからないので知りたい!という方へ、これまでの経験や実務でのリアルを交えながら具体的に解説します。

ユキックス

Webデザイナーへ制作の依頼を検討中の方の参考になれば幸いです。

デザインだけじゃない!Webデザイナーの仕事内容とは?

フリーランス・個人事業主のWebデザイナーとして実際に制作しているお仕事内容は、ご依頼いただくお仕事の内容によって人それぞれ、人の数だけ働き方に違いがあります。

制作会社勤務のWebデザイナーさんや他のフリーランスWebデザイナーさんとは担う業務の範囲や業務領域が異なる部分もありますので、ご参考までに。

ここでご紹介するのは、わたしの場合(Webデザイナーとしての業務領域)です。ざっくり下記の内容になります。

Webデザイナーとしての主な仕事内容と実務

プランニング・ディレクション

  • 依頼者さま、企業様や制作会社様とのコミュニケーション、ヒアリング
    (基本的にオンラインでのお打ち合わせまたは対面、テキストコミュニケーション)
  • 企画立案、プランニング
  • 調査と分析(競合調査、リサーチ)
  • ご提案書と資料の作成
  • サイト情報設計(要件定義書、仕様書の作成)
  • ご契約書類、お見積書類の作成

仕様の設計・UIデザイン・ビジュアルデザイン

  • 画面情報設計(ワイヤーフレームの作成)
  • デザインの制作(デザインカンプの作成)
  • 写真や素材の用意とレタッチ
    • 必要に応じて写真素材の撮影に行くこともあります
    • イラストが必要な場合はイラストレーターさんに発注したり有料素材を手配
    • ご依頼内容や要望に応じて自身でイラストを描くこともあります
  • 実装者、コーダーさんへデザイン概要をお伝えするための実装仕様書の制作
  • 広告や販促物の依頼の場合は、SNS表示用の画像や広告バナーなどの作成

クリエイティブディレクション

  • Webディレクション(サイト制作全体の監修、細部のハンドリング)
    • 主に制作に関わる人とお客様とのコミュニケーションや進行管理
    • 実装者、コーダーさんとの実装調整などコミュニケーション
  • アートディレクション(ビジュアルデザイン、機能デザインの監修)
  • その他(後述します)

Webデザイナーの仕事内容で協業して行っている領域

上記に挙げた項目の他に、実際に実務経験を重ねていく中でWebデザイナー業務の領域内でパートナーさんやプロジェクト、クリエイティブチームの仲間と協業して行っている実務内容がこちらの項目になります。

実装・テクニカル・開発領域

  • マークアップ
  • フロントエンド
  • バックエンド
  • サーバーサイド

(コーディング、マークアップ言語などhtml・css実装、必要に応じてCMS=WordPressなどのコンテンツマネジメントシステムの導入や別途CMSの構築、システム構築やアプリ開発など、ドメイン・サーバーサイド設定や公開作業)

主な作業工程詳細(制作フロー)はこちら▼

【5つのフェーズでわかる】ホームページ制作の流れ

Webデザイナーとしての仕事内容は人それぞれ

Web業界に入って最初こそひとりですべての工程、全領域を担うのだ!という考え方でしたが、ひと通りの実務を実際に経験してみてすぐにデザインのパフォーマンスに手応えを感じたり成功体験が多かったこと、デザイナーとしてお声掛けいただく機会や制作したデザインを評価いただくことが圧倒的に多かったので、現在はデザイナー(プレイヤー)を中心にデザインに特化した制作をしているほか、アートディレクションやWebディレクションを主軸としたWebデザイナーとしてのお仕事をしています。

もちろん規模によってWebデザイナーとしてここまでひとりですべてを完結する方もたくさんいらっしゃいますし、わたし自身もご依頼いただいたお仕事の規模やご依頼内容によっては、協業せずにひとりで完結させることもあります。

また、記載したすべての項目をひとつのご契約内で行うこともあれば、依頼者さまのご要望に応じて必要なお仕事に部分的にフォーカスし、専門分野に特化した制作を行うなどWebデザイナーの業務範囲に制限を設けず柔軟に、ご依頼内容に合わせて必要なお仕事を臨機応変に行っています。

各分野において高い技術力と能力を兼ね備えたコミニュケーションの相性が抜群に良い(一緒にお仕事させていただいたうえで気持ちの良い制作とコミュニケーションができる)パートナーさんやクリエイティブチームのメンバーと協業することで知見や視野が広がり、必要なときに専門分野に明るいプロフェッショナルな方の協力を仰げるという絶大なメリットがあり、各自で培ってきた豊富な知見や知識を持ち寄って活かすことで依頼者さまの目的に合わせたオーダーメイドを実現し、最適なクリエイティブをご提供できる環境や体制を整えることで、柔軟な働き方を実現しています。

Webデザイナーの領域外で行っているお仕事内容

わたしはWebデザイナーの領域外でも、デザイナーとしてビジュアルデザインを主軸にプロダクトデザイン、アパレルデザイン、ロゴデザイン、パッケージデザイン、印刷物のデザイン、空間店舗デザイン、グラフィックデザイン、広告デザインなど、ご依頼いただく内容に応じて柔軟に、多岐に渡ってデザインのお仕事をさせていただいております。

詳しいお仕事内容はこちらのページ ▼ をご覧ください。

ミルクイット_about
https://milkitdesign.jp/about/

Webデザイナーなら持っておきたい!仕事内容・工程ごとに使用するツールとWebサイトを制作するために必要な知識

お仕事内容から紐解く、Webデザイナーとしてお仕事するためには何が必要?

実際にWebデザイナーとしてお仕事をするために必要なことは大きく分けて3つあります。

  • 道具、ツールを揃えること
  • 使用するツールを扱えるスキル・技術
  • Web制作の知識・知見・安全性やセキュリティの理解

使用する道具、ツールを揃える

使用する道具

  • パソコン
    (MacでもWinでも、ご自身が使いやすい方が良いです。わたしの場合デザインはすべてMacのデスクトップで制作し、サブ機として必要に応じてMacbookProを使用します。Windowsも持っていますが、制作したサイトの実装を実機で確認、検証する時だけのために使っています)

  • マウスやトラックパッド
    (お仕事効率化のため自分がいちばん使いやすいものを使用しています)

  • サブモニター
    (デザインを制作するときに大きな画面があると細部まで見やすく効率があがるので、わたしには必須!27インチと24インチを横並びにしています)

使用するツール

  • デザインカンプを制作するためのツール
    Adobe Creative Cloud内のPhotoshop、Illustrator、 Xd、Lightroomや、Figmaなど(わたしはAdobeコンプリートプランを契約しています)

  • 要件定義書、仕様書、ご提案からワイヤーフレームまで、書類を作成するためのツール
    (わたしは現在Googleスプレッドシートやスライド、提案ベースのお仕事などは必要に応じてAdobe Xdを主に使っています)

  • 実装を含むのであればエディタ(コーディング、マークアップ言語を書くための)ツール
    (わたしはVisual Studio Code推し)

実装に必要な技術についての詳細はこちら▼

Webサイト制作のコーディング作業ってなにするの?

Webサイトを制作するために必要なツールを扱えるスキル・技術

スキル(技術)

  • Photoshop、Illustrator、(必要に応じてXd)とFigmaなど
    • デザインツールを自在に扱う技術
    • デザインスキル
  • Lightroom、Photoshop
    • 写真のレタッチスキル(写真を使用する場合)
  • 実装を含むのであればコーディング、マークアップのツールを扱うスキル
  • 必要に応じてCMS(WordPressなどコンテンツマネジメントシステム)を取り扱うスキル
  • サーバーサイドやセキュリティ関連などWebサイトの構築スキル

Webサイトを制作するために必要な知識・知見

  • 依頼者さま、企業や制作会社様とのコミュニケーション力とヒアリング力
  • 情報設計力
  • 分析、調査力
  • 提案力
  • デザインツールの技術とデザイン力、操作・取り扱いの知識
  • Webフォントの取り扱い・知識
  • ロゴや画像の取り扱い・知識
  • 応用力、適応力、柔軟性
  • コーディング・マークアップの実装知識
  • 必要に応じてCMS(WordPressなどコンテンツマネジメントシステム)を扱う技術取り扱いと知識、プログラミング、開発の知識
  • サーバーサイド、セキュリティなど安全なサイトを構築する知識

Webサイト制作をWebデザイナーに依頼するメリット3つ

ここまでの内容を網羅している、もしくは実現できているWebデザイナーであれば、下記3つのメリットを享受したWebサイト制作が実現可能です。

  1. 制作会社など企業に依頼するよりも安い
  2. 高いクオリティで目的に沿った効果のあるWebサイト制作が実現する(依頼者にとって相性の良い制作者であればさらに)
  3. 一気通貫で依頼できるので希望を伝えやすい

まとめ

わたしのこれまでのWebデザイナー経験を踏まえて、実際のところデザインを作っているだけではない、Webデザイナーの仕事内容について解説しました。

ユキックス

Webデザイナーの仕事内容は実際にどんなことがあるのか、Webデザイナーの仕事内容が少しでも伝わっていたらうれしいです。

執筆者はユキックスでした!

ご依頼・ご相談はこちら

お客様の課題解決に最適なメンバーアサインでスムーズなプロジェクト進行をいたします。制作して終わりではなく、お客様が求める成果に結びつくご提案をさせていただきます。

この記事がシェアできます

この記事を書いた人
ユキックス

ユキックス
デザイナー / アートディレクター / Web制作クリエイター

ユキックス
デザイナー / アートディレクター / Web制作クリエイター

Web制作を主軸にデザイナー・アートディレクターとして柔軟に国内の企業、商業デザインのクリエイティブ制作、ディレクションに携わり、受託制作や業務委託を中心に個人、制作パートナー、クリエイティブチームで協業し、幅広くクリエイティブデザインを制作しています。

  • Wepotについて

    アイコン

    Wepotはデジタルクリエイティブで課題を抱えるすべての人への解決策を提示できます。

  • 実績一覧

    アイコン

    Wepotには多種多様な実績があります。メンバーの強みが生きた実績をご覧ください。

  • 制作のご相談

    アイコン

    現在の課題やお悩みをお聞かせください。あなただけのクリエイティブチームを編成し解決へと導きます。