なぜ思考編を作成しようと思ったのか、その理由など、思考編を始める前に確認していただきたいことについてのレクチャーです。

Webサイト（ホームページ）を作成することで叶えたいゴールを考えるレクチャーです。今回はプロフィールページを作成する前提で、どんなゴールを実現したいのか考えます。

プロフィールページをどんな人に見てもらいたいか、ターゲットを考えるレクチャーになります。

プロフィールページをどんな風にしたいか想像するレクチャーになります。

プロフィールページにどんなコンテンツが必要か考えるレクチャーになります。

ワイヤーフレームを作成するレクチャーです。思考編で考えたことを元に作成していきます。

Photoshopの導入方法についてご紹介するレクチャーになります。

Photoshopの使い方についてご紹介するレクチャーになります。網羅的ではなく、よく使うものをご紹介しています。

作成したワイヤーフレームからデザインをするレクチャーです。デバイスはパソコン向けを作成をします。このレクチャーで作成したファイルについては教材として添付していますので、必要に応じてご利用ください。

作成したワイヤーフレームからデザインをするレクチャーです。デバイスはスマートフォン向けを作成をします。このレクチャーで作成したファイルについては教材として添付していますので、必要に応じてご利用ください。

このレクチャーで使用するテキストエディタ、Atomの導入方法と入れておくと便利なプラグイン(パッケージ)についてご紹介するレクチャーになります。

HTMLの基礎についてのレクチャーになります。HTMLとは何なのか、HTMLでよく使うタグの使い方と意味などを合わせてご紹介しています。

初めてHTMLを書くという方にオススメのレクチャーです。

CSSの基礎についてのレクチャーになります。CSSとは何なのか、CSSでよく使う記述の使い方と意味などを合わせてご紹介しています。

Sass（SCSS）についてのレクチャーになります。Sassとは何なのか、使用するための環境準備（Node.jsのインストールとAtomへのプラグイン追加）、Sassの記述方法などをご紹介しています。

デザイン編で作成したプロフィールページのデザインをHTMLでコーディング（マークアップ）していくレクチャーです。一緒に進めていくスタイルのレクチャーになっていますので、とりあえずは話を聞きながら真似をして書いてみてください。その上で疑問に思う点があればご質問いただくも良いですし、Googleなどで検索いただくとより一層理解が深まります。レクチャーで私が記述したファイルを教材として添付していますので、うまく動作しない際などに見比べてみてください！使用する画像についても添付しています。

デザイン編で作成したプロフィールページのデザインをSass（SCSS）でコーディングしていくレクチャーです。まずはパソコン向けから。一緒に進めていくスタイルのレクチャーになっていますので、とりあえずは話を聞きながら真似をして書いてみてください。その上で疑問に思う点があればご質問いただくも良いですし、Googleなどで検索いただくとより一層理解が深まります。レクチャーで私が記述したファイルを教材として添付していますので、うまく動作しない際などに見比べてみてください！

デザイン編で作成したプロフィールページのデザインをSass（SCSS）でコーディングしていくレクチャーです。こちらはスマートフォン向けです。一緒に進めていくスタイルのレクチャーになっていますので、とりあえずは話を聞きながら真似をして書いてみてください。その上で疑問に思う点があればご質問いただくも良いですし、Googleなどで検索いただくとより一層理解が深まります。レクチャーで私が記述したファイルを教材として添付していますので、うまく動作しない際などに見比べてみてください！

Adobe XDの導入方法についてのレクチャーになります。

Adobe XDの使い方についてのレクチャーです。基礎的な使い方の説明になります。

ブログの要件定義についてのレクチャーになります。作る目的、作るのが有効な理由、コンセプト、コンセプトを叶えるために必要なこと、作る必要があるページ、どんな機能が必要かを考えていくレクチャーになります。ワイヤーフレームを作る上で前提条件として必要なことを考えるレクチャーとなっています。

トップページのワイヤーフレームを作成するレクチャーになります。アプリケーションはAdobe XDを使用します。前レクチャーの要件定義で考えた内容を用いて画面設計、ワイヤーフレーム作成をしていきます。

記事一覧ページのワイヤーフレームを作成するレクチャーになります。アプリケーションはAdobe XDを使用します。前レクチャーの要件定義で考えた内容を用いて画面設計、ワイヤーフレーム作成をしていきます。

記事詳細ページのワイヤーフレームを作成するレクチャーになります。アプリケーションはAdobe XDを使用します。前レクチャーの要件定義で考えた内容を用いて画面設計、ワイヤーフレーム作成をしていきます。

Adobe XDを使用してトップページのデザインをするレクチャーです。デバイスについてはパソコン向け、スマートフォン向けともに作成をします。このレクチャーで作成したファイルについては教材として添付していますので、必要に応じてご利用ください。

Adobe XDを使用してブログ記事一覧ページのデザインをするレクチャーです。デバイスについてはパソコン向け、スマートフォン向けともに作成をします。このレクチャーで作成したファイルについては教材として添付していますので、必要に応じてご利用ください。

Adobe XDを使用してブログ記事詳細ページのデザインをするレクチャーです。デバイスについてはパソコン向け、スマートフォン向けともに作成をします。このレクチャーで作成したファイルについては教材として添付していますので、必要に応じてご利用ください。

Adobe XDを使用してプロトタイプ作成をするレクチャーです。難しいことなくサクッと作成出来てしまうのが特徴です。

Adobe XDを使用してデザインのフィードバックをもらう方法をご紹介するレクチャーです。Adobe XDでデザインを公開する方法とそこでフィードバックを記述する方法などがこのレクチャーに含まれています。

ブログのトップページをコーディング（マークアップ）するレクチャーです。レスポンシブなので、デバイスはパソコンとスマートフォンに対応しています。このレクチャーで使用している画像やHTMLファイルについては教材として添付していますので、必要に応じてご利用ください。

ブログの記事一覧をコーディング（マークアップ）するレクチャーです。レスポンシブなので、デバイスはパソコンとスマートフォンに対応しています。このレクチャーで使用している画像やHTMLファイルについては教材として添付していますので、必要に応じてご利用ください。

ブログの記事詳細をコーディング（マークアップ）するレクチャーです。レスポンシブなので、デバイスはパソコンとスマートフォンに対応しています。このレクチャーで使用している画像やHTMLファイルについては教材として添付していますので、必要に応じてご利用ください。

ブログのトップページをSass(SCSS)でコーディングするレクチャーです。レスポンシブで、パソコンとスマートフォンに対応する形で作成します。このレクチャーで使用しているSCSSファイルについては教材として添付していますので、必要に応じてご利用ください。

ブログの記事一覧をSass(SCSS)でコーディングするレクチャーです。レスポンシブで、パソコンとスマートフォンに対応する形で作成します。このレクチャーで使用しているSCSSファイルについては教材として添付していますので、必要に応じてご利用ください。

ブログの記事詳細をSass(SCSS)でコーディングするレクチャーです。レスポンシブで、パソコンとスマートフォンに対応する形で作成します。このレクチャーで使用しているSCSSファイルについては教材として添付していますので、必要に応じてご利用ください。

ページトップに戻るボタンに対してjQueryを用いてアニメーションでスムーズに動くようにするレクチャーです。デバイスはスマートフォンでもパソコンでも動作します。サクッと作成できて、印象が大きく変わります。今回はjsファイルを作成せず、HTMLファイル内に書く形でレクチャーします。このレクチャーで使用したHTMLは教材として添付していますので、必要に応じてご利用ください。

講義を終えてのご挨拶になります。