Webデザイナーがデザイン以外のあると良いスキルと学び方

近年「Webデザイナーに求められる事が増えてきて何を手を付けていいかわからない」という声を聞いたりします。

これはIT業界の市場が拡大していってる証拠で、拡大した分の人手が足りてない事の現れなのかなと個人的には思っています。

またスマートフォンの出現など、多様なスキルが必要になってきて専任がしにくくなってるのも原因なのかもしれません。

8年も前くらい前であればWebデザイナーはデザインだけやっていれば良くて、コーディングなどの実装はマークアップエンジニアやプログラマさんたちがやってくれてたと思います。

最近はWebデザイナーはデザインに加えて、実装も出来る人がほとんどかと思います。
※分業でやってる会社さんは別ですね

デザインや実装以外でもサイトの設計やマーケティング・解析など多種を求められるケースがありますね。人数の少ないプロジェクトだと特に。

この業界覚えたスキルで一生食べていくのは難しくて、私がよく言うのは「去年と同じことしかできないのは退化であって、維持じゃないよ」です。

業界も周りも進歩しているので、同じことを続けてるだけでは取り残されるだけですね。

私もようやく、Web業界の超新星sketchを使い始めて、今風のワークフローに乗れました。

時代についていくって大切ですね。

よく、「30歳を過ぎてからでもWEB業界に入れますか?」と聞かれますが入れます。入って続けてる人たくさん見ます。

続けれている人はデザインやプログラム以外にも業務で必要でその分野のスキルに長けてる部分をすでに持ち、勉強に意欲的な人が多い傾向を感じます。

誰でも入れるという保証はできませんが、入るくらいはそれほど難しくは無いのかなという印象です。

Webデザイナに「なる」ために身に付けておくべきスキルとしては、デザインの知識、各種ツールの使い方、コーディングのスキルになりますが、それだけでは近年ではWebデザイナーを「続ける」には不十分かなと思います。

“Webデザイナーがデザイン以外のあると良いスキルと学び方”の続きを読む

サーバーが苦手な方にオススメしたい無料でSSL対応できるサーバー1選

先月私はロリポップとさくらレンタルサーバーからZenlogicに乗り換えました。

乗り換えから約一ヶ月が経ってなかなか使いやすいとか変えてよかったなーと思う事が多く乗り換えてよかったと思っています。

同時期に始めた人からも満足してる声をよく聞きます。

自分が気に入っているZenlogicのオススメポイントを紹介します。

「常時SSL」のためのレンタルサーバーZenlogic

“サーバーが苦手な方にオススメしたい無料でSSL対応できるサーバー1選”の続きを読む

無料でデジタルマーケティングの基本を教えてくれるGoogleの「デジタルワークショップ」

先日Googleのデジタルワークショップを受講しました。

ワークショップといってもブラウザで受講できる簡単なものです。
無料かつ好きな時間で少しづつ進められるのでご自分の都合に合わせられます。

ネットビジネスについて既に従事している方であればそれほど目新しい発見はないかもしれませんが、人にどうやってWebマーケティングの事を説明したりホームページを活用する方法を伝えたりするのにはすごく便利だなと思います。

もしあなたがネットビジネスの初心者で何から学べばいいか迷っていたり悩んでいるのであれば、受けてみる価値はあると思います。

“無料でデジタルマーケティングの基本を教えてくれるGoogleの「デジタルワークショップ」”の続きを読む

30代のWebデザイナーが仕事を続けるために意識してること(メンタル編)

気がついたらこの業界に入って10年は経過していました。
本格的にWebデザイナーになったのは5年くらいですが、やってる中で最近はこんな考え方してるなーっていうのを一部まとめました。

“30代のWebデザイナーが仕事を続けるために意識してること(メンタル編)”の続きを読む

常時SSLに対応するためのレンタルサーバー選定と移管の手順(Zenlogic編)

先月に重い腰をあげてようやく常時SSLの対応をしました。
去年からやろうやろうと思っていたのですが、調べてみると自分の契約しているサーバーで常時SSLの対応をするとなると結構費用がかさむ(無料でできない)のが発覚したので、初動から苦労をしてしまいました。

常時SSL対応をするために

常時SSL対応をするにはサーバー証明書が必要になります。
サーバー証明書は無料のものから有料(高いものだと年間17万円くらいのものもあります)のものまであり、個人のサイトのものであれば無料のもの(letsencrypt)を使われるのが多いようです。

サーバー証明書は一度購入したらOKというものではなく度々更新をしないといけないものです。
無料であるLet’s Encryptもそれは変わりません。
ただLet’s Encryptについてはプログラムで自動更新をさせることが可能です。(サーバーによります。)

