目的別にWebデザイナの多様化を整理してみた

Webデザイナと聞くとどんなイメージを持たれますか?
実際に「Webデザイナです。」って名乗る人のスキルを並べてみると、みんな出来ること・得意な事・苦手な事が違っています。

時々「何ができればWebデザイナになれますか?」と質問されるのですが、正直「Webサイトを作ることができればみんなWebデザイナでしょ」くらいにしか私は思っていません。Webデザイナって言葉が今すごくふわっとしている感じがします。

でもWebデザイナとして「凄い」と思わせる人もいるので何が違ってWebデザイナのレベルに差があるのかを考えてみました。

Webデザイナとは

Webデザイナの主な仕事内容は、企業や個人などのクライアントから依頼されたWebサイトの情報を整理してそれをデザインすることです。
クライアントの意図を汲み取り全体の構成を考えながらそれをWebサイトに反映させて、デザインを構築していきます。

Webデザイナはデザインで良し悪しをコントロールして、情報の見つけやすさや見た目の美しさ、使いやすさが変更、最終的にコンバージョンを上げる仕事です

稀にカッコイイデザインをすることが凄いWebデザイナと思われている気がしますが私はそうは思っていなくて、結果を出せる人が凄いWebデザイナと思っています。

カッコイイ・キレイなサイトを作る事は数ある中での結果を出すための手法の一つでそれだけで結果を出せるサイトを作ることは難しいです。

Webデザイナと言ってもコンセプトを決めたりレイアウトや配色などのサイトデザインに企画段階から携わる場合もあります。
Webデザイナがどの範囲を担当するかは案件や所属会社の風土より任される範囲が異なりますので一概にこれとは限定しづらいですね。

Webデザイナ全般がやること

Webサイトの構成とレイアウトを決める

制作するWebサイトの大まかなレイアウトを決めます。
ワイヤーが作られている場合はそれを元にデザインを進めます。

基本的な構成や全体のボリュームなどを考慮し、キーとなるビジュアルやWebサイト全体のイメージを提案してクライアントに確認していきます。

Webサイトのデザインを詰めていく

他にもWebサイトの色合いや装飾などテイストを詰めていきます。

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

写真素材など複数あれば構成に合わせてどれを使うべきかを選定していきます。

Webサイトのコーディングを行う

クライアントからデザインがOKが出ると、HTML、CSS、JavaScriptを用いてコーディングを行います。
※コーティングができないWebデザイナも存在します。

Webデザイナの役割の変化

Webデザイナのやることを整理してみると至ってシンプルに思えますが、多種多様なWebデザイナがいます。

最近はWebデザイナの担当の幅が広がり、デザインだけでカバーできる課題の割合がどんどん減ってきており、何かのスキルとデザインをかけ合わせて、自身の価値を伸ばしているWebデザイナが増えている印象です。

タイプ別のWebデザイナ

ランディングベージ ✕ デザイン

広告などの媒体から誘導する商品専用ページをデザインする。
商品の価値などを正しく理解して、誘導したユーザーの悩みを解決させる情報を伝えれるデザイナ

グラフィック ✕ デザイン

Webのデザインだけでなく、紙媒体も扱えるデザイナ。
印刷物ありきのサービスでWebサイトも必要とされる案件だと広い視点で制作ができ効率的。

バナー ✕ デザイン

広告バナーを量産するデザイナ
ランディングベージに誘導するのが主な目的になります。

広告を扱うのでバナーですので作って終わりではなく、入稿と計測もデザイナ自身で行うことでより洗練されたバナーを作ります

コーディング ✕ デザイン

自分でデザインしたものをコーディングするデザイナ。
コーディングが自分でできるとコーディングの事を考えてデザインが出来るので運用フェーズに入ったときに効率的に更新が可能になります。

多くのWebデザイナがここの方になると思います。

プログラミング ✕ デザイン

CSSのコーディングだけでなくPHPなども触れるデザイナ。
システム系の案件でプログラマーと連携をして効率的な開発が出来る。

