Webデザイナーの仕事

企業やその人によってやる作業はそれぞれですが、現状私が行っている仕事について軽くご紹介します。

• サイトデザイン:
  社内のマーケティング担当の方と話し合いながらLPや新規サイトページのデザインを行います。
• サイトの更新:
  HTML/CSS/JavaScriptなどのコードを用いて、新商品の追加やサイトのブラッシュアップなどを行います。
• サイト周りのデザイン作成:
  サイト内で使用するアイコンやバナーの作成、商品画像の加工等を行います。

学生の頃は、ひたすらデザインソフトと向き合い、一人で黙々と制作する仕事だと思っていました。
しかし、BeBlockへ入社して数か月。Webデザイナーの仕事は、指示通りにデザインするだけでは成り立たないということを日々実感しています。

入社3か月目で行ったサイトのレイアウト変更

7月に自社ECサイト「ピンバッジの達人」のレイアウト変更を行いました。ECサイトは24時間お客様が利用しているため、できる限り止めるわけにはいきません。そのため今回は、メンテナンス時間を設けず、サイトを公開したままの状態で更新を行いました。

今回の更新では、これまで左側に表示していたサイドメニューをなくし、画面いっぱいにコンテンツを表示できる1カラムレイアウトへ変更しました。
変更した理由は大きく2つあります。

• 商品画像などのコンテンツをより大きく表示するため
• 現在の運用に合わせて情報を整理し、必要な情報をより見つけやすくするため

一見すると「サイドメニューを消すだけ」のように思えるかもしれません。 しかし実際は、メニューを消したことで全ページの画面幅が変わるため、コンテンツの大きさや余白を細かく調整し直す必要がありました。また、同時に商品詳細ページの仕様の表示内容を見直しました。これらの変更はマーケティング担当の方からの依頼書を元に修正していきます。しかし、ただ依頼通りに制作していけば良いわけではありません。よりわかりやすいサイトにするために思いついた改善案は積極的に提案していきました。

たとえば商品詳細ページでは、依頼書から以下のような細かいブラッシュアップを行っています。

• ボタンの色：周囲のオレンジ色との対比を考慮し、パッと目を引く青色に変更
• パラメータの表示：目立ちすぎ感を抑えるため、色や形状を調整
• サンプル請求のリンク：さらに強調して見せるため、テキストから画像バナーへ変更

もちろん、これらは勝手に変更したわけではありません。「もっとこうした方が伝わりやすいのでは」とマーケティング担当の方に提案し、一緒に確認や相談を重ねながら最終形にたどり着きました。

さらに今回は「サイトを止めない」ことが前提です。マーケティング担当が管理画面で商品情報を更新するタイミングと、私がHTMLやCSSを修正するタイミングをぴったり合わせる必要がありました。

最初にこの仕事を聞いたときは、「新卒で入ったばかりの私が担当して本当に大丈夫だろうか」と不安でいっぱいでした。当時はECサイトの管理画面の仕組みもまだ理解しきれておらず、マーケティングの視点も不十分。「本当に務まるのかな」というのが率直な気持ちでした。

コードを書くこと以上に難しかったこと

今回の仕事で一番大変だったのは、コードの修正そのものではありません。「管理画面のどこに入力した情報が、ページのどこに表示されるのか」を正確に把握することでした。

管理画面には似たような名称の入力項目が数多く並んでいます。マーケティング担当の方が入力したデータが、それぞれの指定位置に正しく出力される仕組みです。今回はその入力項目の構成自体も変更したため、 「この項目はどこに反映されるのか」 「この名称はどの情報を指しているのか」 と、ひとつずつ手探りで検証しながら進める必要がありました。

更新当日に慌てないよう、テスト環境で何度も表示を確認しました。「ここを変更したら他のページに崩れが出ないか」「管理画面の情報と一致しているか」を入念にチェックします。

どれだけテストを重ねて本番に備えていても、「本当に変更箇所をすべて把握できているだろうか」という不安は最後まで拭えませんでした。今振り返ると、提案段階から変更内容を細かくメモに残しておけば、より安心して本番に臨めたと感じます。 結果として大きなトラブルはありませんでしたが、この経験を通して「準備過程を記録に残すこと」の大切さを学びました。