まず常時SSL対応しようと思っても、サーバーの選定から必要になる場合がありますので、そこから考えていくのが良いです。

私はこれまで、ロリポップさんとさくらインターネットさん(どちらもレンタルサーバー)を利用していたのですが、どちらもLet’s Encryptの自動更新はできないようなので、諦めました。

無料でSSLが利用できるサーバー

自分が知っている中で調べたところ、私が利用でき無料で常時SSLできそうなレンタルサーバーでは2つでした。

どちらも今よりは維持費があがってしまいましたが、毎年サーバー証明書を買うよりは価格を抑えられ、サーバーのスペックも上がるので損をしているという事はありません。

低価格&大容量レンタルサーバーZenlogic

大阪の本町にあるファーストサーバーさんが運営されています。
ファーストサーバーさんは日本で初めてドメイン認証無料SSLを導入したレンタルサーバー業者でYAHOOの子会社です。

最安プランは期間限定の「プランS」で月額890円。
静的サイトの運用や小規模なWordPressサイトの運用なら問題なく動作するスペックです。

レンタルサーバーを名乗っていますが、実はクラウド型レンタルサーバーなので他のユーザーとCPUやメモリ、IPアドレスを共有していないです。

これによって通常のレンタルサーバーで良く聞く、他のユーザーの負荷に自分のサイトが見れなくなる・速度が遅くなるといった事がありません。

また、サーバーのスペックアップもできるので、サイトの成長・アクセスが集中する時期に合わせてスペックを上げていくことができます。

レンタルサーバーでTVやヤフー砲を食らい大量のアクセスがおきても、スペックをアップ(最短5分)できるので機会損失をせずに運用することができるのが嬉しいです。

あと比較的新しいサービスですので管理画面がキレイです。今風で美しい。

参考プラン

  • プラン:プランS
  • 初期費用:0円
  • 月額費用:890円(「プランS」は2017年6月30日まで)

エックスサーバー

老舗のレンタルサーバーでWordPressブロガーやアフィリエイターに人気が高いです。
さくらインターネットさんやロリポップさんに比べて価格は高いですが、安さより速さ・安定さを重視する人に人気がある印象です。

Zenlogicに比べ、歴史が長いのもあって利用ユーザーがとても多いので、調べれば大体情報が出てきます。(たとえば他のレンタルサーバーから移管とか)
エックスサーバーさんはプログラマにも人気が高いので、専門的な情報もよく見かけます。

参考プラン

  • プラン:X10プラン
  • 初期費用:1,500円( 2017/03/15まで。本来は3,000円)
  • 月額費用:1,000円

サーバー移管のためにやること

私の場合はロリポップさん、さくらインターネットさんからサーバーを映ることに決めたので、サーバー移管の必要がありました。

すでに契約しているサーバーでサーバー証明書が発行できていればこの手順は飛ばして頂いて結構です。

サーバー移管の手順

データダウンロード
FTPソフト等を使い、元サーバーにおいてある自分のサイトのファイルを、すべてローカルPC(自分のPC)へとダウンロードする。
WordPressなどCMSやシステムを引き継ぐ場合はデータベースなど環境周りのものも忘れずに持ってきましょう。
WordPressの場合、All-in-One WP Migrationというプラグインを使うと便利です。(All-in-One WP Migration – WordPressのサーバー移設が簡単にできるプラグイン)
余裕があればデータベースやファイル、テーマ整理、不要なプラグインの削除などのクリーニングをするのもオススメです。
新サーバーの設定
新しく契約したサーバーに独自ドメイン設定とメールアドレス設定をおこなう。(元サーバーの設定は消さず、最低2週間は同じ設定を並走させてください)
FTPソフト等を使い、旧サーバーからダウンロードした自分のサイトのファイルを、すべて新サーバーへとアップロードします。
表示確認をします。(DNSを切り替えていないので、表示はサーバーに設定されているドメインで確かめてください)
DNSサーバーの切り替え
DNSサーバー(ネームサーバー)を書き換えます。
DNSサーバーの切り替えはドメインを管理しているサイトで行います(例:お名前.com,ムームードメインなど)
半日から一日かかる場合もありますので、気長におまちください。

HTTPからHTTPS(SSL)に切り替えてからやること

ここからが本題ですね。

