2011年まったく知識がなかった自分が0からwebデザイナーになるまでにやったこと

パピオン

初心者からWebデザイナーになったロベルトさん。どうやってWebデザイナーになれましたか？

ロベルトさん

毎日が勉強。Google検索とYouTubeがあれば誰でもなれる！この記事を読めば何をすれば良いかわかるはず！

webデザイナーになるための勉強法

ロベルトは2011年からウェブの勉強を始めました。実はこれまでに100個以上サイトを制作しています。そんなロベルトが初心者からWebデザイナーになるまでにやることを記事にまとめました。

ロベルトさん

Webデザイナーにはいろいろなスキルが求められる。独自スキルの掛け合わせで希少性を出すことを目指すことが大切だよ。

HTMLとCSSから始めよう – コーディングの基礎は大切

HTMLとCSSの習得がウェブデザイナーになるための第一歩です。

HTMLはウェブページの構造を定義する言語で、CSSは見た目を装飾するための言語です。この2つの習得がなければウェブサイトの作成はできません。

HTMLとCSSの基礎をしっかり身につけることが、すべての土台となります。

具体的には、HTMLとCSSの書籍を購入して、そのサンプルコードを手打ちして画面に表示させることから始めましょう。

コードを1行ずつ打ち込み、その効果がどのように現れるかを確認することが大切です。基本的なHTMLタグを覚えると、次はCSSのタグを覚えていきます。実際に2カラムや3カラムのレイアウトをCSSを使って実装できるようになる必要があります。

コーディングの基礎力が備われば、本格的なサイト制作に進む準備が整います。

ロベルトさん

本を読む、動画を見る。これもいいですが、一番良いことは手を動かしてコードを打ち込むことが大切です。

メールフォームの作成でCMSの概念を理解

静的なページだけでなく、サイト訪問者との双方向のやりとりが可能な動的なページの制作もウェブデザイナーには求められます。

静的なページとは、HTMLとCSSとJavascriptだけで作られたサイトのことです。データベースを必要としないサイトのことを指しています。反対語に動的なページがあり、WordPressなどCMSを使ってプログラムによって作られるページを動的なページと呼ばれています。

代表的なのがメールフォームの作成です。CGIやPHPなどのプログラミング言語を用いて実装します。形だけのメールフォームではなく、訪問者が送信したデータをデータベースに保存し、管理者側で閲覧・解析できるシステムを構築するのが望ましいでしょう。

プログラムの概念を理解し、訪問者と管理者の両方の視点で機能性を考えて形にする力が求められます。メールフォーム作成は重要な学習過程となるはずです。

ロベルトさん

メールフォームは難しかった。今では、簡単なGoogleフォームやWordPressのプラグインでいいじゃん！とも思う。

WordPressはもはや標準 – 使いこなすことが不可欠

WordPressはもはや世界標準のCMSと言っても過言ではありません。4分の1のサイトがWordpressベースで作られているのが現状です。

当初はブログ用のプラットフォームでしたが、機能拡張によってウェブサイト制作の汎用CMSとしての地位を不動のものにしました。WordPressの基本的な使い方を学ぶのはもちろんのこと、Webデザイナーには独自のテーマテンプレートを作成できるようになる必要があります。

テンプレートを自由自在にカスタマイズできれば、WordPressの可能性は無限と言えるでしょう。今後のウェブ制作において、WordPressをある程度使いこなせないデザイナーが活躍する機会は減っていくと予想されます。標準ツールの使い方を学ぶのはデザイナーとしての基礎力そのものだと言えるのです。

ロベルトさん

WordPressを使えるか使えないかで求めている人材から外れることがあるので、習得したいスキルの１つだよ。

Photoshopで画像処理能力を高める

ウェブサイトにおいて画像の扱いは欠かせません。Photoshopを使って画像の加工・編集ができる力が必須となります。

画像のトリミング、圧縮、フォーマット変換などの基本操作を習得することはもちろん、レイヤーを使った編集や曲線などを駆使して写真を印象的に引き立たせるテクニックも身につける必要があります。画像を単なる装飾としてではなく、サイトの目的に適した効果的な使い方を研究していきましょう。好みのサイトの画像を分析するのも画像活用力向上に役立ちます。画像処理はデザイン力の基盤を形成する重要な要素です。

