WEBサイトについて WEBデザイナーとしての就職を目指す方に伝えたいこと

共栄美装広報部です。世の中はコロナ禍により、これまで以上にテレワーク化が加速しました。
それに伴ってか、WEBデザイナーやエンジニアを目指す方がこれまで以上に増えていることも日々実感しております。

そこで今回は、WEBデザイナーとして働くことを目標として、今現在勉強中・就活中の方へお伝えたいことを綴りました。

その前に
WEBデザイナーのお仕事は情報を画像などのイメージで判別するのではなく情報を「噛み砕く」必要に迫られるケースが度々あります。
従って、今回の記事は敢えて画像を少なくテキストを多く、専門用語はすべてを噛み砕かずに書いています。
他の人にできない事をやってのけてこそ、専門職のお仕事と言えます。

WEBデザイナーを目指している方は、ぜひこの業界の人しか知らないであろうことにこの記事を通じて触れて頂けたら幸いです。

まず大前提としてお伝えしたいこと

この職種は誰でもできる仕事というわけではありません。

座りっぱなしの仕事は、現場でガツガツ働いて汗をかいている人からしたら「空調の効いた部屋でパソコンをカタカタとしているだけ」のお仕事です。だから一見、楽に見えることもあるでしょう。
ですが、実際のところは…

• WEBサイトに不具合があったらその原因を調べるために延々とソースコードと睨めっこしたり
• どこにあるのかよくわからないファイルを探す羽目になったり
• 聞いたことも見たこともないような技術をいきなり使わなければいけなかったり
• やりたくないと思うような変更もやらなければいけません

そんなお仕事です。
長時間、画面と向き合う訳ですからそのぶん目を使います。慣れない人は、この仕事を1日やっただけでも頭が痛くなってしまうでしょう。
理解してもらえる人が少ないうちは、相応の気配りも必要です。やはり専門家は少数になりやすいので、理解が得られないことも多いです。

仕様書に書いてある定義通りにウェブ制作をしてくれというような現場に恵まれないこともあります。
懇切丁寧に1から10まで指示してくれる訳ではなく、ふわっとした要望をただ丸投げされるような現場もあります。

そこでは言われた通りのことをやるのではなく、こっちから物事を強引にでも決めていかなければ話が前に進みません。
だから限られた情報の中からデザインカンプを作成し、時間がない中で必死に組み立てているのに、イメージと違ったらクライアントの鶴のひと声で1からやり直しなんて事も日常茶飯事です。

こうなってくると、実際に求められるのはスケジュール管理能力やコミュニケーション能力だったりします。

だから
「外回りの営業が嫌だ」
「人と関わるような仕事をしたくない」

こういった事を考えてWEBデザイナーへの就職をご検討の方は、面接などでどんなお仕事なのかをしっかりと聞いておかないと後から後悔することになるでしょう。

もちろん、技術力は確かに大切です。
しかし、それよりも大切なことが沢山あります。

泥臭いことを惜しまずにやって、技術があることを鼻にかけず、謙虚な姿勢で物事に取り組める人。
何より相手の時間を大切にできる人。

そんな人が成長し、評価を得て、初めて1人前のWEBデザイナーとして認められ、頼られるようになっていきます。

ここまで読んでくださった方なら、生半可な覚悟で目指すようなものではないということは、なんとなく伝わったかと思います。

それではここから、ベンチャー企業で長年働いてきた私の視点から「今WEBデザイナーに求められていることはこうではないか」ということをお話します。

セマンティックwebを理解した上でデザインカンプ通りにレイアウトができる

WEBサイトの組み方は様々ですが、最終的にお客様のデバイスに届くのは、HTMLとCSSで構築されたフロント画面です。
HTML5とCSS3が普及した今、構築していく上で避けては通れない道があります。

それはセマンティックwebを理解できているかということです。

HTMLを構成するタグには、それぞれ意味があります。
この意味を理解せずに、ただ単に文字を大きくしたい太くしたい、目立たせたいと思ってマークアップをしている方は要注意です。

例えば、見出しタグ(h1~h5)があります。
見出しとは、言葉の通り、コンテンツの内容を見出すためにあります。

そしてstrongタグというものもあります。

どちらも文字を太くしたり、大きくしたりするものですが、そうして目立たせる目的は異なります。
文章の途中に現れる太字(strong)は、文章の途中や重要な言葉だから強調したいのであって、見出しのようにコンテンツを見出すことが目的ではないのです。

セクショニング・コンテンツの使い分けも大事です。
たとえば補足を書く時はasideというものも使いますが、補足はあくまで補足であり、それをメインで伝えたいというわけではありません。

