Webデザイナー"~2ヶ月目"のリアルな話
Webデザイナーしているゆーや(@yi_lifsdesign)です！はじめまして〜
2019年9月からデザイン会社で働きはじめ、気づけば半年以上が過ぎていました。。
最近ふと、「あれ、そういえばWebデザイナーになったけど、その経験とか軌跡とかあまり残せてないな」と思いました。
日頃業務で使っているMacには日々の記録として、時間単位で何したかとか案件やっている間に感じたことメモとか一応残してはいるんですけど、それが次に繋がっていないような気がしたので入社後に経験したことをnoteに残していこう(&そろそろnote書いてみたい！)と考えました。
なので、Webデザイナーとしてデザイン会社で働きはじめてから何をしてきたのか、自分の振り返りと似た境遇の人への共有、これから業界を目指す人への刺激を目的に書いていこうと思います〜！
記事は1ヶ月ごとに書くのではなく案件がひと段落したタイミングで、その案件をメインに期間中に担当した仕事を題材(クライアント名とかは出しません)にしてどうやって仕事が進んだのか、僕はなにをしてどう感じた・学んだのか、などできるだけリアルに書いていきます。
ぜひ読んでみてください！
※仕事の進め方や体制などは会社によってまちまちだと思うので、あくまで参考程度に見ていただければ嬉しいです！
Webデザイナーとして働くまでの流れ
入社後について書く前にざっと何をしてきたか書きます。
前職はシステムエンジニアしてました。ただ2018年の年末前くらいから「デザイナーになって仕事したいな〜そっちの方が絶対打ち込める！」と思うようになり、スクールに通いはじめました。そのとき思い描いていたデザイナー像は、コードが書けるデザイナーです。
昔から画力はある方だったので、講師に今まで描いた絵を見せると「その画力があればロゴ制作できるよ」と言われ、講師経由でロゴ制作の案件をいただきました。
デザインもコーディングもできるようになりたかったので、ロゴ制作と並行してコーディングの勉強(HTML、CSS、jQuery、WordPress)、Adobe製品の勉強(主にPhotoshopとXDが中心)などしていました。
定期的に発表会があるスクールだったので、成長を証明するためにそのスクールのLPを制作しました。それが意外にも好評で、今なお実際に運用されており、一つ成果になったので嬉しかったです。(今改めてそのページを見るといろいろ悲惨…)
2019年3月にIT企業を退職し、半年のスクール期間を終え、独学でデザインの勉強や自分のポートフォリオサイトを作りながらコーディングスキルも磨いていました。
そして晴れてWebデザイナーとして会社勤めすることができました！！
※Twitterナンパで
最初の案件「コーポレートサイトのデザイン&構築」
いよいよ会社に入ってからの話です…！
未経験転職の先に待っていた最初の案件は、「コーポレートサイトの下層ページデザイン&構築(WordPress)」でした。
「おぉ、普通にがっつりやん」
って思いました。未経験で入ったのにいきなりこんなにできるの？って。
すでに各フェーズのスケジュールも決まっていたので、正直やり切れるか不安もありました。
ただいきなりデザインと構築両方できると思っていなかったので、やはり「楽しそう」という気持ちの方が大きかったと思います。
ここで案件の概要を簡単に説明します。
これからWebデザイナーになる！っていう方にはおおよその参考にしていただき、"スピード感"のイメージをつけていただけると良いのかなと思います。
※現場ではスピード感が一つ重要視されます…!
・クライアントの教育事業のコーポレートサイトのリニューアル案件
・外語学校なので多言語化が必要
・スケジュールは"公開までで2ヶ月"(※多言語化は別スケジュール)
・体制はディレクター、アートディレクター、デザイナー&コーダーのぼくの3人
・ボリュームはTOPページから下層ページまですべてで"14ページ"
・デザインフェーズは制作〜FIXまでで"実働12日"
・構築フェーズは社内テスト完了までで"実働17日"
・ワイヤーフレームは今回はディレクター作成のものあり
・構築指示書もディレクター作成のものあり(WordPress使用プラグイン一覧、各ページのどこにカスタムフィールド必要か、クライアント差し替え可能箇所の指定、など)
・テキストと画像はクライアントから提供(※一部こちらで用意する必要あり)
ざっと上記のような感じでした。他社さんはどうなのかわかりませんが、けっこうタイトだと思ってました。不安になるのも無理ないですかね…？
ただディレクターは前職でデザインもコーディングも経験してきた人だったので、「強い！何かあったら聞きまくろう」と考えてました(笑)
1.クライアントと案件を知る
案件はじまりました〜
まずは「ブリーフィング」です。クライアントと案件について説明をうけました。
クライアントのこと案件のことをしっかり理解できていないと良いものは生み出せないと思うので、事前に提案資料など読んでおき、ブリーフィングでクライアントの理解から今回の案件のことまで丁寧に説明してもらいました。
ブリーフィングってけっこう重要だと思いました。
その後の品質に関わる部分というか、おろそかにした分だけ品質もしくは制作スピードが下がるイメージを持ちました。
「どういうデザインにしたらいいか思いつかない」
「判断するまでに時間がかかる」
「納得感が出ないデザインになる」
…影響してくるところが多いと思います。案件初期からの参画ではなかったので、ディレクターに細々と疑問は聞いていたような記憶があります。
ただでさえ未経験で入って品質もスピードも低い状態からのスタートだったので、まずはひとつひとつのことをしっかり咀嚼してから取り組むことが大事でした。
2.デザイン制作
"井の中の蛙、大海を知らず"
Adobe XDを使ってデザインを制作することになりました。
今回の案件ではアートディレクターがTOPページと下層1ページを作ったあと、ぼくが残りの下層全ページ(12ページ)を展開する流れでした。
さあ、楽しみだったデザイン制作、各ページ作りはじめてアートディレクターからレビューをもらいました。
そこでぼくは驚愕しました。
「デザインだと思っていたことがデザインではなかった」
着眼点が違う！
入社までに少なからずスクールや独学でデザインの勉強をしてきたつもりでいましたが、いざ見てもらうと指摘が多く、その指摘すべてが「なるほど〜！」と思うくらい納得感があり、刺激がありました。
「写真の後ろにずらして配置している背景色付きのブロックはここでは意味を成していない」
「背景色や線のカラーが濃いので、情報量が多いと感じてしまう」
「テキストに対する選定画像が合っておらず、理解するまでに時間がかかっている」
「この部分のテキストがすべて同じカラーなので、優先度がわからない」
「テキストを効果的にアイコン化すると理解が早くなる」
「デザインが機能しているか」「いかに早く正しく伝わるか」という観点での指摘が多かったんですよね。
見た目をよくすることだけ考えていた？浅い考え方に新しい刺激が加わり、ワンランクアップできた気がしました。
その後も各ページごとにレビューをもらいながら、ときには残業しながら、なんとか社内FIX期間中までに全ページを終わらすことができました。。
デザイン制作で特に意識したところは以下です。
「トーンを崩さない」
「自分の中でデザインのルールを構築しながら作る」
「生かすところと殺すところをはっきりさせる」
ちなみにデザインを作るときにPinterestや同業の他社さんのサイト、同じカラートーンのサイトなどを参考にしていました。
あとはピンポイントでデザイン拘りたいところがあればGoogle画像検索で探して参考にもしていました。(Google画像検索わりと使う)
本来はデザインに対して構築指示書を作るというタスクがありますが、今回はぼくがそのまま構築することになっていたので、特に作りませんでした。
(※構築を外部パートナーに依頼する時にはめちゃくちゃ重要になります)
またクライアントからの提供画像を使うところはデザイン制作時では仮で置いていました。
テキストについてもなるべく「テキストが入りますテキストが入ります」ではなく、妄想してそれっぽい内容を入れられそうなところは入れるようにしていました。
「テキストが入りますテキストが入ります」でデザインすると、そのデザインの良さが薄れるので、時間の許す限りで妄想してテキストを入れていた方がいいかもしれません。
3.構築(WordPress)
デザインができたので、構築に入ります。
ここでさっそく構築に入るのではなく、簡単にスケジュールを立てることにしました。
というのも、全体スケジュールには「構築はXX月XX日〜XX月XX日」くらいでしか定まってなかったんです。
デザインフェーズも同じようなスケジュールの定め方(制作/修正期間はわかれてます)だったので、各ページどのくらいのスピード感で作ればいいのか漠然でした。なので、やりづらさは感じていました。
構築に入る前にもっと詳細にスケジュールを立てておくと楽だなと考え、「各ページの予定工数」「構築期間中どのページをどこで構築するか」を簡単に定めました。
※前職ITだったのでスケジュールやタスクの切り方が詳細で、そっちのやり方に慣れていました。
今回はHTMLで作った後にWordPress化する予定だったので、WordPress化の予定工数とスケジュールは別で想定し、各ページごとに作成にかかる工数を想定し、期間中どこで構築するかスケジュールに当て込みました。
そして構築に入りました。使用ツールはVisual Studio Codeです。
各ページごとにHTML→CSSという流れです。
独学中にも思っていたことなんですが、意外にCSSのクラス命名に時間が食われます…！(※ぼくは)
なので以下の記事を参考に時短を計っていました。
やはり各ページごとに予定工数を見積っておくと進めやすいです！(構築に限らずですが)
WordPress化前までの合計工数は、予定+1hくらいで収まりました。
各ページごとに見れば予定より超過したページもあれば短縮できたページもありました。
ただやはり、予定を立てることとその予定を意識して手を動かすことが結果を良くすると思います！
予定通りにいかなかったところは想定の修正ができるので。。
その後WordPress化はLocal by Flywheelを使って行いました。
スクールや独学ではMAMPを使ってましたが、導入から楽勝なので今ではもっぱらこれです。
制限付きですがライブリンク機能というものがあり、ローカル環境で構築しているページを外部から確認することもできます。
「よっしゃ、構築順調にいくかな〜」と思ってましたが、ここで想定外が起こりました。
「WordPress化の作業ボリュームを見誤った」
その主な原因はカスタムフィールドでした。
入社までにカスタムフィールドに触れたことがなかったのです。
※WordPress案件にはわりと付き物なので、WordPressやりたいよ〜っていう方はぜひ触れておくことをオススメします。
なので、カスタムフィールドまわりの作業ボリュームをイメージできていなかったので、その分残業やインナータスクのリスケでカバーすることになりました。。
そうこうしてようやくWordPress化まで完了し、サーバーにUPしました。
今回はテストサーバーの用意がなかったので、クライアントのサーバーにテスト用のディレクトリを作り、BASIC認証をかけてテストしました。
BASIC認証も初見だったので勉強になりました。
4.リリース前
リリース前もやることが多かったです。リリース1週間前くらいのところですね。
例えばテキストと画像の差し替えです。
テキストと画像は案件の終盤に提供される予定でした。また予定通りに提供されるかはクライアントの状況次第では遅延することもあるため、今回はすべてを一気に提供ではなく、段階にわけて提供されました。
ここでも少し想定外があり、提供画像の中でデザインにはめられるものがほとんどなかったこと、テキストのボリュームが想定と違ったところが多かったことです。
テキストのボリュームはこちらが前もって指定しておけば差異は減らせたと思うので勉強になりました。
テキストのボリュームが想定と違うと、差し替えたときにデザインが崩れるところがでる可能性もあるので、少し調整が必要になったところを調整しました。
画像については、どうしても当てはめられないところは別期間で撮影してもらうことになったので仮の画像を使い、そのほかのところは全力でトリミングとレタッチではめられる画像に変えました。
※提供画像をそのまま使うということはおそらくないと思うので、トリミングとレタッチスキルは早い段階からつけておくと良いと思います。
そしていよいよリリースです！
今回の案件は以下の記事にあるように、サブディレクトリにインストールしたWordPressをドメイン直下に表示する方法を採用しました。
手順としては簡単だったので、ドキドキしましたが問題なくいけるだろうと思ってました。
しかし！リリース前日の深夜にリリース作業を行った結果、真っ白なページが表示される事象が発生してしまいました。(WordPressあるある？笑)
深夜だったので頭が働かず原因を特定できませんでした…。仕方なく前の状態に戻しその日は眠り、次の日無事にリリースできました〜！！(凡ミスしてた)
5.案件を終えて
入社後の初案件、想定外はいくつかありましたが、無事にリリースすることができて嬉しかったです〜
デザインから構築まで担当したものが実際に公開されるのは、思っていた以上に達成感がありました！
また、公開後のコンバージョンの数字も向上したと代表経由で連絡があり、心の中で笑っていたと思います…！
案件を通じて学んだことは以下のようなところでした。
・案件の流れとスピード感
・ブリーフィング大事
・「デザインが機能しているか」「いかに早く正しく伝わるか」を考えて俯瞰してデザインする
・レビューがスキルを向上させる
・スピーディーに進むので、タスク管理とスケジュール管理かなり重要
・WordPressの知識が増えた(Local by Flywheel、カスタムフィールド、リリースまわり)
・作業の可視化・細分化と想定を見積れると、不安は和らいでいく
・深夜のリリース作業は危険
・自分でよくやったと思えるなら、素直によくやったと喜んでおく
この期間中に他にしたこと
他は主にインナータスクをしていました。ざっくりとまとめます〜
・弊社オフィスレイアウトの改善プロジェクト
弊社はワンフロアなのでMTGスペースが定まってない問題、将来的に社員が増えた場合にスペースが窮屈になるなど、いくつか改善の余地があるレイアウトでした。
そこで直近入社した若手3人でチームを組み、代表から改善のための予算を確保するために、企画書を作成しプレゼンしました。
(※社内プロジェクトなのでゆるい雰囲気です)
ぼくはフロアの改善レイアウトを考える役割を担いました。
主に以下のようなことをしました。
・まずはフロアのサイズやオフィス家具のサイズを計測
・改善項目を踏まえて、サイズ感や配置を精査
・そのまま使うもの、捨てるもの、買うものに分別
・Illustratorでフロアレイアウトを作成して企画書に追加
メンバー個々人の努力が実り予算を獲得し、フロアレイアウトを改善しました！(MTGスペース用意したり、芝生ひいたり、立ちスペース用意したり…楽しかった)
・弊社の会社概要パンフレット制作(デザイン制作前まで)
会社概要パンフレットが実はなかったので、ここでも若手3人でチームを組み、パンフレットを制作することになりました。
会社立ち上げ初期メンバーへのヒアリング(どんなパンフレットにしたいか)をまず行い、要望を聞いた上で簡単な企画書とワイヤーフレームを作成しました。
ここまではぼくが主体となり進めていました。
パンフレットのイメージを一言で表すと「タブロイドサイズのイカしたおしゃれパンフレット」です。笑
……
ちなみに現在はデザインまでできあがっており、PDFデータでは用意があります。
残すは色校正と最終納品だけですが、コロナの影響で中断しています。。
・弊社のコーポレートサイトのリニューアル案件(企画〜WF作成)
当時のサイトはWordPressテーマが使われていたのですが、なんともバラバラなテーマで情報設計もよくなかったので、リニューアルしたいということになり、ぼくと同月入社の同期2人で進めることになりました。
ぼくはディレクション、TOPページデザイン(&下層数ページ)、コーディングまわりを担当することになりました。
参考デザインを持ち寄ってどういうサイトにするか2人でミーティングをしました。その後企画書にサイトの目的や方向性とともに簡易ワイヤーフレームを記載し、代表の承認を得ました。
……
ちなみに現在はサイトリニューアルが完了しています。
クライアント案件が思いのほか重くかなりリスケをしましたが、なんとか作りきることができました！(これは本当に自分を褒めたい…褒めた！)
サイトはWordPressで構築しました。
おわり
ここまでご一読いただきありがとうございました！！
リアルになってましたか…？こんなに長々と文章を書くのははじめてだったのでうまく伝えられているか不安ですが、少しでも何かの役に立てれば嬉しいです！
このように今後も節目にnoteを残して外部発信していければと思ってますので、よければまた読んでもらえると喜びます！
「ここもう少し知りたい！」「情報交換」などあれば気軽にコメント、もしくはTwitterでお願いします！
(noteフォローも待ってます〜^^)
それではまた〜！コロナ乗り切りましょう〜！！
この記事が気に入ったらサポートをしてみませんか？