webデザインをしたことが無いという方は、何から取り組めば分からないという方が大半でしょう。
スキルや知識、手順などに関する情報について知りたいのではないのでしょうか。
また、これからwebデザインをしてみたいと考えているという方も多いかもしれません。
そこで今回の記事では、webデザインの際の手順やデザインの際に気をつけるべきポイント、ツールは使うべきかについてご紹介していきます。
今回は、デザインに関する情報を網羅的にご紹介していくので、ぜひ参考にしてみてください。
目次
webデザインに必要なスキルと作り方
webデザインをするときの手順は、以下の通りです。
webデザインの手順
1：情報設計
2：画面設計
3：デザイン
4：実装
1ステップ目：情報設計
これはいわば、情報整理です。
たとえば、ある学習塾のwebサイトが、以下のような構成で作られていると仮定します。
とある学習塾のwebサイトの構成
1：トップページ
2：塾の特徴
3：講師について
4：塾生の声
5：料金やコース
6：Q＆A
7：お問い合わせ
8：無料お試しの予約
以上のように、すべてのwebサイトには構成があります。
この構成について考え、さらにどんな情報を載せたいのかざっくり考えるのが1ステップ目です。
たとえば「3：講師について」のページには、以下のような情報を載せる必要があるでしょう。
3：講師について
・これまでの経歴
・講師の写真
・講師の実績
細かい情報は、この段階では決めなくて構いません。
大きな方向性については、考えておく必要があります。
2ステップ目：画面設計
情報をまとめたら、画面のどこに何を配置するかについての設計をしていきます。
いわばラフデザインを作っていくのですが、これは手書きで構いません。
3ステップ目：デザイン
ラフデザインが出来上がったら、デザインツールを使用してデザインを起こしていきます。
デザインを起こしたら、サイトの画像や文字を当てはめていきます。
デザインツールとしては、「Photoshop」や「Illustrator」などが挙げられます。
これらサイトの使い方をあらかじめ学んでおくのも良いかもしれません。
4ステップ目：実装
HTMLやCSSといった「マークアップ言語」を用いて、コーディングを行っていきます。
最近はレスポンシブデザインであることが前提なので、パソコンで見たときに表示崩れがないかについても確認しつつ進めていきましょう。
webサイトの作り方3パターン
1パターン目：0から自分で作る方法
これは、webサイトを作る目的が以下の物である場合に向いています。
0から作る場合
・仕事としてwebサイトを作れるようになりたい
・webサイト制作会社に転職したい
・勉強のためにwebサイトの構造や仕組みを理解したい
もちろんwebサイトを簡単に作成できるツールは数多く存在します。
しかしインターネット・webサイトの構造・仕組みを理解していないと、webサイト制作に関わるのは困難です。
基礎的なことを押さえておかなければ、応用することはできないためです。
一方で、ツールを一切使うな、ということでもありません。
webサイトに関する基礎知識が一通り身に付いたら、作業効率化のために利用するのも良いでしょう。
2パターン目：サービスを利用して部分的に手作りする方法
これは、以下のような方に向いています。
部分的に手作りする場合
・簡単に作りたいけど部分的にはこだわりたい
・副業やお小遣い稼ぎでwebサイトを制作したい
世界的に使用されている人気のツールWordPressというCMSサービスは、部分的に作りたい方にはとてもおすすめです。
あまりデザインに詳しくなくてもサイトを作成できますし、カスタマイズの自由度も高いです。
一方、自由度が高いということは自分で考えなければいけない機能・設定も多いということです。
そのため、作るときにはどこまでこだわるか、それ以前に自分にどれくらいスキルがあるかについてしっかり考えておく必要があります。
ただし、WordPressを使用して収入を得るのは、以前より難しくなっています。
便利ツールの普及が、案件の単価を押し下げたためです。
お小遣い稼ぎや案件獲得の経験を積むという点で、チャレンジしてみるのは良いでしょう。
3パターン目：ツールやサービスを使って手軽に作る方法
これは、以下のような方に向いています。
ツールやサービスを使って手軽に作る場合
・ホームページを作りたいけど予算がない
・すぐにwebサイトが欲しい
・簡単なもので良いので自分のwebサイトが欲しい
このような方には、「はてなブログ」のようなブログサービスや、「Wix」のようなホームページ作成ツールがおすすめです。
パソコンやwebサイトについてよく知らないという方も、数時間で簡単に自分のサイトが作れます。
無料で用意されているツールも多いので、コストをかけられない方の味方となるでしょう。
中にはInstagramやTwitterといったSNSと自動連係してくれるものや、スマホで作れるものも存在します。
難しそうだから無理と最初から考えずに、一度トライしてみると良いかもしれません。
デザインで重要なこと
デザインの4原則
ここでは、『ノンデザイナーズ・デザインブック』を参考に4つの基本原則についてご紹介します。
01.近接の原則
1つ目は「近接の原則」です。
これは、関連のある項目をまとめてグループ化するという原則です。
ちゃんとグループ化が為されていれば、情報が頭に入りやすくなります。
反対に、関連性のない情報どうしは、近づけてはいけません。
近接は読者に感覚的に情報同士の繋がりを意識させるものなので、関係のない情報の近接は、読者のミスリードにつながります。
02.整列の原則
2つ目は「整列の原則」です。
これは文字通り、要素を揃えて配置するという原則です。
このとき、「一体化」と「組織化」を目的として整列させましょう。
整列がしっかりしていると、読者に「洗練さ」や「フォーマルさ」、「真剣さ」を与えられます。
意識して整列を行うようにしましょう。
03.反復の原則
3つ目は「反復の原則」です。
これは、デザインに共通する特徴を盛り込むというものです。
たとえば見出しのサイズ、軸線の太さなどを共通させるという原則です。
反復を意識すると、デザインに「一体感」と「視覚的な面白さ」が加わります。
近接・整列で出来上がったデザインに、面白さを加えるのが反復であると考えてみると良いでしょう。
04.コントラスト
4つ目は「コントラスト」です。
コントラストとは、2つの物に違いを付けることです。
フォントサイズを大小と変えたり、画像を大小と変えたり、色を「暖色」と「寒色」で対比させたりといったことが、これに当たります。
コントラストも反復と同様、ページに面白みを追加するものです。
また、コントラストがあれば読者がページ内の情報を整理しやすくなります。
カラー＆タイポグラフィ
以上の4原則に加え、重要なのが「カラー＆タイポグラフィ」です。
全てのカラーは、「色相」、「彩度」、「明度」の3属性を持っています。
これら属性についてある程度の知識があれば、効果的な配色にできます。
タイポグラフィとは、文字を使用した表現全てを表す言葉です。
タイポグラフィにおけるポイントは、「適切なフォントを選んで美しい文字を配置すること」と、「文字をデザインの要素として扱うこと」です。
また、文字に関しても先述したデザインの4原則が重要となります。
ぜひ意識してみてください。
デザインに行き詰ったときの対処法
デザインに行き詰ったときは、以下の対処法が効果的です。
・現在のデザインを捨てる
・削ぎ落してシンプルにする
ぜひ意識してみてください。
まとめ
webサイトをデザインするときは、「情報設計」、「画面設計」、「デザイン」、「実装」という順番で行っていきます。
この手順で行うことで、後から修正に時間がかかる確率が下がります。
デザインをどのような方法で行うかについては、自分の目的に応じて考えるようにしましょう。
当社では、デザイン修正ツールmitekakuを提供しております。
直観的な操作と、容易な導入で皆さんの仕事の効率化に貢献できます。
無料で試せるので、興味がある方はお気軽にお試しください。
