グラフィックワーク(2)サイトのデザインカンプ-デジハリ修了(6)
グラフィックワーク(2) サイトのデザインカンプ
名刺とバナーの制作を終えたら、いよいよWebサイトのデザインです。はじめてのWebデザイン、慣れないPhotoshopの操作に私はいきなり躓きました。
Photoshopが……
私が受講したときはPhotoshopの使用が必須でした……Photoshopをほとんど使ったことがないので、これはホントにツラかったです。
XdやFigmaが使えれば話が違ったのかもしれませんが、私が受講したときは、XdもFigmaも使わせてもらえませんでした。これはPhotoshopが苦手でもやるしかありません。
（受講時期やスクールによって対応が変わる可能性もあります。要確認）
Webサイトのデザイン(1)
本講義では、Webサイトのデザインカンプを作ります。
デザインカンプとは
Webサイトの作成というとHTMLでのコーティングをイメージします（私もそうでした）。しかし、その前に目に見える形になった制作イメージ、つまりデザインカンプを先に作ります。
実際の制作では、ラフのようなアバウトなものから徐々にデザインカンプを作り上げていくのですが、そこは講義なのでスキップされています。要望を考慮していることを前提で、Photoshopを操作しながらデザインカンプを作っていきます。ここでデザインの意図を云々……はしません。
実際の制作の流れや定義についてはデジハリONLINEのブログでも、分かりやすくまとめられていました。
――この記事を書いていて気付いたのですが、デジハリONLINEのブログって講義の内容に沿っていて、動画の補足になっていたんですね。このブログを読むのも、とても勉強になります。
レスポンシブデザインとは
私が受講していたときは架空のお店の1ページだけの宣伝用のサイト。お店の宣伝なので、ランディングページのようなゴテゴテ感はありません。
ただし、レスポンシブデザインに対応させるので「同じ内容だけどPC版とスマホ版の2種類を作る」ことになります。
レスポンシブデザインの定義についてはMDNに詳しい説明があります。
一つのHTMLで、複数の端末（この場合PCとスマホ）に対応した表示にさせるという考えは、当時の自分にありませんでした。単純に、PC用とスマホ用の2つのページを用意して、アクセスする端末ごとに切り替えているのかな……ぐらいに考えていました。
でも、これって超めんどくさいですよね。このめんどくさいを解決する手法の一つがレスポンシブデザインです。
なお、レスポンシブデザインの是非や、本講義でのデザインの妥当性とかは、また別のお話。まずはPhotoshopの操作を覚えて、デザインカンプを作ることに集中します。
いざ作業開始
先にも述べたように、このデザインカンプは「要望を考慮していることを前提」としていてラフはありません。なので、Photoshopの操作をメインとしてサクサクと講義は進んでいきます。
これが、けっこう私にはキツかったです。
Photoshopの使い方は事前にバナー制作で学んでいますが、これよりもさらに使い方は増えます。動画内では、けっこうゆっくりとしつこいぐらいにレクチャーされます。
矩形を並べて、テキストを配置するだけ。
動画の通りに手を動かせば、必ずその通りになるはず……なのですが。Photoshopに慣れていないと、できたつもりでもできていない。文字を入力し直そうと思っても、意図通りに入力できない。これは我慢して、動画を何度も確認しながら根気強く繰り返して覚えるしかないです。
数値を決める意味
簡単な操作のはずなのに、どうして手こずるのか。その最大の理由は、サイズが細かく決められていることです。矩形の幅と高さ、テキストのサイズ、オブジェクト間のスキマ……すべて数値が指定されます。「なんとなく、このへんに置いてみる」はNGです。
これは考えてみると当然のことで、Webサイト内のオブジェクトのサイズはピクセル単位ですべて指定します（レスポンシブデザインで結果的に相対指定することになりますが、それは後の話）。
「このオブジェクトの高さは何ピクセル？ 120px？ 124px？」といった場合、カンプできちんと作り込んでおけば、すぐに把握できます。逆に言えば、カンプに落とし込まれていない部分は指示が漏れているということです。
「自分で把握しておけば問題ない」と思ったりするかもしれませんが。
Webサイトの制作はチームで行うこともあります。カンプがあれば、チーム内でサイズを正確に共有できます（自分が知りたいオブジェクトのサイズはカンプを見れば良い）。
というわけで、このワークではカンプを作る意味を叩き込むのが目的なのでは、と私は思いました。とはいえ、慣れないPhotoshopはツラかったです……。
Photoshopから画像書き出し
Photoshopで作成したカンプは、JPEGやPDFなど誰でも閲覧できるように書き出すことができます（PSDのまま閲覧できる環境は少ない）。
それと同時に、一つ一つのオブジェクトをPNGやJPEGなど、実際のWebサイトで扱う画像として書き出すこともできます。「拡縮した写真に効果をかけてマスクでトリミング」したものを、そのイメージのまま書き出してくれます。はじめて、この機能を知ったときは感動しました。
（XdやFigmaでもできます）
課題はプロフィールサイトのカンプ
さっそく、自分用のプロフィールサイト（ポートフォリオ）のカンプの作成です。しかも、後にはこのカンプを使って、自分でコーディングすることとなります。
お手本通りのカンプを1個しか作ってないのに、いきなりオリジナルのサイトのデザインカンプを作れというのだから、けっこうハードです。
ハードな内容なのはデジハリも織り込み済みのようです。「ワークから逸脱しないデザインで、限られた範囲でどう見せるか」と、既存のデータに変更を加えるやり方を推奨しています。
というわけで既存のデータを下敷きにして、私はSTUDIO A-COLORのポートフォリオサイトのカンプを作りました。変更点を整理すると、
全体的に色を変える
ロゴを変える
テキストの内容を自分のものに変える
写真を変える
3段組を2段組に変える（レイアウトの修正）
住所、地図を変更
このぐらいの変更でした。
はじめてのWebデザイン、慣れないPhotoshopなので、私としてはこれぐらいが精一杯というカンジでした。デジハリの推奨時間は6時間とのことですが、10時間以上掛かったような記憶が……。
でも、苦労しながらも自分でカンプを作ったお陰か、この後にコーディングする際には作業がイメージしやすかったです。
こうしてできたのが以下のデザインカンプです。
まずは課題をクリアしよう
せっかく、自分のWebサイトをデザインするのだから立派なものを作りたい！と思うのですが。
じっくり勉強を進めたい、HTMLに自信が無いという方は「ワークから逸脱しないデザイン」をオススメします。デジハリもこれを推奨しています。
この後にやるコーディングの講義は、ワークのカンプをHTMLで実装する内容となっています。受講内容通りに進めていけば、自ずと課題のコーディングもできるように配慮された構成となっています。
ここで大事なのは、本課題は「自分でコーディング」することも念頭に置かなければなりません。
2つのオブジェクトを重ねる、罫線を虹色のグラデーションにするといったことは、Photoshop上ではすぐにデザインできると思います。
でも、これをHTMLで表現しようとしたら……？ 次の講義の範囲では、まだ習いません。なので、コーディングの際には自分で調べることとなります。
習っていない範囲も貪欲に取り込もうとする学習姿勢は素晴らしいです。しかし、範囲外の学習のためにカリキュラムの消化に支障が出ては本末転倒です（個人の感想です）。
とはいえ、先の講義を先読みしてデザインするなんて、と思われるかもしれませんが。
私の場合、特に意識せずに「スライダー」でなければ実装できないデザインを提出しました。その際、「これはJavascriptの講座でやるので、今回は実装は難しいよ」とトレーナーさんからアドバイスを受けました。
このように、初学者が陥りがちなトラップでもトレーナーさんがサポートしてくれます。なので、どんどん手を動かしていきましょう。心配だったら、その都度、質問していっても良いと思います。
Webサイトのデザイン(2)
架空の企業のWebサイトのデザインカンプです。
先のお店のデザインと異なり、広報する内容が格段に増えるため、デザインするページ数も増えます。講座内容も多く、たくさん手を動かすことになります。しかし、基本的には同じことの繰り返しなので、動画のとおり手を動かしていきましょう。
企業用サイトなので、ページごとに商品説明、お問い合わせなど異なる用途があります。これら異なる用途ごとのデザインの使い分け、使い分けたデザインをPC用とスマホ用にさらにレスポンシブデザインに落とし込んでいく方法を学べます。
デジハリの目安としては、ここまでで入校から約1ヶ月と見込んでいます。順調に進められましたか？
グラフィックリファレンスの扱い
――実は、このリファレンスは視聴していません。ゴメンナサイ！ 視聴しなくても卒業はできるのですが……。
IllustratorとPhotoshopのサンプルを作りながら、ひたすら手を動かす内容のようです。
さらには、お題の通りに、いろいろなものを作っていくスキルチェックもあります。
前回も書いたように、カリキュラムの消化だけでIllustratorとPhotoshopを覚えるのは不可能です。なので、アプリに慣れていない方は、可能な限り視聴することをオススメします（見ていない私が言うのもアレですが……）。
私はデジハリを卒業してしまったので、リファレンス動画は見れないのですが。スキルチェックは、今からでも進めていこうかな……（猛省）。
この記事が気に入ったらサポートをしてみませんか？