【プロフィール】WEB制作歴16年になるまで

はじめまして☺︎

WEB制作歴16年 | 本格フリーランス1年目 | WEBデザイナー | コーダー | WEBディレクターの真由です。

noteを書き始めるにあたり、自分のこと / WEB制作歴16年のことをまとめてみました✎

こんな方に読んでいただきたいと思っています。

☑︎ WEBデザイナーになりたい方
☑︎ WEBディレクターになりたい方
なにか参考になれば嬉しい☺︎

☑︎ WEB制作で頑張っている方
☑︎ フリーランスの方
横のつながりができたら嬉しい☺︎

📌 私のこと

☑︎ 生まれ
東京生まれ東京育ち、親戚もほぼ東京☺︎

・1984年2月7日生まれ。
・10歳まで東京都豊島区。 (母の実家近く)
・10歳から東京都世田谷区。 (父の実家)
・現在も東京都世田谷区の実家近く在住。

☑︎ 学校
14年も女子校で育った☺︎;;

・幼稚園〜高校まで一貫校。
・保育専門学校へ進学。 (体調不良で中退☹︎;;)
・WEBデザインスクール。

☑︎ スポーツ
運動神経がいい方ではないけど運動は好き☺︎

・スキー (13年)
・水泳 (10年)
・バスケ (8年)
・ボルダリング (2ヶ月)

☑︎ 楽器
習ってた期間が長いだけでスキルはともなってない☹︎;;

・ピアノ (15年)

☑︎ バンドスタッフ経験
私の人生でかなり大事な経験☺︎

▶︎ (民族系バンド)
1番長くスタッフをしたバンド。
レコーディングに見学参加、全国ツアー / 台湾ツアーに同行。

▶︎ UNSLOW
活動休止中のバンド。たぶんまだスタッフ…？

☑︎ 大事 / 好き
これがあるから仕事も勉強も頑張れる☺︎

・家族
・甥っ子 (5歳)・姪っ子 (1歳)の成長
・ビール / ハイボール / レモンサワー
・ライブハウス＋バンド
・ゲーム
・ねこ

☑︎ その他
最近のこと✎

・週6〜7の自宅ワークアウト
・8時間ダイエット (16時間断食)
・AM5:00起きの朝型生活

📌 WEBデザイナーになったキッカケ

体調不良であえなく専門学校中退後、しばらくして体調回復☺︎
どんな仕事をするか悩むように。

その相談にのってくれたのが、スタッフをしていた民族系バンドのメンバーさん。(以下、"メンバーさん"。)

「WEB制作会社を作るから、うちで働く？」
「WEBデザインのスクールに通ったら一緒に働こ」

WEBの知識なし、デザイン知識なし、パソコンスキルなし。

ただ『おもしろそう！』『一緒に働きたい！』の気持ちだけで動き出した。

📌 WEBデザインスクール

思い立ったら即行動、すぐにスクールへの入学手続きを済ませた☺︎

『インターネットアカデミー』というスクールの "WEB総合プロ検定コース" を受講✎

☑︎ そのスクールにした理由
"メンバーさん" の仕事仲間 (のちの上司) が卒業生で紹介していただいた。
この頃はスクール自体もまだ多くはなかった。はず。

☑︎ スクールのシステム
修了するために受けなくてはいけない授業を、受けられるときに受けに行くシステム。

☑︎ WEB総合プロコースの授業内容
Adobe Photoshop、Adobe Illustrator、Adobe Dreamweaverなど、ソフトの使い方がメインだった。と思う。

平日はスクールに通い、土日はスタッフをしていたバンドの全国ツアーに同行。
約6ヶ月でスクールを修了。

📌 WEB制作のプロになってから

ここからは "WEB制作者としての16年間の職歴 / 担当案件" をカンタンにまとめました✎

☑︎ 職種
☑︎ 会社のエピソード
☑︎ 会社 / WEB制作チームの規模
☑︎ 会社推奨 /使用ソフト
☑︎ 担当案件の概要
☑︎ 担当案件の実務内容