これらの意味を理解していなくても、一応デザインカンプの通りにレイアウトすることは可能です。
ですがタグに意味を持たせていなければ、検索エンジンの琴線に触れなくなるかもしれませんし、綺麗に書いたつもりでも、そのタグを見て他のデザイナーが何を意としてマークアップしたのか理解するのに時間がかかってしまいます。
それでは結局、中長期的には納品先のクライアントを満足させることはできなくなっていくでしょう。

これは作業をしているWEBデザイナーにも後から降り掛かってくる問題です。
例えばソースコード。

もしも汎用ブロック要素であるdivタグだけで組んでいると、CSSを適用させるためにclassやidをつけてセレクタを定義する必要があります。
ですが適材適所に親子セレクタを設定したり要素セレクタを使えば、ダブルクォーテーションで括った記述が減って肉眼でソースコードを読むのも随分と楽になります。

さらに、コメントアウト文を必要以上に書かなくても「何を意図してその記述をしたのか」をわかりやすくできます。
わかりやすい、それは再編集性が高まることにも繋がります。

私は開発において、この再編集性をとても大切にしています。

ここで、ちょっと想像をしてみてください。
もしもECサイトを運営していて、一枚の画像の中に「画像化されたテキスト」があるとどう思いますか？

そして、その画像化されたテキストにこんな感じに金額が入っていたらどうでしょうか？

もし税率変更となった場合、その画像の編集用ファイル(Photoshopを使う場合は.psdですね)を探して一枚一枚編集し直してjpg形式に名前をつけて保存しなければいけません。
その画像が連続で50個続いていたら、1工程につき4分かかるのだとしたら4×50＝200分の時間を、金額修正のために浪費するという事になります。
画像編集用のファイルが都合よく見つからない事もあります。こうなると、さらに面倒ですね。

そうして50枚もの画像を保存し、サーバー上にアップロードし、きちんと名前を間違えずに画像が上書き出来ているのかどうかを、F5キーを押しながら何度も何度も確認する・・・こんなことをしていたら、日が暮れてしまいます。

これは再編集性が低いということです。

ですが、仮に背景が違うだけで、あとは金額を手打ちで修正するだけで済んだらどうでしょうか？
金額なのだから、呼び出すやり方もありますよね。

このやり方なら、税率を変えるだけであっという間に、ページ内の全ての金額が変更できます。
きちんと構築されているECサイトであれば、20分もかからない作業になります。

工数に雲泥の差があり、かつ手作業によるミスと遭遇しにくくなっている事が、なんとなく想像がつくと思います。

自分の時間を大事にすることは相手の時間を大事にすることに繋がる

WEBデザイナーの時間がなくなってしまうことは、＝供給できる時間が無くなってしまうということです。
ですが、ここでデザイナーの事情やできること・できないことを明確にしておけば、自分も相手も時間を有効に使うことができます。

少し前のお話に戻りますが「画像化されたテキスト」問題については、大抵のクライアントはよくわかっていないものです。
これを度外視した指示が飛んできた場合は、即YESと頷くのではなく、上記事情を説明した上でそれでも尚やるのか？
を共に考えなければいけません。

ここは交渉力が求められる場面です。

画像化されたテキスト以外にもまだまだあります。
例えば静的リソースと動的リソースの差があります。

phpなどのサーバーサイド言語でコンテンツを動的生成できれば、変更も加えやすくなるでしょう。その反面、セキュリティホールは大きくなり、ページの読み込み速度にも影響してくるので工夫が必要になります。

かたや、htmlなどの静的リソースならば読み込みは早いですが再編集をする時にひと手間増えます。
この良し悪しを吟味した上で、どの技術を使って構築するのかを決めていく必要があります。

これらの要素の問題を一つひとつクリアしてデザインに関する最大限のリソースが供給できるようになってからも、考えるべきことはまだまだあります。

デザイン4大原則について

デザイン4大原則は大きく分けて、近接・整列・反復・対比です。

• 近接：意味合いのコンテンツ同士は近接させ・・・
• 整列：画像やテキストをばらばらに配置するのではなく左寄せ、中央寄せ、右寄せにするなどルールをもたせて整列し・・・
• 反復：その繰り返しをすることで統一感を持たせます。ナビゲーションバーでメニュー切り替えをさせるときに、そのナビゲーションバーが同じものが使われるのはこの反復という法則に則ったものです。
• 対比：例えば見出しと段落では同じフォントサイズにするのではなく、異なるサイズにします。要素によって優先度は異なる訳ですから、ここで対比をさせることでメリハリをつけます。

