【ホームページ制作のプロになる！】Webデザイン道場（入門編）

• Twitter
• facebook
• Google+
• LINE

こんにちは。ビータイズのWeb職人まいたけです。
今日はホームページ制作の中で、デザインに興味がある方・Webデザイナーになりたい方向けに、「Webデザインのプロ」として必要なことをご紹介します。
 

デザインのスキルが高いことはもちろん重要ですが、個人の趣味や練習ではない、企業やチームに所属したりフリーランスとして「デザインをしてお金を稼ぐ」上で最低限必要な知識・技術をまとめていますので、是非参考にしてください。
 

 

Webサイト（ホームページ）におけるデザインの役割

Webサイト（ホームページ）制作の過程で、なくてはならないデザイン。かっこいいもの、かわいいもの、美味しそうに見えるものなど、ホームページの数だけデザインも存在します。
 

では、その「デザイン」が何のためにあるのか考えたことはありますか？
 
まずホームページは、企業や商品、お店などのWeb上の支店・店舗のようなものです。
大前提として、閲覧者がホームページを見るだけで「欲しい情報がスムーズに得られる」ように設計されている必要があります。
 
また、仕事としてデザインを請け負う場合、社内外を問わず、ホームページを作りたい人（発注者）が必ずいます。ホームページを作りたい人（発注者）が、ホームページを見たい人に見せたいこと、メンテナンス（更新・修正など）のしやすいデザイン、見せたい人（ターゲットユーザ）に合わせたデザインなど、発注者の様々な要望を全てまとめ、デザインという形に起こす必要があるのです。
 
デザインのプロになるためには、「なんとなくカッコイイから」「ここのイメージはこうだから」という自分の想像だけで制作してはいけないのです。そこには様々な思惑と希望があり、全てを叶えるものでなくてはなりません。
 
デザインは人の目に触れる部分を担います。いくら発注者の要望を全て取り入れていたとしても、「かっこわるいもの」「古いもの」には誰もくいつきません。
 
このようにWebデザインは、発注者にとって企業のWeb上での「顔」となるものであり、「使いやすさ」「デザイン自体の良さ」「流行に乗り遅れていないか」「要件を全て叶えているか」など、様々な面で品質を求められます。

Webデザインのプロに必要な知識

それではまず知識面において、Webデザインのプロに必要なものをご紹介します。

「Webデザイナー」という職種は、現場によって求められる知識や技術が多少変わりますが、最低限これだけは、という内容をまとめています。

Webサイト（ホームページ）の制作フロー

まずWebサイトがどのように作られているか、基本的な流れを知っておきましょう。
 
制作を専門に請け負う制作会社や、会社やチームの規模に応じて完全に分業の場合もあります。その場合はデザインのみに携わることになりますが、基本的な流れを覚えることで、自分が携わる部分以外でもスムーズに業務が行えるよう意識できるようになります。
 
ものすごくざっくり書くと「要件定義・進行管理→ワイヤーフレーム作成→デザイン→コーディング→サーバ構築・設定→リリース→運営」という流れになりますが、それぞれの工程により求められる技術が異なってきます。

幅広いデザインの知識

Web特化とはいえデザインを生業とするのですから、やはりデザインの知識は必須です。
様々なデザインを日頃から見ておくことを意識し、自分の中のデザインサンプルを増やしておくことで、いざというときに参考になりますし、引き出しが増えます。
 
また、Webデザイン特有のルールもありますが、一度はタイポグラフィや要素の配置など、「デザインの基本」を勉強することもおすすめします。
 
もともと印刷物のデザインをしていてWebデザイナーに転向される方は、Web特有のデザインに慣れないこともあるかと思います。
 
例えば文字組みは、印刷物では厳格に対応できますがWebでは細かい部分の設定ができません。分業の場合、後の工程のコーダーさんを困らせることにもなるので、媒体によってできること・できないことの意識を変えましょう。

業界の最新情報

こちらはデザインに限ったことではありません。Web業界に携わる方全般に言えることですが、Webは変化が著しく、環境が日々刻々と変化します。
 
一度Webデザイナーになったからといってそこで勉強をやめてしまっては、すぐに時代の流れについていけなくなります。
少なくとも２〜３ヶ月に一度、最低でも年に一回は、「最近の流行デザイン」「新しい技術」「新しいツール」など、デザインやWebに関することの情報収集をしましょう。
 
「新しいものが良い」とは限りませんが、知っているのと知らないのとではデザインのスキルに大きな差が生まれます。

Webデザインのプロに必要な技術

次に、Webデザインのプロになるために必要な技術をご紹介します。

Photoshopの技術

Adobe社製のPhotoshopは、元々は写真のレタッチなどを行うためのソフトですが、Webデザイン現場でも主流のソフトです。
 
おそらくWebデザインの学校などではPhotoshopを使用してWebデザインを学ぶのではないでしょうか？　社内のWebデザインツールがPhotoshop、という企業も多く、外注間とのデータのやりとりもPSD形式で行うことが多いです。
 