ロベルトさん

ガチプロを目指すならPhotoshopは必須。そこまでではない人には無料で使えるCanvaをおすすめするよ。

サイトの配色はデザイン力の証明

ウェブサイトの配色は決して軽視できません。訪問者がサイトで感じる印象や雰囲気は配色次第で大きく左右されます。デザイナーのセンスが問われる部分でもあります。まずは色彩に関する基礎知識を学び、色の定義や色相環、配色のルールなどを理解する必要があります。その上で、サイトのテーマや目的、対象ユーザーに適した配色を検討します。間違った配色だとユーザーがストレスを感じてしまいます。好印象を与えられる配色を選ぶセンスこそがデザイナーの真価が問われるところだと言えるでしょう。

ロベルトさん

デザインはセンス。センス。センス。自分にセンスがなければ真似る。

プロのサイトを参考にデザイン力を磨け

素人っぽいサイトを避けるには、プロのサイトを分析し、その良い点を取り入れることが短期間でデザイン力を高める近道です。気に入ったサイトのデザインをできるだけ模倣してみましょう。

コードの丸パクリは避けるべきですが、PhotoshopとCSSを駆使して似たデザインを再現する力が必要不可欠です。プロのデザインを再現する過程で、自然とセンスが磨かれていきます。したがって、単なる模倣以上のことをしているのです。プロサイトを参考にしつつ、独自の発想を加えることで、イメージ通りのサイトが制作できるようになるはずです。

サーバーとドメイン知識は欠かせない

サイトを公開するには、サーバーとドメインの知識が必要不可欠です。

自前のサーバーを構築する方法もありますが、コストと運用面を考えるとレンタルサーバーを利用するのが一般的です。サーバーのファイルパーミッションの設定やFTPを使ったファイル転送、ディレクトリ構造の理解が基本中の基本です。

ドメインに関しても、ドメインの種類とその特徴を知っておく必要があります。サーバー変更時のDNS設定やデータベースの知識も重要です。これらの知識は書籍を読むことはもちろん、レンタルサーバー会社のサポートに積極的に質問することで効率的に習得できます。エックスサーバーやさくらのレンタルサーバーなど電話やチャットサポートのあるところがおすすめです。

ロベルトさん

まずはドメインとサーバーについての知識をつけること。勉強をしていないとサポートの方に質問すらできない状況になる。

CSS3でサイトの完成度が格段に上がる

CSS3にはグラデーションや角丸、アニメーションなどの表現力が加わりました。そのおかげで、従来は画像で実装していた部分をCSSのみで実現できるようになりました。これにより、サイトの視覚的なクオリティが大幅に向上します。

また、画像よりも読み込みが高速になるので、ユーザビリティの改善にもつながります。画像のオーバーユースを避け、できる限りCSS3を活用することで、サイトのプロ感と洗練度がグッとアップします。

ロベルトさん

CSSでここまでできるのか！というのが感想です。CSS3でアニメーションを作れるのは１つスキルです。

Sass（サス）はCSSをもっと便利に使える

SassはCSSの上位互換言語です。変数やネスト、mixinなどの機能があり、CSSのコードをスッキリ管理できるようになります。一度Sassに慣れるともうCSSに戻れなくなるでしょう。

デザイナーの6～7割が既にSassを利用しているそうです。修得のハードルは高いものの、生産性と可読性の向上は計り知れません。

ロベルトさん

実務では実はSassを使用していません。DreamWeaverというAdobeのソフトを使っているので、Sassを使っての開発はしていないのが現状です。

ウェブマーケティングでサイト運営力が開花する

アクセス解析のためにGoogleアナリティクスなどを使ってデータを集めるだけでは不十分です。

データをどう分析し、サイトの改善に活用するかが重要です。そこで必要なのがウェブマーケティングの知識です。

データからサイトの課題を発見し、解決策を立て実行する一連のプロセスがウェブマーケティングです。このスキルがあるからこそ、サイトは成長していくのです。デザイン力と並んで、マーケティング力がデザイナーには要求される時代になったと言えます。

ロベルトさん