私はWEBサイトを作る上で、この原則を立ち返るべき基礎としています。基礎が出来ていないデザインには、悪い意味でどこか手作り感のようなものが不揃いなサイトが生まれてしまいます。
※あえて枠に収めずにはみ出させるということは手法として存在します。

上記のうち対比については
サイズについては、黄金比や白銀比など様々な法則が存在します。
カラーについても、コントラスト比やメインカラー/ベースカラー/アクセントカラーの比率のお話もあります。

ですが、これらの専門用語はすべてデザイン4大原則に帰結するものだと私は考えています。
もし興味がありましたら、これらの言葉はGoogleなどの検索エンジンで調べてみてください。

マルチデバイス対策について

そのバランス感覚もパソコンタブレットスマートフォンそれぞれに異なる対応が必要となります。
PCの画面は横長ですがスマホはたいてい縦長です。
だから同じようにコンテンツを横並びにするにしても、列数を調整する・場合によっては折りたたむなどの工夫が必要になります。

視線誘導を意識したWEBサイトを

人間の目は、たいていのコンテンツを左上から右下に向かって進めていくものです。
そして、一度に大量のものを即座に記憶することはできません。

マジカルナンバーというものがあります。
これはアメリカの心理学者ジョージ・ミラー氏が発表した人間が瞬時に覚えることができる短期記憶の限界容量のことです。
ミラー氏はその容量を[7±2]であると発表しています。

この数については諸説ありますが、ひとつの場所に2桁以上のコンテンツを同時に置いても、たいていの方はその限界を超えてしまっているのでストレスを感じてしまうでしょう。
つまり多すぎるコンテンツは、ページの回遊性を損なってしまうのです。

そこで、コンテンツが一箇所に集中しないように分散させ、スクロールに応じてアクションをつける等の味付けも必要になるでしょう。
画像とテキストを繰り返す場合は「敢えて」左右交互に繰り返すという手法もあります。

分類体系(タクソノミー)を考えた構築を

WEBサイトのコンテンツを増やしていくと、ジャンル分けが必要になってきます。
1つのカテゴリに収まるものがあれば、収まらないものがあります。

もしも[事務用品]と[椅子]というグループがあるとして、事務椅子はどちらのグループに入るでしょうか？
こんな時に役立つのが、タグの存在です。

1つの箱に入れるのではなく「これでもあり、こうでもある」という、グループを横断した分類づけに柔軟に対応してくれます。

ユーザーも、目的のアイテムを探すためにこのカテゴリーを使います。
この紐付けを合理的に考えることはそのサイトのアクセシビリティ向上にも繋がります。

検討すべき要素はまだまだ沢山！

WEBサイトを作る上で検討すべき要素と心構えについてお話しました。
最後にWEBデザイナーに求められるであろう技術について箇条書きではありますがここに綴ろうと思います。

プログラミング言語では

• HTML
• CSS
• Javascript
• PHP

この4つを、完全にフルスクラッチできるまでいかなくてもどのような動きをするのかは理解しておく必要があるでしょう。
この他にもフレームワーク（Vue.js、React.js、Node.js、Bootstrapなど）がありますが、その職場で実際に使うかどうかは面接してみるまでわからない事です。そして、コーディング規則はどのようになっているのか？その職場でメインで使用しているのはどんなソフトウェアなのか？これらを確認しておきたい所です。

次にAdobe Photoshopなどの画像編集ソフトやAdobe XDなどのワイヤーフレーム作成ソフトなども使えると心強いです。
資格も国家資格や民間資格など様々ありますので、それらの勉強を通じてレベルアップしていける事も多々あります。

こうして培った技術を組み合わせて作ったポートフォリオは、職務経歴書よりもWEBデザイナーの価値をグッと上げる強力な武器となってくれるでしょう。

網羅思考に囚われない

私自身もそうなのですが、デザイナーはすべての技術を使いこなす訳ではありません。
すべてを勉強して揃え切った頃には応募年齢を過ぎてしまっていた・・・なんて事にならない為にも、何が今自分にとって一番の機会損失なのかを常に考えながら動くことが大切なのです。

私はお仕事をするにあたって、求められる事と、それを実現し得る技術の橋渡しをしていけたらと考えて動いています。
そしてこの会社にも運営していく上での理念がありますが、面接の場ではぜひWEBサイト制作にあたっての「あなた自身の理念」をポートフォリオとともに、ぜひ語ってみてください。

それが採用担当者の心を動かす交渉力になる事もあります。

以上、ベンチャー企業で働くWEBデザイナーから、これからWEBデザイナーを目指す方にお伝えしたいことを綴りました。
細かいことを言い出すとまだまだ語り尽くせないことが沢山ですが、一番大事なことをお伝え出来たので本日はここで筆を置かせていただきます。