What you'll learn:
- ゴール設定や見積もりの作成など、現場で必要なプロジェクトの進め方
- デザインのルールを使って、効率的に機能的なWebデザインを考える
- Sketch を使ってワイヤーフレームやデザインを作成する
- HTMLとCSSを覚えてWebデザインをコードに落とし込む
- Webサイトのモバイル最適化をレスポンシブレイアウトで実現する
- 架空のWebサイト制作案件を納品可能な状態まで作り上げる
初学者を対象にしたWebデザイナーになるため講座です。
Webデザイナーになるための取っ掛かりが欲しい、Web制作の全体像を学習したいといった方に向けて、
企画からWebサイトの公開まで一気通貫して学べる講座を作成しました。
デザインセクションでは、Webデザイン制作の現場で実際に使用される Sketch というアプリケーションを使用します。
ツールの使い方はもちろんですが、デザインの考え方やデザインパターンなども解説していきますので、デザインに対するより深い理解が得られます。
またこの講座では、実際に手を動かす作業的な内容だけでなく、制作を始める前に必要な「企画力」を大事にしています。
最終的なゴールを見据えて仕事を始める大切さ、効率的な進め方、見積もりの作り方など、ツールよりも大事なことについて学ぶことによって、本当に必要とされるウェブデザイナーになりましょう！
企画
Webデザイナーに必要なのは、ツールの習得だけではありません。
本当に必要とされているのは、クライアントの立場になって考えられるコンサルティング能力です。
プロジェクトに必要な「ゴール設定」をどう作っていくのか、ヒアリングのポイントを解説します。
Sketch
この講座では、最近のWeb制作現場で大きなシェアを獲得した Sketch というアプリケーションを使用します。
従来は Adobe Photoshop が業界の主流アプリケーションでしたが、軽量で安価、そしてWebに特化した機能を持つ Sketch に人気が集まっています。
Sketch は有料のアプリケーションですが、30日間の無料トライアルがありますので、お金をかけずにレッスンが進められます。
トレース
Sketch をマスターするために、既存ウェブサイトのトレース（写し）を講座に組み込みました。
トレースはツールの習得とデザインの感覚を覚えるのに最適な方法です。
Udemy のウェブサイトを Sketch で再現する方法を学びます。
デザイン
デザインの能力はセンスではありません。
与えられた制限の中で、美しさと機能を両立させる工夫であり、そこには理由があります。
単純化されたデザインパターンを解説し、各種パターンが使われている既存事例を紹介していきます。
「ゼロからデザインを考える必要はない」ということを学びましょう。
コーディング（マークアップ）
HTMLとCSSの基礎を学習して、Webサイト制作に必要なコードの書き方を学びましょう。
HTMLで構造を作り、CSSで装飾を加えていきます。
最初は難しく見えるかもしれませんが、HTML & CSSはとても単純な仕組みであることが理解できると思います。
モバイル対応
最近では、アクセスの大半がスマートフォン等のモバイル端末からということも珍しくありません。
その意味で、スマートフォンに最適化されたWebサイト表示は必須と言って良いと思います。
この講座では、レスポンシブレイアウトという手法を使って、デスクトップ用に作られたWebサイトをモバイルでも適切に表示させる方法を学びます。
実践
実際にWebサイト制作の現場を体験するために、架空のヒアリングメモとペルソナを用意しました。
この資料をもとに、以下の順で実際にWebサイトを制作します。
ウェブサイトの企画
ワイヤーフレーム
デザイン
コーディング
モバイル最適化
1ページのみのシンプルなウェブサイトですが、
Google Maps の埋め込みや、Instagram へのリンク、実際のモバイル端末でのテスト等、学習する内容は多岐に渡ります。ここで学んだ技術を応用することで、様々なウェブサイトの制作が可能になります。
サーバーにアップロード（おまけ）
実際にインターネットに公開して、自分のスマートフォンで確認する方法を紹介します。
Course images: Design vector created by Freepik
