気づけば早16年近くWeb制作を生業にしています。
なんでもやりたい気質で、コーディングからデザイン、フロントエンド、UI／UX、ディレクション、動画やアニメーションに至るまで見たり触ったりする部分に特化したところを幅広くやってきました。
特に気をつけているところは、デザインもインタラクションもコミュニケーションであるということ。
広告だろうが、コーポレートサイトやECサイト、メディアサイトなどもほとんどのものが対人間に対して何らかのコミュニケーションを図っています。
最近では、新しくこの業界で頑張ろうとする人たちへフィードバックしたりアドバイスしたりする機会も増えてきました。
そんな機会から、そもそも自分の知見をまとめておいて今自分と関わり合いがない方達へも役に立てるのではないだろうか？そんな思いから仕事でやっていたことをちょっとずつまとめて記事にしていこうと思います。
何となく飛び込んだ業界だけど、技術の進化が早いところが自分的には楽しいと思えるポイントでした。
未だにいろんなことを勉強してものを作るのが楽しいです。
Webデザインはただ見栄えの良いものを作るのではないよ、人に伝え、人が使うものを作るのだよ
Webデザインを始めるとかなり勉強がいることに気づくでしょう。
主にデザインツールやHTMLなどを学ぶと思いますが、それらは全てその先に使う人がいます。
Webデザインは、見た目だけでなく、ユーザー体験（UX）や機能性も考慮したデザインが求められるということです。
本記事では、初心者がWebデザインを始める際に押さえておくべき基本とコツを紹介します。
何となく飛び込んだ業界だけど、気づいたらだいぶ居着いてしまっていたなぁ。
技術の進化が早いところが自分的には楽しいと思えるポイントでした。
1. 基本的なツールの理解
Webデザインにはさまざまなツールがありますが、初心者におすすめのツールは以下の通りです
- Adobe XD：プロトタイプ作成に優れたツールで、直感的な操作が可能です。
- Figma：クラウドベースのデザインツールで、チームでの共同作業が容易です。
- Sketch：Macユーザー向けの強力なデザインツールです。
これらのツールを使いこなすことで、デザインのアイデアを具体化しやすくなります。
最近では上記の3つ中でもFigmaが主流にはなっておりますが、Photoshop、illustratorなども利用するプロはまだまだ多いです。全て使いこなせる必要はなく、今から学ぶのであればまずFigma、次にPhotoshopとillustratorが良いかと思います。
使い分け的には、パーツやグラフィックをphotoshopやillustratorで作成し、レイアウトをFigmaで行なっていく感じです。
この時点でまだよくわからなくても大丈夫。まずFigma、そしてPhotoshop、illustratorと覚えておきましょう。
2. 基本的なデザイン原則を学ぶ
Webデザインには基本的なデザイン原則があります。以下のポイントを押さえておきましょう：
- コントラスト：テキストと背景のコントラストを高めることで、視認性が向上します。
- アライメント（整列）：要素をきちんと整列させることで、見た目が整います。
- 一貫性：フォントやカラーパレットを統一することで、プロフェッショナルな印象を与えます。
デザインの基本とすると上記のようなものが大抵出てくると思いますが、この3つをいきなり消化してプロダクトに反映するのは無理と思ってください。
一般的には、経験を積んでいく中でだんだんとそれぞれ上手くなっていき、あるときに何だか上手くできるようになってきたと思えるタイミングがくると思います。
非常に大事な要素ではありますが、もう少し細かく学んでいくことをお勧めします。
デザインの4原則
プロの中でも神本と呼ばれている「ノンデザイナーデザインブック」というものがあります。ノンデザイナーとは書いてあるものの、デザイナーたるもの基礎として叩き込んでおかないといけない基礎的なことが散りばめられています。
デザイン初心者の方はもちろん、プロになっても定期的に見直すべき内容です。
自分もすでにベテランの部類ですが、毎年必ず数回は見返していたりします。
ぜひ手に取ってみてください。
3. ユーザー体験（UX）の重要性
美しいデザインだけでなく、使いやすさも重要です。
ユーザーが目的の情報に素早くアクセスできるよう、ナビゲーションの工夫やボタン配置を考慮しましょう。
また、レスポンシブデザインを取り入れ、デバイスに応じて表示が最適化されるようにすることも大切です。
簡単に書いてみたものの、この考え方をプロダクトに落とし込むのは至難の業。
まずは、考え方を徹底的に学びましょう。
4. カラーパレットとタイポグラフィの選択
適切なカラーパレットとタイポグラフィは、サイト全体の雰囲気を決定します。
色の組み合わせは、ブランドイメージやユーザーの感情に大きな影響を与えるため、慎重に選びましょう。
タイポグラフィは読みやすさを重視し、複数のフォントを使いすぎないようにします。
ここも理論的なものは存在しますが、たくさんの既に公開されているデザインを見ることと、自分でさまざまな組み合わせをテストしてみることが大事です。自分でいいなと思うものを見つけるのもよし。既にできているデザインで気になる配色を真似るのもよし。
5. インスピレーションを得る
デザインのインスピレーションを得るために、他の優れたWebサイトやデザインギャラリーをチェックしましょう。
以下のサイトがおすすめです
- Dribbble：デザイナーの作品を共有するプラットフォーム
- Behance：クリエイティブなプロジェクトを展示する場
- Pinterest：クリエイティブな画像を集めることができるSNS
- Awwwards：優れたWebデザインを表彰するサイト
異なるスタイルや技術、トレンドを理解することで、自分自身のクリエイティブな引き出しを広げることができます。
例えば、DribbbleやBehanceでは、プロのデザイナーによる優れた作品を閲覧することができ、具体的なアイデアや技術を学ぶことができます。
また、Pinterestは、多様な画像を集めることができるSNSで、自分の好みや興味に合わせたデザインを手軽に検索できます。さらに、Awwwardsでは、優れたWebデザインを表彰しており、最新のトレンドや技術に触れることができます。
これらのプラットフォームを活用することで、新しいアイデアや視点を得ることができ、自分のデザインに新しい風を取り入れることができます。
多くの参考資料を見て、自分のデザインスタイルを磨き続けましょう。
真似ることって本当に重要です。まずはいいなと思えるものを見つけましょう！
6. 継続的な学習と練習
Webデザインのスキルは、継続的な学習と練習によって向上します。
オンラインコースやチュートリアルを活用し、最新のデザイン技術やトレンドを学び続けましょう。
また、自分の作品をポートフォリオにまとめ、フィードバックをもらうことで成長につなげることができます。
なかなか成果が出なくて不安になるのは誰しも一度は通る道。
デザインに関しては、しっかり学び、スキルをつけることで仕事だけでなく日々の生活やコミュニケーションにも多大なメリットがあると感じています。ぜひ楽しみながらやって頂きたいなと思っています。
まとめ
初心者がWebデザインを始める際には、基本的なツールの使い方、デザイン原則、ユーザー体験、カラーパレットとタイポグラフィの選び方を理解することが重要です。
さらに、他のデザインからインスピレーションを得て、継続的に学習と練習を続けることで、スキルを向上させましょう。
これらの基本とコツを押さえれば、魅力的で機能的なWebデザインを作成する第一歩を踏み出せます。
ファイト！
