数年前からなんとなくWeb関係の仕事やってみたいなーと思いながらもなかなか決断できず、前職でもなんか辞めづらい雰囲気を感じながら今年、未経験ながらついに転職しちゃいました。
ところどころ自分語りが含まれますが、もし同じ境遇の方がいましたら何かの参考になればと思い書き綴ります。
結構長くなったので、時間が無い方は目次で興味のあるところだけ飛んで見てみてくださいね。
そもそもWebデザイナーってどんな仕事してるの？
私もまだWeb業界に入って1社目でしかも数ヶ月しか経っていなく、さらにその職場はガンガンバリバリ新しいことやっていくぞー効率化も目指すぞーって感じのベンチャー気質でもありません。
そのためあくまで一例ということで正確なことを語るのは難しいのですが、大まかには以下の業務を行っています。
- 自社が管理している各Webサイトのリニューアル(兼 レスポンシブ化)及び新規企画・制作
- 自社の事業サービスに関するブログ及びSNSへの書き込み(各人週1程度)
- バナー作成
- 自社管理Webサイトのアクセス履歴等のチェック(SEO)
- 自社の事業サービスに関する動画制作・投稿
となっています。
Webデザイナーとは言っても、今はコーディングの知識も必要としている時代です。
また企業にもよりますが広報的な役割も担っています。
最後の動画制作についてはWebデザイナーとはちょっと違うので、今回は省きますね。
それぞれの詳しい内容については後述します。
未経験からWebデザイナーを目指そうと思ったきっかけ
私は10年近くもの間、実家の地元の商社で勤めていました。
しかもWebに直接関係のない事業を営んでいた会社だったので、Webに触れる機会は多くありませんでした。
仕事内容は、どちらかというとシステム管理者に近い、けど通常の事務・総務的な仕事も多かったという、いわゆる何でも屋さんのようなことばかりやっていました。
業務効率化を目指すためにAccess VBAで社内向けの小型システムを作ったかと思えば、入札申請やら仕入・売上データの整備、はたまた倉庫の入出荷作業までしていました。
なんだか良いように使われていた感もあったのですが、”何でも屋”がゆえに一度任された仕事が「うちのホームページを作ってみないか」という内容でした。
私はそれまで、趣味でもWebページを独学で作ったりしていたこともあって、それを会社の人にチラッと話してみたことがあったので作ってみないかと聞かれたのだと思います。
正直HTMLやCSSに精通していたわけではないので、任されて嬉しい反面 本当にできるのかなと不安に感じることもありました。けど、当時の会社ではなかなか無い珍しい機会だったので、コーディング知識についてはネットで色々調べながら、2ヶ月かけてやっと完成させました。
企業向けとは言っても、コンテンツが少なく複雑なことはする必要がなかったため、HTMLとCSS、サンプルをコピーする程度の少しのjQueryだけで何とか作ることができました。
そして上司と社長に見てもらった際に、「良いじゃん」とお褒め頂いたのでそのまま公開となりました。
この流れを通して感じたことが、
- ホームページをデザインするのとコーディングする作業が楽しい
- 作っていくうちに自分の知識が深まっていく楽しさ
- 完成した後に他人に評価される嬉しさ
といった、いわゆるテンプレみたいなやり甲斐を感じたのです。
そこからまた数年はその職場で頑張っていたのですが、Webの世界は常に新しいことをやっていて、見れば見るほど魅力的だなと。隣の芝生は青いとはよく言われますが、そんな感じだったのだと思います。
そしてついに昨年末、転職活動を本格的に始めて、内定が決まり退職届を出しました。
その当時の会社にも色々お世話になったのですが、自分のやってみたいことに挑戦したいのと、よりよいWebデザインで皆に喜んでもらうためにもっと勉強していこうという気持ちが強かったのです。
Webデザイナーとして入社してから
ここから実際の業務の話となります。
完全独学でやってきた知識を実際の業務で活かせるのか不安でしたが、結論から言うとめちゃくちゃ活かせます。
独学やってなかったら本当に仕事にならないくらいです。
Webサイトのデザイン業務について
これは会社によって変わるのですが、うちの会社ではIllustratorを使ってWebデザインをしています。つまりWebページの予定完成図を描くわけですね。(カンプ、モックアップとも言われます)
しっかりしているところではワイヤーフレームという下書きとも言える設計図からデザインするとは思いますが、今の会社では完全に各個人で最初からパーツを描きデザインを作っていきます。
数日〜1週間近くかけて(意外と時間が掛かります)トップページ案が出来たら、画像形式に書き出しその部署チーム全員に確認してもらいます。
OKであれば、そのままコーディング作業にうつります。不足があったり、目的にそぐわないUIだったりデザインだったりすれば、もう一度デザインし直してね、と言われます。
私もまだ入社したばかりで2回しかWebデザインをしていないのですが、いずれも一発でOKをもらえることはありませんでした。全体のバランスが悪い、フォントサイズが全体的に変、など。
2度目でやっと一応”可”レベルでOKをもらってコーディングに移っています。
また、リニューアルだけでなく新規サイトの企画も時々行っています。
自社のサービスをより認知してもらうために、別の方向性でアピールする必要もでてきます。
例えば商品を売り出したいときに、全体的に老若男女問わず売り出したいけどこの商品は特にこういう人達に絞ってターゲットとしたいから、その人達に向けて特化したサイトを作ろう！といった具合です。
定期的にミーティングを行うので、その際に提案してみることが多いです。そこで「いいね！それをするなら、あとこういうのを付け加えたりしたらどうだろう」などといった意見も出つつ話し合いを通じて、そこから具体的にデザインを行います。
デザインはチームだけでなく、上層部にも承認を得ます。チーム全員が良いと思っても上層でNGを食らうこともたまにあります。そうなれば受け入れるしかありませんね。
Webサイトのコーディングについて
デザインがOKであればコーディングに移ります。
当然、ここが一番HTMLとCSSの独学が活かされるところですね。
今の会社ではWebサイトの完成・公開までほぼ任されます。
一部、PHPで動作させるところがあるのですが、そこだけ別部署に依頼をかけます。
テンプレート等を使うのが効率が良いのですが、ほぼ白紙の状態からテキストエディタで作成しています。
私は今のところリニューアル業務だけやっているので、旧サイトのHTMLファイルから一部引っ張ったりしていますが、それでも最初は大変でした。
実は私の場合、デザイン段階で少し背伸びをしたWebデザインをしたと言いますか、結構変わったレイアウトで作っちゃった所もあったために、いざCSSを組もうとしたらこれどうやって実装するんだ･･･と悩んだこともあります(笑)試行錯誤してなんとかなったので良かったですが、デザイン段階で実際にコーディングで実現できるかよく考えながらデザインした方が後々大変な目に遭わずに済みます。
これは自分がコーディングする立場じゃなくても重要なことです。揉める原因となりそうですしね。
コーディング環境としては、職場ではiMacでmiテキストエディタ今はBracketsを使っています。
自宅ではDreamweaverですが、テキストエディタもシンプルかつ高機能なものが多くアリですね。Windows環境であれば昔は秀丸エディタとか使っていました。
あと、最近知ったのはEmmetという、HTMLのコーディングを省力化できるツールです。実務ではまだ使っていないのですが、実務でも積極的に活用するようになり、Emmet対応のエディターを使えばこんなことができちゃいます。
div
↑これでTabキーを押すと･･･
<div></div>
↑自動的にこうなります！
div*3>a
↑さらにこう書くと･･･
<div><a href=""></a></div>
<div><a href=""></a></div>
<div><a href=""></a></div>
ということができちゃいます！
まあEmmet解説サイトではないのでここまでにしますが、地道にタグ打ちするよりもはるかに効率化できちゃいますね。
Emmet対応エディターは以下の「Emmet@JAPAN」様のリンクをご参照ください。
http://emmet.56doc.net/#part5
このように色々Webについて調べたりしていくうちに、良いツールや知識との出会いがあったりします。
こういうのが面白いのでやる気が出てくるのですよね。どの業界でも日々勉強ではありますが、Web業界は特にアップデートスパンが短いので、それを楽しめるのであればこの業界もアリなんじゃないかなと思います。
ブログやSNSへの書き込み業務について
これについても会社によりますが、うちの場合は自社提供しているモノの紹介をブログで書き込み、それをTwitterやInstagramに投稿したりしています。まさに今どきのブログ・SNS集客ですね。
SNSにはブログの他に、自社キャラクターを作ってそのキャラクターのイラストを投稿し、企業のイメージ化を図ったりしています。
SUUMOのスーモくんとかローソンのPontaくんにあたるものですね。
キャラクターマーケティングは売上アップのために重要な要素となりえると言われていますが、まだ今の会社ではガッツリ踏み込めていなく、とりあえず作ってみて投稿し続けている、という段階です。
せっかくのキャラクター立ち上げなので、上手く活用できる方法を模索中です。
最近はTwitterでフォロワーを増やそうとしています。
せっかくのコンテンツも見てくれる人がいなければ意味がありませんよね。
原始的な方法ではありますが、Twitter検索で「地域名+商品のジャンル」で検索して興味がありそうな人をフォローしていっています。
フォロー前にプロフィールと最近のツイート内容を見て、ネガティブなことばかり呟いていたり危なそうな人であれば避けます。自社サービスについても理不尽に悪く言われる可能性がありますので･･･
あと、フォローして一定期間フォローバックしてくれない人も順番にフォロー解除していってます。でないと、フォロー数ばかり多いだけのアカウントって、ちょっと怪しく見えてしまいますからね。
今のところ、そんな感じです。
バナー作成
分かりやすく「バナー作成」と言いましたが、広告でよく見るようなものじゃなく、Webページの一部で使う画像や、ブログのトップに置くイメージ画の作成がほとんどです。
とは言っても、結構デザイン力が試されるところであり、手は抜かないようにしています。
そもそもWebデザイナーが最初にバナー作成を求められるのは、Webデザインの基本レイアウトとバナー内のレイアウトが基本的に同じだから、というところのようです。
なので、そこそこの規模のものを作る前に、まず基本を押さえようということで新人には手軽なバナーからやってもらう所が多いようです。(うちはそうでもありませんでしたが･･･)
視線の入り口は左上からと言いますが本当にその通りで、大事な見出しを左上に、次に重要なものを上か左に、重要でないものは右下に･･･といったことを意識しながら、Webデザインもバナーも作成していきます。
る側に一番伝えたい事ほど左上に、です。
また、余白も重要となります。レイアウトで空いているところがあると何かを入れたくなりますが、それは見づらくするだけなので、適度に余白を意識することも基本です。
･･･とまあ、あまり語りすぎると話が逸れそうなので、デザインのもっと細かい話はまたの機会にでも。
自社管理Webサイトのアクセス履歴等のチェック(SEO)
これ、実は私はまだ任されていません(笑)
でもあえてやっている業務として入れたのは「SEOの勉強もしっかりやって、アクセスアップのアイディアを出していってね」と言われたためです。
最初はSEOなんてGoogleやYahooのインデックスに登録してサイトマップしっかり作ったらそれでいいでしょ？なんて考えていましたが、それはもう古すぎる考え＆ほぼ効果無しでした。
SEOについてはまだ勉強し始めたばかりなので詳しく語れませんが、Webデザイナーの立場からしても意識すべき重要なことであると考えます。
そもそもデザイナーって何のためのデザイナーなの？ってところを突き詰めていくと、見た目だけを考えるのがデザイナーではなく、いかに人が扱いやすく作れるか、そしていかにそこに人が寄ってくる流れを作れるかが本質的な職務ではないかと思うのです。
まだ数ヶ月目の新人が偉そうなことを言いましたが、色々なWebデザイナーの方々のブログを拝見した後に色々考え、自分として行き着いた考え方がそれでした。
なので、アクセス履歴をしっかりチェックし、直帰率(最初に見たページだけですぐ出て行った人の割合)が高ければなぜそうなっているのかを考えたり、アクセスアップのために皆にとって本当に必要なコンテンツが揃っているか考え直したり、逆に役立ちそうで実際はあまり役に立たないようなページを改善するか消してみたり･･･と、色々と対策することは大事だと思います。
SEO対策はWebデザイナーになる上で必要な知識であると強く思います。
デザインが良くない、と言われたらどうするか
これも会社や個人の考え方にもよって異なるのかもしれません。
まあ、却下されたら普通に気分が沈みます(笑)せっかく1週間くらいかけてWebデザインしたのに･･･最近のトレンドを取り入れたつもりだったのに･･･って感じです。
でもこういう経験って結構大事だったりします。
私は今まで前職でホームページやパンフレットデザインを手がけてきたことはあったのですが、指摘されても少し修正を頼まれるくらいで済み、基本的にはOKよ〜って感じで承諾をもらえました。
まあそれが今は流石にデザインを専門にやっているだけあって、そもそものデザインでバランスが悪い、フォントサイズが合っていないetc... 自分のデザインをちゃんと見てくれた上での指摘でしたが、最初はどうしたものかと思いました。
最初は自信をもって提出したものです。自分の全てを出したつもりだったので。それが「良くない」と言われれば、どこがダメだったんだろう･･･と考え込みます。
指摘する側も具体的にどこをどうするべきとは言ってくれないので(他社だと細かく指摘してくれる所もあるでしょうが)、結局問題点が何かがわからずほぼ全面作り直しでやっとOKをもらっていました。(それでも気になる点はあったそうですが)
何度も言いますが、
「どこが良くないのか」
「どのバランスが良くないのか」
その点で一番頭を悩ませましたね。
色かな？確かにカラーコーディネートの知識に明るくはないし･･･いや、フォントの種類か？言われてみれば不自然ではあるけど、じゃあ代わりにどのフォントにすれば･･･と悩み所はたくさん。
だからやったこととしては、ネットでWebデザインの例だとか、Webにおけるフォントサイズのバランスだとか、Webにおけるレイアウト、Webにおける余白のとり方･･･仕事しながらかなり調べまくりました。
色んな留意点を取り込み自分のデザインに当てはめてみたら、確かにマシな感じにはなったなと。
それで提出してやっとOK。
(良い意味で)大分変わったね、と。嬉しいですね。
苦労はしましたが、同時にこれは本当にデザイン力も鍛えられるなという自分自身への期待も膨らみました。
うん、楽しい。
続けられ、成長するためには楽しめるかが重要
最近はもうずっと、家でも仕事中とあまり変わらないことをやっています。
仕事でコーディングしているのに、家でもコーディングしていますから。
なぜそんなことができるのかというと、やはり楽しめているからだと思います。
楽しめているということは、モチベーションをもって成長できる見込みがあるということだと思います。
そして趣味が仕事で活かされるというのも大きいですね。
よく趣味を仕事にすると嫌いになるとも言われますが、私の場合は当てはまりませんでした。
あとはまあ、職場で嫌な人がいないってのも大きいです(笑)
人間関係って仕事において大事ですからね。
良い人に恵まれると自然と良い仕事にも恵まれます。
私はまだまだ知識も経験も足りないので、実務や趣味を通して本当の意味で必要とされればなと思います。
デザイン力はもちろんEmmetもちゃんと使いこなしたいし、SCSSもJavaScriptもjQueryもVueもPHPもPythonも習得したい(多分こんなにたくさんは無理)。
そしてそれで誰かが喜んでくれるなら、次のやる気にも繋がってきます。
また時間が経って色々と考え方が変わったり膨らんだりしたら、機会があれば書き残せたらなと思います。ここまで読んでくれてありがとうございました。
それでは今日はこの辺で。
