10/12(Sat)
Schooとデザイナー・クリエイターの求人・転職サービスを提供する優クリエイトが『【グラフィックデザイナー向け】Web制作セミナー』を開催しました。当日は現在グラフィックデザイナーとしてお仕事をされている方を中心にご参加いただき、Schooの商品開発担当からは、グラフィックデザイナーとWebデザイナーの違いやWebデザインの概要知識について、優クリエイトのキャリアアドバイザーからは、Webに携わるようになったグラフィックデザイナーの事例紹介・体験談をご紹介いたしました。
この前編の記事では、イベントレポートとして「グラフィックデザイナーとWebデザイナーの違い」、そして後編では「グラフィックデザイナーの事例紹介・体験談」をご紹介いたします。
Schoo商品開発担当：Webデザインを経験されたことがある方はどのくらいいらっしゃいますか？また、以下の3つのうちどのような課題がありますか？
課題① 紙とWebのデザインにおける違いがわからない
課題② ツールやデータの扱いの違いがわからない
課題③ コーディングが難しそう
最も多そうなのは課題③でしたね。今日はみなさんの不安におこたえできるようにしていきますね。
課題①の「紙とWebのデザインにおける3つの違い」からご紹介していきましょう。
紙とWebの違いをざっくり要約するとこの3つです。
紙は有限でWebは無限ということです。Webにはいくらでも情報を載せることができるため、優先度を考えて扱い方を決めなくてはなりません。ページを階層構造で整理していくことが必要です。
世の中の大半のWebサイトは、縦にスクロールしていくものになります。 また、カルーセルといって横に画像がスクロールするアクションや、ポップアップのようなウィンドウが出てくる動きをつけることもできます。こういった動きを駆使することで、ユーザーの操作を考慮したデザインを構築することができます。
同じWebサイトでも、さまざまなデバイスで見られることを考慮して、デザインを変える必要があります。どんなデバイスで見た場合にもユーザーが迷わない設計にする必要があります。レスポンシブデザインという言葉は聞いたことがあるかもしれません。これは、同じサイトをPCやスマートフォンなどの異なるデバイスで見た際に、違うデザインを表示する仕様のことです。モバイルファーストといって、スマートフォンで閲覧されることを優先に想定した作りであることが多いです。
WebサイトやWeb用のグラフィック制作のために使用するIllustratorやPhotoshopにおいては、設定に気をつける必要があります。
これら「気をつけるべきこと4点」についてひとつずつ説明していきます。
Webデザインの場合、紙と違い、モニターで見たものがそのまま制作物となります。
px（Pixel：ピクセル）で作業する際の注意点は、pxの数値に小数、奇数を用いないことです。小数にすると輪郭がぼやけてしまいますので、pxの数値は必ず整数にしておきましょう。
また、偶数にしておくとコーディングする際に計算が楽になります。紙だと印刷時の状態が全てのため、小数点でも奇数でも問題ありませんが、Webデザインはコーダーと協業していくのでセオリーに則った制作が必要です。
解像度に関して詳しいお話をすると、とても難解なのですが、紙を扱う場合の350〜dpiという考え方とは異なります。グラフィックソフトでWeb用の設定にする必要があります。
紙の表現は、CMYKによる色の表現を行いますがWebデザインではRGBに設定します。これもグラフィックソフトの設定をWeb用にする必要があります。
Webではあまり文字にこだわることができません。特殊な書体を使用すると、閲覧環境によっては表現できないことがあります。最近ではWebフォントという、閲覧環境に左右されず、様々なフォントが使えることも増えてきましたが、基本的には可読性を意識したフォントを選択する必要があります。
最後に皆様の中でも課題として感じられていた方が多い、コーディングについてお話していきましょう。コーディングとは、Webページの内容をコンピュータにわかる言葉で伝えるためにプログラムを記述する作業です。 Webサイトのコーディングは、HTMLやCSS、JavaScriptという言語を使って行います。この3つの言語についてご紹介していきます。
「ハイパーテキスト・マークアップ・ランゲージ」の略です。Webページの文章構造を記述し、各パーツがどのような役割を持っているのかをコンピュータに示します。
「カスケーティング・スタイル・シート」 と呼ばれ、Webページのスタイルをつけるために使われる言語です。 HTMLと組み合わせてWebデザインをしていきます。CSSを使うことで、スタイルを設定しデザインをWebサイトに反映することができます。
Webブラウザ上で動作するプログラム言語で、Webページに動きをつけることができます。
コーディングにはブラウザとテキストエディタを使用します。有償のアプリケーションもありますが、無料で使用できる高機能なテキストエディタがありますので、すぐに始めることができます。
ブラウザ： GoogleChrome、Safari、Internet Explorerなど
テキストエディタ：Atom、Bracketsなど（無料の高機能なテキストエディタ）
いかがでしたでしょうか？
後編では「グラフィックデザイナーの事例紹介・体験談」をご紹介します。ぜひ、チェックしてみてくださいね
Webデザイナーに興味のあるあなたにWebデザインを学ぶための授業4選をご紹介します！これらの授業を通じて、UI/UXデザイン設計の基礎から、実際にコーディングスキルまで理解することができます。ぜひこれらの授業を受講し、Webデザインに関する知識を身につけましょう！
本授業は、コーディング初心者が中級者にレベルアップするための実践型授業です。コーディングテクニックを単に知識として学ぶだけではなく、実践的に身につけることを目指します。
本放送は、Schooでもおなじみ「HTML5＆CSS3デザインレシピ集」の著者である狩野 祐東先生が、初心者のためのテクニックをLIVEで実演します。実演を見ることでしか分からないコツや、初心者がつまづきやすいポイントを学んでいきましょう。
本授業では、現在のWebデザインの主流となっているフラットデザインについて、基本的な考え方や特徴、インターフェースなどUI設計との関連性を学んでいきます。
フラットデザインは単に「流行りだから使われている」わけではないのです。そこに至った経緯や理由を考え理解した上で、デザインやコーディングに役立てていきましょう。
この授業では、Web制作におけるPCサイト及びスマートフォン（スマホ）サイトのデザインパターンとコーディングテクニックを学んでいきます。
CSSのみで実装できるものからjQueryを用いて表現するものまで、Webサイトを作る上で最低限必要になってくる表現方法を抜粋して紹介していくので、根拠のある知識を用いたコーディングスキルを身につけていきましょう。
この授業では、Webデザインを勉強している初心者の方、またはモバイルUIデザインを基礎から学びたい方を対象に、モバイルサイトデザインにスポットを当てて、UIデザインの基礎授業を講義と実技を交えながら学んでいきます。
いかがでしたでしょうか？
紙のように幅が決まっていなかったり、デバイスに応じて見せ方を整える必要があるなど、Webデザインは紙とはまた異なる魅力があり、それをどう表現するかはデザイナーの腕にかかっています。
まずはこれらの授業を受講することで、Webデザインに関する基本的な知識を身につけることが出来るでしょう。さらに、これらの授業を通じて、自身がこれからいかにしてWebデザインを実践していくかを考えることも出来たのではないでしょうか？
Schooではこれら4つの授業以外にWebデザインに関する授業を多数開講しています。ぜひSchooでさまざまな授業を受講し、Webデザインに関する知見を深めていきましょう！