マーケティングは、経営者に近い知識が必要です。マーケティングの切り口からWebデザインを提案できるデザイナーは重宝されることでしょう。

サイトの目的を数値で定義し改善点を見極める

サイトの目的を数値化した上で、現状のデータを分析することで、目的とのギャップを発見できます。

例えば、月間購入者数を1,000人にする、といった具体的な数値目標を設定しましょう。その目標に対してデータがどれだけ達成できているかを判断し、不足している点を改善していきます。

自分で仮説をたて、変数や定数から公式を使い、戦略を組み立てることができれば、Webコンサルティングとして活躍できます。単純にGoogleアナリティクスの操作方法だけ習得しても意味がないのはこのスキルと掛け合わせてはじめて、効果的な改善ができるのです。

JavaScriptで動きのあるサイトを作ろう

JavaScriptを学ぶことで、クリックした時に内容が変わったり、ページ内をスクロールするなどの動的な仕組みを実装できるようになります。

JavaScriptを使うことでウェブサイトに動きを付け加え、訪問者の注目度を高めることが可能です。JavaScriptの書籍を参考に、サンプルコードを手打ちして動作を確認することから始めましょう。効果的な動きを付けるアイデア次第で、サイトの面白さが増すはずです。

ロベルトさん

HTMLとCSSを習得することは比較的簡単です。しかしこのJavascriptで挫折する人が多いです。ライブラリなどをサイトに設置するのはできるが、ゴリゴリプログラムコードを書いて、オリジナルの実装ができるのは１つの強力なスキルになります。

MySQLでデータベース知識も身に付ける

PHPと連携して、MySQLなどのデータベースを扱えるようにすることで、サイトの可能性が大きく広がります。入力されたデータをデータベースに保存し、必要に応じて抽出・活用できるようになります。大量のデータを扱う状況になった時、その真価が発揮されます。データベースを使った開発は、今後の重要なスキルとなることでしょう。

WordPressはデータベースをそこまで意識しなくても使えます。使えたら、トラブルが起こった時に良いといったメリットがあります。しかし、必須ではないので軽く触りだけでもやっておくことで、WordPress全体の仕組みを知る手掛かりになることは間違いないです。

ロベルトさん

データベースを触れるスキル。これはもはや１つ立派なスキルです。

継続的な自己研鑽で常にスキルをアップデート

IT分野のスキルは常に更新され続けます。自分の知識・能力に満足することなく、最新の技術動向を敏感にキャッチアップし、自己研鑽を欠かさないことがプロフェッショナルな態度といえます。今ではあればChatGPTをはじめとする生成AI、これからはAIを自分の業務にどれだけ浸透させていくことができるかが勝負の勝敗を分ける大きなことだと思います。学び続ける姿勢を持ち、自発的にスキルアップに取り組みましょう。

ロベルトさん

毎日が勉強。これは私のマインドです。

PS.2018年頃に書いたブログ原文

webデザイナーになるための勉強法

webデザイナーになるためには制作ソフトや言語を使いこなせなければなりません。webデザイナーのスキルには大きくわけて3つのスキル習得が必要で、その他サーバーやドメインの知識が必要になります。

1.コーディングスキル

私が最初に覚えたことは、HTMLと呼ばれる言語です。HTMLが習得後、CSSと呼ばれる言語を習得しました。
CSSを習得してからはプロのようなサイトを作れるようになりました。

CSSを使わず、HTMLだけでは素人が作るサイトのようなサイトが出来上がります。基本的な勉強法は、本を見て
本のコードを写経します。具体的には、コードをテキストエディタなどで打ち込み実際の表示されるページを確認し、動作を1つずつ確認して習得していきました。

コーディングスキルは、これをやることで基本は身に付きます。２カラムや３カラムのサイトのデザインはCSSを使って実装できます。しかし、これだけでは、プロのようなサイトにならなかったのです。

プロのサイトは、これに加えて、動きがあったり、画像加工されていてとても綺麗でダイナミックなのです。

HTML＋CSSはあくまでレイアウトを綺麗にするくらいでした。

2.プログラムスキル

動きのあるサイトは、どうやって作っているのか？

それは、JavascriptやjQueryと呼ばれる言語を使って、動的なサイトを制作していることがわかりました。