※ 著作権の問題で制作物はほぼ載せられていません…。
※ デザインでこだわった点などは、現在リニューアル中のポートフォリオサイトに記載予定です。
※ 転職については長くなりすぎるので書いていません。

🖥 #01　WEB制作会社

約束通り、”メンバーさん” がWEBデザイナーとして雇ってくださった☺︎

1番最初に任せてもらった仕事は、会社の地図作成。
四角や丸だけで作れる簡単なものだが、当時の私には難しかった。
WEBデザインスクールを修了しただけの自分が使い物にならないことを痛感したが、作った画像をWEBサイトに載せてもらったときの嬉しさは今も覚えている。

会社に泊まりこんで徹夜作業したり大変なこともあったが、アットホームな社風 / 寄り添ってくれる上司に救われ、社会人としてもWEBデザイナーとしても多くのことを学んだ。

☑︎ 会社
・従業員 (＝WEB制作者)：10名程度

☑︎ 主な使用ソフト
・Adobe Fireworks
・Adobe DreamWeaver
・Microsoft Excel
・Microsoft Word

ー　ー　ー　ー

☑︎ 楽天市場出店ECサイト (レディースファッション / 日用品など多数)

最初はアシスタントWEBデザイナーとして制作作業に集中、次第にクライアントとの打ち合わせも担当。

▶︎ 実務内容
・クライアント窓口
・バナー作成
・WEBサイト更新
・商品画像加工
・商品登録

ー　ー　ー　ー

☑︎ YAHOO!ショッピング出店ECサイト (メンズファッション)

私も着ていた大好きなメンズファッションブランド☺︎
メインWEBデザイナーとして初めてリニューアルを担当した。

▶︎ 実務内容 
・WEBサイトリニューアル (WEBデザイン / コーディング)

ー　ー　ー　ー

☑︎ 時計ブランドECサイト

モール出店以外の初めてのECサイト。
アシスタントWEBデザイナーとして作業を担当。

▶︎ 実務内容
・商品画像加工
・商品ページ量産

🖥 #02　WEB制作 / システム開発会社 (出向)

デザインしたことのないジャンルのデザインに戸惑いつつ、多くの先輩方のデザインを見て勉強 / 実践を繰り返し、WEBデザインの幅が広がった。
また、スピード感においても勉強になった。

☑︎ 会社
・従業員：100名程度
・所属チームWEB制作者：20名程度

☑︎ 主な使用ソフト
・Adobe Fireworks
・Adobe DreamWeaver
・Microsoft Excel

ー　ー　ー　ー

☑︎ 子ども向けエンターテイメントサイト (多数)

アシスタントWEBデザイナーとして多くの案件の作業を担当。

▶︎ 実務内容
・バナー作成
・WEBページ更新

🖥 #03　化粧品メーカー

ほぼ稼働していなかった楽天市場出店ECサイトの担当として入社。
社内には稼働しているAmazon出店ECサイト / Yahoo!シッピング出店ECサイトもあり、その担当WEB制作チームは存在していた。

自由な社風で提案した企画のほとんどにGOサインを出してもらえたため、積極的に提案することが習慣化された。

☑︎ 会社
・従業員：40名程度
・社内WEB制作者：5名程度

☑︎ 主な使用ソフト
・Adobe Fireworks
・Adobe DreamWeaver
・Microsoft Excel

ー　ー　ー　ー

☑︎ 楽天市場出店ECサイト (コスメ)

楽天市場担当チームで唯一のWEB制作者だったので、WEB制作関連はすべての担当した。
店長に任命され、出荷依頼やお客さま対応も担当したことで、WEBサイトに掲載すべき情報などが実感できた。
また、ファン作りのためにメルマガ作成やブログ執筆もおこなった✎

▶︎ 実務内容
・WEBサイトリニューアル (デザイン / コーディング)
・商品ページ作成 (デザイン / コーディング)
・商品登録
・特集ページ作成 (デザイン / コーディング)
・企画立案
・メールマガジン作成 / 配信
・ブログ執筆
・商品出荷依頼 / 案内
・お客さま対応

