#はじめに
この記事を書くうえで、筆者なりにWebデザインとは何かを考えました。
Webデザインとは、Webページ内や画像の中で伝えたい情報を、正しく・わかりやすく伝えるために、文言や画像などを設計・配置することです。
2020年4月、筆者は新社会人兼Webデザイナーになりました。
筆者は学生時代、バックエンドのプログラミングメインで勉強しており、HTML・CSSなどのフロントエンドやデザインに関してはほぼ初心者の状態でした。そんな筆者も、入社してからの4ヶ月間で、バナー作成やWebページのデザイン、Webサイト制作などを経験してきました。まだまだ駆け出しですが、そんな身だからこそお伝えできることもあるのではないかと思い、こうして記事を書いている次第です。
この記事では、Webデザインをしていて感じたことを
- コーディング編
- デザイン編
の２つに分けて書いています。技術的なことの共有ではなく、コーディングやデザインについて、研修や実務を通じて考えた心構えと初心者なりの気づきの紹介ですので、ぜひ気を楽にしてお読みください。
##コーディング編
就職直後の2ヶ月間、筆者は外部研修にてWebデザインの基礎を学びました。
その研修の最終目標は「実際にありそうなWebサイトをひとつ完成させる」というものでした。掲載するコンテンツを自分で用意し、最終的にページ同士のリンクや挙動も全て実装します。コンセプトやデザインは全て自由、画像やアニメーションの使用も自由、本当に縛りは一切なかったです。なお、作業は全て個人で行っていたため、誰かと一緒に作業することはありませんでした。
結果、サイト制作は期限内に完了しました。制作期間はテーマ決めから完成まで3週間でした。
そんな中で「コーディングってこういうことなのかな」と思ったことを、以下に紹介していきます。
###ひとつ完成させるだけでたくさん成長する
そもそも今回の制作課題で必要な知識は、コーディング面だけで
- HTML
- CSS
- JavaScript
の3つでした。筆者は今まで、CSSなどのフロントエンド寄りの言語は触ってきませんでしたので、思い通りのデザインを再現するのに苦労しました。さらに、サイト内での素材を用意するために、PhotoshopやIllustratorなども用いる必要がありました。そういったツールを初めて使ううえで困ったのは、何ができて何ができないのかがわからない、何という単語でどう調べれば知りたいことが出てくるのかがわからない、ということでした。
「自分がやりたいことを実現するためには、どのツール・言語を使って、何をすればいいのか？」
というのは、初心者によくあることだと思います。
そこで筆者は、実際に自分がやりたいデザインが実装されているWebサイトを探しました。一般公開されているサイトはブラウザの開発用ツールなどを使うことでソースコードを見ることができますから、参考にするにはもってこいです。また、自分が知りたい言語についてまとめられているサイト内を地道に検索し、応用できそうなソースを探しました。
もちろん、こういった作業は時間と根気が必要です。運よく探していたソースを見つけられたとしても、そのまま流用できることはほぼありません。どうしてそういう記述方法になるのか、どの宣言がどの部分と連動して動いているのかを理解し、自身の制作物に反映しなければ、思い通りのものは出来上がりません。
しかし、苦労して得た知識や経験は、忘れにくく理解が深いです。サイト制作にはたくさんの知識が必要ですし、問題の対処法などは経験して初めて身につくものだと筆者は考えています。つまり、ひとつのサイトを完成させることで、たくさん成長することができるということです。
また、サイト制作はひとつの成功体験でもあります。ひとつやり遂げることで、その後何かを作るとなった時にも、作業を進めるモチベーションに繋がると思います。
###何が作りたいのか決まったら、あとは書くだけ
サイト制作に限らず、何かを作る時の作業の流れを考えてみます。
- コンセプト・テーマを決める
- どんな人が使うものなのかを想定する
- 具体的にどんなサービスを提供するのか決める
- サービスを実現するためにやらなければいけないことをする
大まかにはこういった作業工程を踏むのではないでしょうか。これをサイト制作に置き換えてみますと、
- サイトに掲載する内容や雰囲気を決める
- どんな年齢層・職業・思想の人たちにサイトを見てほしいのかを考える
- 1で決めたことをどのように提供するのか、サイト内に記述する内容や、サイト自体の挙動などを具体的に考える
- 3を実現するためにプログラミングを行い、実装する
こういった作業工程になります。ざっくりまとめると、1,2でサイトそのものをデザインし、3はデザインを実現するために必要なプログラムの動きを考える、4は3で考えたことをコードに起こす、といった感じでしょうか。
プログラミングをしたことがない人にとっては、4の工程が非常に憂鬱で難しいもののように思われるかもしれません。先に書いたとおり、どんなコードを書いたらいいのかを調べるというのは、非常に手間も時間もかかることです。しかしWebサイト制作の大きな流れの中で見てみると、実際にコードを書いていくという工程は最後の最後にあたります。
つまり、何が作りたいのか、どんな風に動くものが作りたいのかが決まれば、あとは既存の道具を使って実現するだけということです。地道に調べる作業は必要ですが、逆に言えば調べれば出てくる情報だけで終わらせることができる工程です。時間はかかるかもしれませんが、ゴールはもう見えています。あと一踏ん張り、頑張りましょう。
###誰が見てもわかりやすいコーディングを！
無事書いていたプログラムが動いた時は、すごく嬉しいですよね。しかしそこで終わりにするのではなく、できれば誰かにソースレビューをしてもらうと良いです。
ソースレビューを前提とすることで、なるべく多くの方にスムーズに理解してもらえるようなコーディングを心がけることに繋がります。多くの人に理解してもらえるコードを書くことができるようになれば、集団で開発することになったとしても、開発速度やクオリティを落とさずに済みます。何より、将来自分が書いたプログラムを見た時、この記述はなんだろう？と疑問に思うことが減ります。コメントアウトなども駆使しつつ、他人にも将来の自分にも優しいコーディングを心がけましょう。
余談ですが、筆者の場合は、自力で書いたHTMLを研修先の講師の方に見ていただいた結果、display要素の使い分け方・リスト要素の宣言の仕方が一般的ではなかったことが発覚しました。タグや要素の正しい役割を理解していきたいものです。
##デザイン編
はじめに書いたとおり、筆者はデザインの勉強はほぼしたことがなかったため、チームの先輩方からたくさんのアドバイスをいただきながら実務をこなしています。そんな中で「ここに気をつければ、多少はまとまったデザインが完成するのでは？」という点がいくつか見えてきましたので紹介します。
###配置は一定のルールで
Webデザインとは、なにか伝えたい情報が主軸にあり、それをどう見せるかを考えるものです。つまり、デザイン性に特化しすぎて伝えたい情報が正しく伝わらない・伝わりづらい、という事態は避けるのが無難です。
では伝わりやすいデザインとはなにかを考えてみますと、一定のルールの下で配置された情報は流れや関係性がわかりやすく、とても伝わりやすいように思います。新聞の記事などが最たるものですね。
筆者がこの一定のルールを作る上で気をつけているのは、
- 物の配置はどこかに揃える
- 空きスペースは統一する
ということです。
文字の先頭位置や画像の配置などを揃えることで、コンテンツをひとつの塊として表現することができます。また、塊同士の空きスペースを調整することで、情報間の関連度や関係性を視覚的に表現できるため、おすすめです。
ただし、塊同士の空きスペースを数値で統一したにもかかわらず、揃って見えない場合があります。そういった時は数値にこだわらず、目で見て揃っているように位置調整してください。ズレて見える原因としては、目の錯覚やコンテンツの色味など様々な理由が挙げられるのですが、特性を理解して配置してあげることで整った見た目が実現できるようになります。
###ルールを破ると目立つ
一定のルールに従って配置された情報は流れを表現しやすい、と上で書きました。裏を返せば、ルールを破って配置したコンテンツは流れから独立するため、非常に目立ちます。この現象をうまく利用すると、ユーザーの目を引きたいものをうまく目立たせることができるため、非常に有用です。
最近筆者がやっているルール違反は
- ジャンプ率を変える
- フォントを変える
- 使う色を変える
- 傾ける
などです。
ジャンプ率に差をつけたり本文とは異なるフォントを使うと、本文とは独立した文言だということを表現できます。見出しやタイトルなどに使うと目を引きやすいです。
また、色の変化も重要です。例えば、緑一色の中に赤い点がひとつだけあると、とても目立ちます。ユーザーの視線を誘導できるため、伝えたい情報のなかでも優先度がある場合には使いやすいかと思います。一方で、色にはそれぞれ心理的な意味がありますから、サイトの雰囲気やコンテンツの内容にそぐわない色味は避けた方が良いでしょう。
最後に傾けるという手法についてです。水平・垂直なものは、少しでも崩れただけで不安定になります。不安定なものは注目されやすいため、上手に使うことでインパクトのある構図が作れるでしょう。しかし不安定であることには変わりませんから、傾きを一定にする・傾いてる中にも水平・垂直な要素を取り入れる、などしてあげないと、ただの崩れた構図になってしまいます。筆者も一度傾けた構図でバナーを作りましたが、非常に難しかったです。
伝えたい情報の内容やサイト全体の雰囲気を考慮して、ルールを作ったり破ったりしていきましょう。
#最後に
Webデザインをするうえで感じたことは、本当はもっと細かく大量にあるのですが、全てを書くにはあまりにも雑多すぎるため、この程度にしておきます。
書いていて気がつきましたが、Webデザインにおけるコーディングとデザインはそれぞれ独立したものではなく、ある程度地続きになっているように思います。コーディングでも読みやすさや情報の伝わりやすさは重要ですし、デザインの段階でも実装方法や実現可能かどうかを考慮する必要はあります。どちらか一方だけの知識ではいつか太刀打ちできない問題が起きるでしょうから、これからも実務を通して力を身につけていきたいと思います。
半ば備忘録のような記事になってしまいましたが、いかがでしたでしょうか。筆者のような人たちにとって、少しでも参考になっていれば幸いです。これからも頑張っていきましょう。