githubやgulpなどコードを触る事が得意なデザイナです。
WordPressを始めとしたCMSが人気ですので今こういった方も増えています。

ECショップ ✕ デザイン

ECショップの商品ページ作成のデザイナ
季節感や商品イメージなどビジュアル操作をする事が比較的多い。
多数の商品を理解する必要があるので、専属でデザインを担当する

解析 ✕ デザイン

Webサイトの目的となるコンバージョンをベースにデザインをするデザイナ。
運用のフェーズでは解析結果からPDCAを回していく。
デザインの良し悪しよりボトルネックを見つけて改善していく事が得意。

マーケティング ✕ デザイン

Webサイトの企画段階から関われるデザイナ。
クライアントから情報を引き出し、ペルソナを立てたりカスタマージャーニーを作って情報設計する。
デザインの良し悪しと言うより、ユーザーのターゲットと自社の強みを見つけ出す事が得意。

カメラ ✕ デザイン

メインビジュアルや商品写真など素材を自分で用意できるデザイナ
飲食店など現地に行って撮影する機会が多いので、比較的サービスやクライアントを理解する機会が多いので信頼関係を築きやすい。

動画 ✕ デザイン

撮影された、または自分で撮影した素材を元に迫力のある動画を作れるデザイナー。
メインビジュアルに比べると容量が多くなるなど懸念される部分はあるものの、動画は注目させやすく、伝えたいことを伝えたい順番で伝えることができるのでユーザーに伝わりづらいコンテンツの場合強力。

ライティング ✕ デザイン

文章構成能力の高いデザイナ。
ユーザーの心にすっと入ってくる言葉を書き出しデザインに落とし込む。

イラスト・マンガ ✕ デザイン

画力の高いデザイナ。
伝えたい内容を絵で伝え、印象に残る強いコンテンツが作れる。

Webデザイナの多様性

ざっと思いつくものでタイプ別のWebデザイナを上げてみました。
どのタイプも活躍の場があるものなのでどれが優れてるとかそういった事はありません。
ただデザインのスキルと何かを別のスキルをかけ合わせて、他と差別化しながらWebデザイナをしている人が多い印象です。

デザインはコミュニケーションと同じで「伝える事」と私は考えています。
伝える事がどれだけ上手くても、「誰に何を」伝えるかが曖昧であれば伝えることは難しいです。
デザインが出来るだけで人の心を動かすということはできないでしょう。
コミュニケーションも同じで同じ言葉を投げかけてもみんなが同じ感度で受け取ってくれる事はありませんので、「誰に何を」を伝える方法が多様化しており、それに合わせてWebデザイナも変化してきていると考えています。

こう書いてしまいますとデザイン不要のように聞こえてしまうかもしれませんが、キレイ・カッコイイだけ出来るデザイナは生きづらい世の中になってきたのかなとは思います。
デザインだけ出来るWebデザイナになりたい、またはそれで満足している人が多くいる違和感がありましたのでみんなが結果に繋げることができるWebデザイナになれたらいいなって思う次第です(*ゝω・*)

WEBデザイナーとディレクターのためのマーケティング入門の勉強会

2017/01/21(土)に勉強会に参加してきました。

第61回 WordBench大阪「Webデザイナーとディレクターのためのマーケティング入門」 – connpass

当日使用されたスライドはこちらです。

そこで感じた「Webデザイナーがマーケティング」を知る事について感じた事をまとめました。

“WEBデザイナーとディレクターのためのマーケティング入門の勉強会” の続きを読む

WordPressサイト用のgulp/gitで開発環境を作ってみた

先日、WordPress用のこのブログ用にテーマを作ったのですがその時、開発環境も更新してみました。
これまでSCSSくらいしか使っていなかったのですが、最近はgulpも少しずつ使えるようになってきたのでそのあたりの更新です。

“WordPressサイト用のgulp/gitで開発環境を作ってみた” の続きを読む

WordPressのテーマをリニューアルした理由

