制作初心者でも出来る「Webデザインについて」

制作初心者でも出来る「Webデザインについて」

ホームページ制作やWebデザインのことについて学びたいけど、「何から取り組んだらいいのか分からない」「勉強する時間がない」と思っている方いませんか?

確かに、ホームページを本格的に作れるようになるためには、学ばなければならないことがたくさんあります。

ただ実際に、Webサイトを作成するために必要な知識は思ったよりも少ないです。

まずは、最低限必要な知識と編集ツールを揃えてWebサイトを作ってみましょう。

この授業では、初心者の方もホームページ制作やWebデザインが出来るようになるための流れと、必要な知識について解説します。

この記事の内容はWAKE UPの授業動画で公開中です

ステップ1.Illustrator/Photoshopに慣れておこう

制作初心者でも出来る「Webデザインについて」①

コーディングなどを学ぶ前にIllustratorPhotoshopに慣れておきましょう。

この2つはWebデザインを進めていく上で必須のツールとなります。

すでにデザイン関係などでこれらを使っている方は問題ありませんが、未経験の方に関しては、はじめのうちは雑誌やWeb広告などで気にいったデザインのものを見つけて、そのデザインと同じものを作ってみるということを繰り返して練習していくと使い方を覚えやすいです。

それに慣れてきてある程度の使い方をマスターしたら、その後は自分の名刺やホームページのデザイン案なども作ってみましょう。

それでは、簡単にIllustratorとPhotoshopはどんなものなのか学んでいきましょう。

Illustratorについて

Illustratorは「ベクトル画像」と呼ばれる縮小や拡大をしても画質が落ちないものを取り扱うツールです。

そのため、アイコンやロゴの制作、Webページのイメージ制作、画像の配置やレイアウトを編集する事に向いています。

印刷物に活用するイメージが強かったツールのため、WebデザインだとPhotoshopを使う印象を持つ方もいらっしゃいますが、IllustratorもWebデザインを続ける上で重要なツールなので練習するようにしましょう。

Photoshopについて

次にPhotoshopですが、こちらは先程の「ベクトル画像」に対して、ビットマップ画像」と呼ばれる、一般的な写真などのようなたくさんの点が集まって作られたものを取り扱うツールです。

そのため、写真の合成・加工、色の調整、複雑なグラフィックを作る事に向いています。

どちらが大事?

この2つはどちらも有料のツールとなります。

本格的にホームページ関係のデザインをしていくのであればどちらも慣れておきたいツールですが、費用や時間の都合でどちらかを優先的に勉強したい場合は、Photoshopをおすすめします。

Webデザインをするうえで汎用性が高く、使用する頻度も高くなってくるであろうPhotoshopは確実に必要なものになります。

ステップ2. HTML/CSSを学ぶ

IllustratorとPhotoshopに慣れてきたら、次はホームページのコーディングに関する知識を学んでいきましょう。

ホームページを制作するために必要な事をしっかりと丁寧に学びたいのであればスクールなどに通うという方法もありますが、それには時間もお金もかかります。

出来る限り予算を抑えて実践しながらWeb制作について学ぶのであれば、動画サイトを見ながら練習していく事をおすすめします。

それでは、ここで簡単に、HTMLCSSという概念についてご説明していきたいと思います。

HTMLについて

HTMLとは、Hyper Text Markup Link(ハイパー テキスト マークアップ リンク)の略で、文章や画像など、そのWebサイト上の各要素の役割を明確にし、ページの構造・構成を具体的に示すものになります。

CSSについて

一方CSSは、Cascading Style Sheets(カスケ―ディング スタイル シート)の略で、その名の通りWebページのスタイルを指定するものです。

HTMLがページの構造や各要素の役割を示すのに対して、CSSはそれらの要素に対してどう装飾するかを示しています。

簡単にいうと、

  • HTMLがページ内の具体的な内容や論理的な構造をつくり、
  • CSSがそれらを装飾する、「見栄え」の部分をつくる

という事になります。

HTML/CSSの勉強法は?

ホームページ制作・Webデザインについて学ぶときに常に大事なのが、「実践をしながら覚える」という考え方です。

HTMLやCSSはマークアップ言語・スタイルシート言語と言われ、プログラミング言語のようにルールを作るというよりも、骨格などをつくるものです。