そこで、JavascriptとJQueryの本を買って、実際に手を動かして写経してブラウザに表示させたりして、動きを1つずつ確認にして学習していきました。

＜これで動きのあるサイトが作れるぞ＞

そう思ったのですが、コーポレートサイトなどには、必ずと言っていいほど、
メールフォームと呼ばれるユーザーが入力した情報を受け取れるシステムが設置されています。

＜これはどうやって作っているのか？＞

CGIやPHPと呼ばれる言語を使ってメールフォームのシステムができている。そのプログラムのおかげでユーザーが入力した情報をメールで受信することができます。

私はCGIの本を買っていつもように、写経しました。
CGIには便利なメールフォームプロと呼ばれる無料で利用できるメールフォームのプログラムが配布されています。
これを使わない手はありません。

このシステムは、１度設置する経験をすれば、後は簡単に設置できるようになります。なぜならすでにできているプログラムを設置するだけだからです。

次にPHPについて学習し、自分でメールフォームをPHPで自作したいと思いPHPの学習も本で写経しました。
本屋で販売されている、あらゆるPHPの本を読み漁り、自作できるメールフォームのコードが記載されている本を探しました。見つかったその本を参考にして、メールフォームを作成しました。

＜これで外注せずにウェブサイトを作ることができる＞

PHPやCGI、Javascriptなどと並行して習得したスキルがあります。

それは、Photoshopの操作スキルです。
画像加工やデザインにかかわる部分で、Photoshopスキルが高いほど、プロが作る綺麗なサイトを制作することができます。

3.画像処理・デザインスキル

Photoshopの使い方と配色の組み合わせの相性の知識を勉強しました。

ウェブサイトにおいて配色の組み合わせが重要で、配色でユーザーが受ける印象はガラリと変わります。
間違った配色をすると、サイトに訪問したユーザーは居心地が悪くなり、離脱率が高くなります。
反対に、正しい配色をしたサイトでは、ユーザーの滞在時間は長くなります。

配色は、デザインの面(人に与える印象)と、サイトの目的にも影響する大切な部分です。
手を抜くことができません。

そして、プロのような綺麗なエレガントなサイトを制作する上で、一番重要となるポイントを今からお話します。

それは『とにかく真似ること』でした。

私は、自分が気に入ったサイトを模倣して再現できるように、PhotoshopやCSSを使ってコピーサイトを作りました。
(もちろん、コードは丸パクリはしません。画像も自分で制作します。)

プロのデザインを真似ることで自分のスキルにできます。

ウェブデザイナーになるには、上記の3スキルが必須です。
一人前になるためには、サーバーとドメインの知識も必要です。

サーバーの知識とは、自作サーバーはコスト面や運用面で割に合いません。
そのためレンタルサーバーが主流です。

ファイルのパーミッション(権限の許可レベルの設定)や、
FTPの設定方法(サーバーにデータをアップロードする方法)、
ディレクトリの構造を理解する必要があります。

ドメインについては、ドメイン種類と特徴。
ドメインには、.jpドメインや.com .net　などあります。
法人ドメインではco.jp　などたくさんの種類があります。

また、サーバーを変える時のネームサーバーの設定方法や、
MySQLなどのデータベースなど、バージョンなど、自分がやりたいことが
できるサーバーなのか知る必要があります。

これらの知識は、どうやったら身につくのか？

疑問があれば、すぐにサポートに連絡して聞くことをおすすめします。
エックスサーバーやさくらのレンタルサーバーでは、サポートは電話で対応してくれるので、すぐに疑問を解決できます。

疑問があるたびに、質問する姿勢が、サーバーとドメインの知識がつきます。
また、レンタルサーバーのよくあるご質問を読んで、疑問があれば電話で聞くことも勉強になります。

番外編　Wordpress

現在、世界中の4分の1のサイトはWordpressで作られていると言われています。
ワードプレスは、もはやスタンダードです。

私は、Wordpressを知った時に、正直　不要なスキルだと思いました。
その当時、自分でサイトも作れるようになっていたし、
マイクロソフトのWordみたいなサイト制作ツールだと思っていたからです。

しかし、ワードプレスは、そんな限られた使い道しかないツールとは、
相反するものでした。