読込先ディレクトリの設定変更
HTTPSに切り替える場合HTTPと同じ場所でもディレクトリの読込先を設定する必要があります。
サーバー証明書発行
契約しているサーバーでサーバー証明書を発行するところがあるので、そこから適応するサイトを設定してください。
CMSやソースにおける読込URLの切り替え
HTTPからHTTPSに切り替えると別のURLになりますので、データベースやテーマにあるURLをHTTPSに切り替える必要があります。
WordPressでしたら、データベース内のパスを切り替えをするプラグインもあります。 WordPressを一瞬でHTTPS化するプラグイン「Really Simple SSL」の使い方
htaccessの設置
常時SSL対応するということはURLが変わるつまりドメインパワーも引き継いだほうが良いでしょう。
301リダイレクトでそれは可能です。
htaccessに下記を記入すれば、HTTPにアクセスするのと同時にHTTPSに移動しつつ、ドメインパワーも引き継げます。

RewriteEngine on
RewriteCond %{HTTPS} !=on [NC]
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

以上でひとまず対応は可能です正常にアクセスできるか調べてみましょう。

その他忘れずにやること

GoogleAnalyticsやSearchConsoleなどの外部サイトに登録したURLも変更しましょう。
SearchConsoleについては上書きの設定がないようなので、新規で作り直しました。

私の場合、アフィリエイトなどのサイトに登録してるものもありましたのでそのあたりの登録URLも変更しました。

忘れがちなのでTwitterやfacebookなどのプロフィールに載せてるURLも変更したほうが良いですね。
別にhtaccessを設定していればリダイレクトされるので良いかと思われますが、ぱっと見常時SSL対応できてないサイトを作ってる人に見られてリテラシーを疑われる事もあるようなのでやっておいて損はありません。

常時SSLの対応をやってみて

別にキレイなサイトになったとか、速度が上がったとか目に見えてよくなった的なことは無いのですが、Googleの警告に怯える事はしなくなって肩の荷がおりた感があります。

ただ偶然なのか、検索順位が上がってるワードが幾つかありますので、これは常時SSL対応の効果なのかもしれません。

今後は常時SLLでサイトを作るのが当たり前になってくると思うので、新規のサイトで移設の心配がなくなったとほっとしています。

常時SSLを切り替えるとこれまでのSNSのシェア数とかも変わってしまうので早め早めに動かないと後で損しかしないと思いますので、みなさんも急がれてはいかがですか(ゝω・)

日本語でわかるSketchの使い方と機能

実際私も英語は苦手ですが、Sketchは全然使えています。
ただ初めての方だとSketchの機能が全然わからないと思いますので、メニューを日本語でわかるようにしてみました。

メニュー

メニュー項目の紹介です。

ショートカットキーメモ
⌘…Command(コマンド)キー
⌥…Option(オプション)キー or Alt(オルト)キー
⇧…Shift(シフト)キー
^…Control(コントロール)キー

File(ファイル)

  • New(新規)
    • ⌘N
  • New From Template(テンプレートから新規)
  • Open(開く)
    • ⌘O
  • Open Recent(最近使用したファイルを開く)
  • Close(閉じる)
  • ⌘W
  • Save(保存)
    • ⌘S
  • Duplicate(複製)
    • ⇧⌘S
  • Rename(カレントファイルの名前変更)
  • Move To(カレントファイルを移動)
  • Revert To(復帰)
  • Export(書き出し)
    • ⇧⌘E
  • Export Artboards to PDF(PDFとして保存)
  • Reduce File Size(ファイルの容量を圧縮)
  • Save as Template(テンプレートとして保存)
  • Page Setup(印刷時のページ設定)
  • Print(プリント)

