Category Archives: 授業風景

授業の中で出てきたお話や受講生の様子などなど

授業の様子をご紹介

こんにちは。クリエイターズアカデミーの事務員です。
今回は皆さんに相模原校での授業の様子をほんの少しご紹介いたします!

現在相模原校ではユーザーインターフェイスを作成する課題に取り組んでいます。

「ユーザーインターフェイスって何?」と思われる方もいらっしゃるかもしれないので簡単にご説明します。ユーザーインターフェイス(user interface)は略して「UI」と呼ばれる事が多いですが、これはユーザーがコンピューターを利用するときの操作画面や操作方法のことです。つまりWEBでいえばサイト画面や画面遷移(リンク機能などによる画面の移動)を指します。

先日授業で取り上げられた内容としてご紹介しましたが、パララックス効果を利用したUIを作ってみようという事で受講生の皆さんはどんなサイト、どんな内容ならばパララックス効果を最大限に活かしたページを作れるか試行錯誤しているようです。

現在の相模原校はこの8月に授業をスタートさせ、来年2月に卒業予定のコースです。まだ1カ月半ほどの期間しか授業を行っておりませんが、既に皆さんphotoshop、illustratorを使ってダミーページやロゴマーク、ページに使用する画像の加工などをサクサクとこなしています。初めは皆さん初心者だったなんて信じられないスピードですね!

また制作するだけではなく既存のWEBページのデザインを参考にした議論も行われ、休み時間にはお隣や他の方の制作物を見ながら、

「ここはどういう見せ方にするの?」
「後ろにこの画像があって、進んでいくとこの画像とこの情報が動いて、ここに奥行きを…」

「この内容だとパララックスをうまく活かせないからもっとこうしたいんだけど…」
「確かにこのままだとあまり合わないかもしれないね、それならこういう感じにしてみたら…」

「こんな感じにしたくて今ここをこうして…」
「それはphotoshopじゃなくてillustratorの○○の機能を使った方が速くない?」

などなどお互いのいいところを吸収したり改善したりしています。
WEB制作やデザインはソフトが使えたり基本的な構造が分かればなんとなく一人で制作して練習という事がしやすいものですが、こういった会話は人が集まる学校ならではですね。自分の失敗を誰かが成功に変えていたり、他人の失敗から自分も学んだり…そういったやり取りが受講生の成長スピードを高めている一つでもあります。
そんな授業の中から一つ、私が印象に残ったお話をご紹介します。
ある受講生の方と休憩中お話をさせていただきましたが、その中で

「”こういうものが作りたい”というのはあってもそれがどうすれば完成されるのか、考えるのってとても大変なんですね」

という一言がありました。
これはどんなお仕事でも、どんな職種の方でも一度はぶつかる壁です。この壁をどう乗り越えて製品、商品を作り上げていくかが仕事の難しさでありやりがいではないでしょうか?
このお話をされた受講生の方は今まさにその壁にぶつかり、そして課題をこなす中でこの壁を越えることが出来ればWEB制作、WEBデザイナーとして働くことの楽しさややりがいを実感する事が出来るのだと思います。

未来のWEBクリエイターが生まれる瞬間!
そんな瞬間を感じられて嬉しくなった事務員です。

授業の中で流行をチェック:パララックス

こんにちは。クリエイターズアカデミーの事務員です。

昨日はクリエイターズアカデミーの授業について少し具体的なお話をさせていただきました。
しかし技術だけを身につけてもどんなWEBページを作れることが企業へのアピールになるのかが分からなければ宝の持ち腐れですね。
クリエイターズアカデミーでは実際にどんなデザインが流行しているのかも授業の中でご紹介していきます。今回は先日実際に授業で紹介された「パララックス」についてお話したいと思います。

課題をこなすだけじゃない!
流行を知ろう~パララックス~

皆様パララックスってご存知でしょうか?
パララックス効果やパララックスエフェクト、パララックスサイトなど呼び方は少しずつ違うかもしれませんがとにかくパララックス。なんだか分からないという方もいらっしゃるかもしれませんね。