ワードプレスは、もともとブログの無料プログラムでした。
今では、カスタム投稿やカスタムフィールドなどの登場により
CMS(コンテンツマネジメントシステム)として、完成度が高いプログラムになりました。

これは、自分のスキルにしたいと思い、本を購入しWordpressの基礎・使い方をマスターしました。
次に、Wordpressを自分でデザインして自作テーマファイルを作成するようになりました。

今では、ワードプレスのカスタム投稿を使ったシステム設計まで行うことができるようになりました。

最新のwebデザイナーのスキル

CSS3

CSS3の登場でスマホとPCに対応したサイトを制作することができるようになりました。
CSS3のメディアクエリと呼ばれるコードを使うことにより、デバイスの横幅によってデザインを最適化することができます。

CSS3は、それだけではなく、グラデーションやシャドウ表現、角丸にも対応しており、今まで画像で作成していたボタンや見出しをCSS3だけで表現することができるようになりました。

これで、ページの読み込み速度が上がり、SEOにも有利になります。
画像ばっかりつかっていると、読みこむ画像の容量が大きくなり、ページ全体が読み込まれるまでに時間がかかってしまったりします。
できるだけCSS3をつかってコーディングすることで読み込み速度を早くすることができます。

CSS3で一番すごいことができるのは、アニメーション機能です。
今まで動きのあるサイトを作るときは、javascriptが当たり前でした。
CSS3の登場でjavascriptを使用しなくても、動きのあるサイトを作ることができるようになりました。

CSS3のアニメーションを極めることでインタラクティブなサイトも制作することができます。

Sass(サス)

Sassは、CSSをプログラムっぽくした言語です。
Sassの意味は、いけているCSSということで、何がそんなにいけているのか？

それは、CSSの管理がしやすくなることです。

Sassを一度、覚えてしまうと普通のCSSに戻ることができないようです。
それだけ管理を効率的にでき、ファイルとコードを管理しやすくなるメリットだらけの言語です。

導入ハードルは高く、プログラムということで、学習コストも高いので、普及していないと思っていましたが、ウェブ制作の6割から7割はSassを導入しているそうです。

これは、もうスタンダードだと思います。
学習コストを払ってでも、修得するべきものだと私は思います。

＜まとめ＞ウェブデザイナーになるには

■1.コーディング基本
HTMLの習得
CSSの習得
javascriptの概要を習得

■2.プログラム
CGIメールフォームの設置
phpの概要を習得
phpを使ったメールフォームの作成
WordPressの基礎・使い方をマスター
WordPressでテーマファイルを作成

■3.画像処理・デザイン
Photoshopの習得
配色の勉強

・サーバーとドメインの知識
・Wordpressで自作テーマ作成

＜まとめ＞webデザイナーになるには

・CSS3の習得　特にアニメーション
・Sassの習得

PS.さらにウェブマーケティングの領域も習得しよう

サイトは本番アップしてからが本番です。
サイトには目的があるはずです。サイトに目的を達成してもらいましょう。

そのためには、日々アクセス数やアクセス経路などサイトを数値化し、改善していく必要があります。

無料で利用できるグーグルアナリティクスと呼ばれる便利なツールを使ってサイトを解析します。
私は、グーグルアナリティクスのことも理解できるようになりました。

専門用語が多くて、最初は用語を覚えるのに必死でした。
ある程度、グーグルアナリティクスを使えるようになったのですが、問題が発生しました。

それは、数値を拾うことができても、数値を活かすことができなかったのです。
問題の原因は、その当時はわからなかったです。
何を改善すれば、この数字を活かせるのか？

答えは、ウェブマーケティングの勉強をしてからわかりました。
ウェブマーケティングができるようになってからGoogleアナリティクスの数値を活用することができるようになりました。

ウェブマーケティング　×　グーグルアナリティクス

2つは、両輪なのです。
1つが欠けてしまうと、本当の意味での解析ができません。

私は、Googleアナリティクスのマニアックな使い方などを勉強していましたからね。
無駄な努力だったのです。

ウェブマーケティングを学び、Googleアナリティクスを活用することができれば、サイトの改善は簡単です。

Googleアナリティクスを最大限に活用するためには、
ぜひ、ウェブマーケティングを勉強してください。