そのため1冊辞書のようなタグを覚える本を用意し、サイトを編集しながら覚えていくことがおすすめになります。

それでも疑問点は出てくると思いますが、時々の疑問点などはインターネット上で検索すればまず解消出来るでしょう。

また実践的なテクニックや効率化について覚えたいときは、Wakeupのような動画サイトを利用することで、コーディングの流れやテクニックをプロから学ぶことができるでしょう。

ただまず重要なのは、「とにかくたくさんHTMLやCSSに触れてみる事」です。

直接本番環境にあげる必要はないのでまずはローカル上で様々挑戦していきましょう。

そしてその際に最も手がつけやすい方法は、他のサイトを真似してコーディングをしてみる事です。

初心者の方がゼロから構築するのはかなり難易度が高いので、最初は無料で入手できるテンプレートをもとに、各要素を削除したり付け足してみたりしていくと、それぞれの要素が理解できてくるはずです。

その後、複数のテンプレートを組み合わせたり、気に入ったページを見つけたり、それと似たページを自分で作ってみるのも良いでしょう。

その回数を重ねていけば、まず「Webページを作る」という基本的な部分は自分で出来るようになっていきます。

ステップ3. Javascriptを学ぶ

HTMLとCSSについての理解を深めたら、次はJavascriptについて覚えていきましょう。

Javascriptはプログラミング言語のひとつで、

  • HTMLが「ページ内の構造」
  • CSSが「装飾」

についての内容なのに対し

  • Javascriptは「動的な処理」

についての記述になります。

HTMLのみでもサイトを作る事自体は出来ますが、Javascriptを使用する事でページ内に動きのある処理や、より高度な仕組みを持つ要素を組み込む事が可能です。

Javascriptに関しても基本的な勉強法はHTMLの時と同じです。Javascirptは、ビジュアル面での動きなどもあり、画像や本などでは実際どのように見えるのかがわかりづらくなります。

そのため、WakeupのJavascriptカテゴリなどで学習いただくことをおすすめします。

Javascriptは、気づかぬ間にWeb上の様々な面で活用されています。

少し学習していくだけでその範囲の幅に驚きと発見を見つけていけるでしょう。

ステップ4. WordPressを学ぶ

ここまでをしっかりと学んでいけば理想のWebサイトを構築するために必要な知識は最低限揃ったと考えてよいでしょう。

ただ、特にこれからホームページ制作やWebデザインを仕事にしようと思っている方にはWordPressに慣れておくことは非常に重要です。

今では多くのCMSが世の中に登場しており、その便利さから、CMSを導入して構築しているサイトは数多く存在します。

それらのCMSの中でも世界で最も多く利用されているのがWordPressなのです。

近年、ブログやコンテンツSEOなど、サイト内のページの追加が重要視される事も多いので、容易に更新が出来るWordPressについては勉強しておきましょう。

ただ、原則的にCMSは、HTMLなどで構築する内容をさらに便利に、簡単に出来るように、という事を目的としているものなので、ステップ3までをこなした後であれば、難易度はかなり下がってきます。

プラグインなども含めるとかなり自由度が高いCMSなので、「どんな事が出来るのか」「どういった機能があるのか」という事を様々な角度から試していき、慣れていく事が大事になってきます。

まとめ

これらのことを学んでいけば、一般的なホームページの制作であれば可能になってくるでしょう。

もちろん今回解説した内容以外でも、仕事としてWebデザイナーを始めるのであれば、PHPの知識やアクセス増加のためのSEOについての知識など、新たに勉強していく事は多くあります。

ただ、ホームページ制作やWebデザインに関しては「とにかく実践を重ねていく事」を重視していけば気が付いた時には知識がついてきている事がとても多いのです。

難しそうだから、と思わずに、まずは触れてみる所から始めていきましょう。

この記事の内容はWAKE UPの授業動画で公開中です

あなたのキャリアをつくる授業が2000本見放題!

CTA-IMAGE

WAKE UP(ウェイクアップ)は明日から役立つビジネススキルがすぐに学べる、社会人のためのオンライン学習サービス。

  • スキルアップして、仕事ができる人になりたい
  • 同僚に差をつけてキャリアアップしたい
  • ビジネス本よりもコスパ良く効率よくレベルアップしたい

そんなすべてのビジネスパーソンを、応援します。


今なら30日間無料でお試しいただけます

ビジネススキルカテゴリの最新記事