Wakizaka2019/10/232019/10/24Webサイトデザインしたいけど、作り方がわからない。美しいデザインを作るコツや必要な知識を学びたいな。Webサイトのデザインは、とても奥が深い物です。サイトのジャンルや利用層によって色やフォントも変わりますし、心地良いと思われるデザインも変わってきます。そのため、何から始めればよいかよくわからない方もいるのではないでしょうか。フリーランスエンジニア兼テックライターのワキザカです。この記事では、Webサイトデザインの作り方について解説します。美しくする5つのコツも解説しているので、ぜひ参考にしてみてくださいね。この記事はこんな人のために書きました。まとめWebサイトデザインの作り方とは?具体的な方法を解説!画像:Shutterstockまず、Webサイトデザインの作り方について解説します。Webサイトデザインを作る流れは、大きく分けて以下の3つです。Webサイトに必要な情報を集める手書きでサイトイメージを作るツールでワイヤーフレームを作成する1つずつ詳しく解説しますね。1.Webサイトに必要な情報を集めるいきなり作る前に、まずはWebサイトのデザインに必要な情報を集めます。以下のようにサイトのデザインに必要な情報を集めていくイメージです。サイトのデザインに必要な情報の例どんな人が訪れるサイト?何に利用するサイト?企業サイトの場合は、コーポレートカラーは?具体的に何を載せるサイト?どんなページが必要?最初はざっくりでもいいので、上記のように必要な項目を考えてみると良いでしょう。2.手書きでサイトイメージを作るある程度情報が集まったら、次は手書きでサイトイメージを具体的にしていきます。パワポで資料を作るときも同じですが、何を載せるか決まった後すぐに作るのではなく、イメージを簡単な図で整理していくことが重要です。具体的に言うと、以下の3つの視点で手書きでイメージを固めていきます。何をサイトに載せる?どこに何を載せる?どのように表現する?上記を決める工程はワイヤーフレーム(サイトの設計図)とも呼ばれており、より詳しく知りたい方は以下でも解説しています。凝ったデザインを作ったのに、ダメ出しされてボツになった......となってしまうと作った時間が無駄になるので、簡単に紙に手書きする癖をつけましょう。3.ツールでワイヤーフレームを作成する手書きでサイトイメージが作れたら、ツールで清書していきます。手書きではざっくりとした見た目で作っていましたが、ツールで作るときは、「具体的なサイズ(px)」や「色」などを正確に作っていきます。ワイヤーフレームが作りやすいツールもいくつかあるので、のちほど詳しく解説しますね。Webサイトのデザインを美しくする5つのコツ画像:Shutterstock作り方がわかったら、すぐにWebサイトデザインを作れるかというと、そうでもありません。作り方以上に、デザインの考え方が大事だからです。そこで次に、Webサイトデザインを美しくする5つのコツを解説します。「余白」を効果的に使う似ている要素は近づける目立たせたいところを強調する相性の良い色を選ぶ相性の良いフォントを選ぶ1つずつ解説しますね。1.「余白」を効果的に使うデザイン初心者にありがちな間違いが、「画面にぎっしり要素を詰め込んでしまうこと」です。おしゃれなボタン、おしゃれなボックス、おしゃれな見出し、おしゃれなアイコン......など1つ1つであれば問題はありませんが、詰め込みすぎると逆に見づらくなってしまうのです。「けっきょく、よはく。」のような本もでていますが、余白の使い方が見た目の印象を大きく左右するので、詰め込みすぎないように気をつけましょう。具体的な余白のイメージは、後ほど解説するギャラリーサイトを見るのがおすすめです。2.似ている要素は近づける画面の項目が均等に配置されているだけのサイトは、見た目が美しくありません。似ている要素は近づけることが重要です。以下のように画像と説明の位置が分かりづらいと、内容が伝わりづらいです。以下のように、似ている要素は近づけることが重要です。これは極端な例ですが、「似ている要素は近づける」と覚えておきましょう。3.目立たせたいところを強調する文章に強弱を持たせることも重要です。大事なところは装飾したり、画像に変えたりして強調すると良いでしょう。以下のようなイメージです。この例では、以下のように強調しています。フォントサイズ大きく」変更パッと見たときに視覚的にわかりやすくなるよう、強調表現を追加すると良いでしょう。4.相性の良い色を選ぶ色には相性があります。色の相性を覚えるのが難しい方もいるのではないでしょうか。Hunt(カラーハント)」がおすすめです。以下のように、色のイメージを指定しておすすめの色を調べることができます。https://colorhunt.coここでも、色を使いすぎには注意しましょう。最初は3色程度で考えてみることがおすすめです。5.相性の良いフォントを選ぶデザインに慣れてきたらでも良いですが、色だけでなくフォントにもこだわるのがおすすめです。企業のコーポレートサイト、個人サイトではターゲット層が違いますよね。読む人が心地良いと思う&サイトに合ったフォントを使うことで、デザインが美しくなります。以下でおすすめフォントを解説しているので、興味がある方はぜひ参考にしてみてくださいね。画像:Shutterstockここまで、Webサイトデザインの作り方や、美しく見せるコツについて解説しました。実際のイメージが湧かない方もいるのではないでしょうか。そこで次に、Webサイトのデザインを作るためのおすすめのスライド・ギャラリーサイトをご紹介します!1.スライド:ウェブデザインに応用する4つの基本原則1つめは、「ウェブデザインに応用する4つの基本原則」です。美しく見せるコツでも一部解説しましたが、デザインの基本原則はWebサイトを作る上での基礎体力になります。ウェブデザインに応用する4つの基本原則2.スライド:Webデザインのセオリーを学ぼう2つめは、「Webデザインのセオリーを学ぼう」です。作り方の概念だけでなく、王道のやり方で実際に作っていくコツを解説しているスライドです。Webデザインのセオリーを学ぼう3.ギャラリーサイト:WebDesignClip3つめは、「WebDesignClip」です。これまで紹介したのはスライドでしたが、ここはギャラリーサイトです。デザインは理論や考え方だけでなく、良いデザインを具体的に頭で思い描けるようになることが重要です。その力を養うためには、良いデザインをとにかく見ることがおすすめです。実際にWebサイトデザインをするときの参考にもなるので、一度覗いてみてはいかがでしょうか。参考:WebDesignClipWebサイトのデザインで失敗しないための秘訣とは?Webサイトのデザインは、とても奥が深いです。知識や考え方を身に着けるだけでなく、実際に作ってみて見えてくる部分がとても多いです。慣れるまでは「考え方」や「作り方」、「デザインの美しさ」などが間違っていないか、自分で判断することが難しいです。そのため、レビューしてもらう環境を用意しておくことがおすすめです。自分よりも優れたデザイナーに見てもらうことで、足りない点や具体的なアドバイスをもらえるので、成長しやすくもなります。Webデザインを学ぶときにおすすめのスクールを、以下でまとめているので、ぜひ参考にしてみてくださいね。2020年1月22日まとめ今回は、Webサイトデザインの作り方を解説しました。作り方がわかったら、実際に作ってみるのがおすすめです。簡単なサイトからで良いので、「WebDesignClip」のデザインも参考にしつつ、ぜひ作ってみてくださいね!TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。Wakizaka新卒入社したメーカー系のIT企業で、システムエンジニアとして約5年勤務。インフラ、製造、テスト、運用保守など、様々な経験あり。侍ブログ編集部として、これまでに200記事以上の記事を執筆。現在はフリーランスエンジニア兼テックライターとして活動中。