etc その他

 
その他デザイン・UI学び

未経験からWebデザイナーを目指すなら、習得するべきWeb制作スキル8選

こんにちは、最近はスマッシュブラザーズの新作の発表に興奮がさめない
デジタルハリウッドSTUDIO横浜スタッフの占部です。

Webデザインの勉強を始めたばかりの方によく

「Webデザイナーとして仕事をするためには、まず何を勉強したら良いですか?」

といったことをよく聞かれます。

今回は未経験からWebデザイナーを目指すなら、習得するべきWeb制作スキルをご紹介します。

最初からすべてを覚えようとすると間違いなく挫折を味わう事になりますので、焦らずに、スキルを確実に身につけステップアップしていきましょう。

現代のWebデザイナーに必要なスキルチェックシートとして読んでみてくださいね。

目次

1.illustratorを使ってロゴ・バナーをデザインする
2.Photoshopを使ってWebデザインする
3.HTML5+CSS3を使ってコーディングする
4.Javasvript+jQueryで動きをつける
5.Bootstrapでレスポンシブサイトを作成する
6.WordPressで更新しやすいサイトを作る
7.UIとUXについて理解する
7-1. UI(ユーザーインターフェイス)
7-2. UX(ユーザーエクスペリエンス)
8.コンテンツSEOを習得する

9.まとめ

 

 

1.Illustratorを使ってバナーなどのWebパーツをデザインする

バナー・ロゴ・アイコンなどのWebパーツ、イラストなどを作成する時には、Adobe社のIllustratorというソフトを使用してデザインします。IllustratorはWebデザインでメインに使用する事は少なく、Webパーツを作る時によく使用されるデザインソフトです。

まずはアドビの公式サイトから体験版をダウンロードしてみましょう!

初めて制作するものは名刺や地図のトレースなどにチャレンジしてみるといいかもしれません。

https://helpx.adobe.com/jp/illustrator/how-to/logo-design.html

私はアドビの公式サイトにて使いかたを解説している動画を見て勉強しました。
直感的で本を買うより分かりやすいですよ。

素材のデータもダウンロードができますので、チャレンジしてみてくださいね!

2.Photoshopを使ってWebデザインする

Photoshopは主にWebページをデザインする時に使用します。ほとんどのWeb制作会社でPhotoshopがWebデザインの標準ソフトとして採用されています。Webデザイナーを目指すならPhotoshopの習得は必須です。

Webサイトのデザインをする以外にも、
モデルさんのシミを消したり、背景画像を合成したりすることができますよ。
私は一眼レフで撮った写真を修正したり、Web制作以外にも活用しています

3.HTML5+CSS3を使ってコーディングする

Photoshopで作成したWebページのデザインを元にHTML5+CSS3でコーディングを行います。

コーディング自体はOS標準のテキストエディタなどで行う事も出来ますが、AdobeのDreamweaverを使う事でプレビューしながらコーディングを行う事が出来る為とても効率的に作業を進める事が可能です。

制作現場ではそのほかに、AdobeのBracketsやGitHub社のAtomといったソフトが多く使われています。

上記の2つのソフトは無料ですし、コーディングの内容に違いはないので、好きなものを使ってOKですが、初心者の方はコーディングの補助機能が豊富なDreamweaverをおすすめしています。

Illustrator、Photoshop、DreamweaverなどのAdobeのソフトウェアは
CreativeCoudというパックで販売されていますので、まずは
1週間の体験版をダウンロードしてみましょう。

https://www.adobe.com/jp/creativecloud.html

4.Javascript・jQueryでサイトに動きをつける

 

JavascriptやjQueryという言語を使う事でWebサイトに動きをつける事が出来ます。例えば、写真画像が切り替わる機能を作る事が出来たり、アニメーションをサイトに組み込むことができます。
これらはすべてを覚える必要はなく、使うものだけをカスタマイズ出来るようになれば問題ありません。

JQueryの効果をまとめているサイトが検索すると沢山出てきますので、

5.Bootstrapでレスポンシブサイトを作成する

BootstrapはTwitter社が開発したCSSの「フレームワーク」です。
フレームワークとは枠組みのことです。
通常CSSを書く場合、全ての枠組みを自分で作っていく必要がありますが、このフレームワークにはよく使われる枠組みがあらかじめ定義してあるので、ルールに沿って利用するだけで整ったデザインのページを作成できます。