Edit(編集)

  • Undo(取り消し)
    • ⌘Z
  • Redo(やり直し)
    • ⇧⌘Z
  • Cut(カット)
    • ⌘X
  • Copy(コピー)
    • ⌘C
  • Paste(同じ位置にペースト)
    • ⌘V
  • Paste Over Selection(選択されたオブジェクトの左上に合わせてペースト)
    • ⇧⌘V
  • Paste with Style(内容不明)
    • ⌥⇧⌘V
  • Duplicate(複製)
    • ⌘D
  • Delete(削除)
    • delete
  • Select All(すべてを選択)
    • ⌘A
  • Scale(拡大・縮小)
    • ⌘K
  • Copy Style(属性をコピー)
    • ⌥⌘C
  • Paste Style(属性をペースト)
    • ⌥⌘V
  • Set Style as Default(選択されたスタイルをデフォルトのスタイルにする)
  • Pick Color(スポイト)
    • C
  • Copy CSS Attributes(CSSプロパティ)
  • _Spelling(つづり)_
    • Show Spelling and Grammar(スペルと文法を表示)
      • ⌘:
    • Check Spelling(書類を今すぐチェック)
      • ⌘;
    • Check Spelling as You Type(入力中にスペルチェック)
  • Start Dictation(音声入力を開始)
    • fnfn
  • Emoji & Symbols(絵文字と記号)
    • ⌘Space
      ### Insert(挿入)
  • Vector(ペンツール)
    • V
  • Pencil(鉛筆ツール)
    • P
  • Line(直線ツール)
    • L
  • Arrow(矢印)
  • Rectangle(長方形ツール)
    • R
  • Oval(楕円形ツール)
    • O
  • Rounded(角丸長方形ツール)
    • U
  • Star(スターツール)
  • Polygon(多角形ツール)
  • Triangle(三角形)
  • Text(文字ツール)
    • T
  • Image(画像の挿入)
  • Artboard(アートボード)
    • A
  • Slice(スライス)
    • S
  • Symbols(シンボル)
  • Styled Text(テキストスタイル)
    ### Layer(レイヤー)
  • Create Symbol(シンボルを作成)
  • Create Shared Style(テキストスタイルを作成)
  • Round to Pixel(ピクセルにスナップ)
  • _Style(スタイル)_
    • Add Fill(新規塗りを追加)
    • Add Border(新規線を追加)
    • Add Shadow(ドロップシャドウを追加)
    • Add Inner Shadow(内側シャドウを追加)
    • Fill Options(塗りのオプション)
    • Border Options(線のオプション)
    • Remove Unused Styles(現在適用していない(チェックしていない)効果(線やドロップシャドウなど)を削除)
  • _Combine_
    • Union(複合シェイプの合体)
    • Subtract(複合シェイプの前面オブジェクトで型抜き)
      • ⌥⌘S
    • Intersect(複合シェイプの交差)
      • ⌥⌘I
    • Difference(複合シェイプの中マド)
      • ⌥⌘X
    • Reset(上書きで設定したシェイプをリセット)
  • _Transform_
    • Transform Layer(自由変形ツール)
      • ⇧⌘T
    • Rotate Layer(回転)
      • ⇧⌘R
    • Flip Horizontal(水平に反転)
    • Flip Vertical(垂直に反転)
  • _Paths_
    • Join(2つ以上のオープンパスを選択してパスの連結)
    • Split(複合シェイプの解除)
    • Flatten(複合シェイプの拡張)
    • Close Path(オープンパスをクローズパスに変更)
    • Reverse Order(オープンパスのアンカーの順番を逆にする)
    • scissors(はさみ。パスの一部切り取り)
    • Rotate Copies(回転して複製)
  • _Image_
    • Replace(画像の差し替え)
    • Set to Original Size(オリジナルサイズへ戻す)
    • Reduce Image Size(画像の圧縮)
    • Convert to 9-Slice Image(画像を9スライスに変換)
  • Flatten Selection to Bitmap(ラスタライズ)
  • Convert to outline(フォントのアウトライン化)
  • _Risize_
    • Stretch(比率を無視して伸縮)
    • Pin to corner(座標を固定して伸縮しない)
    • Resize(比率を維持して伸縮)
    • Float in place(座標位置のみ伸縮)
  • Use as Mask(選択したオブジェクトをマスクとして使用)
    • ⌘M
  • Mask Mode
    • Outline Mask(選択したマスクをクリッピングマスクに)
    • Alpha Mask(選択したマスクを不透明マスクに)
    • Ignore Underlying Maskマスクを解除
    • Mask with Selected Shape(選択したシェイプでマスク)
      ### Type(書式)
  • Bold(太字)
    • ⌘B
  • Italic(斜体)
    • ⌘I
  • Underline(下線)
    • ⌘U
  • Bigger(フォントサイズを大きく)
    • ⌥⌘=
  • Smaller(フォントサイズを小さく)
    • ⌥⌘-
  • Uppercase(すべて大文字)
  • Lowercase(すべて小文字)
  • Change Font(フォント変更)
    • ⌘T
  • Select Similar(文字編集状態のとき、選択された文字と同じ属性の文字を全て選択する)
  • Text on Path(パス上文字)
  • _Kern(カーニング)_
    • Use Default(デフォルトの設定を使用)
    • Use None(カーニング設定をクリア)
    • Tighten(文字間を詰める)
      • ⌥T
    • Loosen(文字間を広げる)
      • ⌥L
  • _Ligature_
    • Use Default(用途不明)
    • Use None(用途不明)
    • Use All(用途不明)
  • _Baseline_
    • Use Default(デフォルトの設定を使用)
    • Superscript(上付き文字)
    • Subscript(下付き文字)
    • Raise(ベースラインを上げる)
    • Lower(ベースラインを下げる)
  • Align Left(左揃え)
    • ⌘{
  • Center(中央揃え)
    • ⇧⌘¥
  • Justify(両端揃え)
  • Align Right(右揃え)
    • ⌘}

