ウェブデザイン初心者から中級者になるために必要なことは?
まず、デザインについて最低限知って欲しい点が何点かあります。
・配色
Web サイトを作る場合、サイト全体のブランドイメージを構成する場合に配色が重要になってきます。
また、色の与える印象を考えておかないと、高級感を出したいサイトなのに安っぽくなってしまったり、明るい印象を出したいのにくらい印象になってしまったり、ということが起きてしまいます。
・フォント
フォントは大きく分けて「明朝体」と「ゴシック体」があります。
明朝体は、文字の線の太さが縦横で異なり、繊細な印象を与えるフォントです。高級感のあるイメージや、繊細で柔らかいイメージを作るのに役に立ちます。
ゴシック体は、文字の線幅が均一になっており、小さい文字サイズでも読みやすいのが特徴です。誰でも読みやすく、子供から大人まで幅広いターゲットにわかりやすい印象を与えられます。
・サイトの目的とデザインの関係性、デザイントレンド
サイトの目的を考えてデザインを検討しないと、例えば安く売りたいサイトなのにとっつきにくい印象になってしまう可能性があります。
そして、時代によってデザイントレンドといった主流となるデザインが異なってきます。今であればスマホの利用が多いため、モバイルファーストでデザインを考えていく必要があります。
・ユーザー目線のデザイン。 UI / UX
UI / UX とは、それぞれユーザーインターフェイス・ユーザーエクスペリエンスの略称です。
ユーザー(訪問者)にとって使いやすいサイト、ユーザー体験を考慮したサイト作りが重要になっています。
例えば、商品を売りたい・資料請求したい場合、問い合わせボタンや購入ボタンが押しやすいか。間違って違うボタンを押してしまわないか。
ユーザー目線に立ってデザインを考え、誰にとっても使いやすいサイトにすること。そういったサイト作りを考えていくことが、ウェブサイト製作者にとって大事なことです。
上記の内容は、それぞれ参考となる書籍や講義の動画などを見て勉強しましょう。
さて、以前の記事でご紹介したように、ウェブデザインでは以下のような学習が必要です。
・ Illustrator / Photoshop でバナー作成
・ HTML / CSS を学習してサイトデザイン作成
・ JavaScript や jQuery を勉強してサイトの動きをつける
・ WordPress などの CMS を構築できるようになる
上記のように、複合的な知識を体系的に覚えていく必要があります。
次から、ウェブデザイン作成の基礎から応用について学んでいきましょう。
ウェブデザインに必要なソフトウェアの使い方、 HTML や CSS の書き方を学ぼう
ソフトウェアの基本的な使い方を学び、自分のスキルとして取り込めるよう、練習していきましょう。
まず Illustrator / Photoshop について、説明します。
Illustrator は、ロゴやイラスト制作に使用するデザインツールです。
Webサイトの中で使用するロゴやイラスト・アイコンなどは、 Illustrator で作られていることが多いです。
次で紹介する Photoshop ほどではありませんが、良く使うことになるため、操作方法はしっかり学んでおきましょう。
Photoshop は、画像の編集や作成を行うためのデザインツールです。
画像素材の編集や加工するときにとても便利ですので、操作方法を覚えておくのは必須です。
次に、 HTML や CSS などのマークアップ言語について学びましょう。
ウェブサイトは、 HTML や CSS といったマークアップ言語をブラウザが私たちの目にわかりやすいように表示しています。
ですので、ウェブデザインは、 HTML や CSS といったマークアップ言語を覚えることも必須になります。
HTML は、ウェブサイトのデータ構造を表します。 CSS は、 HTML で作ったサイトの見た目のデザインを制御する言語です。
この2つは基礎的なマークアップ言語になります。
その後、 JavaScript や jQuery 、 PHP といった言語を覚えていくことで、ウェブデザインの幅が広がるでしょう。
また、サーバの設定や構築といった知識も必要になってきます。
こういった技術も勉強していけば、自分一人でできる作業の範囲が増え、収入アップにつながっていくでしょう。
ユーザーに追加で教えてあげるべき情報や、補足情報を伝える見出しを作成する
# デザインについて必要な知識を覚え、デザイントレースしてみよう
これまで覚えてきた Illustrator や Photoshop などのソフトウェアや、 HTML ・ CSS などの知識を使い、自分の好きなサイトを参考にトレース(模写)してみましょう。
トレース(模写)は、参考サイトを手本に、同じような見た目になるように作り上げていくことです。
この時に注意したいのは、いきなり0から全部作ろうとすると難易度が高く挫折してしまう可能性が高いです。また、 1px 単位でぴったり合わせようとすると、相当難易度が上がります。
ですので、最初は小さいバナーデザインなどの小さいものから始めてコツを掴み、徐々にウェブサイトのコーディングをしていくのが良いでしょう。
そういったデザインを複合的に組み合わせていくことで、最終的に一つのウェブサイトを作り上げることができます。
ウェブデザインのスキルアップでさらに需要アップ
ウェブデザインは、様々な技術を複合的に学んでいく必要があります。
それぞれの技術をただ覚えただけでは、ウェブデザインをしていくことは難しいでしょう。
実際に自分の手でウェブサイトを1から作ってみること。これが一番デザインの勉強になります。
そのあと、サーバーの設定を進めていくことで、やっとウェブサイトが公開できます。
今まで覚えてきた知識を組み合わせて、自分一人でウェブサイトを作れるようになると、業務の幅が広がっていくでしょう。