🖥 #04　フリーランス (パートナーシップ)

前職 (#3) の上司がWEBコンサル / 制作会社を立ち上げ「一緒に仕事しよう」とお声がけいただいた☺︎
フリーランスWEBデザイナーとしてパートナーシップを結んだ。

☑︎ 主な使用ソフト
・Adobe Fireworks
・Adobe DreamWeaver
・Microsoft Excel

ー　ー　ー　ー

☑︎ 某スポーツ障がい者日本代表サイト

当時 『WEBデザイナーとして人生のピークなんじゃないか…？』 と思った案件。
打ち合わせから参加し、WFなし (！) でWEBデザインして、一発で関係者全員からOKが出た☺︎

▶︎ 実務内容
・新規WEBサイト制作 (WEBデザイン / コーディングアシスタント)

ー　ー　ー　ー

☑︎ 保育園サイト

保育科の専門学校で1年学んだことがWEBデザインに活かせた☺︎
子ども好きの私にとってすごく楽しい仕事であり、経験は無駄にならないと教えてもらった仕事でもあた。

▶︎ 実務内容
・WEBサイトリニューアル (WEBデザイン / コーディングアシスタント)

ー　ー　ー　ー

☑︎ 楽天市場出店ECサイト (スポーツ用品)
毎月の更新作業を担当。

▶︎ 実務内容
・商品画像作成
・商品登録 (csv)

ー　ー　ー　ー

☑︎ ECサイト (医療品)
毎月の更新作業を担当。

▶︎ 実務内容
・WEBページ更新
・バナー作成
・商品画像作成
・商品登録

🖥 #05　リビング素材 商社 

自由が丘にある大好きな雑貨屋さんでWEBデザイナーを募集していたので応募、採用していただいた。
大好きな雑貨やおしゃれ家電が商材のECサイト担当。
この会社から徐々にWEBディレクションのようなことも担当することに。

☑︎ 会社
・従業員：100名程度
・所属WEB制作チーム：5名程度

☑︎ 主な使用ソフト
・Adobe Fireworks
・Adobe Photoshop
・Adobe DreamWeaver
・Microsoft Excel

ー　ー　ー　ー

☑︎ 楽天市場出店ECサイト① (インテリア家具 / キッチン家電など)

入社してしばらくアシスタントWEBデザイナーとして担当。
カメラマンに商品ページに必要な写真を提案、チームでディスカッションして作り上げる楽しさを知った。

▶︎ 実務内容
・WEBサイト改善 (レイアウト改善提案〜実施)
・WEBサイト通常更新
・撮影 (ディレクション)
・特集ページ作成 (WF作成 / ライティング / WEBデザイン / コーディング)
・商品ページ作成 (WF作成 / ライティング / WEBデザイン / コーディング)
・商品登録

ー　ー　ー　ー

☑︎ Yahoo!ショッピング出店ECサイト (インテリア家具 / キッチン家電など)

入社してしばらくして「Yahoo!ショッピングで出店したら、WEB制作を全部担当してみない？」と上司に聞かれ、即快諾。
オープンから担当。

▶︎ 実務内容
・新規WEBサイト制作 (WEBデザイン / コーディング)
・企画立案
・WEBサイト通常更新
・撮影 (ディレクション)
・特集ページ作成 (WF作成 / ライティング / WEBデザイン / コーディング)
・商品ページ作成 (WF作成 / ライティング / WEBデザイン / コーディング)
・商品登録

ー　ー　ー　ー

☑︎ 楽天市場出店ECサイト② (インテリア家具 / キッチン家電など)

取扱商材がほとんど違う、新たなECサイトを楽天市場から出店。
クリエイティブディレクターとして関わる。
WEBデザインについて言語化して伝えることの難しさを知るキッカケとなった仕事✎

▶︎ 実務内容
・クリエイティブディレクション (撮影 / ライティング / WEBデザイン)

🖥 #06　フリーランス (WEB制作会社常駐)

#01のWEB制作会社 (”メンバーさん”) からお声がけいただき、働かせていただくことに。

ここで作っていただいた名刺の肩書は『EC職人』。
#01から成長したことを認めてもらえたようで嬉しかった☺︎

☑︎ 会社
・従業員 (＝WEB制作者)：3名

☑︎ 主な使用ソフト
・Adobe Fireworks
・Adobe DreamWeaver
・Microsoft Excel

ー　ー　ー　ー

☑︎ Yahoo!ショッピング出店ECサイト (楽器系)

初めての楽器 / 楽器関連グッズが商材のECサイト。
どんなキーワードが強いか、どの時期にどんな企画をしたらいいか、などリサーチするとからスタートした。
初めての商品梱包では、ファン作りの一環として手書きのメッセージを添える工夫をした。

▶︎ 実務内容
・社内クリエイティブコントロール
・WEBサイトリニューアル (デザイン / コーディング)
・特集ページ作成 (デザイン / コーディング)
・商品ページ作成 (デザイン / コーディング)
・商品登録
・企画立案
・メールマガジン作成 / 配信
・商品梱包 / 配送手続き
・お客さま対応

🖥 #07　インテリア家具メーカー

WEBディレクターとしてはまだ自信がなく、WEBデザイナーとして入社希望を出したが、入社した時点で『WEBディレクター / WEBデザイナー』としての採用だった。
ここからWEBディレクターとしてきちんと自覚し始めた。

商品が完成すると、役員 / 商品企画開発チーム / 品質管理チーム / クリエイティブチーム (WEB制作・カメラマン) / 物流チームなどでの合同MTGが行われた。
人数の多いMTGでの議事録の重要性など多くのことを学んだ。

☑︎ 会社
・従業員：80名程度
・所属チームWEB制作者：15名

☑︎ 主な使用ソフト
・Adobe Fireworks
・Adobe Photoshop
・Adobe DreamWeaver
・Google スプレッドシート

ー　ー　ー　ー

☑︎ 自社サービスWEBサイト

楽天市場 / Yahoo!ショピング / Amazonに出店してるクライアントに、自社製品家具と家具商品ページをセット販売するサービス。

▶︎ 実務内容
・特集ページ作成 (WF作成 / デザイン / コーディング)
・LP作成 (WF作成 / デザイン / コーディング)

ー　ー　ー　ー

☑︎ 販売用商品ページ作成

クライアント先でクレームを発生させることは、もってのほか。
楽天市場 / Yahoo!ショピング / Amazonのルールに基づき、情報に誤りがないよう正確さを強く求められた。

▶︎ 実務内容
・ディレクション (クリエイティブコントロール / スケジュール管理 / 外注指示書作成)
・撮影 (依頼書作成 / 小道具準備依頼 / 撮影立ち会い)
・特集ページ作成 (WF作成 / デザイン / コーディング)
・商品ページ作成 (WF作成 / デザイン / コーディング)
・LP作成 (WF作成 / デザイン / コーディング)

🖥 #08　東証一部上場企業　通信会社

紹介でWEBデザイナー / WEBディレクターとして入社。

WEBサイトに限らず、ちらし / サイネージ / 資料などのデザインを担当。
WEBサイトを多くの人に見てもらえるのはもちろん、作ったチラシがハワイで配られたり、空港のサイネージで作ったものが流れたり、WEBデザインを続けてきてよかったと思う瞬間がたくさんあった。
これは大企業に就職できたことで得られた瞬間で、メリットだと思う。

☑︎ 会社
・従業員：700名程度
・所属チームWEB制作者：2名

☑︎ 主な使用ソフト
・Adobe Photoshop
・Adobe DreamWeaver
・Microsoft PowerPoint
・Google スプレッドシート
・Google ドキュメント

ー　ー　ー　ー

☑︎ 海外旅行メディアサイト

所属チームのメイン業務。
海外旅行の経験がWEBデザインに役立ったのはもちろん、提案力にも繋がった。

▶︎ 実務内容
・WEBサイトリニューアル (WF作成 / デザイン / コーディング)
・WEBサイト更新 (WEBページ追加 / バナー作成)
・WEBページ追加 (WF作成 / デザイン / コーディング)
・特集ページ作成 (WF作成 / デザイン / コーディング)
・資料作成
・ディレクション (外注ライター管理 / ライティング添削)

ー　ー　ー　ー

☑︎ フォトコンテスト

会員数300万以上の自社サービスと海外旅行メディアサイトの認知度UPのために企画したイベント。
このイベントのためにデザインを (おそらく) 全部担当。

▶︎ 実務内容
・特集ページ作成 (WF作成 / デザイン / コーディング)
・応募写真一覧ページ作成 (WF作成 / デザイン / コーディング)
・バナー作成 (WF作成 / デザイン)
・サイネージ用動画作成 (WF作成 / デザイン)
・ちらし作成 (WF作成 / デザイン)

ー　ー　ー　ー

☑︎ 自社サービス関連サイト
不定期更新作業を担当。

▶︎ 実務内容
・画像加工
・ライティング添削
・コーディング

ー　ー　ー　ー

☑︎ スポット
社内でデザインにまつわる仕事が発生したときにヘルプでデザイン担当。

▶︎ 実務内容
・営業用ちらし
・営業用資料
・自社サービスちらし

🖥 #09　フリーランス (現在)

2021年2月から本格的にフリーランスとして動き始めた☺︎

なぜ本格的にフリーランスになったかは、また別の機会に✎

☑︎ 主な使用ソフト / ツール
・Adobe Photoshop
・Adobe DreamWeaver
・Microsoft PowerPoint
・Google スプレッドシート
・Google ドキュメント
・Google Forms
・Chatwork
・Notion

ー　ー　ー　ー

☑︎ JimdoCafe 西新宿サイト

2017年からJimdoEvangelistとして活動。
2021年、拠点を池袋から西新宿に移して活動を本格化するにあたり、Jimdo Cafe西新宿サイトを新規で作成。

無料プランでテンプレートをカスタマイズ、シンプルな構成のWEBサイトにしています。

▶︎  制作内容
・新規WEBサイト作成 (構成 / ライティング (一部) / コーディング)
・WEBサイト更新

▶︎ WEBサイト
JimdoCafe 西新宿 (https://tapu2web.jimdofree.com/)

ー　ー　ー　ー

☑︎ 学生寮サイト

歴史ある都内の学生寮のWEBサイトリニューアル。
WEBデザイナーとアシスタントWEBディレクターとして担当。

ジンドゥーで作られていたWEBサイトを、ジンドゥーでリニューアルする初めての案件。
ジンドゥーならではのスピード感がある制作だった✎

▶︎ 実務内容
・制作前準備 (サイトマップ / WFなど資料作成)
・WEBサイトリニューアル (デザイン / コーディング (カスタマイズ) )

ー　ー　ー　ー

☑︎ シェアハウスサイト

ジンドゥーをカスタマイズして作られた、都内のシェアハウスWEBサイトの更新。

▶︎ 実務内容
・WEBページ追加
・既存WEBページ内コンテンツ追加

📌 最後に

"WEBデザイナーになりたい！" と思ってWEBデザイナーになったわけではなかったけれど、WEBデザイナーになってよかったと心から思っています。

もちろんWEBデザイナーを続けることがつらかった時期もあります。

数えきれないほどあるWEBサイトと自分のWEBデザインを比較して卑屈になったり…。
日常生活で目に入るデザイン (TV / ポスター / ちらし / 雑誌など) すら嫌になったり…。
勉強しても勉強しても足りないWEB制作に関する知識に焦ったり…。

そんな時期を乗り越えられるキッカケもまたWEB制作でした。
目の前の仕事と向き合うことで乗り越えてきたように思います。

乗り越えられたことが自信に繋がり、今が1番WEB制作が楽しいです。

私は『WEB制作歴 ＝ WEB制作スキル』だとは思いません。
制作歴が私より短くても制作スキルが高い方はたくさんいます。

その自覚と経験を強みに、これからも知識のアップデートを繰り返し、WEB制作を続けていこうと思います。

最後まで読んでいただき、ありがとうごいました！！！