社内勉強会「IN THE SALT vol.02」WEBデザイナー編 開催レポート
社内勉強会「IN THE SALT」。昨年10月に開催した「IN THE SALT vol.01」グラフィックデザイナー編では、当日出されたお題に対して即興デザイン制作を行いクリエイティブを生み出す瞬間を目の当たりにしました。
今回は「IN THE SALT vol.02」WEBデザイナー編として、ソルトワークスのWEBデザイナーがどんな業務をしているのか、共有・交流することを目的に開催しましたので、当日の様子をレポートします。
～「IN THE SALT」とは～
デザイナーを中心とした社内勉強会。ワークショップから業務理解までテーマも会によって変わります。カジュアルな勉強会となっていて、グループ内（部署内）だけではなく横のつながりを活発化にするために取り組んでいます。
「IN THE SALT vol.02」WEBデザイナー編
開催の目的
昨年秋、組織改編によりこれまで別々のグループ（部署）だったWEBデザイナー、グラフィックデザイナーがひとつのチームとして統合されました。
統合から早数カ月経ちましたが、同じデザイナーといえど、守備範囲がちがうため普段どんな業務をやっているのか、交流する機会がなかなかないといった状況でした。
そこで、デザイナー同士が業務や思考など相互理解が深まれば今まで以上にスムーズに業務がしやすくなるだろうとWEBデザイナーの京ちゃんが勉強会を企画しました。
部署横断でサービスを運営するソルトワークスではデザイナーだけでも3ポジション、エンジニアは4ポジション、マーケターも広告運用や販促などさまざまな専門性と業務範囲を持ったメンバーが働いています。プロジェクトで一緒に動いていているWEBデザイナーの業務をもっと理解したいということで、デザイナーだけではなく、さまざまな職種のメンバーが参加しました。
講師
WEBデザイナーの京ちゃん、キャサリン、まりもが講師を務めました。
勉強会スタート！
まずは、WEBデザインチームのマネージャーを務める京ちゃんから、WEBデザイナーの業務範囲や使用ツールについて説明があり「ソルトワークスにおけるWEBデザイン」そのものに対する理解を深めていきます。
WEBデザインって？
グラフィックデザイン=印刷物/紙媒体のデザインに対して
WEBデザイン＝WEB上の媒体のもの全般を指す。
＜業務範囲＞
・デザイン
・テスト／チェック
・ワイヤーフレーム制作
制作物としてはWEBサイト、LP、アプリ、広告バナーなどがあげられます。
WEBデザイナーは上記を表現するにあたり、ユーザー体験やシステム実装を考えた絵を作る必要があります。
使用ツール
・Photoshop
WEBデザイナーが一番使っているツール。グラフィックデザインで使用するツールのちがいとしても大きいのではないでしょうか。
・XD
エンジニアとの連携で、Photoshopから徐々にXDに置き換えを進めていたのも束の間、なんとAdobeからサービス終了のお知らせが発表されました。そのため、弊社では現在進行形で徐々にFigmaへ移行中です。
UIデザイナーも使用していて、操作が簡単でデータが軽く、表現に特化している点がポイントです。
・Illustrator
アイコン、イラストなどの素材制作の際に使用します。
ソルトワークスのWEBデザイナーの仕事
WEBデザイナーといっても企業によって業務範囲や定義はバラバラです。
では、ソルトワークスのWEBデザイナーの業務範囲や関わる人はどんな感じなのか、理解を深めていきます。
業務範囲
ズバリ「商品コンテンツのデザイン以外のビジュアルにまつわること」をやっています。サービスデザイン、販促デザイン、コーポレートデザインetc.
＜制作物＞
・WEBサイト
・ランディングページ（LP）
・アプリ
・販促物（メールマガジン、Instagram、広告バナー etc.）
関わる人
関わるポジションと業務についてはこちら。
ソルトワークスのWEBデザイナーは関わりのないポジションや部署はほぼナイ！というくらい全社に関わりながら仕事をしています。
販促：メルマガ、SNS、キャンペーン
広告：広告バナー、出稿案件
広報：プレスリリース、メディア媒体
UIデザイナー：ワイヤーフレーム作成、UI相談
エンジニア：デザインデータをお渡し→コーディング・システム実装
※フロントエンド、アプリ、バックエンドにそれぞれ依頼
アートディレクター：デザインチェック・MV・撮影関連
グラフィックデザイナー：はがき・イラスト相談
人事：コーポレート・採用関連の業務
運用支援：決済キャンペーン周りの確認
CS：不具合などあった場合の窓口
スクール：ランディングページ（LP）・資料等デザイン相談
WEBデザイナーズトーク「仕事をする上で考えていること」
続いて、キャサリン・まりもから自身が手掛けたランディングページ（LP）をもとに「仕事をする上でWEBデザイナーとして考えていること」を紹介してもらいました。
「年賀家族」クリエイターズページ（キャサリン）
「年賀家族」クリエイターページは、年賀家族のデザインのこだわりをより伝えるためのコンテンツとして制作がスタートしました。 個性豊かな専属クリエイターにフォーカスして、デザインに込めたこだわりと想いをご紹介しています。
WEBデザイナーとして考えていたこと
より簡潔に一目でクリエイター一人ひとりの個性やこだわりを最大限に知ってもらうにはどうしたら良いかを常々考えました。
だれしももっと伝えたい、アピールしたいと思うと、表現が多くなってしまうもの。今回の制作においてもクリエイターの個性やデザインへのこだわりをもっとたくさんの人に見てもらいたいという気持ちが大きく、いろいろと詰め込みたくなりました。
しかし、冷静にユーザー目線に立ってみると年賀状という商材にそれほど時間を割かない、最初から興味を持って全部見てくれる人はそうそういないと思います。
Webは基本流し見の媒体なので、ユーザーにどのような閲覧体験をさせたら苦がなく伝わるだろうと、UIデザイナーのオイちゃんと一緒に導線を考えていきました。
その結果、クリエイター自身の写真とデザイン制作過程の写真をランダムに織り交ぜることでストーリー性のある印象に、アイコンや写真はそれぞれ違った色のフィルター加工をして「クリエイター一人ひとりの個性」をさらりと見ることができるLPに仕上がりました。
「年賀家族」ナジーム紹介ページ（まりも）
次に、まりもから「年賀家族」のナジーム紹介ページを手掛けた際のエピソードを紹介してもらいました。
「年賀家族」ナジーム紹介ページは、もともと存在していましたが、商品の魅力をより引き出せるよう2024版を全面的にリニューアルすることになりました。
～ナジームとは～
ナジームはエフェクトと人物切り抜きで、何気ない日常写真でも、加工アプリなどを使わずにデザインの世界に“なじむ”という商品です。 毎年グラフィックデザインチームで特徴的な世界観を持ったはがきデザインの制作に力を入れています。
WEBデザイナーとして考えていたこと
ナジームの機能である「エフェクトと切り抜き」の機能はわかりやすく見せつつも、 興味を持ってもらうために奇抜で面白いデザイン表現にすることを意識しました。
たとえば、連続した写真や大きさの対比で違和感を持たせたり、平成初期っぽい配色や表現を取り入れたりしました。また、セクションごとに別の世界観を設定して、最後まで飽きずに読み進められるようなLPにしています。
広告の導線にもつながるページなので、ユーザーに他にはない年賀状デザインがありそうだ！と感じていただき、年賀家族自体の入り口になることも目指しています。
＜余談＞
このLPを制作するにあたっては各所の神対応が…！
メインビジュアル「3D辰」の生みの親であるチャパさんは、元素材から追加で光るアニメーションボタンを作ってくれました。コーディングを担当してくれたフロントエンドのぱてぃさんも「ぜひアニメーションつけよう！」と賛同してくれて、メインビジュアルが良い感じに飛び出すアニメーションの仕上がりに。
実はリリースまで時間がないタイミングの制作でしたが、みんなディテールの表現までこだわってくれて、仕事への熱量が高くて感動しました。
参加者の声
参加者からは「仕事内容が本当に多岐に渡っているので、素直にすごい」「どういった流れや考えで制作しているのかがわかった」「依頼する際に伝えておくべき情報がまだあると思ったので、今後改善していこうと思った」など普段関わっているWEBデザイナーの仕事への理解が深まったという声が多くあがっていました。
また、後日集計したアンケートでは、今後の社内勉強会について以下のようなアンケート結果が出ていました。
・今後、どのような内容の勉強会に参加したいか？
・メインビジュアル作成の秘話などを聞けたのがとても良かったので、定期的に制作物を振り返りつつ、それぞれの制作秘話が聞ける会があるといいなと思いました！
・デザインにおいてトレンドの要素を取り入れることの重要性はグラフィックデザイナーもWEBデザイナーも共通していると思うのですが、トレンド調査の仕方は人それぞれかと思います。みなさんどのように調べているか気になるので、それを知る場があればいいなと思いました。
・部署の人がその部署内の内容や考え方を同部署目線で共有するだけではなく、対他部署向けに別角度で伝える勉強会も見たいです（例えば：エンジニアの仕事内容をデザイナー目線で組んだ勉強会とか逆にデザイナーの仕事でエンジニアに刺さる伝え方になってる勉強会とか）
・グラフィックデザイナー・WEBデザイナー以外で、話を聞いてみたい部署は？
エンジニアリング
・バックエンドとかフロントエンドとかエンジニアリングの中の担当領域の中身は、実はまだよくわかっていないので知りたいです。
・今回のWEBデザイナーの仕事というような形式で、エンジニア版を聞いてみたいです。
マーケティング
・広告コストをどのように運用しているのか。大きな予算を運用しているので、デザイナー達からも広告担当のメンバーを見る目が変わりそうです。
・リサーチをかけるとか、数値を算出するってどこから何をどうやるのか、「とりあえずこれは抑えてる」というものがあれば知りたいです。
カスタマーサポート
・どんな風に顧客対応しているのか詳しくは知らないので実際の仕事内容を聞いてみたいです。
・ソルトワークスのCSポリシーについてより深く知りたいです。
主催者コメント
今回は勉強会というよりは共有会に近いイメージで、WEBデザイナーの仕事を伝えるという点でお互いの仕事をしやすくすることを目的に開催しました。予想以上に多くのスタッフが参加してくれて、特にマーケターやカスタマーサポートなど、普段連携してサービス運営をしているスタッフが参加してくれていたことが印象的でした。
アンケート結果からも意外と業務の中身って知られていないんだなという気づきがありました。マーケターからWEBデザイナーへデザイン制作依頼をするなど、依頼受ける側の業務理解は、自社開発だからこそ理解を深めておくことは強みだと思いました。
自分の業務って、自分のなかでは当たり前になってしまって大したことをやっていないと思いがちですが、他ポジションの人からみるとそれは当たり前ではない、ということも意識させられました。
次回「IN THE SALT」については、アンケートでマーケティングやエンジニアリングの話を聞いてみたいという声が多くあがっていたので、横のコラボもしていきたいですね。WEBデザイナーは、サービス運営のなかでも架け橋となる場面が多い役回りなので、社内の取り組みにおいてもライトにやりたいこととやりたいことをマッチングするような役目でありたいと思います！
横のつながりや、WEBデザイナーの業務理解が深まった「IN THE SALT vol.02」。デザイナー向けの社内勉強会から始まった「IN THE SALT」ですが、今後全ポジション対象の勉強会に広がっていく予感（？）
次回の勉強会もレポートしますのでお楽しみに！