Photoshopは業界標準のソフトなので、「出来たほうがいい技術」ではなく「できないとダメ」な技術です。個人でも昔と違って利用しやすいプランなどもありますので、是非使いこなせるようになりましょう。
 
また、歴史の長い企業だったり、チームの規模などにより、常に最新バージョンがインストールされているとは限らないので、できれば最新版のCCだけでなく旧バージョンのCS5,6あたりも使えるといいですね。
 
※まいたけはPhotoshop5.0から使っていますが、さすがに現場ではCS2くらいが最古だったかな・・。新しいバージョンで触っておけば、なんとなく古いバージョンも使えるのでCCを使っていれば大きな問題はないと思います。

Illustratorの技術

こちらもAdobe社製、ベクターデータで作成するIllustratorです。
Webデザインは経験上Photoshopを使用する現場が多いですが、印刷物の制作をメインにしている制作会社や、紙→Webという経歴をお持ちの方など、Illustratorを使ってデザインされる方もいらっしゃいます。
 
Photoshopをメインにする場合でも、例えばロゴデータや素材として使用するイラスト・アイコンなどがIllustratorデータだったりする場合がありますし、少規模のチームの場合、Webと紙のデザインを同時に担当することもありますので、必須ではないですが簡単なチラシや資料くらいはIllustratorでつくれる技術があるといいですね。
 
少なくともパスやオブジェクト、文字組みの基本は覚えて、ベクターデータの編集（部分的に色を変えるなど）程度はできるようにしておきましょう。

コーディングの技術

働く現場によっては、「Webデザイナー」という職種の対応内容にコーディングが含まれている場合もあります。
ビータイズの場合、現在６名中４名がプログラマで、単純なコーディングを行うのがまいたけを含め２名です。少人数であればあるほど兼任になることが多いので、どんな現場でも問題なく活躍できるよう、最低限のコーディング技術は身につけておきましょう。
 
少なくとも、調べながらでも構わないので自分のデザインしたものが一から全てコーディングできるようにしましょう。最近のWeb制作ではレスポンシブな造りにすることが多いので、レスポンシブサイトがコーディングできることも必須です。
 
コーディングが自分でできると、「このデザインはコーディングしやすい」とか「これは再現不可能」ということが身にしみて分かるので、「コーディングしやすいデザイン」を自然と心がけることができ、分業の場合でも必ず役立ちます。

一般的な書類作成・管理の技術

地味に要求されるのがこちら。
何の関係があるのか？と思われるかもしれませんが、Webデザインに関わる資料や指示書、原稿がどんなフォーマットできても対応可能にしておかなくてはなりません。
 
例えば自分がMacで、発注者がWindowsの場合に、発注者の指示書が「Word」「Excel」といったMicrosoft社製のもので作成されている場合、Macでは代替ソフトがないと中身を見ることすらできません。
 
相手に「このフォーマットでは開けないので送り直して」と伝えることもできますが、基本的にタイトな制作スケジュールの中で、書類が見れないだけの待ち時間が発生する、というのは自分と発注者どちらにも不利益になり、ムダな時間となってしまいます。
 
あらかじめ自分や相手の環境に合わせてソフトを用意したり、また制作が終わった関連書類を適切に処理していかないと、どんどんたまってしまいます。デスクトップがアイコンだらけになっていたりすると、いちいち必要な書類を探さなくてはならず、それだけ余計な時間とストレスが増えるだけです。
PC上、実際の紙など、ルールを決めてきちんと管理する能力も求められます。
 
まいたけはPマーク取得企業に所属していたということもありますが、基本的にプライベートも含めてデスクトップのアイコンは５つ以内です。階層が深くなるのが難点ですが、「ここにこういうルールで入れる」と自分で決めているので、特に資料探しに手間取ることはありません。

持っていると武器になる知識・技術

プロのWebデザイナーとして、あると良い知識や技術を紹介します。
将来自分がどうなりたいかにもよりますが、基本的にはやりたいことや伸ばしたい方向の延長にある知識・技術を習得していきましょう。
 
何がいつ自分の役にたつか分からないので、とりあえず見てみる、やってみるという姿勢も時には大事です。

最新のデザインツールの情報

「業界の最新情報」の項でもお伝えしていますが、デザイン技術に直接関わるので、最新のデザインツールや今使用しているツールのアップデート情報は常に知り、試しておきましょう。
 
また、自分のメインツールとして導入する場合、発注者とデータのやりとりを行う場合や企業内でのツール統一の問題がありますので、よく確認してから導入しましょう。
 
ここではいくつかデザインに関連するツールをご紹介します。
 

公式サイト：https://www.sketchapp.com/
 
