アルテガの代表の平尾です。
先日、デザインの専門学校である『VANTANデザイン研究所』に特別にお招きいただき、特別講師として授業をさせていただきました。
そこでの内容をとても簡単にまとめたいと思います。
まず前提として、グラフィックデザイナーを目指していたり、イラストの学習をされている方が多い中での授業でした。
なので、専門的な話はあまりせずに、とにかくWebは自由で楽しい。ということを中心にお伝えしました。
WEBサイト制作の流れ
まずはWebサイト制作の流れを伝えます。
これは過去のブログ記事を見てもらえればわかりますが、全体を通じてWebサイトにどのような人たちが関わり、どんな作業をしているかをお伝えします。
https://arutega.jp/plan-of-website/
実際のデザインデータを見せたり、何人くらいでどのれくらいのスケジュールでどのようなスキルを持った人が集まって作っているかをこの日は主に伝えました。
特に Webデザイナーの役割やディレクションの重要性を伝えます。
WEBデザイン作法/グラフィックデザインとの共通点と違い
グラフィックデザインはすでに学校でも親しみがあるはず。
なので、Webデザインとグラフィックとの差にどのようなことがあるかをお伝えします。
これも以前にブログにまとめているので、ここからかいつまんで話をしました。
https://arutega.jp/web-graphic
ほとんどが、知ってるか知らないかだけの違いでクオリティが変わることがわかります。
一番大きな違いは、グラフィックは訴求することの比重が大きいのに対して、Webは使うことをを前提にしていることがあります。
このことを意識するだけで、迷子を作らないWebサイトを作る意識ができると思っています。
独学でWebデザインを勉強する方法
独学でWebデザインをする方法を最後にお伝えしました。
ここでは、よく世間で言われている独学方法と、私なりの裏の秘策をお伝えしました。
以前にもブログでまとめているのでこちらをご覧ください。
https://arutega.jp/study-web-design/
自分で作っていても正解がわからないとは思います。
ただ、初学者のうちから正解を求めに行くこと自体に意味がないと思います。
ひたすら好きだと思ったり、美しいと思ったデザインを真似て、真似ているだけで楽しい状態にあることが最初は肝心だと思います。
今は YouTubeでも現場のデザイナーの発信も増えました。
先に正解を知ってから編集することで、美しいデザインを作ることができます。
ただ、独創的なクリエイティブと、風化することがないコンセプトを作るには、自分で考える力を養い、鍛えることが何よりも重要だと考えます。
これは今も昔もずっと変わらないと思います。
ブックマークサイトを見よう
デザインブックマークサイトを普段から見ることを伝えました。
https://arutega.jp/web-design-bookmark/
そしてブックマークサイトの見方はこちら
設計を気にしよう
日本語と欧文の比率を見よう
余白を見よう
ボタンや共通パーツの使いやすさ
フォントの大きさのパターン
世界のアワードを見よう
https://www.awwwards.com/
http://cssdesignawards.com/
https://thefwa.com/
みんなの身近にあるすごいサイト
みんなのテンションをあげるために、自由でクリエイティブなサイトをたくさん紹介しました。
今回紹介したものは主に、クリエイティブなことがわかりやすくて、ページ数が少なくてグラフィカルなものが多いです。
もっと堅牢なサイトの情報設計の美しさは追々、社会に出てから知ればいいと思います。
雑にリンクを貼っておきますので、興味があればご覧になってください。
Sirup
https://sirup.online/5th/
https://tote.co.jp/cure/
BiSH
https://www.bish.tokyo/BiSH_iS_OVER/
キャリーちゃんのサイト
https://kpp10.jp/
KUBOTA
https://www.kubota.co.jp/futurecube/
FF15
https://www.s5-studios.com/
https://www.s5-studios.com/works/ff15_traingallery/
BAKE
https://buttersand.com/chocolate-collection/
https://buttersand.com/
https://hachi.buttersand.com/
https://cheesetart.com/
作り込みと案件難易度が高い
https://www.spade-co.jp/
グラフィックデザインに精通してる人がWebデザインした例
https://reel-re.co.jp/
https://harkenic.com/
niko
https://www.nikoand.jp/15thcampaign2022/october/
ペンてる
https://www.pentel.co.jp/
東映採用
https://www.toei.co.jp/company/recruit/fresh/
みさとと
https://www.town.shimane-misato.lg.jp/misatoto/
https://shiftbrain.com/work/misatoto/
ホテル川久
https://www.museum-kawakyu.jp/
ラルゴ
https://shiftbrain.com/work/largo/
ポートフォリオを作ろう
デザイナー/イラストレーターがWEBデザイン領域で知っておくべきツールをお伝えしました。
XD
Studio
Webflow
最近はWeb制作であれば、XDではなくFigma一択です。
XDは必要に駆られた時に覚えるので間に合うっていうふうに伝えています。
主に下記を伝えました。
2.自分のキャラクターがわかるように
3.驚く内容になるようにしよう!
4.どういったアクションを起こして欲しいかまでをイメージして作ること
https://arutega.jp/japanese-portfolio/
こちらの記事でもポートフォリオの参考事例をまとめています。
まとめ
大体2週にわたって5時間の授業を終えました。
まだ全くWebサイトをデザインしたことがない方が大半でした。
ですが、社会に出ると、そのつもりはなくても、Webの存在を意識せずに印刷物を作るということはなく、Webは避けたくても避けては通れないと思います。
なので、今は自由な発想や楽しそうだなという初期衝動を大切にしてデザインの学習を進めていってもらいたいなと思います。
ほなね