こんにちは！Webデザイナーのちかです。
みなさんはWebデザイン・ホームページデザインと聞くと、とても専門的なことで自分には理解が及ばない分野だと思ったことはないでしょうか？
もちろん、作り込むうえでは様々なデザインの知識やツール・ソフトの知識が必要で、世の中のデザイナーたちはそういったことを日々情報収集したり鍛錬したりしています。
しかしもっと基礎の部分の知識を学ぶことで、ホームページ制作のディレクターやデザイナーと話すうえでスムーズに話が進む場合がとても多いのです。
今回はそういった「ホームページを作る上での基礎」「ホームページデザインの基礎」について、色々お伝えでいればと思いますので、是非ご覧ください！
ホームページのデザインをするうえで必要なものは？
早速、ホームページのデザインをするうえで必要なものは？となった時に考えられるのは「ホームページのデザインの基礎」「トレンド」「コーディング知識」「デザインツールの知識」ではないでしょうか。
ホームページのデザインの基礎
ここでいう「ホームページデザインの基礎」とは、
・ナビゲーションやロゴなどは一般的にページの上部に配置する
・その下にはメインビジュアルなど、サイトを象徴するイメージを配置する
などと言った、いわゆる「セオリー」と呼ばれるものです。
ただ必ずそのセオリーに則ってデザインをするべきだから、いうものではなくそのセオリーは今までのWebデザインの中で培われた「ユーザーに伝わりやすい形」「ユーザーが分かりやすい形」だからです。
その基礎の部分を知識として持ったうえで、どのように変化つけるかという考え方が出来ると良いのではないかと思います。
トレンド
ホームページのデザイン基礎を理解したあとは、それをどのように今風に落とし込むかを考えるために、やはりデザインのトレンド知識という物が必要です。
どんなにセオリーに沿ってデザインしても、味付けにトレンドを意識せずにすると、「今」のお客様には響かないホームページとなってしまいます。
トレンドをキャッチするためには、以下の様な細心のデザインがまとめられたサイトを利用するのが良いでしょう。
よく利用するサイトをいくつかご紹介いたしますので、ご活用ください！
■WebDesignClip
https://webdesignclip.com/
■SANKOU！
https://sankoudesign.com/
■MUUUUU.ORG
https://muuuuu.org/
■81-web.com
https://81-web.com/
■I/O 3000
https://io3000.com/
コーディング知識
デザインなんだから、コーディングの知識は不要でしょ？と思われがちですが、ある程度の知識は必要だと私は考えています。
何故かというと、ホームページ制作において「必ずデザインはコーディングされるもの」であり、コーディングを全く意識せずにつくられるデザインは、最悪ホームページという形に構築できない可能性もあるからです。
いくら素晴らしいデザインをつくったとしても、それをコーディングで再現不可能であるなら、ホームページという形にすることが出来ない。それでは本末転倒です。
完璧なコーディングスキル・知識とまでは言わないまでも、「こういうことはコーディングで実装可能・不可能」ということを判断できれば、良いのではないでしょうか。
その上で、以下の様なものの知識をまずは学ぶのが良いと思います。
・HTML
コーディングの基礎となるプログラミング言語です。
WEBページを作成するための言語で、「ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）」のことです。
・CSS
「カスケーディング・スタイル・シート（Cascading Style Sheets）」のことです。
前項のHTMLに対して、主にどのような装飾を施すのかという指定をする言語です。
デザインツールの知識
デザインを考えるだけではなく、それを実際に形にすることが必要です。
頭の中のデザインを形にするためには、デザインツールの知識も必要になるということですね。
ただ、これは実際にデザインするのではなく、デザイナーに依頼をするだけという方はあまり必要ない部分になります。
デザインの基礎知識
前項でご紹介した「ホームページのデザインの基礎」とは別に、もう少し大きく「デザインの基礎」というのもあります。
以前にも記事にまとめてご紹介したことがあるのですが、デザインの基礎の基礎を覚えておくと、驚くべくほどとても「デザイン」っぽくなるので、これも押さえておくと良いのではと思います。
・これだけ抑えればあなたも脱初心者！デザイン4つのコツ
https://plasol.co.jp/blog_post/4tips/
また、このコツ以外にも様々なデザイン基礎を記事でご紹介しておりますので、こちらも合わせてご参考にしていただけますと幸いです。
・ハイクオリティなバナーを作るためのコツ大公開！【レイアウト編】
https://plasol.co.jp/blog_post/banner-layout/
・ちょっとの違いで大違い！「余白」でWEBデザインを極める！
https://plasol.co.jp/blog_post/margins-design/
・これで脱初心者！「伝わるデザインのコツ」【文字と文章編】
https://plasol.co.jp/blog_post/transmission-design/
・【覚えておきたい！】Webデザインにおける配色の基本 ～初級～
https://plasol.co.jp/blog_post/color-scheme/
デザインの道に近道なし
いかがでしたでしょうか？
結局色々とお伝えしてしまいましたが、ここでご紹介した基礎をきちんと身に着けるとそれだけで色々なデザインに対する印象がガラッと変わってきます。
デザイナーさんはなぜこの位置にしているんだろ？理由は？という所の理解度が上がりますし、逆にデザイナーさんはこうしているけど、デザイン的にはこっちのほうが良いのでは？といった話も出来るようになります。
そういう意味でも、更にデザインの話がしやすくなると思いますので、ご興味ある方は是非今回ご紹介した内容をご覧いただければと思います。
