Webデザインの作り方入門！オススメ無料サイトも解説

Webデザインを作ってみたいと考えていても、具体的にどのように取り組んでいくべきかわからないですよね。

そこで本記事では、Webデザインの作り方を解説します。

また、Webデザインの作り方だけでなくWebデザインを無料で学べるサイトも紹介します。

Webデザインを学んでいる人にとってはWebデザインの作り方が明確になり、これからWebデザインを始めたいと考えている方にはWebデザインの始め方がわかるでしょう。

Webデザインを作る前に知っておきたいこと

Webデザインの作り方を解説する前に、Webデザインを作る上で知ると良いことを解説します。

ぜひ参考にしてみてください。

Webデザイン入門者は工程が大事

まず、Webデザインを作り出す前に工程を確認しておきましょう。

具体的には以下のとおりです。

• どのような目的で制作するのか
• ユーザー像は明確か
• どのくらいの期間が設けられているのか

このような工程の認識をすり合わせて、ユーザーファーストなWebサイトを作成します。

そのため、すぐにツールを開いてデザインを作り出すのはおすすめしません。

Webデザインを作るときにはワイヤーフレームを使用する

目的やユーザー像を明確にした後に、ワイヤーフレームを使用してWebサイト全体の設計図を作っていきます。

ワイヤーフレームを使用するときは、どのページに、どのようなデザインで、どのような情報を掲載するのかを考えていきます。

Webサイトの設計をビジュアルで理解するために使用するのが、ワイヤーフレームの役割です。

【準備編】入門者向け！ワイヤーフレームを使ってWebデザインを作る

ワイヤーフレームの重要性を解説しました。

ここからは、ワイヤーフレームを使ってWebデザインの作り方を解説します。

Webデザイン初心者の方は、ぜひ参考にしてみてください。

Webデザインサイトの方向性を決める

まずは、Webデザインサイトの方向性を決めます。

サイトの方向性を明確にする理由は、Webサイトに掲載する情報の優先順位をつけるためです。

クライアントがどのような目的でWebサイトを依頼しているのかによって、掲載する情報が変わってきます。

• どのような年齢層をターゲットにするのか
• どのような性別の人をターゲットにするのか
• どのような価値観がある人をターゲットにするのか

以上のようにユーザー像を明確にするのを、ペルソナ設定と呼びます。

ペルソナを明確にし、Webサイトの方向性を決めていきます。

Webデザインサイトマップを作る

次にサイトマップを作っていきます。

サイトマップとは、フレームワークを使用してサイトの構成を見える化する作業です。

例えば、多くのWebデザインは以下のような流れで作成されています。

• 第一階層→TOPページ
• 第二階層→会社情報・商品情報・採用情報
• 第三階層→企業理念・沿革・社長メッセージ

このように、Webデザイン全体のページをワイヤーフレームで作成します。

サイト全体の流れをワイヤーフレームで見える化し、それぞれの情報に沿ったデザインを作成します。

Webデザインサイトを1ページだけ作る

いきなりWebサイトの全ページを作るのはおすすめしましせん。

デザインの雰囲気やイメージが違かった場合、大幅に修正をしなくてはいけないためです。

Webサイトの全体の流れを確認したら、実際に1ページのみ試しに作成していきます。

チームのメンバーやクライアントに確認してもらいながら進めていきます。

【作成編】入門者向け！ワイヤーフレームを使ってWebデザインを作る

ここからは、ワイヤーフレームを使ってWebデザインを作る方法を解説します。

この段階までに準備が整っていれば、良いデザインができるでしょう。

Webデザインサイトの情報を整理する

ワイヤーフレームで作った情報を整理していきます。

情報の整理は以下のような理由で行います。

• どの情報をどこに配置するか
• どのページにどのように配置するか

いきなり作り始めるのではなく、ワイヤーフレームで作成した設計図を元に情報の優先度や情報量を整理して作成していきます。

優先度や情報量が決まれば、方向性が明確になりスムーズに作業できるでしょう。

Webデザインサイトのレイアウトを決める

Webサイトに配置する情報や配置する場所が決まりました。

次に、集めた情報をどのように配置するのかのレイアウトを決めていきます。

レイアウトは一から考えるのではなく、参考になるWebサイトがあると良いでしょう。

ランディングページのような1ページでおさまるデザインにするのか、それともマルチカラムレイアウトと呼ばれる複数に分割されたレイアウトで作成していくのかなどを考えていきます。

レイアウトは、情報量やクライアントの意向によって変わるため事前に相談しておきましょう。

レイアウトが決まり次第、細かい部分の仕様も確認します。

ページ上部にスライド表示する画像を挿入するのか、クリックすると情報が表示されるアコーディオン表示にするのかなどを決めていきます。