bootstrapを利用すれば、レスポンシブデザインとよばれるスマートフォンでもPCでもレイアウトが崩れないサイトを時間をかけずに簡単に作成する事が出来ます。もちろんデザインも自由にカスタマイズする事が可能です。

モバイルファースト時代の現代において、レスポンシブサイトの需要はとても高いのでbootstrapを習得する事でマネタイズ力を高める事が出来ます。

6.WordPressで更新しやすいサイトを作る

WordPressは、ホームページを更新しやすくする為のCMS(ブログシステム)です。WordPressをホームページに導入する事で、ホームページをブログのようにかんたんに更新する事が出来るようになります。

これまではクライアントの多くは、専門知識が無く、ホームページの更新が思い通りに行えていませんでした。しかし、WordPressの登場でクライアント側で簡単な操作で更新が行えるようになったのです!
いままで更新毎にコストがかかっていたことも削減できます。

その為、日本でも年々WordPressの案件が多くなっています。WordPressのカスタマイズ力は現代のWebデザイナーにとって必須です!

7.UIとUXについて

ホームページはただ見た目がきれいなだけでは本来Webが持っている機能を十分に活かす事が出来ません。

例えばオンラインストアであれば、お客さんがホームページを見て、商品を買ってくれないと意味がないですよね?

使う人にとってにとってわかりやすく、使いやすいデザインである必要があるのです。

7-1. UI(ユーザーインターフェイス)

UI(ユーザーインターフェイス)とはユーザーに情報を伝える為のホームページのデザインの事です。最適な画像サイズ、ボタンサイズ、伝わりやすいレイアウトなどをテストする事で、ホームページのコンバージョン【目標とする結果】が大幅に改善する事があるのです。結果を変える為には、UIのチューニングが必要不可欠なのです。

7-2. UX(ユーザーエクスペリエンス)

UX(ユーザーエクスペリエンス)とはユーザーがホームページを通して得た経験や体験の事を指します。ユーザーは、常に悩んでいて検索エンジンを通して、ホームページに来ているわけです。

そこでユーザーが抱えている問題を解決するコンテンツを提供する事がホームページ運営者の使命となります。問題解決・良質なコンテンツと出会う事こそがユーザーにベストな体験であり満足度につなげる事が出来る方法です。

UIとUXを検証し、ホームページの最適化を行う事が今後のWebデザイナーに求められているスキルの一つです。

8.SEOを習得する

Googleの検索エンジンは、ホームページのコンテンツ内容やワードで検索ランキングの順位を決定しています。つまり良質なコンテンツを持ったホームページを評価して、検索の順位が上がる仕組みになっているのです。

Webデザイナーは見た目を整えて綺麗なデザインにするだけではなく、ホームページのコンテンツもデザイン・作成出来るようになるとベストです。見た目だけよくても中身の薄いホームページは、今の時代は検索に非常に弱く存在価値が薄くなってしまうからです。

将来、あなたがフリーランスとして独立を考えているなら、コンテンツSEOは必ず習得しましょう。それはコンテンツがあなたに変わってお客さんを集めて来てくれるようになるからです。
コンテンツSEOの習得には、1年程の時間が必要な為、Web制作の仕事と並行して進めても大丈夫です。

まとめ

どうでしたか?Webデザイナーになる為には、こんなに覚える事があるのとびっくりされたのではないでしょうか?

これらを初めから全てを覚える必要はありません。まずは、採用してもらう為に作品となる自分の作品=ポートフォリオサイトの制作に専念して、Webデザイナーとしての一歩を踏み出しましょう

Webデザイナーとしてデビューしてからは、紹介させていただいたスキルをコツコツと身につけ、さらにレベルアップを目指していただけたらと思います。

Web制作テクニックは、一度覚えればずっと使える最強のビジネススキルです。
「あの時大変だったけど勉強しておいて本当に良かったなぁ」と思える日があなたにも必ず来るはずです。

この記事を書いた人
デジタルハリウッドSTUDIO横浜で未来のクリエイターをサポートしてます。 ギターや映像制作、登山、旅行、に加え、最近は睡眠時間の半分をモンハンに割かれてます。超多忙です。 好奇心旺盛ですが向上心がありません。宜しくお願い致します
タグ

記事mobifyロゴ
Mobify(モビファイ)とは

Googleが認定しているマルチスクリーン対応のための最適化サービス。
デバイスに応じ、専用にデザインされたサイトを表示することができます。
ページの表示を高速化させる仕組みも持ち合せており、ユーザーの離脱を防ぐことが可能です。

▸Mobify(モビファイ)についてさらに詳しく

 最新記事