
ワイヤーフレームとはなにか、なんのために作るのかを理解し、ワイヤーフレーム制作で大事なポイントについて学びます。
Webサイトの一般的なレイアウトを知り、各パーツがそれぞれどんな役割を果たしているのかを知ることで、ワイヤーフレームを作れるようになります。
実際のワイヤーフレームを見て、どんなものを作れば良いのかお話します。
Webサイトデザインの勉強方法を知り、独学でWebサイトデザインができるようになるようレクチャーします。
四角形ツールを使って背景を作成し、テキストツールやペンツールを利用してパンくずリストをデザインします。ガイドを作成、表示して、1px単位の綺麗なデザインを目指します。
四角形ツールでバナーの背景を作成し、テキストツールで文字の入力とスタイルの変更を行い、よくある「セールのバナー」を作成します。
四角形ツールで基盤の背景を作成し、写真を配置し、クリッピングマスクをかけて、綺麗なウェブサイトのメインビジュアルを作成します。デザインにあった無料のフォントをダウンロードして使用します。
ウェブサイトの横幅が決定したら、横幅に合わせてガイドを引きます。その方法についてお話します。
まずはWebサイトのベースとなるレイアウトを、シェイプツールの四角形を使って作成します。この時、ガイドやものさしツールを利用して1px単位で綺麗にレイアウトするのがポイントです。
外部ウェブサービスよりアイコンを取得し、カラーオーバーレイをかけて色を変更する事で、そのアイコンを利用した簡単なロゴを作成します。
テキストツールを使ってテキストを入力し、整列ツールやガイドを利用して位置調整し、綺麗なナビゲーションを作成します。
すでにあるレイヤーを複製し、再利用することで、即座にフッターのデザインを完成させます。
スライスツールを使って、画像をスライスし、適切な形式で画像をパーツ毎に書き出します。
ガイドとものさしツール使って、Webサイトの基盤となるレイアウトを作成していきます。ここでは、スマートガイドを利用して簡単に要素を整列させる方法も解説します。
無料のアイコンをインターネットから取得し、カラーオーバーレイをかけ、ロゴとしてデザインしなおします。
テキストツールを使って、文字のナビゲーションを作成し、ものさしツール等を利用して均等に綺麗に配置する方法について解説します。
テキストで作成した文字ナビゲーションの下に、「現在のページの位置」がわかるようなデザインを施していきます。
画像を配置し、レイヤースタイルを使って白い枠線をつけ、ドロップシャドウのついたメイン画像を作成します。
サイドバーにあるバナーを作成する方法を解説しています。 ここでは、配置した画像にグラデーションマスクをかけ、テキストを入力します。
記事ページを新規で作成します。 ここでは、既存のトップページのpsdファイルを複製し、ナビゲーションの修正を行います。
ご予約ページを作成する方法を解説しています。 この動画では、フッターの調整の仕方を学びましょう。
ご予約ページを作成する方法を解説しています。 デザインを行うために、既存の「メニュー一覧ページ」のpsdファイルを複製し、見出しの修正を行います。
ご予約ページのフォームを作成する方法を解説しています。 ここでは、シェイプツールにドロップシャドウをかけて、入力するためのボックスをデザインしていきます。
ご予約ページのフォームを作成する方法を解説しています。 ここでは、作成した入力ボックスを複製し、文字を入力するための基準であるガイドを作成していきます。
ご予約ページのフォームを作成する方法を解説しています。 ここでは、シェイプツールを使って作成したシェイプツールを、ラベルに合わせて大きさを変えていきます。
ご予約ページのフォームを作成する方法を解説しています。 ここでは、入力ボックスに必要なテキストを入力していきます。
Webメディアのトップページを作成します。 ここでは、ガイドを使って全体のレイアウト組みを行った後、切り抜きツールを使ってカンバスサイズを変更します。
Webメディアのトップページを作成します。 ここでは、無料のアイコンをウェブサービスよりダウンロードして、カラーオーバーレイをかけて、サイトのテイストに合うロゴを作成します。テキストツールで、綺麗に整列させたナビゲーションを作成します。
Webメディアのトップページを作成します。 ここでは、鉛筆ツールを使って点線の区切りを作成し、テキストの中央に配置しナビゲーションを完成させます。
Webメディアのトップページを作成します。 ここでは、黄金比を使ってレイアウトを組み、基盤となる背景の長方形を作成します。
WEBペディアのトップページを作成します。 ここでは、人気記事ランキング一覧のサムネイル部分を作成していきます。
WEBペディアのトップページを作成します。 ここでは、人気記事ランキング一覧のタイトルとタグを、テキストツールを使って作成していきます。
WEBペディアのトップページを作成します。 ここでは、記事と記事の間の区切り線を、ブラシツールを使って直線(点線)をつけていきます。
Webメディアのトップページの新着記事一覧を作成します。 ここでは、無料のアイコンとテキストを使って、見出しを作成していきまし。
Webメディアのトップページの新着記事一覧を作成します。 ここでは、シェイプツールを使って、記事一覧の背景を作成していきます。
Webメディアのトップページの新着記事一覧を作成します。 ここでは、記事の投稿日とタグをデザインするため、無料のアイコンを配置し、カラーオーバーレイでデザインテイストに合うようにカスタマイズします。
Webメディアのトップページのフッターを作成します。 ここでは、フッターに配置するロゴの複製を行います。
Webメディアのトップページのフッターを作成します。 ここでは、テキストツールとシェイプツールを使って、お問い合わせフォームを作成します。
Webメディアの記事ページを作成します。 ここでは、記事ページのためのpsdファイルを複製し、いらないレイヤーを削除していきます。
Photoshopを使用した、Webサイトのグラフィックデザインができるようになるコースです。
ワイヤーフレームの作成や、実際のWebサイトを初級・中級・上級の3つ作成するなど、100レッスンの充実したコースです。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。
★こんな人におすすめ★
★特徴★
★内容★
実際のグラフィックデザインをする前に行う、ワイヤーフレームのデザインを学び、基礎的なWebデザインのテクニックを学んだ後、初級・中級・上級に分けて実際のWebサイト制作を学びます。
(1)ワイヤーフレーム制作
Webサイトをデザインする前に行うべきサイトの設計図、「ワイヤーフレーム」の制作方法を学びます。 ヒアリングの段階からどのようにワイヤーフレームを制作すれば良いかを学ぶ事が出来ます。 実用的で、目的を達成するためのWebサイトのレイアウト方法を知ることができるので、初めてワイヤーフレームを作成する初心者の方はもちろん、もう一度基礎を学びたい上級者の方にもオススメです。
(2)初心者のためのウェブデザインテクニック
photoshopを利用して、実際のウェブサイトのパーツをデザインしていきます。 いきなりウェブサイトを全てデザインするのは難しいと感じる方は、まずこの章の動画から始めてみてください。 簡単な練習課題を通して、どのようにWebサイトデザインを行うのか、といったコツを掴み、本番のWebサイト制作に役立てることができます。
(3)【初級】クリニックのWebサイト〜トップページ編〜
Photoshopを使って、仮想のクリニックを紹介するWebサイトをデザインします。 複雑なPhotoshopの機能はあまり使わなくても出来る、シンプルなデザインのWebサイトですので、初心者の方でも気軽に取り組んでいただけます。 この章の目的は、「Photoshopを使ったWebサイトデザインの流れを掴む」ことです。
(4)【中級】美容院のWebサイト制作〜トップページ編1〜
Photoshopを使って、仮想の美容院を紹介するWebサイトをデザインします。 Webサイト用のファイル新規作成方法から、ガイドを利用したレイアウトを作成まで、 この章をマスターすることで次回からは「簡単なサイトを自分で作れるように」なります。 作成していただく課題制作は、少し複雑な機能やツールを利用することもありますので、やや中級者向けです。完成版のファイルを一度ご覧頂き、不安な方はまず「初心者向け」の章を受けて頂くことをオススメします。
(5)【中級者向け】美容院のWebサイト制作〜トップページ編2〜
Photoshopを使って、仮想の美容院を紹介するWebサイトをデザインします。 レイヤースタイル等を利用したデザインになるため、やや中級者向けです。 4.【中級者向け】美容院のWebサイト制作〜トップページ編〜の続きの章になりますので、 この章を初めてご覧になる方は、まずこの前の章から取り組んで下さい。
(6)【中級者向け】美容院のWebサイト制作〜下層ページ編1〜
Photoshopを利用して、仮想を美容院を紹介するWebサイトをデザインします。 トップページのデザインファイルを複製し、下層ページを作成していきます。 5.【中級者向け】美容院のWebサイト制作〜トップページ編2〜の続きの章になりますので、 この章を初めてご覧になる方は、まずこの前の章から取り組んで下さい。
(7)【中級者向け】美容院のWebサイト制作〜下層ページ編2〜
Photoshopを利用して、下層の美容院を紹介するWebサイトをデザインします。 シェイプツールを利用した、ご予約フォームのデザインを行っていきます。 7.【中級者向け】美容院のWebサイト制作〜下層ページ編1〜の続きの章になりますので、 この章を初めてご覧になる方は、まずこの前の章から取り組んで下さい。
(8)【上級者向け】Webメディア〜トップページ編1〜
Photoshopを使って、様々なコンテンツを提供するWebメディアをデザインしていきます。 たくさんのPhotoshopのツールを駆使してデザイン制作を行っていきますので、上級者向けの章です。 完成版のファイルを一度ご覧頂き、制作に不安のある方は、まず「初心者向け」もしくは「中級者向け」の動画をご覧になってから、この章に挑んで下さい。
(9)【上級者向け】Webメディア〜トップページ編2〜
Photoshopを使って、様々なコンテンツを提供するWebメディアをデザインしていきます。 さまざまなPhotoshopのツールを駆使して、デザイン制作を行っていきますので、上級者向けの章です。 8.【上級者向け】Webメディア〜トップページ編1〜の続きの章になりますので、初めてこの章をご覧になる方は、まず前の章からご覧下さい。
(10)【上級者向け】Webメディア〜トップページ編3〜
Photoshopを使って、様々なコンテンツを提供するWebメディアをデザインしていきます。 さまざまなPhotoshopのツールを駆使して、デザイン制作を行っていきますので、上級者向けの章です。 9.【上級者向け】Webメディア〜トップページ編2〜の続きの章になりますので、初めてこの章をご覧になる方は、まず前の章からご覧下さい。
(11)【上級者向け】Webメディア〜記事ページ編1〜
photoshopを使って、様々なコンテンツを提供する、Webメディアサイトを実際にデザインしていきます。 ここでは、記事本文ページを作成します。 10.【上級者向け】Webメディア〜トップページ編3〜の続きの章になりますので、初めてこの章をご覧になる方は、まず前の章からご覧下さい。