細かい仕様に関しては、Webサイトの目的に応じて検討しましょう。

ワイヤーフレームを使って作成【Webデザインサイトを清書】

最後にワイヤーフレームを仕上げていきます。

ここまでに決めてきた情報の優先順位や情報量を、設計図に沿ってデザインしていきます。

ユーザーの知りたい情報がわかりやすく配置されているのか、商品の購入ボタンにアクセスしやすいのかといったユーザーの気持ちに立ってデザインを作成していきましょう。

ここで注意したいのは、ワイヤーフレームで作成している段階では個性的な色やデザインを配置しないのをおすすめします。

伝えたい情報が整理されているのかをわかりやすくするためです。

清書したワイヤーフレームは、クライアントやチームメンバーがデザイナーへレビューする際にも使用します。

奇抜な色づかいやフォントを使用しているとWebサイトを見る人がデザインに気を取られてしまい、デザイナーが伝えたい意図が理解されないケースがあります。

また、ワイヤーフレーム全体を作った後にも修正依頼が入ることがあります。

あまりに凝ったデザインだと修正が大変なため、まずはシンプルなデザインでワイヤーフレームを完成させてレビューをもらいましょう。

Webデザイン入門者にオススメの無料サイト3選

ワイヤーフレームを使用したWebデザインの作り方を解説しました。

では、Webデザインのスキルを磨いていくにはどうすれば良いのでしょうか。

まずは無料サイトで学習をしてみて、次に有料のコースやサイトを検討するのが良いでしょう。

無料版でもWebデザインの入門スキルは身につくのでご安心ください。

Webデザイン無料サイト1.Schoo

引用：Schoo

Schooは動画で講義が受けられるサイトで、学べるWebデザインのスキルは以下です。

• HTML
• CSS
• jQuery
• Photoshop
• Illustrator

またSchooはWebデザインの知識だけでなく、トレンドの技術や社会情勢の情報も提供しています。

幅広い情報をキャッチアップしたい方にはおすすめのサイトです。

Webデザイン無料サイト2.ドットインストール

引用：ドットインストール

ドットインストールは、動画講座を順番に学んでいく学習サイトです。

基本的なWebデザインの知識から、RubyやPHPといったプログラミングの基礎知識も無料で学べます。

無料で公開している動画数は300を超えていますが、ドットインストールの動画は3分程度でまとめられているため、スキマ時間を活用したい主婦の方や、通勤時間を活用したい副業サラリーマンの方におすすめです。

どのスキルがどのくらい進んでいるのかといった進捗管理ができるのも、ドットインストールの良いところでしょう。

また、回数制限はあるもののメールで質問や相談ができます。

初心者の方にとっては、すぐに聞ける環境は心強いでしょう。

Webデザイン無料サイト3.Progate

引用：Progate

Progateはスライドを見て、それを実践していくオンライン学習教材です。

ほぼ全てのWebデザイン・プログラミングの知識が学べます。

穴埋め問題のようになっているため、難しい言語もProgateならすぐに挑戦できます。

またProgateにはどの言語にも無料コースがあり、Webデザインやプログラミングが気になっている方にとっては始めやすい教材です。

加えてProgateは、案件を紹介する機能も充実しています。

有料で提供しているHTML&CSSの「プロジェクトコース」の受講を完了した方は、クラウドワークスの募集案件を紹介してくれる機能があります。

プロジェクトコースは実務レベルのスキルが求められ難易度が高いですが、実績のない個人が０から案件を獲得するのは難しいのが現実です。

しかし、プロジェクトコースを修了していれば、Progate側が集めたホームページ制作やランディングページ制作などの受託案件を紹介してもらえるため、未経験の方でも案件を獲得しやすいでしょう。

ワイヤーフレームの使い方を学びWebデザインを作っていきましょう

Webデザインを作成するときのワイヤーフレームの使い方や無料で学べる学習サイトを解説しました。

Webデザインを作るときやスキルを学ぶときのポイントは以下です。

• Webデザインを作る前に工程を確認する
• すぐに手を動かすのではなく、ワイヤーフレームを活用する
• ペルソナを設定しサイト設計をする
• サンプルで1ページだけ作る
• サイトに掲載する情報を整理する
• Webサイトのデザインを決める
• ワイヤーフレームを使ってWebサイトの全体の設計図の作成する
• 無料サイトで学び、よりスキルを磨きたい方は有料コースで学ぶ

Webデザインを作成するには、準備が重要です。

まずはワイヤーフレームの使い方を学んで、Webデザインを始めてみてください。

Chapter Twoは、ワイヤーフレームの使い方はもちろんWebデザインのスキルを学べるスクールです。

Webデザインについて気になることがあれば、ぜひご相談にお越しください。

Chapter Twoはこちら