Arrange(整頓)

  • Forward(前面へ)
    • ⌥⌘↑
  • Move to Front(最前面へ)
    • ⌥⌘↑
  • Backward(背面へ)
    • ⌥⌘↓
  • Move to Back(最背面へ)
    • ⌥⌘↓
  • _Align Objects(オブジェクトの整列)_
    • Left(水平方向左に整列)
    • Horizontally(水平方向中央に整列)
    • Right(水平方向右に整列)
    • Top(垂直方向上に整列)
    • Vertically(垂直方向中央に整列)
    • Bottom(垂直方向下に整列)
  • _Distribute Objects(オブジェクトの整列)_
    • Horizontally(水平方向等間隔に分布)
      • ⌘H
    • Vertically(垂直方向等間隔に分布)
      • ⌘V
  • Make Grid(格子状に並べる)
  • Show Layer(レイヤーの表示/非表示)
    • ⇧⌘H
  • Lock Layer(レイヤーのロック/ロック解除)
    • ⇧⌘L
  • Rename Layer(レイヤー名を変更)
    • ⌘R
  • Group Layers(グループ化)
    • ⌘G
  • Ungroup Layers(グループ解除)
    • ⇧⌘G
  • Find Layer(レイヤーを名前で検索。)
    • ⌘F

View(表示)

  • Zoom In(ズームイン)
    • ⌘+
  • Zoom Out(ズームアウト)
    • ⌘-
  • Actual Size(100%表示)
    • ⌘0
  • Center Canvas(すべてのアートボードを全体表示)
    • ⌘1
  • Zoom Selection(選択されたオブジェクトを画面最大になるように表示)
    • ⌘2
  • Center Selection(選択されたオブジェクトを画面の中央に表示)
    • ⌘3
  • Show Layers List(左側のレイヤーリストパネルを表示/非表示)
    • ⌥⌘1
  • Show Inspector(右側のインスペクタを表示/非表示)
    • ⌥⌘2
  • Hide Layers and Inspector(右側のインスペクタを表示/非表示)
    • ⌥⌘3
  • Presentation Mode(フルスクリーン)
    • ⌘.
  • _Layer List_
    • Auto-Expand Groups in Layer List(レイヤーリスト上のグループなどの階層構造を展開)
    • Collapse Artboards and Groups(展開してある階層構造を閉じる)
    • Reveal in Layer List(レイヤーリストで展開してあるものを開く)
      • ⇧⌘J
    • Show Slices(レイヤーリストにスライスを表示)
    • Show Layers(レイヤーリストにレイヤーを表示)
  • _Canvas(キャンバス)_
    • Show Smart Guides(スマートガイドを表示)
    • Show Selection Handles(選択されているオブジェクトにハンドルを表示)
    • Show Layer Highlight(マウスホバーしたとき、オブジェクトにフォーカスを表示)
    • Show Artboard Shadow(アートボードの周りにドロップシャドウを表示)
    • Show Rulers(定規を表示)
      • R
    • Show Pixels(ピクセルプレビュー)
    • Show Pixels Guide(拡大時に1px単位のグリッドを表示)
      • X
    • Show Grid(グリッドを表示)
      • G
    • Show Layout(レイアウトを表示)
      • L
    • Hide All Layout and Guides(グリッドとレイアウトを非表示)
    • Grid Settings(グリッド設定)
    • Layout Settings(レイアウト設定)
  • Show Colors(カラー選択パネルを表示)
  • Show Fonts(フォント一覧パネルを表示)
  • Hide Toolbar(ツールバーを表示/非表示)
    • ⌥⌘T
  • Customize Toolbar(ツールバーをカスタマイズ)
  • Enter Full Screen(フルスクリーン)
    • ⌘F

プロトタイプ入門!初めてInvisionを使う人向けの機能と使い方の紹介

最近はSketchを使うことが増えて(というか一択)になっており様々なプロトタイプツールに手を出しているのですがその中でも一番汎用性が高く気にいっているのがInVisionです。

Invisionは英語製なので日本人には敬遠されがちで、あまり機能や便利さが広まっていないと思うので、私が使っている部分になりますがInVisionで出来ることをご紹介します。
“プロトタイプ入門!初めてInvisionを使う人向けの機能と使い方の紹介”の続きを読む

目的別に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デザイナになれたらいいなって思う次第です(*ゝω・*)