新Webデザインマスター講座

レッスン内容

• Webサイト構造（階層）と典型的なデザイン

  Webサイトを構築している1つ１つのページ、そのページを構成する部位にはそれぞれ役割があります。 このレッスンではレイアウトの基本について学んでいきます。
• Webページのカラム構成

  WEBページに掲載する情報は、内容や役割に合わせた場所に配置されます。 その大まかな配置を決めるための段組みのことをWEBデザインでは「カラム」と呼びます。
• スマートフォン対応とレスポンシブWEBデザイン

  近年はスマートフォンの普及により、スマホを使ってWebサイトを閲覧するユーザーが増えています。Webサイトをデザインするうえで必須項目と言える、レスポンシブデザインについて紹介します。
• デザインの４原則を知ろう

  webサイトのデザインと聞くと、「見た目がおしゃれ」「かっこいい」「かわいい」等、見た目(外見)の部分を想像してしまうかもしれません。 しかし、良いサイトを作るために本当に必要なのはそこではありません。
• デザインの法則を知ろう

  デザインの為の法則には様々なものがあります。 今回はユーザーの使い勝手にもかかわる、代表的な４つの手法について学んでいきましょう。
• ユーザー導線の設計とペルソナ

  ユーザー導線とは、ユーザーがサイトに訪れる目的を達成する為に導くという事です。 このレッスンではユーザー導線の設計までに行う具体的な手順を紹介します。
• ワイヤーフレームの作り方・書き方のコツ

  ワイヤーフレームとは、サイトの設計図の様なものだと前回のレッスンで学びました。 このレッスンでは実際の作り方・書き方などについて学んでいきます。
• UIとモバイルファーストを意識する

  ユーザーインタフェース（UI）とは、何らかの操作を行う際の、見た目や操作感/使いやすさを指します。 スマートフォンを使ってサイトを訪れる方でも、難なくサイトを閲覧・操作できるように設計をしましょう。
• ここからのレッスンと実習について

  ここからのレッスンでは末尾に実習が付いています。 実習部分を一緒に行って、サイトのデザインを完成させてみましょう。
• ナビゲーションの種類と設計

  このレッスンではWebサイトのナビゲーションの種類や、ナビゲーション設計について学びます。 グローバルナビゲーションやローカルナビゲーションなどはどのようなものか、それぞれを設置する際のポイントなど、ナビゲーションの基本を解説します。
• スマホ幅でのナビゲーション表示

  PCサイトのナビゲーションをスマートフォンでそのまま使用すると、狭い画面範囲が更に狭くなり、コンテンツの配置が制限されてしまいます。 スマートフォンで使いやすいナビゲーションについて考えてみましょう。
• ファーストビューのレイアウト

  このレッスンではサイトを訪れた方へ即座に概要を伝えるために必要な、ファーストビューの設計についてご紹介します。
• スマホ向けのファーストビューレイアウト

  ファーストビューで写真とテキストを重ねる場合、パソコン幅のレイアウトを基準に設定するとスマホ幅で読みにくくなる可能性が高いです。 スマホでもテキストの可読性が保てる配置を心がけましょう。
• ゾーンニングと見出しの設計

  Webページは開いて数秒で内容が把握でき、ユーザーに「このページを読もう」と思ってもらえることが重要です。 内容を整理し、適切な見出しをつけつことでユーザーに興味を持ってもらいましょう。
• UIデザインパターンで使いやすく情報を整理する

  UIデザイン(ユーザーインターフェース)パターンとは、ユーザーにとっての使い勝手を良くするための型のことをいいます。 このレッスンではUIデザイン(ユーザーインターフェース)パターンとは何か、そしてその代表的なパターンをいくつか取り上げていきます。
• リンクの設計を考える

  ほぼ全てのWebページで使われている要素と「リンク」について学習しましょう。 リンクが分かりにくいサイトはユーザーが目的のメージに到達できず、去って行ってしまう可能性が高いので注意が必要です。
• フォームのレイアウト

  お問い合わせや申し込みなどコンバ―ジョンに繋げるためには、お問い合わせや申し込みページで使われるフォームの最適な設計が不可欠です。 フォームの役割や構成、フォームに導くなどユーザーのアクションを誘発するボタンついて紹介します。
• リストとテーブルで情報を整理する

  このレッスンではWebページ内で様々な情報を整理して表示する、リストとテーブルの使い方や実例を紹介します。ページ内にある情報を分かりやすく整理し、読みやすいページを作りましょう。
• 色の属性、与えるイメージ

  Webサイトのデザインを行う上では「色の選定」も重要な要素です。 色はユーザーに視覚的に情報を伝えたり、イメージを持たせたりする役割もあります。色を構成する属性や色の種類、一般的に持たれている各色のイメージを見ていきましょう。
• Webデザインに役立つ配色ルール

  配色とは「色の組み合わせ」を指します。 配色は、サイトのイメージを決めるだけではなく、使い勝手の部分にも影響するものです。
• 写真と図版を使用する

  Webサイトではユーザーに瞬時にメージの内容や情報を伝えるため、写真やグラフなどの図版を使用することもあります。 Webサイトに使用するための写真の選び方やトリミングのポイント、図版の種類をおさえておきましょう。
• 美しさ・わかりやすさをUPするフォントとアイコン

  フォントやアイコンなどの設定も、サイトデザインを分かりやすく、美しいものにするための重要なポイントです。 フォントの種類やアイコンの使い方を学んでいきましょう。
• 講座終了実習：スクールサイトのLP作成

  新Webデザインマスター講座、レッスン総まとめの実習について説明します。
もっと見る