新年早々このブログのテーマをリニューアルしました。
なんで変えたのかとかそのあたりの考えを伝えたいと思います。

最近のWordPressを知るため

このブログはWordPressで構築されています。
以前はWordPressの興味が高かったので進んで、WordPressのテーマを色々作っていたのですが最近は他の事に興味がいってしまったので、新しい機能などを軽く触れる機会を作るためにもテーマを変えました。

このテーマはWordPress 4.7から取り入れられたTwenty Seventeenから子テーマにして作られています。
新しめのテーマですので割りと新機能や知らないタグなどが含まれていたりしましたので、時々テーマも更新していこうと思います。

githubのリポジトリにも上げています。

テーマ領域とプラグイン領域を分けたかった。

WordPressと付き合う中でコードを書くにしてもテーマに含むべきものとプラグインに含むものがあると知りました。
過去のその事を記載してるので、ご興味あればお読みください。

WordPressのテーマを作る時に気をつけている事

最初の頃はそのへんの事が全然わからず、全部functions.phpに記載していてthemeを変更する度に不具合があったりしていたので、そういった作りを辞めるために今回テーマを一新しました(といっても簡単な子テーマで恐縮です)

テーマ領域とプラグイン領域を考えなしにして作るとリニューアルのときすごく大変になるのは過去の経験で身をもってしってるので、自分のブログもそんな状態にしておくのは嫌だなと思ったのがきっかけです。

昔はfunctions.phpに書いていたもので必要なものは現在はこのブログ専用のプラグインにしているのでテーマを切り替えても稼働するようにしています。
サイドバーのメニューとかも同様にテーマに依存させず、データベースに登録するようにしています。

オリジナルのプラグインの作り方

基本的に下記コードをプラグインフォルダ(/wp-content/plugins/)に入れるだけでプラグインになります。

そのテーマに依存したものはfunctions.phpに記述したままでもいいと思いますが、ある程度使い回せるもの、サイトの機能に依存するものはプラグイン化しておいたほうがソースも読みやすくなるので大きな事故を避けることができます。

<?php
/*記載するコード
Plugin Name: (プラグインの名前)
Plugin URI: (プラグインの説明と更新を示すページの URI)
Description: (プラグインの短い説明)
Version: (プラグインのバージョン番号)
Author: (プラグイン作者の名前)
Author URI: (プラグイン作者の URI)
License: (ライセンス名の「スラッグ」)
*/

/*参考例
Plugin Name:theme-plugin
Plugin URI:https://blog.cntlog.net/wordpress/theme-plugin
Description: このブログ専用のプラグインです。
Version: 1.0
Author:conti
Author URI:https://blog.cntlog.net/wordpress/
License:GPL2
*/


function hoge() {
    echo 'どうも、オリジナルのプラグインです';
}

プラグインフォルダに格納が終わったら普段のプラグイン同様に管理画面から有効化するだけです。
簡単ですね。

WordPress.orgの公式テーマに登録したかった

WordPress.orgのガイドラインに沿ったテーマは申請すれば誰でも登録できる制度があるのでそこに申請しました。

私見た目はプログラマーですが心はWebデザイナーなのでWordPressの公式テーマを作ったとかであればちょっとはWebデザイナーとして箔がつくかなーって卑しい気持ちと継続的にコードを育てたい。外部の人からも作ったものの意見を聞きたいという気持ちがあったからです。
※現在テーマは申請中ですがレビューを貰えるまで数ヶ月かかります…。

ほかにも「お前WordPressに貢献してなくね??」とか一部の人から煽られるのを避けるためでもあります。

最後に

なんだかんだ理由をつけていますが、やっぱりWebデザイナなのでコーディングしているのは楽しいです。

「WebデザイナだったらWordPressのテーマくらい作れて当たり前だよね~」って風潮が私の周りでは強いのでどんなときもある程度恥ずかしくない程度には構築できるようにしたいです。

コード書くのは好きなので今年は特にgithubとかにコードを晒していきたいと思ってますのでお手柔らかにお願いします(*ゝω・*)