Photoshopの次に制作現場で浸透しつつあるWebデザインツール「Sketch」。こちらはUI・Webデザインに特化し、ベクターデータでデザインできるソフトです。
プロトタイピングやあらかじめ利用できるUIパーツが選べたりなど、Photoshopにない機能もあり、Photoshopと比較して動作も軽量です。
 

公式サイト：https://studio.design/ja
 
こちらはSketchよりもさらに新しいUI制作ツールで、ブラウザ上で動くツールです。ツールを使用して作成したデザインはそのままコードになるので、コーディングが不要で、「ライブシェア機能」によりチーム内外にデザイン確認が簡単に行えるようです。無料プランもあります。
 

公式サイト：https://www.adobe.com/jp/products/xd.html
PhotoshopやIllustratorと同じAdobe社製の新しいUI制作ツールです。CreativeCloudを契約していれば追加料金なしで利用できます。
こちらもプロトタイピングやUIデザインを行うことが出来ますが、画像の処理自体はあまり機能がないのでPhotoshop等で制作してから埋め込みを行います。また、ベクターデータということもありますが、ソフト自体の動作が他のAdobe製品と比較してもとにかく軽く、速いです。
 
URLを発行できるので、プロトタイピングツールの外部確認がかんたんに行えます。
 

プログラミング・スクリプト開発の技術

コーディングにはhtmlやCSSだけでなく、JavaScript・PHPといったプログラムの知識が求められることもあります。
※ここではWebデザインに関わるもののみを指します。
 
たとえば、メインビジュアルをスライドの様に動かしたいとか、ページをスクロールしたときに画像を動かしたいとか。主にWebサイトに動きを加える処理ですね。
 
すでにあるライブラリやスクリプトを利用できることはもちろんですが、簡単なスクリプトが作れるようになっておくとWebデザインの幅も格段に広がりますし、デザイン提案の段階で「ここはこのように動かします」等お客様への説明もスムーズに行うことができます。
 
実際にプログラムを組むことが難しくても、「こういうことができるんだな」という知識を貯めておくことが重要です。

Webサーバの知識

こちらはデザインとは直接関係ありませんが、Webがどういう仕組みで動いているか、Webサーバによる特徴や違いなどを覚えておくと、自分がコーディングをするときにも役立ちます。
 
Webデザイナーはお客様向けのマニュアルや提案資料をまとめることもありますが、自分が知らない情報をわかりやすくまとめることは難しいので、Webに関わることは一通りさらっと知っておく、くらいの意欲があるとより現場で重宝されます。

SEOの知識

Webデザインの段階でSEOのことを意識して作れると、コーディングのときに役立ちます。例えば、見出しをブラウザの打ち文字を使用する前提でデザインを制作しておくなど。
 
デザインが完了しコーディングの段階で「ここの見出しは打ち文字にしたい」という希望がでても、デザインの確認が終わってしまっているのでコーディングで変えにくい、といったケースが防げます。
 
あらかじめSEOの知識を持ち、デザイン発注者とデザインを詰めていく段階でも、「ここはSEO優先で、提案しているデザインとコーディング後の見た目が少し変わる」ということをきちんと理解し、説明できるデザイナーになりましょう。

Webデザインのプロになるための心構え

ここではちょっとメンタル的なことになりますが、まいたけが日々制作していてWebデザインに思うことを紹介します。
 
Webに限ったことではありませんが、デザインは「人の頭の中にある目に見えないもの」を形にしていく、自由なようで、制約も多い仕事です。
発注者のことだけでなく色んな要素を踏まえて形にしていく必要があります。Webデザインでは更に、平面的なデザインだけでなく動きも想定しなくてはなりません。
 
そこで総合的に何が求められるかですが、デザイン力より知識より技術より何よりもまず、
「配慮する力」　に尽きるとわたしは思います。
 
発注者にも色々な方がいます。Webに慣れていたり全く知らなかったり、こだわりが強い方、Webサイトがあればいい、という方などなど本当に十人十色、ケースバイケースです。
 
ただ言われたものを形にするだけではプロとは言えません。
「作る理由」「見る人」「作りたい人」「見た人が取りうる行動」「今までのやりとりや経緯」などなど、あらゆることに配慮を巡らせていれば、ただ作るだけではないアイデアも生まれますし、自分から「もっとこうした方がいい」「ここはこの方がよいのではないか」等、提案やアドバイスをすることもできます。
 
その配慮は必ず自分の制作したものにも反映されますし、ゆくゆくの評価にもつながります。
ちょっとしたことでもいいので、俯瞰的な目線で見ることもできる「気の利くデザイナー」を目指しましょう。

まとめ

今回はWebデザインのプロに必要な知識や技術をご紹介しました。まいたけの経験上、必要そうなものを厳選していますので、現場でも充分参考にしていただける内容です。

もしこのページに掲載している内容で興味が出たりわからないことがあったら、調べてみてくださいね。自分で調べることができるのも、プロとして必要な力のひとつです。

書いた人：

こちらの記事もおすすめ

• Twitter
• facebook
• Google+
• LINE