ちきんまさです。
Illustratorにのめり込むと止まらない兼業Webデザイナーです。
業界の専門用語は、どのような職に就くにしても駆け出しが第一に覚える必須知識です。
それはWeb業界においても同様なのですが、Web用語は覚える言葉やその意味が多く複雑で、Webデザイナーを目指している、またはWebデザイナーになって間もない方にとって、かなり苦労するポイントの一つであるかと思います。
今回は、Webデザイナーなら押さえておくべき！デザイン用語１０選をご紹介します。
かなり初心者な用語から解説していきますので、すでに現役Webデザイナーで活躍されている方は、知っている用語は復習をして、まだ知らなかった用語は要チェックしてしっかり学びましょう。
そして、学んだらアウトプットしないと中々覚えられません。学習中であればブログやメモに書く、現役であれば実際に現場で使用し、自分の知識としてしっかり蓄えてください。
目次
- HTML
- CSS
- jQuery(JavaScript)
- コーディング
- デザインカンプ
- HTTP・HTTPS
- アクセシビリティ(Webアクセシビリティ)
- SEO対策
- コンバージョン
- レスポンシブデザイン
- 終わりに…
HTML
HyperText Markup Languageの略。Webページを作るためのマークアップ言語。
現在、インターネット上で表示されるWebページのほとんどはHTMLで開発されている。
Webページに表示したい文章や画像に印をつけ（マークアップ）、コンテンツを作っていきます。各印には様々な意味や記述方法があり、この印のことを「タグ」と呼びます。
HTMLを書くために特別なソフトは必要なく、MacにプリインストールされているTextEditやWindowsにプリインストールされているメモ帳を使って、HTMLを使ったファイル（Webページ）を作成することができます。
CSS
CSS (火スケーティングスタイルシート)の略で、HTMLで表示された文章や画像などの見せ方を変えることができる言語。
例えば、文字を大きくしたり小さくしたり、文字の色を変えたり背景色を変えたり、配置を真ん中や端寄りに変えたり少し動き(アニメーション)をつけたりなど、HTMLが身体であれば、それを着飾ったり体型を変えたりするのがCSSのようなイメージです。
HTMLとセットで覚えることがほとんどなので、これから学び始める方はHTMLと合わせて覚えてください。
jQuery（JavaScript）
jQueryはプログラミング言語であるJavaScriptのライブラリーです。HTML/CSSで作成した静的なページ（文字や画像などに動きがない）に動きやアニメーションを指定できるJavaScriptの複雑なコードを、簡単な記述だけで再現できるようになる便利なものです。
よくHPなどで見られる、loading画面後にHPが表示されるとか、ボタンをクリックすると表示されている画像がスライドして変更できたりと、静的なページとは逆の動的なページにカスタムすることができ、サイトをカッコよくすることができます。
昨今、jQueryはもう古く、Vue.js（ビュー.ジェイエス）やAngular（アンギュラー）などのフレームワークがこれからの主流になると言われていますが、jQueryはいまだに多くのサイトで使用されているほど、まだまだこれからのWeb制作業界の主要スキルに立ち続けるかと思います。
jQueryは初心者にも覚えやすいので、まずはjQueryを覚えて動的なページをそれなりにイメージ、作成できるようになってから、Vue.jsやAngularを学ばれても遅くはありませんし無駄にはなりません。
上記３つの言語を学びたい場合はこちらの記事もお読みください。
【プログラミング初心者向け】独学でも挫折せず楽しく学べるおすすめのプログラミング学習方法５選！
コーディング
プログラミング言語やマークアップ言語を使用し、コンピューターが命令するための指示書である、ソースコード（プログラム）を作ることを言います。
Webデザインにおいてのコーディングは、HTML/CSSなどを使用し、デザインをWeb上で誰もがPCやタブレット、スマホなどのデバイスから見ることができるページに変換することを指します。
デザインカンプ
デザインカンプとは、デザインの完成見本のことです。
Design Comprehensive Layoutの略で、Webデザイナーがクライアントとの打ち合わせや営業商材として、社内ではチームとの完成イメージの共有のために使用します。
デザインカンプを作成する際によく使用されているのが【Photoshop(フォトショップ)】や【Illustrator (イラストレーター)】です。
Webページ作成の知識とスキルがあらかたついてきたら、このデザインカンプを作成できるようになるためにも【Photoshop】や【Illustrator】も学んでおきましょう！
HTTP・HTTPS
HyperText Transfer Protocolの略。
WebブラウザがWebサーバー間と通信する際に、主に使用する通信プロトコル(手順・約束事)で、HTMLファイルや画像等のデータ通信を行うための通信規約のこと。
Webサイトのアドレスの冒頭には http:// とついていますね。
HTTPに対してHTTPSには文字列の最後に「S」が付いています。この最後の「S」は「Secure（セキュア）」の「S」です。
セキュアには「安全な、安心な、危険のない」などの意味があり、簡単に言えば『セキュリティ上守られた安全なサイトですよ』とゆう解釈で大丈夫です。
SSL【Secure Socket Layer】（今はTLSとゆうプロトコルが一般的に使用されていますが、長い期間SSLで呼ばれていたためその名残でSSLといまだに呼ばれています）で暗号化を行い、Webサイトの安全性を高めています。
通信の暗号化とは、決められた鍵を使って通信に暗号をかけることを言い、鍵がないと暗号が解除できないような仕組みになっています。
誰もが想像できるサービスだと、オンラインショッピングがあります。
利用する際、サイトにSSLサーバ証明書が使われていない通信では、通信の内容が不正に取得・改ざんされるリスクがあります。
オンラインショッピングでは名前や住所、クレジットカード番号などの個人情報を入力することが多いですが、SSLを使用していないと悪意ある第三者に情報が漏れてしまう危険性が高まります。
このHTTPとHTTPSはWebデザイナーには必須知識です。覚えておきましょう！
アクセシビリティ(Webアクセシビリティ)
アクセシビリティ（accessibility）とは、Webアクセシビリティとも呼ばれ、簡単に言えばサイトへのアクセスのしやすさ、近づきやすさのことを言います。
Webページにおけるアクセシビリティ(Webアクセシビリティ)は、高齢者・障害者・不自由のある方を含めて、誰にでも支障無くWeb情報にアクセスできること。容易に利用できる度合いを表しています。
実生活上でのバリアフリーのようなものですね。
アクセシビリティを高める方法には、音声によってWebページを読み上げたり、動画に字幕をつけるなどの工夫をして、身体の不自由な方でもWebサイトを利用可能な状態にすることがポイントです。
Webが重要で主要な情報収集網となっている昨今、多くの人がどんな状態でも問題なく情報を取得するためにも、アクセシビリティに配慮したホームページの構築が必要となりますね
SEO対策
SEOとはSearch Engine Optimization (検索エンジン最適化)の略称で、検索エンジンで検索された際、上位に表示されるようにGoogleのアルゴリズムに認められるようなWebページに最適化することです。
HPやLP、ECサイトやPFまで、やはりWeb上に公開しても、それを見てもらわないと意味がありません。
そしてどうせ見てもらうのであれば、多くの方の目に止まる検索最上位になるよう様々な工夫をしないといけません。
Webデザイナーはデザインやページを作成することが主な仕事ではありますが、クライアントからはなるべく上位表示されるようにSEO対策を求められることがあります。
SEO対策も含むWebマーケティングの知識はしっかりつけておいた方がいいでしょう。
ひとつの勉強教材として、Googleが公開している『検索エンジン最適化スターターガイド』とゆうものがあります。
当初Googleが社内向けに作成したものでしたが、検索エンジン最適化(Search Engine Optimization：SEO )に取り組み、ユーザーと検索エンジンの双方に優しいサイトを構築しようとしているウェブマスターにも役立つのではないかと考え、公開されたテキストです。
これから目指す方も、現在活動中だけどあまりSEOに関して知らなかった方も、このガイドを見て是非知識をつけてください。
コンバージョン
コンバージョン（conversion）はWebマーケティング分野では、ホームページやLPなどに訪れたユーザーが会員登録、問い合わせ、商品購入、資料請求などの行動を起こすことを言います。
業種によって定めるコンバージョンが変わります。ECサイトですと商品購入、LPだと会員登録や商品購入、HPだと来店予約や資料請求などですね。
コンバージョンは、新規ユーザー（サイトを一度も訪れていない新規の顧客）やユニークユーザー（サイトにアクセスしたユーザー数）などの数と一緒に検証されるもので、ホームページ改善の一つの指標とすることができます。
コンバージョンやユニークユーザー数、PV数などを計る方法として『Googleアナリティクス』が使用されることが多く、その設定などもサイト作成と同時に依頼されることも多いです。
こちらも併用して覚えていただきたい知識ですね。
レスポンシブデザイン
レスポンシブデザインとは、URLを変えずとも閲覧するデバイスによって表示のさせ方を変えるようにするWebデザインの手法です。
Webサイトを閲覧するのはPCだけじゃないことは皆さんもご存知かと思いますし、初心者の方もよくよく思い出していただきたいのですが、PCで見た同じサイトがスマホだと全然違う表示のされ方をしていますよね。
そのサイトはしっかりレスポンシブデザインを取り入れている、ユーザーにも優しいサイトになります。
逆にPC表示のままでスマホでも表示され、ズームインやズームアウト、スクロールが大変なサイトもありますよね？
そのようなサイトは何度も見に行こうと思わないですし、もしも問い合わせたり商品購入しようとユーザーが考えても、途中で面倒くさくなり止めてしまうことも考えられます。
レスポンシブデザインは、デバイスを選ばずにサイトを快適に見ていただくためにしておかないといけないデザインです。
Googleもこのレスポンシブデザインを推奨しています。
レスポンシブ ウェブ デザインは、サーバーからどのデバイスに対しても常に同じ HTML コードを配信しつつ、CSS を使用して各デバイスでのページのレンダリングを変更する設定方法です。すべての Googlebot ユーザー エージェントがページとそのアセット（CSS、JavaScript、画像）をクロールできる状態であれば、この設定は Google のアルゴリズムによって自動的に検出されます。
Google 検索セントラル
レスポンシブデザインはCSSで記述することができます。
レスポンシブデザインは、今では当たり前に最初から一緒に依頼されることが多いです。そこまで難しくもないですし、学習サイトではCSSを学ぶ際にセットで学習内容に組み込んでいるところがほとんどなので、面倒くさがらずに覚えておきましょう。
終わりに…
今回は初心者向けでWebデザイナーとして覚えておかないといけない知識を１０選でご紹介しました。
今回の１０選を覚えることにより、”とりあえずは”Webデザイナーの”はしくれ”にはなれるかと思います。
上記に”とりあえずは”、”はしくれ”と書いたように、Webデザイナーとして覚えておかないといけない知識はこの１０選だけに限りません。
ですが、今回の１０選を覚えて取り組んでいると、自ずと他の覚えるべき知識にもたどり着き、紐づいて覚えていくことができます。
今回の１０選で知らなかった知識はしっかり覚え、知っていた知識でも再度復習して覚えて、それにより培ったWebデザインのスキルで、求めているクライアントに最高のWebページを作成しましょう！
それでは、よいWebデザインライフを！
コメントを残す