Webデザイナーは一人で仕事を進める職種ではない

今回の更新作業を経て、強く実感したことがあります。 それは、Webデザイナーは決して一人で完結する職種ではないということです。

普段、社内のマーケティング担当の方から依頼を受けて制作を進めています。今回も、「どのような目的で変更するのか」「何を優先して見せたいのか」といった目的や背景まで丁寧に共有してくださいました。そのおかげで、「言われた通りにだけ作る」のではなく、「もっとこうすれば伝わりやすいのでは」と自分なりの提案を添えて進めることができました。

一方で、自分自身も疑問点を曖昧にしない工夫を始めています。 聞きたいことは事前にメモへ整理してから直接相談し、決まった内容はチャットで再確認することで、認識のズレを防ぐとともに後から振り返れるようにしています。

学生時代は、「質問しすぎると迷惑かな」「緊急性が低い気がするし後回しでいいかな」と遠慮してしまうこともありました。でも今は、曖昧なまま進めて後から手戻りが発生する方が大きな影響が出てしまうと考えるようになりました。

実際、今回の更新中も会話の中で認識の違いに気づき、直前で修正できた場面がありました。確認作業そのものが、大切な仕事の一部なのだと実感しています。

そわそわばたばたの更新日

更新当日。16時から更新を開始する予定でしたが、商品情報の準備・整理に合わせて、開始時間を変更し、最終的に作業を始めたのは16時50分頃でした。

HTML・CSSの反映と、管理画面側のデータ切り替えを完全な同時進行で行います。マーケティング担当の方が管理画面を更新する横で、私はコードを本番環境へ反映させていきました。

17時になり、担当の方が別のミーティングへ離脱。 その間は、自分で確認できる範囲を急いでチェックしました。自分で修正できる部分は速やかに対応し、担当の方にお願いしたい部分はメモにまとめて後からスムーズに共有できるように備えました。

18時30分頃、大きな表示崩れもないことを確認し、無事に更新作業が完了。 安堵したものの、帰宅後も「自分が帰ったあとに不具合が出ていたらどうしよう」とそわそわして落ち着きませんでした。 

翌日、問題なくサイトが動いていて、小さな修正依頼のみであることを確認したときは、本当にホッとしたのを覚えています。

この経験を通して成長できたこと

今回の更新では、
「変更した内容が他のページにも影響していないか」
「管理画面の入力内容と表示内容は一致しているか」
など、これまで以上にサイト全体を見渡す視点が身につきました。
この経験を通して、目の前の作業だけではなく、その先の運用まで考えながら仕事を進める大切さを学びました。

最近では、新商品の画像制作を依頼されたときに、「そのうち通常商品に切り替わるから、通常版も一緒に作っておこう」と考えたり、キャンペーン用のバナーを差し替えるときにも、終了後のことを見越して通常版を残しておいたりと、一歩先を考えて行動できるようになってきました。

仕事の流れが少しずつ見えてきたことで、「次に必要になること」を想像しながら動ける場面が増えています。

もちろんまだまだ勉強の毎日ですが、経験をひとつずつ重ねることで、自分の視野が確実に広がっている手応えを感じています。

最後に

学生時代の私は、Webデザイナーを「黙々と制作に向き合う仕事」だと思っていました。しかし実際は、目的を共有し、相談し、確認と提案を重ねるという、いろんな方とコミュニケーションを取って作っていくお仕事でした。今回のサイト更新も、決して一人ではできませんでした。

マーケティング担当の方と何度も相談を重ね、タイミングを合わせながら進めたからこそ、大きなトラブルなく乗り越えることができました。これからも一つひとつの業務の背景をしっかり理解し、自ら考えて動けるWebデザイナーを目指して成長していきたいです。

この記事を通して、Webデザイナーという仕事のリアルを少しでも身近に感じていただけたら幸いです。最後までお読みいただき、ありがとうございました！