Webフロントエンドエンジニアのコンコンタです。
デザインも勉強中で、当ブログはデザインから全て僕が作っています。
ポートフォリオサイトなり、ブログなり、自分のサイトを作ってみたいと考えている人は結構いるはず。
そんな方の多くはHTMLなどのIT技術に意識を奪われがちですが、まず大切なのはデザインです。
この記事では、Webデザインの基礎、Webデザインで使うソフトなどについて解説していきます。
ソフトの具体的な操作方法については触れませんので、それらは適時公式サイトのマニュアルなどで調べてください。
デザイン制作って必要なの？
そもそもどんな作業なの
Web制作を全く知らない方は、このデザイン制作という工程自体をスキップしてしまいがちです。
デザイン制作とは、デザイン用ソフトを使用してWebサイトの見た目だけを先に作ってしまう作業のことです。
実際にブラウザでみる見た目と完全に同じものをまずは絵で作ろうという話ですね
見た目はそっくりですが、あくまで絵なのでボタンなどは押しても動きません。
いきなりHTMLを書いちゃダメ？
絵を最初に作り、そのあとに実際に動くサイトをHTMLで作る。
一見するとデザイン制作は必要無いように思えてきます。同じものを２回作るのに等しいですから。
しかし、人から依頼を受けて制作をする場合は必須です。
まずはデザインを制作してクライアントに見てもらい、要望をもらって反映させる必要があります。
絵だけを作る方がかかる時間は少ないので、手直しを要求された場合に対応しやすいです。
会社でWeb制作する場合はデザインとコーディングで担当する人が分かれる場合もあり、分業の観点からもデザイン制作とコーディングで工程を分けるのが有効です。
また、１０ページ以上のサイトだとか、規模が大きい場合にはコーディングをするときにデザインとして完成像全体が見えているとパーツを使い回したりして効率よく作ることができます。
個人でもデザイン制作は必要？
個人制作におけるデザイン制作は必要なんでしょうか。
ワガママなクライアントもいませんし、自作なら分業を考える必要もありません。
ぶっつけ本番でサイトを作って絶対にデザインの失敗があり得ないのなら確かにデザイン制作は必要ないです。
ですが、自主制作でも試行錯誤は付き物です。初心者なら尚更
HTMLから作ってしまった場合、気に入らない箇所が出てきても手直しが非常に難しく時間がかかります。
結局、デザインを作ってからコーディングに入った方が時間の短縮になることがほとんどです。
また、個人制作のサイトは完成後に機能を付け加えたりすることがあります。
そうなったとき、デザインデータが残っていればそこにボタンを付け足したりして新しいデザインを簡単に試すことができます。
サイトのコードしか残っていない状態だと、既存の機能を壊さないようにヒヤヒヤしつつ追加デザインを試さなくてはなりません。
他人から手直しを依頼されることはなくても、自分自身というワガママなクライアントの要望に応えるためにはデザインを用意しておいた方が良いのです。
デザイン制作に使うソフト
定番ソフト
定番はAdobe社のIllustrator, Photoshop, XDのどれかでしょう。
会社などでは歴史が長く汎用性の高いPhotoshopが多いと思います。
どうやって選ぶか
個人的な意見として、以下に各ソフトの長短をまとめました。
Photoshop
一番汎用性が高いソフト
レイアウト制作は勿論のこと、写真加工からアイコン制作まで可能
Adobe製品のライセンスは１製品のみor全製品利用可能のどちらかなので、１製品ライセンスの場合は汎用性が高いPhotoshopを選ぶのが良いでしょう。
欠点は機能が多すぎてボタン数が多すぎる上、動作が重くなること。
複数ページのレイアウトを１つのファイルで作ると凄まじい重さになります。
Illustrator
アイコンなどの色数が少ないシンプルなデータを扱うのが得意なソフト
パス関連の機能がPhotoshopよりも使いやすく、余計な機能がない分レイアウト作りはこちらの方が個人的にはやりやすい。
欠点は写真加工機能がないので、写真を使ったデザインを考えるなら写真加工ソフトが別に必要になること。
Adobeの全ソフトライセンスを買ってPhotoshopと使い分けるのがオススメ
XD
Webデザインに特化した比較的新しいソフト
写真加工機能がなく、パス関連の機能もIllustratorよりも弱いですがレイアウト作成の機能が非常に使いやすいです。
動作が軽くて１つのファイルに複数ページのレイアウトとスマホ用デザインを一緒に作っても軽快に動作します。
欠点としては、写真加工やアイコン制作に他ソフトがあった方が良いこと
新しいソフトなのでWeb上に情報が少ないことなどがあります。
Web制作会社でもまだ使っているところが少ないので上２つのソフトに比べて仕事に繋がりにくかったりします。
（そのうち移り変わっていくと思いますが）
僕のオススメはXD
Adobe社的にもWebデザインはXD！といった形で推しているので、今後PhotoshopやIllustratorがWebデザイン用に使いやすく進化することは無いと思います。
将来性的にも、個人制作はXDで練習していくのが良いでしょう。
機能としてはリピートグリッドが非常に使いやすくて強力
ポートフォリオサイトの作品のサムネイルをずらりと並べた感じの繰り返しレイアウトを簡単に試してみることができます。
他にもいろいろ便利機能がありますが、細かい話なので別の記事で
大体の流れ
構想を練ろう
ここではサックリ書きますが、一番大切な作業です。
デザインソフトを起動する前にどんなサイトを作りたいのかは明確に言語化しておきましょう。
紙にレイアウトを簡単に書いておくとデザイン制作で詰まりにくくなります。
当サイト「ぎゃらりー」のラフ
部品を作ろう
アイコン、写真の切り抜きなど必要な部品は先に作るのがオススメです。
部品を全て作り、最後にそれを組み合わせてレイアウトを作った方が作業を行ったり来たりせずに済みます。
どんな部品が必要なのかを最初に把握しておくためにも構想をよく練っておくことが大切なわけです。
Illustratorでレイアウトを作っている場合でも、アイコンなどは別ファイルに分けて作るとあとで別の制作物でも部品として使いやすくて便利です。
当サイトの部品はIllustratorで作成
イラストはClip Studioで手描きです。
PC用レイアウトを組み立てよう
どちらからやってもいいんですが、僕はPC用レイアウトから先に作ります。
大きくて情報量が多い方から先に作った方が部品を網羅できるからです。
横幅は1920pxでキャンバスを作成し、縦幅は適時伸ばしながら作っていきます。
レイアウトも部分分けを意識しながら組んでいくと後から手直しがしやすくなります。
ヘッダ、コンテンツ、サイドバー、フッタなどでレイヤー分けをしながら部分ごとに作りましょう。
XDで実際にレイアウトを作成していく細かい流れは長くなるので、別の記事で書こうと思います。
PC用レイアウト作成の注意点
PC用レイアウトの注意点として、画面の横幅はモニタやウインドウサイズによって変わってくることです。
1366pxだったり1280pxだったり、プロジェクターに写すとそれ以下だったりするので、横幅がオーバーしないように注意しましょう。
画面サイズが縮んだときに、レイアウトのどの部分を縮小するのかといったイメージは持っておく必要があります。
縦幅はスクロールするようにすれば良いので、そこまで意識しなくても良いです。
スマートフォン用デザインに直そう
PC用、スマホ用のデザインは両方制作する必要があります。
ゼロから作らなくても、大きさを調整することで比較的ラクに作ることができます。
スマホは基本的に横幅は350pxです。PCよりもかなり小さいです。
同じ情報をレイアウトを変えて表示する必要があり、構想段階からある程度両方のレイアウトを意識しておかないと手が止まってしまうこともあります。
スマートフォン用デザインの注意点
Illustrator、Photoshopでデザインする際に非常にややこしい点として、全サイズを二倍にしてデザイン制作をする風潮があります。
理由はスマートデバイスのRetinaディスプレイ仕組みのために、２倍のサイズの画像を用意する必要があるからです。
ここで書くには内容が濃すぎるので割愛します。
（参考：Retina対応のWebデザインをするときの注意点 FASTCODING BLOG様）
XDでデザインする場合はこの２倍計算は不要です。
デザインデータ内の画像を２倍or３倍にして切り出すRetina用機能があるので等倍でデザインできます。
練習方法
Webデザインも反復練習が有効
スポーツでもプログラミングでもデザインでも、初心者のうちは反復練習が一番効果が出ます。
あまり深く考えず、基本機能を覚えたらとにかく何かを作ってみましょう。
作ってみたいアイデアがあるならそれを作ってみるのが一番良いです。
アイデアを作っていく中で、「あれ、こういう部品はどうやって作るんだろう」と思ったら適時ググりながら機能を覚える。
これを繰り返していくうちに必要な知識が身につき、デザイン制作をこなせるようになっていきます。
気に入ったサイトを模写制作しよう
もし気に入っているデザインのサイトがあるなら是非模写制作してみましょう。
サイト上の画像などの部品は全てダウンロードし、そっくりそのままソフト上でデザインを再現します。
（公開せず、自分の練習の為であれば著作権等の問題もありません）
１回これをやるだけでもソフトの機能はだいぶ覚えられますし、余白の取り方、フォントの大きさなどのコツが身につきます。
ぼーっと見ているだけでは気がつかなかった工夫も、作ってみることで「ああ！こんな風に表現してるのか！」と気がつけることが多いです。
デザインは出来そうで出来ない
まず作ってみて自分を知ろう
デザインは「出来そうで出来ない！」と感じることが非常に多いと思います。
「こんなものが作りたい」というイメージはあっても、初心者が実際に作ってみると素人感満載のデザインになってしまいがちです。
誰もがそんな感じですから、まずは自分を知るためにも１つ作ってみるのが良いでしょう。
１つ作ってみてイメージが目に見えるものに変わることで、自分に何が足りないのかがわかってきます。
作らないうちはイメージだけです。進展することはありません。
Adobe社ソフトは月額制で初期費用は安いので簡単に始められます。
まずは一つ、自分の憧れを実際に制作してみて目に見える形にしてみてはいかがでしょうか。