パララックスとはまさに最近のWEBトレンドとなっているWEBサイトの見せ方、デザインの事です!

具体的にパララックスがどういったデザインなのか、まずはいくつか例をあげてみたいと思います。

L'Arc-en-Ciel LIVE2014 at 国立競技場

http://www.larc-en-ciel.com/live2014/

こちらはアーティストのライブ告知サイト。スクロールに合わせて背景と星が異なる速度で流れていく演出はとても綺麗ですね。

学校法人岩澤学園みほ幼稚園 ~神奈川県横浜市の幼稚園~

http://miho-youchien.com/
こちらは幼稚園のサイト。画面中央の男の子が入園して卒園していくまでのストーリーがかわいらしく演出されています。
最近は待機児童の問題が騒がれますが、こんなサイトを見ると「入れるならばこんなかわいい幼稚園に子供を通わせたい!」と思う親御さんも多いのでは?

Nikon 1 AW1 - Present Campaign   NikonDirect - ニコンダイレクト

http://shop.nikon-image.com/nikon1/nikon1aw1/
こちらはニコンの商品紹介サイト。もうご覧いただければ分かると思います!とにかくかっこいい!スクロールに合わせてテキストや画像が挿入されるところなんて見ているだけでも楽しいですね。家電量販店の広告やサイトで見る商品紹介より圧倒的に商品が欲しくなるサイトですね。

株式会社 菱健 HISHIKEN Co. Ltd.,

http://www.hishiken.co.jp/
こちらは呉服店のサイト。和風な内容でもまったく違和感はありません。むしろ静けさや凛とした印象も受けるのでブランドイメージを良くするのに一役買っているのではないでしょうか。

First Aid Dorset  UK  - First Aid Training Courses

http://www.firstaiddorset.co.uk/
こちらは海外のサイトですがイギリスの応急処置を学ぶコース?の紹介サイト(英語にあまり自信がないので間違っていたらすみません…)。シンプルにまとまっているので正直英語が分からなくてもなんとなく内容を理解できそうな印象ですね。
お気づきになる方も多いと思いますが途中に登場する背景画像がスクロールに合わせて表示範囲も変化しています。ただ画像を表示するだけではなく視点の移動を演出できていますね。

84イラスト室 | イラストレーター HMK84

http://www.hmk84.com/
こちらはまさにイラストレーターのポートフォリオサイト。近年急激な成長を見せているソーシャルゲームでカードイラストの需要が高まりましたが、こんなポートフォリオサイトを見たらお仕事依頼したくなりますね!

…などなど。まだまだパララックス効果を利用しているサイトはありますが、なんとなくパララックスがどんなデザインなのかはイメージがついたのではないでしょうか。

————————————————————————

パララックスとは?

パララックス(parallax)、直訳すると「視差」という意味です。もともと写真用語で、光学式ビューファインダーを使う際、レンズとの位置関係のズレにより、ファインダー視野と実際に撮影される画面にズレが生じる現象を指す言葉です。Webデザインにおけるパララックスは、スクロールといった動作に応じて、複数のレイヤー(層)にある視覚要素を異なるスピードで動かすことで視差を生み出し、立体感・奥行きを演出する手法のことを指します。最近では、本来の多重スクロール遠近効果の定義を超え、スクロール操作による視覚的エフェクト全般を「パララックス」と呼ぶこともあります

(引用:MICROWAVE – http://www.micro-wave.net/column/technology/parallax.php)

————————————————————————

例に挙げさせていただいたWEBページをご覧になっていただいただけでも、いかにこの「パララックス」が見る人の興味をぐいぐいと引っ張っていくか体感できたと思います。

「こんなページを作ってみたい!考えてみたい!」

と思われた方。クリエイターズアカデミーではまさにその流行のデザインを授業で知り、学ぶことが出来るのです。流行を取り入れたデザインが出来るという事は企業への強いアピールにもなりますからまさに即戦力!
自信を持ってWEB業界で活躍していきませんか?